@uxf/core-react 11.54.0 → 11.58.0

package/README.md

@@ -151,7 +151,7 @@ useFocusReturn(active);
 ### useAnchorProps
 Returns props for anchor element.
 ```tsx
-import { useAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { useAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import { AnchorHTMLAttributes } from "react";
 
 // extends <a /> by `analyticsCallback`, `disabled`, `loading`, `submit` props
@@ -167,7 +167,7 @@ const anchorProps = useAnchorProps<AnchorHTMLAttributes<HTMLAnchorElement>>({
 <a {...anchorProps}>Click me</a>
 
 // example with generics
-import { UseAnchorProps, useAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { UseAnchorProps, useAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import { AnchorHTMLAttributes } from "react";
 
 interface Props extends UseAnchorProps, AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -187,7 +187,7 @@ const anchorProps = useAnchorProps<Props>({
 ### useButtonProps
 Returns props for button element.
 ```tsx
-import { useButtonProps } from "@uxf/core-react/hooks/use-button-props";
+import { useButtonProps } from "@uxf/core-react/clickable/use-button-props";
 import { ButtonHTMLAttributes } from "react";
 
 // extends <button /> by `analyticsCallback` and `loading` props
@@ -202,7 +202,7 @@ const buttonProps = useButtonProps<ButtonHTMLAttributes<HTMLButtonElement>>({
 <button {...buttonProps}>Click me</button>
 
 // example with generics
-import { UseButtonProps, useButtonProps } from "@uxf/core-react/hooks/use-button-props";
+import { UseButtonProps, useButtonProps } from "@uxf/core-react/clickable/use-button-props";
 import { ButtonHTMLAttributes } from "react";
 
 interface Props extends UseButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {
@@ -221,7 +221,7 @@ const buttonProps = useButtonProps<Props>({
 ### useClickableProps
 Returns props for clickable element.
 ```tsx
-import { useClickableProps } from "@uxf/core-react/hooks/use-clickable-props";
+import { useClickableProps } from "@uxf/core-react/clickable/use-clickable-props";
 import { HTMLAttributes } from "react";
 
 // extends any HTML element by `analyticsCallback`, `disabled`, `loading`, `submit` props
@@ -236,7 +236,7 @@ const clickableProps = useClickableProps<HTMLAttributes<HTMLDivElement>>({
 <div {...clickableProps}>Click me</div>
 
 // example with generics
-import { UseClickableProps, useClickableProps } from "@uxf/core-react/hooks/use-clickable-props";
+import { UseClickableProps, useClickableProps } from "@uxf/core-react/clickable/use-clickable-props";
 import { HTMLAttributes } from "react";
 
 interface Props extends UseClickableProps, HTMLAttributes<HTMLDivElement> {

package/{hooks → clickable}/_use-simulated-button.d.ts

@@ -8,9 +8,10 @@ interface Props<T extends HTMLElement> {
     onKeyUp?: KeyboardEventHandler<T>;
     isSubmitType?: boolean;
 }
-export declare function _useSimulatedButton<T extends HTMLElement>({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, isSubmitType, }: Props<T>): {
+export declare function _useSimulatedButton<T extends HTMLAnchorElement>({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, isSubmitType, }: Props<T>): {
     onClick: MouseEventHandler<T>;
     onKeyDown: KeyboardEventHandler<T>;
     onKeyUp: KeyboardEventHandler<T>;
+    isBusy: boolean | undefined;
 };
 export {};

package/{hooks → clickable}/_use-simulated-button.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._useSimulatedButton = _useSimulatedButton;
 const react_1 = require("react");
 function _useSimulatedButton({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, isSubmitType, }) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isBusy, setIsBusy] = (0, react_1.useState)(false);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const _onClick = (0, react_1.useCallback)((e) => {
         var _a;
@@ -16,8 +18,11 @@ function _useSimulatedButton({ analyticsCallback, isClickable, isHyperlink, onCl
                     closestForm.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
                 }
             }
-            if (onClick) {
-                onClick(e);
+            // TODO @vejvis - jaktože tady je onclick který vrací void a ne Promise<void> ?
+            const clickResult = onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            if (clickResult instanceof Promise) {
+                setIsBusy(true);
+                clickResult.finally(() => setIsBusy(false));
             }
         }
         else {
@@ -47,5 +52,10 @@ function _useSimulatedButton({ analyticsCallback, isClickable, isHyperlink, onCl
             }
         }
     }, [isClickable, onKeyDown]);
-    return { onClick: _onClick, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp };
+    return {
+        onClick: _onClick,
+        onKeyDown: _onKeyDown,
+        onKeyUp: _onKeyUp,
+        isBusy: isBusy ? true : undefined,
+    };
 }

package/clickable/add-busy-and-disabled-classnames.d.ts

@@ -0,0 +1,9 @@
+import { Nullish } from "@uxf/core/types";
+import { CxClassValue } from "@uxf/core/utils/cx";
+import { Options } from "./types";
+interface State {
+    isBusy: boolean | Nullish;
+    isDisabled: boolean | Nullish;
+}
+export declare function addBusyAndDisabledClassnames(className: string | Nullish, state: State, options: Options): CxClassValue[];
+export {};

package/clickable/add-busy-and-disabled-classnames.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addBusyAndDisabledClassnames = addBusyAndDisabledClassnames;
+const classes_1 = require("@uxf/core/constants/classes");
+function addBusyAndDisabledClassnames(className, state, options) {
+    return [
+        state.isBusy &&
+            (options.classNamePrefix
+                ? `${options.classNamePrefix}--${classes_1.CLASSES.IS_LOADING} ${classes_1.CLASSES.IS_LOADING}`
+                : classes_1.CLASSES.IS_LOADING),
+        state.isDisabled &&
+            (options.classNamePrefix
+                ? `${options.classNamePrefix}--${classes_1.CLASSES.IS_DISABLED} ${classes_1.CLASSES.IS_DISABLED}`
+                : classes_1.CLASSES.IS_DISABLED),
+        className,
+    ];
+}

package/clickable/types.d.ts

@@ -0,0 +1,3 @@
+export type Options = {
+    classNamePrefix?: string;
+};

package/clickable/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/clickable/use-anchor-props.d.ts

@@ -0,0 +1,9 @@
+import { AnchorHTMLAttributes } from "react";
+import { Options } from "./types";
+export interface UseAnchorProps {
+    analyticsCallback?: () => void;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    type?: "submit";
+}
+export declare function useAnchorProps<T extends AnchorHTMLAttributes<HTMLAnchorElement>>(props: UseAnchorProps & T, options?: Options): T;

package/{hooks → clickable}/use-anchor-props.js

@@ -5,14 +5,15 @@ const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const _use_simulated_button_1 = require("./_use-simulated-button");
-function useAnchorProps({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, download, href, hrefLang, isLoading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role, tabIndex, target, type, ...restProps }) {
+const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
+function useAnchorProps(props, options = {}) {
+    const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, download, href, hrefLang, isLoading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role, tabIndex, target, type, ...restProps } = props;
     const isBusy = Boolean(isLoading || ariaBusy);
     const isDisabledOrAriaDisabled = Boolean(isDisabled || ariaDisabled);
     const isBusyOrDisabled = isBusy || isDisabledOrAriaDisabled;
     const isSubmitType = type === "submit";
     const isButton = isSubmitType || (0, is_not_nil_1.isNotNil)(onClick);
     const tabIndexInteractive = isBusyOrDisabled ? -1 : tabIndex;
-    const _className = [isBusy && classes_1.CLASSES.IS_LOADING, isDisabledOrAriaDisabled && classes_1.CLASSES.IS_DISABLED, className];
     const simulatedButton = (0, _use_simulated_button_1._useSimulatedButton)({
         analyticsCallback,
         isClickable: !isBusyOrDisabled || isButton,
@@ -22,6 +23,7 @@ function useAnchorProps({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabl
         onKeyUp,
         isSubmitType,
     });
+    const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy: isBusy || simulatedButton.isBusy, isDisabled: isDisabledOrAriaDisabled }, options);
     if (href) {
         return {
             "aria-busy": isBusy,

package/clickable/use-button-props.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from "react";
+import { Options } from "./types";
+export interface UseButtonProps {
+    analyticsCallback?: () => void;
+    loading?: boolean;
+}
+export declare function useButtonProps<T extends ButtonHTMLAttributes<HTMLButtonElement>>(props: UseButtonProps & T, options?: Options): T;

package/{hooks → clickable}/use-button-props.js

@@ -4,11 +4,13 @@ exports.useButtonProps = useButtonProps;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = require("react");
-function useButtonProps({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, autoFocus, analyticsCallback, className, disabled, formAction, formEncType, formMethod, formNoValidate, formTarget, loading, name, onClick, role, tabIndex, type, value, ...restProps }) {
+const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
+function useButtonProps(props, options = {}) {
+    const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, autoFocus, analyticsCallback, className, disabled, formAction, formEncType, formMethod, formNoValidate, formTarget, loading, name, onClick, role, tabIndex, type, value, ...restProps } = props;
     const isBusy = loading ? loading : Boolean(ariaBusy);
     const isDisabled = disabled ? disabled : Boolean(ariaDisabled);
     const isBusyOrDisabled = isBusy || isDisabled;
-    const _className = [isBusy && classes_1.CLASSES.IS_LOADING, isDisabled && classes_1.CLASSES.IS_DISABLED, className];
+    const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy, isDisabled }, options);
     const _onClick = (0, react_1.useCallback)((e) => {
         if (isBusyOrDisabled) {
             e.preventDefault();

package/{hooks → clickable}/use-clickable-props.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from "react";
+import { Options } from "./types";
 export interface UseClickableProps {
     analyticsCallback?: () => void;
     isDisabled?: boolean;
     isLoading?: boolean;
     type?: "submit";
 }
-export declare function useClickableProps<T extends HTMLAttributes<HTMLElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, isLoading, onClick, onKeyDown, onKeyUp, role, tabIndex, type, ...restProps }: UseClickableProps & T): T;
+export declare function useClickableProps<T extends HTMLAttributes<HTMLElement>>(props: UseClickableProps & T, options?: Options): T;

package/{hooks → clickable}/use-clickable-props.js

@@ -5,13 +5,14 @@ const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const _use_simulated_button_1 = require("./_use-simulated-button");
-function useClickableProps({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, isLoading, onClick, onKeyDown, onKeyUp, role, tabIndex, type, ...restProps }) {
+const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
+function useClickableProps(props, options = {}) {
+    const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, isLoading, onClick, onKeyDown, onKeyUp, role, tabIndex, type, ...restProps } = props;
     const isBusy = Boolean(isLoading || ariaBusy);
     const isDisabledOrAriaDisabled = Boolean(isDisabled || ariaDisabled);
     const isBusyOrDisabled = isBusy || isDisabledOrAriaDisabled;
     const isSubmitType = type === "submit";
     const isButton = isSubmitType || (0, is_not_nil_1.isNotNil)(onClick);
-    const _className = [isBusy && classes_1.CLASSES.IS_LOADING, isDisabledOrAriaDisabled && classes_1.CLASSES.IS_DISABLED, className];
     const simulatedButton = (0, _use_simulated_button_1._useSimulatedButton)({
         analyticsCallback,
         isClickable: !isBusyOrDisabled || isButton,
@@ -21,6 +22,7 @@ function useClickableProps({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDis
         onKeyUp,
         isSubmitType,
     });
+    const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy: isBusy || simulatedButton.isBusy, isDisabled: isDisabledOrAriaDisabled }, options);
     if (isButton) {
         return {
             "aria-busy": isBusy,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core-react",
-    "version": "11.54.0",
+    "version": "11.58.0",
     "description": "UXF Core",
     "author": "UX Fans s.r.o",
     "license": "MIT",
@@ -12,7 +12,7 @@
         "typecheck": "tsc --noEmit --skipLibCheck"
     },
     "dependencies": {
-        "@uxf/core": "11.54.0"
+        "@uxf/core": "11.58.0"
     },
     "peerDependencies": {
         "react": ">=18.2.0"

package/hooks/use-anchor-props.d.ts

@@ -1,8 +0,0 @@
-import { AnchorHTMLAttributes } from "react";
-export interface UseAnchorProps {
-    analyticsCallback?: () => void;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    type?: "submit";
-}
-export declare function useAnchorProps<T extends AnchorHTMLAttributes<HTMLAnchorElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, download, href, hrefLang, isLoading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role, tabIndex, target, type, ...restProps }: UseAnchorProps & T): T;

package/hooks/use-button-props.d.ts

@@ -1,6 +0,0 @@
-import { ButtonHTMLAttributes } from "react";
-export interface UseButtonProps {
-    analyticsCallback?: () => void;
-    loading?: boolean;
-}
-export declare function useButtonProps<T extends ButtonHTMLAttributes<HTMLButtonElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, autoFocus, analyticsCallback, className, disabled, formAction, formEncType, formMethod, formNoValidate, formTarget, loading, name, onClick, role, tabIndex, type, value, ...restProps }: UseButtonProps & T): T;