@flywire/react-headlessui - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2-0

dist/cjs/components/Button/Button.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function Button(props) {
-    return (0, jsx_runtime_1.jsx)("button", { type: "button", ...props });
-}
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const Button = (0, react_1.forwardRef)(({ as: Element = 'button', children, ...rest }, ref) => {
+    const { a11yProps, htmlProps } = (0, hooks_1.useButton)({ as: Element });
+    return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...a11yProps, ...htmlProps, ...rest, children: children }));
+});
+Button.displayName = 'Button';
 exports.default = Button;

dist/cjs/constants/keys.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XKEY = exports.VKEY = exports.TAB = exports.SUPR = exports.PERIOD = exports.NUMPAD_9 = exports.NUMPAD_8 = exports.NUMPAD_7 = exports.NUMPAD_6 = exports.NUMPAD_5 = exports.NUMPAD_4 = exports.NUMPAD_3 = exports.NUMPAD_2 = exports.NUMPAD_1 = exports.NUMPAD_0 = exports.DELETE = exports.DECIMAL_POINT = exports.COMMA = exports.CKEY = exports.ARROW_RIGHT = exports.ARROW_LEFT = void 0;
+exports.X = exports.V = exports.TAB = exports.SUPR = exports.SPACE = exports.PERIOD = exports.NUMPAD_9 = exports.NUMPAD_8 = exports.NUMPAD_7 = exports.NUMPAD_6 = exports.NUMPAD_5 = exports.NUMPAD_4 = exports.NUMPAD_3 = exports.NUMPAD_2 = exports.NUMPAD_1 = exports.NUMPAD_0 = exports.ENTER = exports.DELETE = exports.COMMA = exports.C = exports.ARROW_RIGHT = exports.ARROW_LEFT = void 0;
 exports.ARROW_LEFT = 'ArrowLeft';
 exports.ARROW_RIGHT = 'ArrowRight';
-exports.CKEY = 'c';
+exports.C = 'c';
 exports.COMMA = ',';
-exports.DECIMAL_POINT = '.';
 exports.DELETE = 'Backspace';
+exports.ENTER = 'Enter';
 exports.NUMPAD_0 = '0';
@@ -21,5 +21,6 @@ exports.NUMPAD_1 = '1';
 exports.PERIOD = '.';
+exports.SPACE = ' ';
 exports.SUPR = 'Delete';
 exports.TAB = 'Tab';
-exports.VKEY = 'v';
-exports.XKEY = 'x';
+exports.V = 'v';
+exports.X = 'x';

dist/cjs/hooks/index.js

@@ -6,3 +6,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRunAfterUpdate = exports.useMoneyInput = exports.useMaskInput = exports.useInput = exports.useId = void 0;
+exports.useRunAfterUpdate = exports.useMoneyInput = exports.useMaskInput = exports.useInput = exports.useId = exports.useButton = void 0;
+var useButton_1 = require("./useButton");
+Object.defineProperty(exports, "useButton", { enumerable: true, get: function () { return __importDefault(useButton_1).default; } });
 var useId_1 = require("./useId");
@@ -9,0 +11,0 @@ Object.defineProperty(exports, "useId", { enumerable: true, get: function () { return __importDefault(useId_1).default; } });

dist/cjs/hooks/useMoneyInput/useMoneyInput.js

@@ -45,9 +45,9 @@ "use strict";
         const isControl = evt.ctrlKey || evt.metaKey;
-        const isCopy = isControl && evt.key === KEYS.CKEY;
-        const isCut = isControl && evt.key === KEYS.XKEY;
+        const isCopy = isControl && evt.key === KEYS.C;
+        const isCut = isControl && evt.key === KEYS.X;
         const isNumber = /\d/.test(evt.key);
-        const isPaste = isControl && evt.key === KEYS.VKEY;
+        const isPaste = isControl && evt.key === KEYS.V;
         const allowedChars = [
             KEYS.COMMA,
-            KEYS.DECIMAL_POINT,
+            KEYS.PERIOD,
             KEYS.DELETE,
@@ -54,0 +54,0 @@ KEYS.ARROW_LEFT,

dist/cjs/types/components/Button/Button.d.ts

@@ -1,4 +0,9 @@
-import { ButtonHTMLAttributes } from 'react';
-declare function Button(props: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+import { ElementType, ComponentPropsWithoutRef } from 'react';
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+    as?: ElementType;
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

dist/cjs/types/constants/keys.d.ts

 export declare const ARROW_LEFT = "ArrowLeft";
 export declare const ARROW_RIGHT = "ArrowRight";
-export declare const CKEY = "c";
+export declare const C = "c";
 export declare const COMMA = ",";
-export declare const DECIMAL_POINT = ".";
 export declare const DELETE = "Backspace";
+export declare const ENTER = "Enter";
 export declare const NUMPAD_0 = "0";
@@ -18,6 +18,7 @@ export declare const NUMPAD_1 = "1";
 export declare const PERIOD = ".";
+export declare const SPACE = " ";
 export declare const SUPR = "Delete";
 export declare const TAB = "Tab";
-export declare const VKEY = "v";
-export declare const XKEY = "x";
+export declare const V = "v";
+export declare const X = "x";
 //# sourceMappingURL=keys.d.ts.map

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

@@ -0,1 +1,2 @@
+export { default as useButton } from './useButton';
 export { default as useId } from './useId';
@@ -2,0 +3,0 @@ export { default as useInput } from './useInput';

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

@@ -92,3 +92,3 @@ import { ChangeEvent, InputHTMLAttributes } from 'react';
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "step" | "date" | "time" | "true" | "false" | "page" | "location" | undefined;
+        'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
         'aria-describedby'?: string | undefined;
@@ -102,3 +102,3 @@ 'aria-details'?: string | undefined;
         'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
         'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -105,0 +105,0 @@ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;

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

@@ -93,3 +93,3 @@ import { ChangeEvent, InputHTMLAttributes, KeyboardEvent } from 'react';
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "step" | "date" | "time" | "true" | "false" | "page" | "location" | undefined;
+        'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
         'aria-describedby'?: string | undefined;
@@ -103,3 +103,3 @@ 'aria-details'?: string | undefined;
         'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
         'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -106,0 +106,0 @@ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;

dist/esm/components/Button/Button.js

 import { jsx as _jsx } from "react/jsx-runtime";
-function Button(props) {
-    return _jsx("button", { type: "button", ...props });
-}
+import { forwardRef, } from 'react';
+import { useButton } from '../../hooks';
+const Button = forwardRef(({ as: Element = 'button', children, ...rest }, ref) => {
+    const { a11yProps, htmlProps } = useButton({ as: Element });
+    return (_jsx(Element, { ref: ref, ...a11yProps, ...htmlProps, ...rest, children: children }));
+});
+Button.displayName = 'Button';
 export default Button;

dist/esm/constants/keys.js

 export const ARROW_LEFT = 'ArrowLeft';
 export const ARROW_RIGHT = 'ArrowRight';
-export const CKEY = 'c';
+export const C = 'c';
 export const COMMA = ',';
-export const DECIMAL_POINT = '.';
 export const DELETE = 'Backspace';
+export const ENTER = 'Enter';
 export const NUMPAD_0 = '0';
@@ -18,5 +18,6 @@ export const NUMPAD_1 = '1';
 export const PERIOD = '.';
+export const SPACE = ' ';
 export const SUPR = 'Delete';
 export const TAB = 'Tab';
-export const VKEY = 'v';
-export const XKEY = 'x';
+export const V = 'v';
+export const X = 'x';

dist/esm/hooks/index.js

@@ -0,1 +1,2 @@
+export { default as useButton } from './useButton';
 export { default as useId } from './useId';
@@ -2,0 +3,0 @@ export { default as useInput } from './useInput';

dist/esm/hooks/useMoneyInput/useMoneyInput.js

@@ -20,9 +20,9 @@ import { useState, } from 'react';
         const isControl = evt.ctrlKey || evt.metaKey;
-        const isCopy = isControl && evt.key === KEYS.CKEY;
-        const isCut = isControl && evt.key === KEYS.XKEY;
+        const isCopy = isControl && evt.key === KEYS.C;
+        const isCut = isControl && evt.key === KEYS.X;
         const isNumber = /\d/.test(evt.key);
-        const isPaste = isControl && evt.key === KEYS.VKEY;
+        const isPaste = isControl && evt.key === KEYS.V;
         const allowedChars = [
             KEYS.COMMA,
-            KEYS.DECIMAL_POINT,
+            KEYS.PERIOD,
             KEYS.DELETE,
@@ -29,0 +29,0 @@ KEYS.ARROW_LEFT,

dist/esm/types/components/Button/Button.d.ts

@@ -1,4 +0,9 @@
-import { ButtonHTMLAttributes } from 'react';
-declare function Button(props: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+import { ElementType, ComponentPropsWithoutRef } from 'react';
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+    as?: ElementType;
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

dist/esm/types/constants/keys.d.ts

 export declare const ARROW_LEFT = "ArrowLeft";
 export declare const ARROW_RIGHT = "ArrowRight";
-export declare const CKEY = "c";
+export declare const C = "c";
 export declare const COMMA = ",";
-export declare const DECIMAL_POINT = ".";
 export declare const DELETE = "Backspace";
+export declare const ENTER = "Enter";
 export declare const NUMPAD_0 = "0";
@@ -18,6 +18,7 @@ export declare const NUMPAD_1 = "1";
 export declare const PERIOD = ".";
+export declare const SPACE = " ";
 export declare const SUPR = "Delete";
 export declare const TAB = "Tab";
-export declare const VKEY = "v";
-export declare const XKEY = "x";
+export declare const V = "v";
+export declare const X = "x";
 //# sourceMappingURL=keys.d.ts.map

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

@@ -0,1 +1,2 @@
+export { default as useButton } from './useButton';
 export { default as useId } from './useId';
@@ -2,0 +3,0 @@ export { default as useInput } from './useInput';

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

@@ -92,3 +92,3 @@ import { ChangeEvent, InputHTMLAttributes } from 'react';
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "step" | "date" | "time" | "true" | "false" | "page" | "location" | undefined;
+        'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
         'aria-describedby'?: string | undefined;
@@ -102,3 +102,3 @@ 'aria-details'?: string | undefined;
         'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
         'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -105,0 +105,0 @@ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;

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

@@ -93,3 +93,3 @@ import { ChangeEvent, InputHTMLAttributes, KeyboardEvent } from 'react';
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "step" | "date" | "time" | "true" | "false" | "page" | "location" | undefined;
+        'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
         'aria-describedby'?: string | undefined;
@@ -103,3 +103,3 @@ 'aria-details'?: string | undefined;
         'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
         'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -106,0 +106,0 @@ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;

package.json

 {
   "name": "@flywire/react-headlessui",
-  "version": "0.0.1",
+  "version": "0.0.2-0",
   "description": "Headless UI components",
@@ -5,0 +5,0 @@ "exports": {

No alert changes

Improved metrics

Total package byte prevSize

184071

increased by4.4%

Number of package files

236

increased by5.36%

Lines of code

2881

increased by7.06%

No dependency changes