@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
|
@@ -9,5 +9,37 @@ type PhoneInputProps = {
|
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
color?: InputTypes;
|
|
11
11
|
};
|
|
12
|
-
declare
|
|
13
|
-
|
|
12
|
+
declare const _default: React.ForwardRefExoticComponent<PhoneInputProps & {
|
|
13
|
+
width?: string | number;
|
|
14
|
+
height?: string | number;
|
|
15
|
+
padding?: string | number;
|
|
16
|
+
margin?: string | number;
|
|
17
|
+
w?: string | number;
|
|
18
|
+
h?: string | number;
|
|
19
|
+
paddingLeft?: string | number;
|
|
20
|
+
paddingRight?: string | number;
|
|
21
|
+
paddingTop?: string | number;
|
|
22
|
+
paddingBottom?: string | number;
|
|
23
|
+
pl?: string | number;
|
|
24
|
+
pr?: string | number;
|
|
25
|
+
pt?: string | number;
|
|
26
|
+
pb?: string | number;
|
|
27
|
+
marginLeft?: string | number;
|
|
28
|
+
marginRight?: string | number;
|
|
29
|
+
marginTop?: string | number;
|
|
30
|
+
marginBottom?: string | number;
|
|
31
|
+
ml?: string | number;
|
|
32
|
+
mr?: string | number;
|
|
33
|
+
mt?: string | number;
|
|
34
|
+
mb?: string | number;
|
|
35
|
+
px?: string | number;
|
|
36
|
+
py?: string | number;
|
|
37
|
+
mx?: string | number;
|
|
38
|
+
my?: string | number;
|
|
39
|
+
font?: string | number;
|
|
40
|
+
unit?: string;
|
|
41
|
+
scale?: number;
|
|
42
|
+
children?: any;
|
|
43
|
+
className?: string;
|
|
44
|
+
} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
|
|
45
|
+
export default _default;
|
|
@@ -4,7 +4,7 @@ import React, { useState, useRef, useEffect, useMemo } from 'react';
|
|
|
4
4
|
import countries from './countries.json';
|
|
5
5
|
import { useTheme } from '@helpdice/theme';
|
|
6
6
|
import { getColors } from '../styles';
|
|
7
|
-
import useScale from '../../use-scale';
|
|
7
|
+
import useScale, { withScale } from '../../use-scale';
|
|
8
8
|
import InputBlockLabel from '../input-block-label';
|
|
9
9
|
function PhoneInput(_ref) {
|
|
10
10
|
var onChange = _ref.onChange,
|
|
@@ -78,21 +78,22 @@ function PhoneInput(_ref) {
|
|
|
78
78
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
79
79
|
return /*#__PURE__*/React.createElement("div", {
|
|
80
80
|
ref: dropdownRef,
|
|
81
|
-
className: _JSXStyle.dynamic([["
|
|
81
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : '')
|
|
82
82
|
}, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
|
|
83
|
-
className: _JSXStyle.dynamic([["
|
|
83
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
|
|
84
84
|
}, /*#__PURE__*/React.createElement("div", {
|
|
85
85
|
onClick: function onClick() {
|
|
86
86
|
return setDropdownOpen(!dropdownOpen);
|
|
87
87
|
},
|
|
88
|
-
className: _JSXStyle.dynamic([["
|
|
88
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
|
|
89
89
|
}, /*#__PURE__*/React.createElement("span", {
|
|
90
90
|
style: {
|
|
91
91
|
display: 'flex',
|
|
92
92
|
alignItems: 'center',
|
|
93
|
-
gap: 5
|
|
93
|
+
gap: 5,
|
|
94
|
+
paddingRight: '15px'
|
|
94
95
|
},
|
|
95
|
-
className: _JSXStyle.dynamic([["
|
|
96
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
96
97
|
}, /*#__PURE__*/React.createElement("img", {
|
|
97
98
|
loading: "lazy",
|
|
98
99
|
width: "20",
|
|
@@ -100,9 +101,9 @@ function PhoneInput(_ref) {
|
|
|
100
101
|
src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
|
|
101
102
|
srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
|
|
102
103
|
alt: "".concat(selectedCountry.label, " Flag"),
|
|
103
|
-
className: _JSXStyle.dynamic([["
|
|
104
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
104
105
|
}), /*#__PURE__*/React.createElement("span", {
|
|
105
|
-
className: _JSXStyle.dynamic([["
|
|
106
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
106
107
|
}, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
|
|
107
108
|
type: "tel",
|
|
108
109
|
placeholder: placeholder,
|
|
@@ -114,9 +115,9 @@ function PhoneInput(_ref) {
|
|
|
114
115
|
onBlur: function onBlur() {
|
|
115
116
|
return setIsFocused(false);
|
|
116
117
|
},
|
|
117
|
-
className: _JSXStyle.dynamic([["
|
|
118
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
|
|
118
119
|
})), dropdownOpen && /*#__PURE__*/React.createElement("div", {
|
|
119
|
-
className: _JSXStyle.dynamic([["
|
|
120
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
|
|
120
121
|
}, /*#__PURE__*/React.createElement("input", {
|
|
121
122
|
type: "text",
|
|
122
123
|
placeholder: "Search country...",
|
|
@@ -124,23 +125,23 @@ function PhoneInput(_ref) {
|
|
|
124
125
|
onChange: function onChange(e) {
|
|
125
126
|
return setSearchTerm(e.target.value);
|
|
126
127
|
},
|
|
127
|
-
className: _JSXStyle.dynamic([["
|
|
128
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
|
|
128
129
|
}), /*#__PURE__*/React.createElement("div", {
|
|
129
|
-
className: _JSXStyle.dynamic([["
|
|
130
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
|
|
130
131
|
}, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
|
|
131
132
|
return /*#__PURE__*/React.createElement("div", {
|
|
132
133
|
key: c.code,
|
|
133
134
|
onClick: function onClick() {
|
|
134
135
|
return handleSelectCountry(c);
|
|
135
136
|
},
|
|
136
|
-
className: _JSXStyle.dynamic([["
|
|
137
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
|
|
137
138
|
}, /*#__PURE__*/React.createElement("span", {
|
|
138
139
|
style: {
|
|
139
140
|
display: 'flex',
|
|
140
141
|
alignItems: 'center',
|
|
141
142
|
gap: 5
|
|
142
143
|
},
|
|
143
|
-
className: _JSXStyle.dynamic([["
|
|
144
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
144
145
|
}, /*#__PURE__*/React.createElement("img", {
|
|
145
146
|
loading: "lazy",
|
|
146
147
|
width: "23",
|
|
@@ -148,19 +149,19 @@ function PhoneInput(_ref) {
|
|
|
148
149
|
src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
|
|
149
150
|
srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
|
|
150
151
|
alt: "".concat(c.label, " Flag"),
|
|
151
|
-
className: _JSXStyle.dynamic([["
|
|
152
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
152
153
|
}), c.phone, " ", /*#__PURE__*/React.createElement("span", {
|
|
153
154
|
style: {
|
|
154
155
|
color: 'grey'
|
|
155
156
|
},
|
|
156
|
-
className: _JSXStyle.dynamic([["
|
|
157
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
157
158
|
}, c.label)));
|
|
158
159
|
}) : /*#__PURE__*/React.createElement("div", {
|
|
159
|
-
className: _JSXStyle.dynamic([["
|
|
160
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
|
|
160
161
|
}, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
161
|
-
id: "
|
|
162
|
-
dynamic: [SCALES.width(1, defaultWidth), SCALES.
|
|
163
|
-
}, ".
|
|
162
|
+
id: "2480261071",
|
|
163
|
+
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.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
|
|
164
|
+
}, ".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.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.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
|
|
164
165
|
}
|
|
165
166
|
;
|
|
166
|
-
export default PhoneInput;
|
|
167
|
+
export default withScale(PhoneInput);
|