@helpdice/ui 2.2.3 → 2.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/auto-complete/index.js +55 -45
- package/dist/container/box.d.ts +1 -0
- package/dist/container/index.js +686 -8
- package/dist/index.js +77 -47
- package/dist/input/currency-input/components/CurrencyInput.d.ts +35 -2
- package/dist/input/currency-input/components/CurrencyInputProps.d.ts +1 -0
- package/dist/input/index.js +55 -45
- package/dist/input/input-props.d.ts +1 -0
- package/dist/input/phone-input/phone.d.ts +34 -2
- package/dist/table/index.js +55 -45
- package/esm/container/box.d.ts +1 -0
- package/esm/container/box.js +25 -3
- package/esm/input/currency-input/components/CurrencyInput.d.ts +35 -2
- package/esm/input/currency-input/components/CurrencyInput.js +18 -12
- package/esm/input/currency-input/components/CurrencyInputProps.d.ts +1 -0
- package/esm/input/input-field.js +14 -13
- package/esm/input/input-props.d.ts +1 -0
- package/esm/input/phone-input/phone.d.ts +34 -2
- package/esm/input/phone-input/phone.js +22 -21
- package/package.json +1 -1
package/dist/table/index.js
CHANGED
|
@@ -1070,7 +1070,7 @@ var withScale = function withScale(Render) {
|
|
|
1070
1070
|
return ScaleFC;
|
|
1071
1071
|
};
|
|
1072
1072
|
|
|
1073
|
-
var _excluded$j = ["label", "labelRight", "color", "
|
|
1073
|
+
var _excluded$j = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
|
|
1074
1074
|
var simulateChangeEvent = function simulateChangeEvent(el, event) {
|
|
1075
1075
|
return _objectSpread2(_objectSpread2({}, event), {}, {
|
|
1076
1076
|
target: el,
|
|
@@ -1080,9 +1080,10 @@ var simulateChangeEvent = function simulateChangeEvent(el, event) {
|
|
|
1080
1080
|
var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1081
1081
|
var label = _ref.label,
|
|
1082
1082
|
labelRight = _ref.labelRight,
|
|
1083
|
-
_ref$color = _ref.color,
|
|
1084
|
-
_color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
1085
1083
|
error = _ref.error,
|
|
1084
|
+
_ref$color = _ref.color,
|
|
1085
|
+
_color = _ref$color === void 0 ? error ? 'error' : 'default' : _ref$color,
|
|
1086
|
+
helperText = _ref.helperText,
|
|
1086
1087
|
_ref$type = _ref.type,
|
|
1087
1088
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
1088
1089
|
icon = _ref.icon,
|
|
@@ -1192,11 +1193,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
1192
1193
|
var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
|
|
1193
1194
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
1194
1195
|
return /*#__PURE__*/React.createElement("div", {
|
|
1195
|
-
className: _JSXStyle.dynamic([["
|
|
1196
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + "with-label"
|
|
1196
1197
|
}, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
|
|
1197
|
-
className: _JSXStyle.dynamic([["
|
|
1198
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-container', className) || "")
|
|
1198
1199
|
}, label && /*#__PURE__*/React.createElement(MemoInputLabel, null, label), /*#__PURE__*/React.createElement("div", {
|
|
1199
|
-
className: _JSXStyle.dynamic([["
|
|
1200
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-wrapper', {
|
|
1200
1201
|
hover: hover,
|
|
1201
1202
|
disabled: disabled
|
|
1202
1203
|
}, labelClasses) || "")
|
|
@@ -1213,7 +1214,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
1213
1214
|
onChange: changeHandler,
|
|
1214
1215
|
autoComplete: autoComplete
|
|
1215
1216
|
}, inputProps, {
|
|
1216
|
-
className: _JSXStyle.dynamic([["
|
|
1217
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
|
|
1217
1218
|
disabled: disabled
|
|
1218
1219
|
}, iconClasses) || "")
|
|
1219
1220
|
})), clearable && /*#__PURE__*/React.createElement(MemoInputIconClear, {
|
|
@@ -1225,8 +1226,8 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
1225
1226
|
}, iconProps))), labelRight && /*#__PURE__*/React.createElement(MemoInputLabel, {
|
|
1226
1227
|
isRight: true
|
|
1227
1228
|
}, labelRight), /*#__PURE__*/React.createElement("br", {
|
|
1228
|
-
className: _JSXStyle.dynamic([["
|
|
1229
|
-
})),
|
|
1229
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]])
|
|
1230
|
+
})), helperText && /*#__PURE__*/React.createElement("p", {
|
|
1230
1231
|
style: {
|
|
1231
1232
|
marginTop: 0.4,
|
|
1232
1233
|
marginRight: 0,
|
|
@@ -1234,11 +1235,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
1234
1235
|
marginBottom: '0.4rem',
|
|
1235
1236
|
textAlign: 'left'
|
|
1236
1237
|
},
|
|
1237
|
-
className: _JSXStyle.dynamic([["
|
|
1238
|
-
},
|
|
1239
|
-
id: "
|
|
1238
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + ((error ? "input-error" : '') || "")
|
|
1239
|
+
}, "\xA0", helperText), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
1240
|
+
id: "2582554466",
|
|
1240
1241
|
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]
|
|
1241
|
-
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-error.__jsx-style-dynamic-selector{color:#
|
|
1242
|
+
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-error.__jsx-style-dynamic-selector{color:#e00;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme$1.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme$1.palette.accents_1, ";border-color:").concat(theme$1.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme$1.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
|
|
1242
1243
|
});
|
|
1243
1244
|
InputComponent.displayName = 'Input';
|
|
1244
1245
|
var Input = withScale(InputComponent);
|
|
@@ -2745,21 +2746,22 @@ function PhoneInput(_ref) {
|
|
|
2745
2746
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
2746
2747
|
return /*#__PURE__*/React.createElement("div", {
|
|
2747
2748
|
ref: dropdownRef,
|
|
2748
|
-
className: _JSXStyle.dynamic([["
|
|
2749
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : '')
|
|
2749
2750
|
}, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
|
|
2750
|
-
className: _JSXStyle.dynamic([["
|
|
2751
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
|
|
2751
2752
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2752
2753
|
onClick: function onClick() {
|
|
2753
2754
|
return setDropdownOpen(!dropdownOpen);
|
|
2754
2755
|
},
|
|
2755
|
-
className: _JSXStyle.dynamic([["
|
|
2756
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
|
|
2756
2757
|
}, /*#__PURE__*/React.createElement("span", {
|
|
2757
2758
|
style: {
|
|
2758
2759
|
display: 'flex',
|
|
2759
2760
|
alignItems: 'center',
|
|
2760
|
-
gap: 5
|
|
2761
|
+
gap: 5,
|
|
2762
|
+
paddingRight: '15px'
|
|
2761
2763
|
},
|
|
2762
|
-
className: _JSXStyle.dynamic([["
|
|
2764
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
2763
2765
|
}, /*#__PURE__*/React.createElement("img", {
|
|
2764
2766
|
loading: "lazy",
|
|
2765
2767
|
width: "20",
|
|
@@ -2767,9 +2769,9 @@ function PhoneInput(_ref) {
|
|
|
2767
2769
|
src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
|
|
2768
2770
|
srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
|
|
2769
2771
|
alt: "".concat(selectedCountry.label, " Flag"),
|
|
2770
|
-
className: _JSXStyle.dynamic([["
|
|
2772
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
2771
2773
|
}), /*#__PURE__*/React.createElement("span", {
|
|
2772
|
-
className: _JSXStyle.dynamic([["
|
|
2774
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
2773
2775
|
}, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
|
|
2774
2776
|
type: "tel",
|
|
2775
2777
|
placeholder: placeholder,
|
|
@@ -2781,9 +2783,9 @@ function PhoneInput(_ref) {
|
|
|
2781
2783
|
onBlur: function onBlur() {
|
|
2782
2784
|
return setIsFocused(false);
|
|
2783
2785
|
},
|
|
2784
|
-
className: _JSXStyle.dynamic([["
|
|
2786
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
|
|
2785
2787
|
})), dropdownOpen && /*#__PURE__*/React.createElement("div", {
|
|
2786
|
-
className: _JSXStyle.dynamic([["
|
|
2788
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
|
|
2787
2789
|
}, /*#__PURE__*/React.createElement("input", {
|
|
2788
2790
|
type: "text",
|
|
2789
2791
|
placeholder: "Search country...",
|
|
@@ -2791,23 +2793,23 @@ function PhoneInput(_ref) {
|
|
|
2791
2793
|
onChange: function onChange(e) {
|
|
2792
2794
|
return setSearchTerm(e.target.value);
|
|
2793
2795
|
},
|
|
2794
|
-
className: _JSXStyle.dynamic([["
|
|
2796
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
|
|
2795
2797
|
}), /*#__PURE__*/React.createElement("div", {
|
|
2796
|
-
className: _JSXStyle.dynamic([["
|
|
2798
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
|
|
2797
2799
|
}, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
|
|
2798
2800
|
return /*#__PURE__*/React.createElement("div", {
|
|
2799
2801
|
key: c.code,
|
|
2800
2802
|
onClick: function onClick() {
|
|
2801
2803
|
return handleSelectCountry(c);
|
|
2802
2804
|
},
|
|
2803
|
-
className: _JSXStyle.dynamic([["
|
|
2805
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
|
|
2804
2806
|
}, /*#__PURE__*/React.createElement("span", {
|
|
2805
2807
|
style: {
|
|
2806
2808
|
display: 'flex',
|
|
2807
2809
|
alignItems: 'center',
|
|
2808
2810
|
gap: 5
|
|
2809
2811
|
},
|
|
2810
|
-
className: _JSXStyle.dynamic([["
|
|
2812
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
2811
2813
|
}, /*#__PURE__*/React.createElement("img", {
|
|
2812
2814
|
loading: "lazy",
|
|
2813
2815
|
width: "23",
|
|
@@ -2815,20 +2817,21 @@ function PhoneInput(_ref) {
|
|
|
2815
2817
|
src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
|
|
2816
2818
|
srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
|
|
2817
2819
|
alt: "".concat(c.label, " Flag"),
|
|
2818
|
-
className: _JSXStyle.dynamic([["
|
|
2820
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
2819
2821
|
}), c.phone, " ", /*#__PURE__*/React.createElement("span", {
|
|
2820
2822
|
style: {
|
|
2821
2823
|
color: 'grey'
|
|
2822
2824
|
},
|
|
2823
|
-
className: _JSXStyle.dynamic([["
|
|
2825
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
2824
2826
|
}, c.label)));
|
|
2825
2827
|
}) : /*#__PURE__*/React.createElement("div", {
|
|
2826
|
-
className: _JSXStyle.dynamic([["
|
|
2828
|
+
className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
|
|
2827
2829
|
}, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
2828
|
-
id: "
|
|
2829
|
-
dynamic: [SCALES.width(1, defaultWidth), SCALES.
|
|
2830
|
-
}, ".
|
|
2830
|
+
id: "2480261071",
|
|
2831
|
+
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']
|
|
2832
|
+
}, ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme$1.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme$1.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
|
|
2831
2833
|
}
|
|
2834
|
+
var PhoneInput$1 = withScale(PhoneInput);
|
|
2832
2835
|
|
|
2833
2836
|
/**
|
|
2834
2837
|
* Escape regex char
|
|
@@ -3216,7 +3219,7 @@ var repositionCursor = function repositionCursor(_ref) {
|
|
|
3216
3219
|
};
|
|
3217
3220
|
};
|
|
3218
3221
|
|
|
3219
|
-
var _excluded$g = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
|
|
3222
|
+
var _excluded$g = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
|
|
3220
3223
|
var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3221
3224
|
var _ref$allowDecimals = _ref.allowDecimals,
|
|
3222
3225
|
allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
|
|
@@ -3239,6 +3242,7 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3239
3242
|
prefix = _ref.prefix,
|
|
3240
3243
|
suffix = _ref.suffix,
|
|
3241
3244
|
intlConfig = _ref.intlConfig,
|
|
3245
|
+
fullWidth = _ref.fullWidth,
|
|
3242
3246
|
step = _ref.step,
|
|
3243
3247
|
min = _ref.min,
|
|
3244
3248
|
max = _ref.max,
|
|
@@ -3258,7 +3262,10 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3258
3262
|
formatValueOnBlur = _ref$formatValueOnBlu === void 0 ? true : _ref$formatValueOnBlu,
|
|
3259
3263
|
children = _ref.children,
|
|
3260
3264
|
props = _objectWithoutProperties(_ref, _excluded$g);
|
|
3265
|
+
var _useScale = useScale(),
|
|
3266
|
+
SCALES = _useScale.SCALES;
|
|
3261
3267
|
var theme$1 = theme.useTheme();
|
|
3268
|
+
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
3262
3269
|
if (_decimalSeparator && isNumber(_decimalSeparator)) {
|
|
3263
3270
|
throw new Error('decimalSeparator cannot be a number');
|
|
3264
3271
|
}
|
|
@@ -3526,14 +3533,9 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3526
3533
|
var CustomInput = customInput;
|
|
3527
3534
|
return /*#__PURE__*/React.createElement(CustomInput, inputProps);
|
|
3528
3535
|
}
|
|
3529
|
-
return /*#__PURE__*/React.createElement("div",
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
marginBottom: '0.7rem',
|
|
3533
|
-
fontSize: '14px',
|
|
3534
|
-
fontWeight: 'light'
|
|
3535
|
-
}
|
|
3536
|
-
}, children), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
|
|
3536
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
3537
|
+
className: _JSXStyle.dynamic([["1592876518", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + "with-label"
|
|
3538
|
+
}, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
|
|
3537
3539
|
style: {
|
|
3538
3540
|
textAlign: 'right',
|
|
3539
3541
|
border: "1px solid ".concat(theme$1.palette.border),
|
|
@@ -3545,15 +3547,23 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3545
3547
|
width: 'auto',
|
|
3546
3548
|
background: 'transparent',
|
|
3547
3549
|
minWidth: '200px'
|
|
3548
|
-
}
|
|
3549
|
-
|
|
3550
|
+
},
|
|
3551
|
+
className: _JSXStyle.dynamic([["1592876518", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
|
|
3552
|
+
})), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
3553
|
+
id: "1592876518",
|
|
3554
|
+
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
|
|
3555
|
+
}, ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
|
|
3550
3556
|
});
|
|
3551
3557
|
|
|
3558
|
+
// CurrencyInput.displayName = 'CurrencyInput';
|
|
3559
|
+
|
|
3560
|
+
var CurrencyInput = withScale(InputCurrency);
|
|
3561
|
+
|
|
3552
3562
|
/* "use client" */
|
|
3553
3563
|
Input.Textarea = Textarea;
|
|
3554
3564
|
Input.Password = InputPassword;
|
|
3555
|
-
Input.Phone = PhoneInput;
|
|
3556
|
-
Input.Currency =
|
|
3565
|
+
Input.Phone = PhoneInput$1;
|
|
3566
|
+
Input.Currency = CurrencyInput;
|
|
3557
3567
|
|
|
3558
3568
|
var lodash$1 = {exports: {}};
|
|
3559
3569
|
|
package/esm/container/box.d.ts
CHANGED
package/esm/container/box.js
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "className"];
|
|
4
|
+
var _excluded = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "collapse", "className"];
|
|
4
5
|
import _JSXStyle from "../styled-jsx.es.js";
|
|
5
|
-
import React, { useMemo } from "react";
|
|
6
|
+
import React, { useMemo, useState } from "react";
|
|
6
7
|
import GridBasicItem from "../grid/basic-item";
|
|
7
8
|
import useScale, { withScale } from '../use-scale';
|
|
8
9
|
import { useClasses } from '@helpdice/theme';
|
|
9
10
|
import { tuple } from '../utils/prop-types';
|
|
11
|
+
import Button from "../button";
|
|
10
12
|
var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
|
|
11
13
|
var Container = function Container(_ref) {
|
|
12
14
|
var _ref$gap = _ref.gap,
|
|
@@ -16,9 +18,15 @@ var Container = function Container(_ref) {
|
|
|
16
18
|
justify = _ref.justify,
|
|
17
19
|
alignItems = _ref.alignItems,
|
|
18
20
|
alignContent = _ref.alignContent,
|
|
21
|
+
_ref$collapse = _ref.collapse,
|
|
22
|
+
collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
|
|
19
23
|
_ref$className = _ref.className,
|
|
20
24
|
className = _ref$className === void 0 ? '' : _ref$className,
|
|
21
25
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
+
var _useState = useState(false),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
expand = _useState2[0],
|
|
29
|
+
setExpand = _useState2[1];
|
|
22
30
|
var _useScale = useScale(),
|
|
23
31
|
unit = _useScale.unit,
|
|
24
32
|
SCALES = _useScale.SCALES;
|
|
@@ -37,7 +45,21 @@ var Container = function Container(_ref) {
|
|
|
37
45
|
var classes = useClasses(resolveClassName, className);
|
|
38
46
|
return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
|
|
39
47
|
className: classes
|
|
40
|
-
}, props), children,
|
|
48
|
+
}, props), collapse > 50 ? /*#__PURE__*/React.createElement(React.Fragment, null, expand ? children : (children === null || children === void 0 ? void 0 : children.toString().substring(0, collapse)) + '...', /*#__PURE__*/React.createElement(Button, {
|
|
49
|
+
margin: 0,
|
|
50
|
+
onClick: function onClick() {
|
|
51
|
+
return setExpand(!expand);
|
|
52
|
+
},
|
|
53
|
+
style: {
|
|
54
|
+
textTransform: 'lowercase'
|
|
55
|
+
},
|
|
56
|
+
effect: false,
|
|
57
|
+
color: "abort",
|
|
58
|
+
scale: 2 / 3,
|
|
59
|
+
px: 0.2,
|
|
60
|
+
py: 0,
|
|
61
|
+
auto: true
|
|
62
|
+
}, /*#__PURE__*/React.createElement("b", null, expand ? 'less' : 'more'))) : children, styles);
|
|
41
63
|
};
|
|
42
64
|
Container.displayName = 'Container';
|
|
43
65
|
export default withScale(Container);
|
|
@@ -1,4 +1,37 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
2
|
import { CurrencyInputProps } from './CurrencyInputProps';
|
|
3
3
|
export declare const InputCurrency: FC<Omit<CurrencyInputProps, 'ref'>>;
|
|
4
|
-
|
|
4
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<CurrencyInputProps, "ref"> & {
|
|
5
|
+
width?: string | number;
|
|
6
|
+
height?: string | number;
|
|
7
|
+
padding?: string | number;
|
|
8
|
+
margin?: string | number;
|
|
9
|
+
w?: string | number;
|
|
10
|
+
h?: string | number;
|
|
11
|
+
paddingLeft?: string | number;
|
|
12
|
+
paddingRight?: string | number;
|
|
13
|
+
paddingTop?: string | number;
|
|
14
|
+
paddingBottom?: string | number;
|
|
15
|
+
pl?: string | number;
|
|
16
|
+
pr?: string | number;
|
|
17
|
+
pt?: string | number;
|
|
18
|
+
pb?: string | number;
|
|
19
|
+
marginLeft?: string | number;
|
|
20
|
+
marginRight?: string | number;
|
|
21
|
+
marginTop?: string | number;
|
|
22
|
+
marginBottom?: string | number;
|
|
23
|
+
ml?: string | number;
|
|
24
|
+
mr?: string | number;
|
|
25
|
+
mt?: string | number;
|
|
26
|
+
mb?: string | number;
|
|
27
|
+
px?: string | number;
|
|
28
|
+
py?: string | number;
|
|
29
|
+
mx?: string | number;
|
|
30
|
+
my?: string | number;
|
|
31
|
+
font?: string | number;
|
|
32
|
+
unit?: string;
|
|
33
|
+
scale?: number;
|
|
34
|
+
children?: any;
|
|
35
|
+
className?: string;
|
|
36
|
+
} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
|
|
37
|
+
export default _default;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
|
|
4
|
+
var _excluded = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
|
|
5
|
+
import _JSXStyle from "../styled-jsx.es.js";
|
|
5
6
|
import React, { useState, useEffect, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
|
|
6
7
|
import { isNumber, cleanValue, fixedDecimalValue, formatValue, getLocaleConfig, padTrimValue, getSuffix, repositionCursor } from './utils';
|
|
7
8
|
import { useTheme } from '@helpdice/theme';
|
|
9
|
+
import InputBlockLabel from '../../input-block-label';
|
|
10
|
+
import useScale, { withScale } from '../../../use-scale';
|
|
8
11
|
export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
9
12
|
var _ref$allowDecimals = _ref.allowDecimals,
|
|
10
13
|
allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
|
|
@@ -27,6 +30,7 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
27
30
|
prefix = _ref.prefix,
|
|
28
31
|
suffix = _ref.suffix,
|
|
29
32
|
intlConfig = _ref.intlConfig,
|
|
33
|
+
fullWidth = _ref.fullWidth,
|
|
30
34
|
step = _ref.step,
|
|
31
35
|
min = _ref.min,
|
|
32
36
|
max = _ref.max,
|
|
@@ -46,7 +50,10 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
46
50
|
formatValueOnBlur = _ref$formatValueOnBlu === void 0 ? true : _ref$formatValueOnBlu,
|
|
47
51
|
children = _ref.children,
|
|
48
52
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
53
|
+
var _useScale = useScale(),
|
|
54
|
+
SCALES = _useScale.SCALES;
|
|
49
55
|
var theme = useTheme();
|
|
56
|
+
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
50
57
|
if (_decimalSeparator && isNumber(_decimalSeparator)) {
|
|
51
58
|
throw new Error('decimalSeparator cannot be a number');
|
|
52
59
|
}
|
|
@@ -314,14 +321,9 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
314
321
|
var CustomInput = customInput;
|
|
315
322
|
return /*#__PURE__*/React.createElement(CustomInput, inputProps);
|
|
316
323
|
}
|
|
317
|
-
return /*#__PURE__*/React.createElement("div",
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
marginBottom: '0.7rem',
|
|
321
|
-
fontSize: '14px',
|
|
322
|
-
fontWeight: 'light'
|
|
323
|
-
}
|
|
324
|
-
}, children), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
|
|
324
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
325
|
+
className: _JSXStyle.dynamic([["1592876518", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + "with-label"
|
|
326
|
+
}, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
|
|
325
327
|
style: {
|
|
326
328
|
textAlign: 'right',
|
|
327
329
|
border: "1px solid ".concat(theme.palette.border),
|
|
@@ -333,10 +335,14 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
333
335
|
width: 'auto',
|
|
334
336
|
background: 'transparent',
|
|
335
337
|
minWidth: '200px'
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
+
},
|
|
339
|
+
className: _JSXStyle.dynamic([["1592876518", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
|
|
340
|
+
})), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
341
|
+
id: "1592876518",
|
|
342
|
+
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
|
|
343
|
+
}, ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
|
|
338
344
|
});
|
|
339
345
|
|
|
340
346
|
// CurrencyInput.displayName = 'CurrencyInput';
|
|
341
347
|
|
|
342
|
-
export default InputCurrency;
|
|
348
|
+
export default withScale(InputCurrency);
|
package/esm/input/input-field.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
-
var _excluded = ["label", "labelRight", "color", "
|
|
4
|
+
var _excluded = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
|
|
5
5
|
import _JSXStyle from "../styled-jsx.es.js";
|
|
6
6
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
7
7
|
/* eslint-disable react/jsx-no-undef */
|
|
@@ -24,9 +24,10 @@ var simulateChangeEvent = function simulateChangeEvent(el, event) {
|
|
|
24
24
|
var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
25
25
|
var label = _ref.label,
|
|
26
26
|
labelRight = _ref.labelRight,
|
|
27
|
-
_ref$color = _ref.color,
|
|
28
|
-
_color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
29
27
|
error = _ref.error,
|
|
28
|
+
_ref$color = _ref.color,
|
|
29
|
+
_color = _ref$color === void 0 ? error ? 'error' : 'default' : _ref$color,
|
|
30
|
+
helperText = _ref.helperText,
|
|
30
31
|
_ref$type = _ref.type,
|
|
31
32
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
32
33
|
icon = _ref.icon,
|
|
@@ -136,11 +137,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
136
137
|
var inputProps = _extends({}, props, controlledValue);
|
|
137
138
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
138
139
|
return /*#__PURE__*/React.createElement("div", {
|
|
139
|
-
className: _JSXStyle.dynamic([["
|
|
140
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
|
|
140
141
|
}, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
|
|
141
|
-
className: _JSXStyle.dynamic([["
|
|
142
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
|
|
142
143
|
}, label && /*#__PURE__*/React.createElement(InputLabel, null, label), /*#__PURE__*/React.createElement("div", {
|
|
143
|
-
className: _JSXStyle.dynamic([["
|
|
144
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
|
|
144
145
|
hover: hover,
|
|
145
146
|
disabled: disabled
|
|
146
147
|
}, labelClasses) || "")
|
|
@@ -157,7 +158,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
157
158
|
onChange: changeHandler,
|
|
158
159
|
autoComplete: autoComplete
|
|
159
160
|
}, inputProps, {
|
|
160
|
-
className: _JSXStyle.dynamic([["
|
|
161
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
|
|
161
162
|
disabled: disabled
|
|
162
163
|
}, iconClasses) || "")
|
|
163
164
|
})), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
|
|
@@ -169,8 +170,8 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
169
170
|
}, iconProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
|
|
170
171
|
isRight: true
|
|
171
172
|
}, labelRight), /*#__PURE__*/React.createElement("br", {
|
|
172
|
-
className: _JSXStyle.dynamic([["
|
|
173
|
-
})),
|
|
173
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]])
|
|
174
|
+
})), helperText && /*#__PURE__*/React.createElement("p", {
|
|
174
175
|
style: {
|
|
175
176
|
marginTop: 0.4,
|
|
176
177
|
marginRight: 0,
|
|
@@ -178,11 +179,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
178
179
|
marginBottom: '0.4rem',
|
|
179
180
|
textAlign: 'left'
|
|
180
181
|
},
|
|
181
|
-
className: _JSXStyle.dynamic([["
|
|
182
|
-
},
|
|
183
|
-
id: "
|
|
182
|
+
className: _JSXStyle.dynamic([["2582554466", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + ((error ? "input-error" : '') || "")
|
|
183
|
+
}, "\xA0", helperText), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
184
|
+
id: "2582554466",
|
|
184
185
|
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
|
|
185
|
-
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-error.__jsx-style-dynamic-selector{color:#
|
|
186
|
+
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-error.__jsx-style-dynamic-selector{color:#e00;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
|
|
186
187
|
});
|
|
187
188
|
InputComponent.displayName = 'Input';
|
|
188
189
|
var Input = withScale(InputComponent);
|