@flywire/react-headlessui - npm Package Compare versions

Comparing version 0.0.13-2 to 0.0.13-3

dist/cjs/hooks/useMoneyInput/useMoneyInput.js

@@ -38,4 +38,5 @@ "use strict";
     // does nothing
-}, initialValue = NO_VALUE, thousandsSeparator, ...rest } = {}) {
+}, onValueBlur, onValueChange, initialValue = NO_VALUE, subunitToUnit, thousandsSeparator, ...rest } = {}) {
     const [value, setValue] = (0, react_1.useState)(initialValue);
+    const hasCustomFormatter = decimalMark && thousandsSeparator;
     function handleInputKeyDown(evt) {
@@ -73,2 +74,3 @@ const isControl = evt.ctrlKey || evt.metaKey;
         setValue(evt.target.value);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(parse(evt.target.value));
     }
@@ -80,8 +82,15 @@ function handleInputBlur() {
             }
-            return format(value);
+            const _value = format(value);
+            onValueBlur === null || onValueBlur === void 0 ? void 0 : onValueBlur(parse(_value));
+            return _value;
         });
     }
     function format(value) {
-        if (decimalMark && thousandsSeparator) {
-            const options = { decimal: decimalMark, thousand: thousandsSeparator, symbol: false };
+        if (hasCustomFormatter) {
+            const options = {
+                decimal: decimalMark,
+                thousand: thousandsSeparator,
+                symbol: false,
+                subunitToUnit,
+            };
             return (0, money_1.toMoney)((0, money_1.toCents)(value.toString(), options), options);
@@ -91,2 +100,8 @@ }
     }
+    function parse(value) {
+        return hasCustomFormatter ? (0, money_1.toCents)(value.toString(), {
+            decimal: decimalMark,
+            subunitToUnit,
+        }) : (0, utils_1.parseNumber)(value);
+    }
     (0, react_1.useEffect)(() => setValue(initialValue === NO_VALUE ? NO_VALUE : format(initialValue)), [initialValue, decimals]);
@@ -93,0 +108,0 @@ return {

dist/cjs/types/hooks/useMoneyInput/useMoneyInput.d.ts

@@ -6,5 +6,8 @@ import { ChangeEvent, InputHTMLAttributes, KeyboardEvent } from 'react';
     initialValue?: string | number;
+    subunitToUnit?: number;
     thousandsSeparator?: string;
+    onValueChange?: (value: number) => void;
+    onValueBlur?: (value: number) => void;
 }
-declare function useMoneyInput({ decimals, decimalMark, onChange, onBlur, onKeyDown, initialValue, thousandsSeparator, ...rest }?: Props): {
+declare function useMoneyInput({ decimals, decimalMark, onChange, onBlur, onKeyDown, onValueBlur, onValueChange, initialValue, subunitToUnit, thousandsSeparator, ...rest }?: Props): {
     inputProps: {
@@ -11,0 +14,0 @@ accept?: string | undefined;

dist/cjs/types/utils/formatMoney/money.d.ts

@@ -10,4 +10,4 @@ declare type FormatOptions = {
 declare const toMoney: (number: number, options?: FormatOptions) => string;
-declare const toCents: (number: string, options?: FormatOptions) => number;
+declare const toCents: (number: string, options?: Pick<FormatOptions, 'decimal' | 'subunitToUnit'>) => number;
 export { toCents, toMoney };
 //# sourceMappingURL=money.d.ts.map

dist/cjs/utils/formatMoney/money.js

@@ -5,12 +5,20 @@ "use strict";
 const accounting_1 = require("../accounting/accounting");
+const defaultOptions = {
+    cents: true,
+    decimal: '.',
+    thousand: ',',
+    subunitToUnit: 100,
+    symbol: '$',
+    symbolFirst: true,
+};
 const toMoney = (number, options) => {
-    const defaults = {
-        cents: true,
-        decimal: '.',
-        thousand: ',',
-        subunitToUnit: 100,
-        symbol: '$',
-        symbolFirst: true,
+    var _a, _b, _c, _d, _e, _f;
+    const config = {
+        cents: (_a = options === null || options === void 0 ? void 0 : options.cents) !== null && _a !== void 0 ? _a : defaultOptions.cents,
+        decimal: (_b = options === null || options === void 0 ? void 0 : options.decimal) !== null && _b !== void 0 ? _b : defaultOptions.decimal,
+        thousand: (_c = options === null || options === void 0 ? void 0 : options.thousand) !== null && _c !== void 0 ? _c : defaultOptions.thousand,
+        subunitToUnit: (_d = options === null || options === void 0 ? void 0 : options.subunitToUnit) !== null && _d !== void 0 ? _d : defaultOptions.subunitToUnit,
+        symbol: (_e = options === null || options === void 0 ? void 0 : options.symbol) !== null && _e !== void 0 ? _e : defaultOptions.symbol,
+        symbolFirst: (_f = options === null || options === void 0 ? void 0 : options.symbolFirst) !== null && _f !== void 0 ? _f : defaultOptions.symbolFirst,
     };
-    const config = { ...defaults, ...options };
     const { cents, decimal, subunitToUnit, symbol, symbolFirst, thousand } = config;
@@ -28,10 +36,7 @@ const precision = cents ? Math.log10(subunitToUnit) : 0;
 const toCents = (number, options) => {
-    const defaults = {
-        decimal: '.',
-        subunitToUnit: 100,
-    };
-    const config = { ...defaults, ...options };
-    const { decimal, subunitToUnit } = config;
+    var _a, _b;
+    const decimal = (_a = options === null || options === void 0 ? void 0 : options.decimal) !== null && _a !== void 0 ? _a : defaultOptions.decimal;
+    const subunitToUnit = (_b = options === null || options === void 0 ? void 0 : options.subunitToUnit) !== null && _b !== void 0 ? _b : defaultOptions.subunitToUnit;
     return Math.round((0, accounting_1.unformat)(number, decimal) * subunitToUnit);
 };
 exports.toCents = toCents;

dist/esm/hooks/useMoneyInput/useMoneyInput.js

@@ -13,4 +13,5 @@ import { useEffect, useState, } from 'react';
     // does nothing
-}, initialValue = NO_VALUE, thousandsSeparator, ...rest } = {}) {
+}, onValueBlur, onValueChange, initialValue = NO_VALUE, subunitToUnit, thousandsSeparator, ...rest } = {}) {
     const [value, setValue] = useState(initialValue);
+    const hasCustomFormatter = decimalMark && thousandsSeparator;
     function handleInputKeyDown(evt) {
@@ -48,2 +49,3 @@ const isControl = evt.ctrlKey || evt.metaKey;
         setValue(evt.target.value);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(parse(evt.target.value));
     }
@@ -55,8 +57,15 @@ function handleInputBlur() {
             }
-            return format(value);
+            const _value = format(value);
+            onValueBlur === null || onValueBlur === void 0 ? void 0 : onValueBlur(parse(_value));
+            return _value;
         });
     }
     function format(value) {
-        if (decimalMark && thousandsSeparator) {
-            const options = { decimal: decimalMark, thousand: thousandsSeparator, symbol: false };
+        if (hasCustomFormatter) {
+            const options = {
+                decimal: decimalMark,
+                thousand: thousandsSeparator,
+                symbol: false,
+                subunitToUnit,
+            };
             return toMoney(toCents(value.toString(), options), options);
@@ -66,2 +75,8 @@ }
     }
+    function parse(value) {
+        return hasCustomFormatter ? toCents(value.toString(), {
+            decimal: decimalMark,
+            subunitToUnit,
+        }) : parseNumber(value);
+    }
     useEffect(() => setValue(initialValue === NO_VALUE ? NO_VALUE : format(initialValue)), [initialValue, decimals]);
@@ -68,0 +83,0 @@ return {

dist/esm/types/hooks/useMoneyInput/useMoneyInput.d.ts

@@ -6,5 +6,8 @@ import { ChangeEvent, InputHTMLAttributes, KeyboardEvent } from 'react';
     initialValue?: string | number;
+    subunitToUnit?: number;
     thousandsSeparator?: string;
+    onValueChange?: (value: number) => void;
+    onValueBlur?: (value: number) => void;
 }
-declare function useMoneyInput({ decimals, decimalMark, onChange, onBlur, onKeyDown, initialValue, thousandsSeparator, ...rest }?: Props): {
+declare function useMoneyInput({ decimals, decimalMark, onChange, onBlur, onKeyDown, onValueBlur, onValueChange, initialValue, subunitToUnit, thousandsSeparator, ...rest }?: Props): {
     inputProps: {
@@ -11,0 +14,0 @@ accept?: string | undefined;

dist/esm/types/utils/formatMoney/money.d.ts

@@ -10,4 +10,4 @@ declare type FormatOptions = {
 declare const toMoney: (number: number, options?: FormatOptions) => string;
-declare const toCents: (number: string, options?: FormatOptions) => number;
+declare const toCents: (number: string, options?: Pick<FormatOptions, 'decimal' | 'subunitToUnit'>) => number;
 export { toCents, toMoney };
 //# sourceMappingURL=money.d.ts.map

dist/esm/utils/formatMoney/money.js

 import { formatMoney, unformat } from '../accounting/accounting';
+const defaultOptions = {
+    cents: true,
+    decimal: '.',
+    thousand: ',',
+    subunitToUnit: 100,
+    symbol: '$',
+    symbolFirst: true,
+};
 const toMoney = (number, options) => {
-    const defaults = {
-        cents: true,
-        decimal: '.',
-        thousand: ',',
-        subunitToUnit: 100,
-        symbol: '$',
-        symbolFirst: true,
+    var _a, _b, _c, _d, _e, _f;
+    const config = {
+        cents: (_a = options === null || options === void 0 ? void 0 : options.cents) !== null && _a !== void 0 ? _a : defaultOptions.cents,
+        decimal: (_b = options === null || options === void 0 ? void 0 : options.decimal) !== null && _b !== void 0 ? _b : defaultOptions.decimal,
+        thousand: (_c = options === null || options === void 0 ? void 0 : options.thousand) !== null && _c !== void 0 ? _c : defaultOptions.thousand,
+        subunitToUnit: (_d = options === null || options === void 0 ? void 0 : options.subunitToUnit) !== null && _d !== void 0 ? _d : defaultOptions.subunitToUnit,
+        symbol: (_e = options === null || options === void 0 ? void 0 : options.symbol) !== null && _e !== void 0 ? _e : defaultOptions.symbol,
+        symbolFirst: (_f = options === null || options === void 0 ? void 0 : options.symbolFirst) !== null && _f !== void 0 ? _f : defaultOptions.symbolFirst,
     };
-    const config = { ...defaults, ...options };
     const { cents, decimal, subunitToUnit, symbol, symbolFirst, thousand } = config;
@@ -23,10 +31,7 @@ const precision = cents ? Math.log10(subunitToUnit) : 0;
 const toCents = (number, options) => {
-    const defaults = {
-        decimal: '.',
-        subunitToUnit: 100,
-    };
-    const config = { ...defaults, ...options };
-    const { decimal, subunitToUnit } = config;
+    var _a, _b;
+    const decimal = (_a = options === null || options === void 0 ? void 0 : options.decimal) !== null && _a !== void 0 ? _a : defaultOptions.decimal;
+    const subunitToUnit = (_b = options === null || options === void 0 ? void 0 : options.subunitToUnit) !== null && _b !== void 0 ? _b : defaultOptions.subunitToUnit;
     return Math.round(unformat(number, decimal) * subunitToUnit);
 };
 export { toCents, toMoney };

dist/umd/hooks/useMoneyInput/useMoneyInput.js

@@ -47,4 +47,5 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
         // does nothing
-    }, initialValue = NO_VALUE, thousandsSeparator, ...rest } = {}) {
+    }, onValueBlur, onValueChange, initialValue = NO_VALUE, subunitToUnit, thousandsSeparator, ...rest } = {}) {
         const [value, setValue] = (0, react_1.useState)(initialValue);
+        const hasCustomFormatter = decimalMark && thousandsSeparator;
         function handleInputKeyDown(evt) {
@@ -82,2 +83,3 @@ const isControl = evt.ctrlKey || evt.metaKey;
             setValue(evt.target.value);
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(parse(evt.target.value));
         }
@@ -89,8 +91,15 @@ function handleInputBlur() {
                 }
-                return format(value);
+                const _value = format(value);
+                onValueBlur === null || onValueBlur === void 0 ? void 0 : onValueBlur(parse(_value));
+                return _value;
             });
         }
         function format(value) {
-            if (decimalMark && thousandsSeparator) {
-                const options = { decimal: decimalMark, thousand: thousandsSeparator, symbol: false };
+            if (hasCustomFormatter) {
+                const options = {
+                    decimal: decimalMark,
+                    thousand: thousandsSeparator,
+                    symbol: false,
+                    subunitToUnit,
+                };
                 return (0, money_1.toMoney)((0, money_1.toCents)(value.toString(), options), options);
@@ -100,2 +109,8 @@ }
         }
+        function parse(value) {
+            return hasCustomFormatter ? (0, money_1.toCents)(value.toString(), {
+                decimal: decimalMark,
+                subunitToUnit,
+            }) : (0, utils_1.parseNumber)(value);
+        }
         (0, react_1.useEffect)(() => setValue(initialValue === NO_VALUE ? NO_VALUE : format(initialValue)), [initialValue, decimals]);
@@ -102,0 +117,0 @@ return {

dist/umd/types/hooks/useMoneyInput/useMoneyInput.d.ts

@@ -6,5 +6,8 @@ import { ChangeEvent, InputHTMLAttributes, KeyboardEvent } from 'react';
     initialValue?: string | number;
+    subunitToUnit?: number;
     thousandsSeparator?: string;
+    onValueChange?: (value: number) => void;
+    onValueBlur?: (value: number) => void;
 }
-declare function useMoneyInput({ decimals, decimalMark, onChange, onBlur, onKeyDown, initialValue, thousandsSeparator, ...rest }?: Props): {
+declare function useMoneyInput({ decimals, decimalMark, onChange, onBlur, onKeyDown, onValueBlur, onValueChange, initialValue, subunitToUnit, thousandsSeparator, ...rest }?: Props): {
     inputProps: {
@@ -11,0 +14,0 @@ accept?: string | undefined;

dist/umd/types/utils/formatMoney/money.d.ts

@@ -10,4 +10,4 @@ declare type FormatOptions = {
 declare const toMoney: (number: number, options?: FormatOptions) => string;
-declare const toCents: (number: string, options?: FormatOptions) => number;
+declare const toCents: (number: string, options?: Pick<FormatOptions, 'decimal' | 'subunitToUnit'>) => number;
 export { toCents, toMoney };
 //# sourceMappingURL=money.d.ts.map

dist/umd/utils/formatMoney/money.js

@@ -14,12 +14,20 @@ (function (factory) {
     const accounting_1 = require("../accounting/accounting");
+    const defaultOptions = {
+        cents: true,
+        decimal: '.',
+        thousand: ',',
+        subunitToUnit: 100,
+        symbol: '$',
+        symbolFirst: true,
+    };
     const toMoney = (number, options) => {
-        const defaults = {
-            cents: true,
-            decimal: '.',
-            thousand: ',',
-            subunitToUnit: 100,
-            symbol: '$',
-            symbolFirst: true,
+        var _a, _b, _c, _d, _e, _f;
+        const config = {
+            cents: (_a = options === null || options === void 0 ? void 0 : options.cents) !== null && _a !== void 0 ? _a : defaultOptions.cents,
+            decimal: (_b = options === null || options === void 0 ? void 0 : options.decimal) !== null && _b !== void 0 ? _b : defaultOptions.decimal,
+            thousand: (_c = options === null || options === void 0 ? void 0 : options.thousand) !== null && _c !== void 0 ? _c : defaultOptions.thousand,
+            subunitToUnit: (_d = options === null || options === void 0 ? void 0 : options.subunitToUnit) !== null && _d !== void 0 ? _d : defaultOptions.subunitToUnit,
+            symbol: (_e = options === null || options === void 0 ? void 0 : options.symbol) !== null && _e !== void 0 ? _e : defaultOptions.symbol,
+            symbolFirst: (_f = options === null || options === void 0 ? void 0 : options.symbolFirst) !== null && _f !== void 0 ? _f : defaultOptions.symbolFirst,
         };
-        const config = { ...defaults, ...options };
         const { cents, decimal, subunitToUnit, symbol, symbolFirst, thousand } = config;
@@ -37,8 +45,5 @@ const precision = cents ? Math.log10(subunitToUnit) : 0;
     const toCents = (number, options) => {
-        const defaults = {
-            decimal: '.',
-            subunitToUnit: 100,
-        };
-        const config = { ...defaults, ...options };
-        const { decimal, subunitToUnit } = config;
+        var _a, _b;
+        const decimal = (_a = options === null || options === void 0 ? void 0 : options.decimal) !== null && _a !== void 0 ? _a : defaultOptions.decimal;
+        const subunitToUnit = (_b = options === null || options === void 0 ? void 0 : options.subunitToUnit) !== null && _b !== void 0 ? _b : defaultOptions.subunitToUnit;
         return Math.round((0, accounting_1.unformat)(number, decimal) * subunitToUnit);
@@ -45,0 +50,0 @@ };

package.json

 {
   "name": "@flywire/react-headlessui",
-  "version": "0.0.13-2",
+  "version": "0.0.13-3",
   "description": "Headless UI components",
@@ -5,0 +5,0 @@ "main": "./dist/umd/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

321457

increased by2.01%

Lines of code

5196

increased by1.35%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes