@arkyn/components 3.0.1-beta.40 → 3.0.1-beta.42
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/bundle.js +642 -642
- package/dist/bundle.umd.cjs +6 -6
- package/dist/components/checkbox/index.d.ts +1 -1
- package/dist/components/checkbox/index.d.ts.map +1 -1
- package/dist/components/currencyInput/index.d.ts.map +1 -1
- package/dist/components/currencyInput/index.js +4 -3
- package/dist/components/phoneInput/index.d.ts.map +1 -1
- package/dist/components/phoneInput/index.js +6 -3
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes } from "react";
|
|
|
2
2
|
import "./styles.css";
|
|
3
3
|
type CheckboxProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "prefix" | "type" | "name" | "defaultValue" | "value" | "onChange" | "onSelect" | "onClick"> & {
|
|
4
4
|
label?: string;
|
|
5
|
-
errorMessage?:
|
|
5
|
+
errorMessage?: string;
|
|
6
6
|
size?: "md" | "lg" | "sm";
|
|
7
7
|
name: string;
|
|
8
8
|
value?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAA2B,MAAM,OAAO,CAAC;AAOtE,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,cAAc,GACd,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CACZ,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAA2B,MAAM,OAAO,CAAC;AAOtE,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,cAAc,GACd,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CACZ,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA6DrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/currencyInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,WAAW,EACX,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAUf,OAAO,aAAa,CAAC;AAErB,KAAK,MAAM,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,cAAc,GACd,OAAO,GACP,UAAU,CACb,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EACpC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/currencyInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,WAAW,EACX,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAUf,OAAO,aAAa,CAAC;AAErB,KAAK,MAAM,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,cAAc,GACd,OAAO,GACP,UAAU,CACb,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EACpC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAyJ/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -90,13 +90,14 @@ function CurrencyInput(props) {
|
|
|
90
90
|
const inputId = id || useId();
|
|
91
91
|
const errorMessage = baseErrorMessage || fieldErrors?.[name];
|
|
92
92
|
const isError = !!errorMessage;
|
|
93
|
+
const isDisabled = disabled || isLoading;
|
|
93
94
|
const iconSizes = { md: 20, lg: 20 };
|
|
94
95
|
const iconSize = iconSizes[size];
|
|
95
96
|
const loadingPosition = rightIcon ? "right" : "left";
|
|
96
97
|
const showLeftSpinner = loadingPosition === "left" && isLoading;
|
|
97
98
|
const showRightSpinner = loadingPosition === "right" && isLoading;
|
|
98
99
|
function handleSectionClick() {
|
|
99
|
-
if (
|
|
100
|
+
if (isDisabled || !inputRef?.current)
|
|
100
101
|
return;
|
|
101
102
|
setIsFocused(true);
|
|
102
103
|
inputRef.current.focus();
|
|
@@ -132,9 +133,9 @@ function CurrencyInput(props) {
|
|
|
132
133
|
const hasPrefix = !!prefix ? "hasPrefix" : "";
|
|
133
134
|
const hasSuffix = !!suffix ? "hasSuffix" : "";
|
|
134
135
|
const errored = isError ? "errored" : "";
|
|
135
|
-
const opacity =
|
|
136
|
+
const opacity = isDisabled || readOnly || isLoading ? "opacity" : "";
|
|
136
137
|
const focused = isFocused ? "focused" : "";
|
|
137
138
|
const className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
|
|
138
|
-
return (_jsxs(FieldWrapper, { children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { value: maskedValue, disabled:
|
|
139
|
+
return (_jsxs(FieldWrapper, { children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { value: maskedValue, disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, id: inputId, name: name, ...rest }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
|
|
139
140
|
}
|
|
140
141
|
export { CurrencyInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA0B7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA0B7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAsLzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -137,8 +137,11 @@ function PhoneInput(props) {
|
|
|
137
137
|
const phoneInputId = id || useId();
|
|
138
138
|
const errorMessage = baseErrorMessage || fieldErrors?.[name];
|
|
139
139
|
const isError = !!errorMessage;
|
|
140
|
+
const isDisabled = disabled || isLoading;
|
|
140
141
|
const inputPhoneMaskRef = useRef(null);
|
|
141
142
|
function handleContainerFocus() {
|
|
143
|
+
if (isDisabled)
|
|
144
|
+
return;
|
|
142
145
|
if (isFocused || showCountryOptions)
|
|
143
146
|
return;
|
|
144
147
|
setIsFocused(true);
|
|
@@ -187,16 +190,16 @@ function PhoneInput(props) {
|
|
|
187
190
|
returnValue += removeNumberMasks(props || value);
|
|
188
191
|
return returnValue;
|
|
189
192
|
}
|
|
190
|
-
return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(PhoneInputContainer, { id: phoneInputId, disabled:
|
|
193
|
+
return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(PhoneInputContainer, { id: phoneInputId, disabled: isDisabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, className: className, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: isDisabled ? false : showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
|
|
191
194
|
.filter((country) => filterCountryFunction(country))
|
|
192
195
|
.map((country) => (_jsx(PhoneInputCountryOption, { country: country, handleChangeValue: () => {
|
|
193
196
|
setCurrentCountry(country);
|
|
194
197
|
setShowCountryOptions(false);
|
|
195
198
|
setValue(country.mask);
|
|
196
199
|
}, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
|
|
197
|
-
.length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { ref: inputPhoneMaskRef, currentCountry: currentCountry, value: value, onChange: (e) => {
|
|
200
|
+
.length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: isDisabled ? false : showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { ref: inputPhoneMaskRef, currentCountry: currentCountry, value: value, onChange: (e) => {
|
|
198
201
|
setValue(e);
|
|
199
202
|
onChange && onChange(inputValue(e));
|
|
200
|
-
}, disabled:
|
|
203
|
+
}, disabled: isDisabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size }), _jsx("input", { ref: phoneInputRef, type: "hidden", name: name, value: inputValue() })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
|
|
201
204
|
}
|
|
202
205
|
export { PhoneInput };
|