@sqrzro/ui 4.0.0-alpha.56 → 4.0.0-alpha.58

package/dist/components/buttons/Button/index.d.ts

@@ -19,6 +19,7 @@ export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
     readonly id?: string;
     /** If true, the Button will be greyed out and non-interactive */
     readonly isDisabled?: boolean;
+    readonly isDownload?: boolean;
     /** If true, the button will stretch to the full width of its container */
     readonly isFullWidth?: boolean;
     /** If true, the Button will show a loading indicator, and be non-interactive */
@@ -61,5 +62,5 @@ export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
  * | ---- | ----------- | ---- |
  * | root | The button element | `StylableButtonClassName` |
  */
-declare function Button({ children, classNames, classNameProps, form, hasAssistiveLabel, href, icon, id, isDisabled, isFullWidth, isLoading, isNewWindow, isText, name, onClick, popoverTarget, scroll, style, type, value, variant, }: ButtonProps): React.ReactElement;
+declare function Button({ children, classNames, classNameProps, form, hasAssistiveLabel, href, icon, id, isDisabled, isDownload, isFullWidth, isLoading, isNewWindow, isText, name, onClick, popoverTarget, scroll, style, type, value, variant, }: ButtonProps): React.ReactElement;
 export default Button;

package/dist/components/buttons/Button/index.js

@@ -24,7 +24,7 @@ import Link from '../../elements/Link';
  * | ---- | ----------- | ---- |
  * | root | The button element | `StylableButtonClassName` |
  */
-function Button({ children, classNames, classNameProps, form, hasAssistiveLabel, href, icon, id, isDisabled, isFullWidth, isLoading, isNewWindow, isText, name, onClick, popoverTarget, scroll, style, type, value, variant, }) {
+function Button({ children, classNames, classNameProps, form, hasAssistiveLabel, href, icon, id, isDisabled, isDownload, isFullWidth, isLoading, isNewWindow, isText, name, onClick, popoverTarget, scroll, style, type, value, variant, }) {
     const ref = useRef(null);
     const componentClassNames = useClassNames(isText ? 'textButton' : 'button', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
     const className = tw('relative flex cursor-pointer items-center justify-center whitespace-nowrap', isDisabled || isLoading ? 'pointer-events-none opacity-30' : null, isFullWidth ? 'w-full' : null, componentClassNames?.root);
@@ -33,7 +33,7 @@ function Button({ children, classNames, classNameProps, form, hasAssistiveLabel,
      *  headless in other applications, and so should have consistency.
      */
     if (href) {
-        return (_jsx(Link, { className: className, href: href, id: id, isNewWindow: isNewWindow, onClick: onClick, scroll: scroll, style: style, children: _jsxs("span", { className: "flex items-center gap-2", children: [icon ? (_jsx("span", { className: tw('flex-none', componentClassNames?.icon), children: icon })) : null, _jsx("span", { className: tw(hasAssistiveLabel ? 'sr-only' : null), children: children })] }) }));
+        return (_jsx(Link, { className: className, href: href, id: id, isDownload: isDownload, isNewWindow: isNewWindow, onClick: onClick, scroll: scroll, style: style, children: _jsxs("span", { className: "flex items-center gap-2", children: [icon ? (_jsx("span", { className: tw('flex-none', componentClassNames?.icon), children: icon })) : null, _jsx("span", { className: tw(hasAssistiveLabel ? 'sr-only' : null), children: children })] }) }));
     }
     return (_jsxs("button", { ref: ref, className: className, disabled: isDisabled || isLoading || false, form: form, id: id, name: name, onClick: onClick, popoverTarget: popoverTarget, style: style, type: type === 'submit' ? 'submit' : 'button', value: value, children: [isLoading ? (_jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-2/4", children: "\u2022\u2022\u2022" })) : null, _jsxs("span", { className: "flex items-center gap-2", children: [icon ? (_jsx("span", { className: tw('flex-none', componentClassNames?.icon), children: icon })) : null, _jsx("span", { className: tw(hasAssistiveLabel ? 'sr-only' : null, isLoading ? 'text-transparent' : null), children: children })] })] }));
 }

package/dist/components/collections/ListItemMeta/index.js

@@ -1,19 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isValidElement } from 'react';
 import { filterNull } from '@sqrzro/utility';
 import { useClassNames } from '../../../styles/context';
 import isDataTableArray from '../../../utility/is-data-object-array';
 import DataTable from '../DataTable';
-function getKey(item) {
-    if (isValidElement(item)) {
-        return item.key || '-';
-    }
-    if (typeof item === 'object') {
-        return JSON.stringify(item);
-    }
-    return String(item);
-}
 function ListItemMeta({ classNameProps, classNames, data, }) {
     const componentClassNames = useClassNames('listItemMeta', { props: classNameProps }, classNames);
     if (!data?.length) {
@@ -23,6 +13,6 @@ function ListItemMeta({ classNameProps, classNames, data, }) {
     if (isDataTableArray(filteredData)) {
         return _jsx(DataTable, { data: filteredData });
     }
-    return (_jsx("ul", { className: componentClassNames?.root, children: filteredData.map((item) => (_jsx("li", { className: "whitespace-nowrap", children: item }, getKey(item)))) }));
+    return (_jsx("ul", { className: componentClassNames?.root, children: filteredData.map((item, index) => (_jsx("li", { children: item }, index))) }));
 }
 export default ListItemMeta;

package/dist/components/collections/ListItemSecondary/index.js

@@ -1,15 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isValidElement } from 'react';
 import { useClassNames } from '../../../styles/context';
 import ListItemMeta from '../ListItemMeta';
+function isReactElement(element) {
+    return typeof element === 'object' && element !== null && '$$typeof' in element;
+}
 function ListItemSecondary({ classNameProps, classNames, data, }) {
     const componentClassNames = useClassNames('listItem', { props: classNameProps }, classNames);
     if (!data) {
         return null;
     }
-    if (isValidElement(data)) {
-        return _jsx("div", { className: componentClassNames?.secondary, children: data });
+    // We have to use a custom check rather than the React.isValidElement type guard, because
+    // (seemingly as of Next 16.2) we get a JSON circular error using it.
+    if (isReactElement(data)) {
+        return data;
     }
     return (_jsxs("div", { className: componentClassNames?.secondary, children: [data.title ? _jsx("p", { className: componentClassNames?.title, children: data.title }) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: { ...classNameProps, isSecondary: true }, data: data.meta })] }));
 }

package/dist/components/elements/Link/index.d.ts

@@ -10,10 +10,11 @@ export interface LinkProps extends ClassNameProps<LinkClassNames>, DataProps {
     children: React.ReactNode;
     href?: string | null;
     id?: string;
+    isDownload?: boolean;
     isNewWindow?: boolean;
     onClick?: React.MouseEventHandler<HTMLAnchorElement>;
     scroll?: boolean;
     style?: React.CSSProperties;
 }
-declare function Link({ children, className, classNames, classNameProps, isNewWindow, href, id, onClick, scroll, style, ...dataProps }: Readonly<LinkProps>): React.ReactElement;
+declare function Link({ children, className, classNames, classNameProps, isDownload, isNewWindow, href, id, onClick, scroll, style, ...dataProps }: Readonly<LinkProps>): React.ReactElement;
 export default Link;

package/dist/components/elements/Link/index.js

@@ -10,14 +10,16 @@ function normalizeHref(href) {
     }
     return joinURL(href);
 }
-function Link({ children, className, classNames, classNameProps, isNewWindow, href = '/', id, onClick, scroll, style, ...dataProps }) {
+function Link({ children, className, classNames, classNameProps, isDownload, isNewWindow, href = '/', id, onClick, scroll, style, ...dataProps }) {
     const componentClassNames = useClassNames('link', { props: classNameProps }, classNames);
+    const downloadProps = isDownload ? { download: true } : {};
     const newWindowProps = isNewWindow
         ? { rel: 'noopener noreferrer', target: '_blank' }
         : {};
     const props = {
-        ...newWindowProps,
         ...dataProps,
+        ...downloadProps,
+        ...newWindowProps,
         className: tw(componentClassNames?.root, className),
         id,
         onClick,

package/dist/components/elements/MenuItem/index.d.ts

@@ -2,6 +2,8 @@ import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { ActionComponentProps } from '../../utility/Action';
 import type { MenuClassNames } from '../Menu';
 interface MenuItemProps<Data, Response> extends ClassNameProps<MenuClassNames>, ActionComponentProps<Data, Response> {
+    isDownload?: boolean;
+    isNewWindow?: boolean;
 }
-declare function MenuItem<Data, Response>({ children, classNameProps, classNames, href, isLoading, onClick, }: MenuItemProps<Data, Response>): React.ReactElement;
+declare function MenuItem<Data, Response>({ children, classNameProps, classNames, href, isDownload, isLoading, isNewWindow, onClick, }: MenuItemProps<Data, Response>): React.ReactElement;
 export default MenuItem;

package/dist/components/elements/MenuItem/index.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClassNames } from '../../../styles/context';
 import Link from '../Link';
-function MenuItem({ children, classNameProps, classNames, href, isLoading, onClick, }) {
+function MenuItem({ children, classNameProps, classNames, href, isDownload, isLoading, isNewWindow, onClick, }) {
     const componentClassNames = useClassNames('menu', { props: classNameProps }, classNames);
     if (href) {
-        return (_jsx(Link, { className: componentClassNames?.link, href: href, onClick: onClick, children: children }));
+        return (_jsx(Link, { className: componentClassNames?.link, href: href, isDownload: isDownload, isNewWindow: isNewWindow, onClick: onClick, children: children }));
     }
     return (_jsxs("button", { className: componentClassNames?.link, onClick: onClick, type: "button", children: [children, " ", isLoading && '...'] }));
 }

package/dist/forms/components/FormField/index.d.ts

@@ -20,7 +20,8 @@ export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormField
     isOptional?: boolean;
     label?: React.ReactNode;
     onChange?: (event: InputEvent<T>) => void;
+    onFieldChange?: (event: InputEvent<T>) => void;
     render: (props: InputProps<T>) => React.ReactElement | null;
 }
-declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
+declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onFieldChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
 export default FormField;

package/dist/forms/components/FormField/index.js

@@ -11,10 +11,14 @@ function checkHasError(error) {
         Object.keys(error).length > 0 &&
         Object.values(error).some((item) => typeof item === 'string'));
 }
-function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
+function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onFieldChange, onKeyDown, render, value, }) {
     const componentClassNames = useClassNames('formField', { props: classNameProps, states: { isError: checkHasError(error) } }, classNames);
     const inputId = id || `ff_${name}`;
     const [inputError, setInputError] = useState(null);
+    function handleChange(event) {
+        onFieldChange?.(event);
+        onChange?.(event);
+    }
     function handleError(message) {
         setInputError(message);
     }
@@ -28,7 +32,7 @@ function FormField({ action, classNameProps, classNames, details, error, hasAssi
         isOptional,
         label,
         name,
-        onChange,
+        onChange: handleChange,
         onError: handleError,
         onKeyDown,
         value,

package/dist/forms/hooks/useForm.d.ts

@@ -12,7 +12,7 @@ export interface FieldPropsReturn<Request, K extends keyof Request = keyof Reque
     isDisabled?: boolean;
     label?: string;
     name: string;
-    onChange: (event: InputEvent<Request[K]>) => void;
+    onFieldChange: (event: InputEvent<Request[K]>) => void;
     value: Request[K];
 }
 export interface ToastsArgs {

package/dist/forms/hooks/useForm.js

@@ -173,7 +173,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
             error: getErrorsForField(errors, name),
             label: getLabel(name, label),
             name: name,
-            onChange: handleChange,
+            onFieldChange: handleChange,
             value: data[name],
         };
     }

package/dist/forms/utility/extract-input-props.js

@@ -13,6 +13,7 @@ export function getFieldPropKeys() {
         'label',
         'name',
         'onChange',
+        'onFieldChange',
         'onKeyDown',
         'value',
     ];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.56",
+  "version": "4.0.0-alpha.58",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -52,18 +52,18 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.45.1",
-    "next": "^16.1.6",
+    "next": "^16.2.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/addons": "^4.0.0-alpha.9",
+    "@sqrzro/addons": "^4.0.0-alpha.10",
     "@sqrzro/utility": "^4.0.0-alpha.19"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^10.2.14",
-    "@storybook/addon-docs": "^10.2.14",
-    "@storybook/nextjs": "^10.2.14",
+    "@storybook/addon-a11y": "^10.3.1",
+    "@storybook/addon-docs": "^10.3.1",
+    "@storybook/nextjs": "^10.3.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.14",
@@ -72,7 +72,7 @@
     "cpx": "^1.5.0",
     "next-router-mock": "^1.0.5",
     "rimraf": "^6.1.3",
-    "storybook": "^10.2.14",
+    "storybook": "^10.3.1",
     "tsc-alias": "^1.8.16",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"