@trackunit/react-form-components 0.0.8 → 0.0.13
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/index.cjs +13 -5
- package/index.js +14 -6
- package/package.json +4 -4
package/index.cjs
CHANGED
|
@@ -173,8 +173,9 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
173
173
|
* This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
|
|
174
174
|
*/
|
|
175
175
|
const BaseInput = React__namespace.forwardRef((_a, ref) => {
|
|
176
|
-
var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive"]);
|
|
177
|
-
|
|
176
|
+
var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, type } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "type"]);
|
|
177
|
+
const isReadOnlyWithPlaceholder = React.useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
|
|
178
|
+
return (jsxRuntime.jsxs(InputContainer$1, Object.assign({ "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": dataTestId && `${dataTestId}-container` }, { children: [addonBefore && addonBefore !== undefined ? (jsxRuntime.jsx(AddonBefore, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonBefore` }, { children: addonBefore }))) : null, prefix && addonBefore !== prefix ? (jsxRuntime.jsx(InputPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))) : null, jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: tailwindStyledComponents.tws `tu-input__field`, type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsxRuntime.jsx(InputSuffix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix }))) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx(AddonAfter, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonAfter` }, { children: addonAfter }))) : null] })));
|
|
178
179
|
});
|
|
179
180
|
const InputPrefix = tailwindStyledComponents.tw.div `
|
|
180
181
|
tu-input__prefix
|
|
@@ -738,6 +739,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
|
|
|
738
739
|
return (jsxRuntime.jsx(ReactSelect.components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
|
|
739
740
|
? tailwindStyledComponents.tws `tu-select__menu-list animate-fade-in-fast`
|
|
740
741
|
: tailwindStyledComponents.tws `tu-select__menu-list animate-fade-out-fast` })));
|
|
742
|
+
}, MenuList: props => {
|
|
743
|
+
return (jsxRuntime.jsx(ReactSelect.components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
|
|
744
|
+
const listEl = e.currentTarget;
|
|
745
|
+
if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight) {
|
|
746
|
+
props.selectProps.onMenuScrollToBottom && props.selectProps.onMenuScrollToBottom(new TouchEvent(""));
|
|
747
|
+
}
|
|
748
|
+
} }) }, { children: props.children })));
|
|
741
749
|
}, Option: props => {
|
|
742
750
|
const componentProps = {
|
|
743
751
|
label: props.label,
|
|
@@ -921,7 +929,7 @@ const Select = (props) => {
|
|
|
921
929
|
onMenuScrollToBottom,
|
|
922
930
|
onInputChange,
|
|
923
931
|
};
|
|
924
|
-
return (jsxRuntime.jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options,
|
|
932
|
+
return (jsxRuntime.jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsxRuntime.jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsxRuntime.jsx(ReactAsyncSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsxRuntime.jsx(ReactSelect__default["default"], Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
|
|
925
933
|
};
|
|
926
934
|
const SelectContainer = tailwindStyledComponents.tw.div `
|
|
927
935
|
tu-select
|
|
@@ -1059,8 +1067,8 @@ const usePhoneInput = (initialValue) => {
|
|
|
1059
1067
|
* @returns {JSX.Element} - The PhoneInput component.
|
|
1060
1068
|
*/
|
|
1061
1069
|
const PhoneInput = React.forwardRef((_a, ref) => {
|
|
1062
|
-
var { dataTestId, isInvalid, disabled = false, value, fieldSize = "medium", disableAction = false, onChange } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "fieldSize", "disableAction", "onChange"]);
|
|
1063
|
-
const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, } = usePhoneInput(value);
|
|
1070
|
+
var { dataTestId, isInvalid, disabled = false, value, fieldSize = "medium", disableAction = false, onChange, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "fieldSize", "disableAction", "onChange", "defaultValue"]);
|
|
1071
|
+
const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, } = usePhoneInput(value !== null && value !== void 0 ? value : defaultValue);
|
|
1064
1072
|
return (jsxRuntime.jsxs(Container, Object.assign({ "data-testid": `${dataTestId}-container` }, { children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId && `${dataTestId}`, value: value, ref: ref, onChange: onChange }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] })));
|
|
1065
1073
|
});
|
|
1066
1074
|
const Container = tailwindStyledComponents.tw.div `
|
package/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { registerTranslations } from '@trackunit/i18n-library-translation';
|
|
|
3
3
|
import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
|
|
4
4
|
import { tw, twx, tws } from '@trackunit/tailwind-styled-components';
|
|
5
5
|
import * as React from 'react';
|
|
6
|
-
import React__default, { forwardRef, useState, cloneElement, useEffect } from 'react';
|
|
6
|
+
import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect } from 'react';
|
|
7
7
|
import { v4 } from 'uuid';
|
|
8
8
|
import { format } from 'date-fns';
|
|
9
9
|
import ReactSelect, { components } from 'react-select';
|
|
@@ -143,8 +143,9 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
143
143
|
* This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
|
|
144
144
|
*/
|
|
145
145
|
const BaseInput = React.forwardRef((_a, ref) => {
|
|
146
|
-
var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive"]);
|
|
147
|
-
|
|
146
|
+
var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, type } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "type"]);
|
|
147
|
+
const isReadOnlyWithPlaceholder = useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
|
|
148
|
+
return (jsxs(InputContainer$1, Object.assign({ "$fieldSize": fieldSize, "$invalid": isInvalid, "$disabled": rest.disabled || rest.readOnly, className: className, "data-testid": dataTestId && `${dataTestId}-container` }, { children: [addonBefore && addonBefore !== undefined ? (jsx(AddonBefore, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonBefore` }, { children: addonBefore }))) : null, prefix && addonBefore !== prefix ? (jsx(InputPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))) : null, jsx("input", Object.assign({ ref: ref, "data-testid": dataTestId, className: tws `tu-input__field`, type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx(InputSuffix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix }))) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx(AddonAfter, Object.assign({ "data-testid": dataTestId && `${dataTestId}-addonAfter` }, { children: addonAfter }))) : null] })));
|
|
148
149
|
});
|
|
149
150
|
const InputPrefix = tw.div `
|
|
150
151
|
tu-input__prefix
|
|
@@ -708,6 +709,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
|
|
|
708
709
|
return (jsx(components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
|
|
709
710
|
? tws `tu-select__menu-list animate-fade-in-fast`
|
|
710
711
|
: tws `tu-select__menu-list animate-fade-out-fast` })));
|
|
712
|
+
}, MenuList: props => {
|
|
713
|
+
return (jsx(components.MenuList, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onScroll: e => {
|
|
714
|
+
const listEl = e.currentTarget;
|
|
715
|
+
if (listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight) {
|
|
716
|
+
props.selectProps.onMenuScrollToBottom && props.selectProps.onMenuScrollToBottom(new TouchEvent(""));
|
|
717
|
+
}
|
|
718
|
+
} }) }, { children: props.children })));
|
|
711
719
|
}, Option: props => {
|
|
712
720
|
const componentProps = {
|
|
713
721
|
label: props.label,
|
|
@@ -891,7 +899,7 @@ const Select = (props) => {
|
|
|
891
899
|
onMenuScrollToBottom,
|
|
892
900
|
onInputChange,
|
|
893
901
|
};
|
|
894
|
-
return (jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options,
|
|
902
|
+
return (jsxs(SelectContainer, Object.assign({ ref: refContainer, className: className, "data-testid": dataTestId, "$hasError": hasError, "$isDisabled": disabled }, { children: [prefix !== undefined && (jsx(SelectPrefix, Object.assign({ "data-testid": dataTestId && `${dataTestId}-prefix`, ref: refPrefix }, { children: prefix }))), async ? (jsx(ReactAsyncSelect, Object.assign({}, propsNoClassName, selectProps, async, { onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler }))) : (jsx(ReactSelect, Object.assign({}, propsNoClassName, selectProps, { options: filterOption ? orderedOptions : options, isMulti: isMulti, hideSelectedOptions: false, onMenuOpen: openMenuHandler, onMenuClose: closeMenuHandler })))] })));
|
|
895
903
|
};
|
|
896
904
|
const SelectContainer = tw.div `
|
|
897
905
|
tu-select
|
|
@@ -1029,8 +1037,8 @@ const usePhoneInput = (initialValue) => {
|
|
|
1029
1037
|
* @returns {JSX.Element} - The PhoneInput component.
|
|
1030
1038
|
*/
|
|
1031
1039
|
const PhoneInput = forwardRef((_a, ref) => {
|
|
1032
|
-
var { dataTestId, isInvalid, disabled = false, value, fieldSize = "medium", disableAction = false, onChange } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "fieldSize", "disableAction", "onChange"]);
|
|
1033
|
-
const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, } = usePhoneInput(value);
|
|
1040
|
+
var { dataTestId, isInvalid, disabled = false, value, fieldSize = "medium", disableAction = false, onChange, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "fieldSize", "disableAction", "onChange", "defaultValue"]);
|
|
1041
|
+
const { countryCode, phoneNumber, isCountryCodeInvalid, isPhoneNumberInvalid, handleCountryCodeChange, handlePhoneNumberChange, } = usePhoneInput(value !== null && value !== void 0 ? value : defaultValue);
|
|
1034
1042
|
return (jsxs(Container, Object.assign({ "data-testid": `${dataTestId}-container` }, { children: [jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId && `${dataTestId}`, value: value, ref: ref, onChange: onChange }), jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] })));
|
|
1035
1043
|
});
|
|
1036
1044
|
const Container = tw.div `
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-form-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@trackunit/i18n-library-translation": "0.0.
|
|
8
|
-
"@trackunit/react-components": "0.1.
|
|
7
|
+
"@trackunit/i18n-library-translation": "0.0.41",
|
|
8
|
+
"@trackunit/react-components": "0.1.81",
|
|
9
9
|
"@trackunit/tailwind-styled-components": "0.0.55",
|
|
10
10
|
"date-fns": "2.29.3",
|
|
11
11
|
"libphonenumber-js": "1.10.26",
|
|
12
12
|
"react": "18.2.0",
|
|
13
|
-
"react-select": "5.7.
|
|
13
|
+
"react-select": "5.7.2",
|
|
14
14
|
"uuid": "8.3.2"
|
|
15
15
|
},
|
|
16
16
|
"module": "./index.js",
|