@uxf/ui 11.56.0 → 11.58.1

package/button/README.md

@@ -36,4 +36,16 @@ declare module "@uxf/ui/icon/theme" {
         inverted: true;
     }
 }
+```
+
+### Loading button
+
+Button will be in loading state when promise is returned from `onClick` handler.
+
+Example: [here](https://loading-button.fe.uxf.dev/docs/ui/button#example-LoadingButton)
+
+```tsx
+const clickHandler = () => new Promise((resolve) => setTimeout(resolve, 1000));
+
+<Button onClick={clickHandler}>Loading button</Button>
 ```

package/button/button.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { UseAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
 import React, { AnchorHTMLAttributes } from "react";
 import { NextLink } from "../utils/next-link";

package/button/button.js

@@ -25,19 +25,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
+const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
+const omit_1 = require("@uxf/core/utils/omit");
 const react_1 = __importStar(require("react"));
 exports.Button = (0, react_1.forwardRef)((props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { as = "a", color, isIconButton, isFullWidth, size, variant, className, isDisabled, isLoading, ...restProps } = props;
+    var _a, _b, _c, _d;
+    const as = (_a = props.as) !== null && _a !== void 0 ? _a : "a";
     const Component = as;
-    const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
-        ...restProps,
-        isDisabled,
-        isLoading,
-        className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isDisabled && "uxf-button--is-disabled", isLoading && "uxf-button--is-loading", isIconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
-    });
-    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps }, typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children)));
+    const anchorProps = (0, use_anchor_props_1.useAnchorProps)(props, { classNamePrefix: "uxf-button" });
+    const className = (0, cx_1.cx)(anchorProps.className, "uxf-button", `uxf-button--color-${(_b = props.color) !== null && _b !== void 0 ? _b : "default"}`, `uxf-button--size-${(_c = props.size) !== null && _c !== void 0 ? _c : "default"}`, `uxf-button--variant-${(_d = props.variant) !== null && _d !== void 0 ? _d : "default"}`, props.isIconButton && "uxf-button--icon-button", props.isFullWidth && "uxf-button--full-width");
+    const componentProps = (0, omit_1.omit)(anchorProps, [
+        "isDisabled",
+        "isLoading",
+        "variant",
+        "color",
+        "size",
+        "isIconButton",
+        "isFullWidth",
+        "as",
+    ]);
+    return (react_1.default.createElement(Component, { ref: ref, ...componentProps, className: className }, typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children)));
 });
 exports.Button.displayName = "UxfUiButton";

package/button/button.stories.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 export declare function Basic(): React.JSX.Element;
 export declare function Default(): React.JSX.Element;
+export declare function LoadingButton(): React.JSX.Element;

package/button/button.stories.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Basic = Basic;
 exports.Default = Default;
+exports.LoadingButton = LoadingButton;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
@@ -86,3 +87,8 @@ function Default() {
         react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: onClick, size: size, variant: variant }, "Full width"),
         react_1.default.createElement("hr", null))))))))))));
 }
+function LoadingButton() {
+    const clickHandler = () => new Promise((resolve) => setTimeout(resolve, 3000));
+    return (react_1.default.createElement("div", { className: "p-4" },
+        react_1.default.createElement(button_1.Button, { onClick: clickHandler }, "Loading button")));
+}

package/button-list/button-list.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonList = void 0;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
-const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
+const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_empty_1 = require("@uxf/core/utils/is-empty");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");

package/checkbox/checkbox.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));

package/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { UseAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import { ChipColor, ChipSize, ChipVariant } from "@uxf/ui/chip/theme";
 import React, { AnchorHTMLAttributes, MouseEventHandler } from "react";
 import { NextLink } from "../utils/next-link";

package/chip/chip.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
-const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
+const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));

package/color-radio/color-radio.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorRadio = void 0;
-const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));

package/dropdown/dropdown.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { UseAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 import { NextLink } from "../utils/next-link";
 export interface DropdownItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {

package/dropdown/dropdown.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
-const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
+const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const Item = (0, react_1.forwardRef)((props, ref) => {

package/flash-messages/flash-message.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashMessage = void 0;
-const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
 const react_1 = __importStar(require("react"));
 exports.FlashMessage = (0, react_1.forwardRef)((props, ref) => {
     (0, react_1.useEffect)(() => {

package/flash-messages/flash-messages.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashMessages = void 0;
 const react_1 = require("@headlessui/react");
-const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_2 = __importStar(require("react"));
 const flash_message_1 = require("./flash-message");

package/list-item/list-item.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { UseAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import React, { AnchorHTMLAttributes, ReactNode } from "react";
 import { IconName } from "../icon/types";
 import { NextLink } from "../utils/next-link";

package/list-item/list-item.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = void 0;
-const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
+const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.56.0",
+    "version": "11.58.1",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.54.0",
-        "@uxf/core-react": "11.54.0",
+        "@uxf/core": "11.58.0",
+        "@uxf/core-react": "11.58.1",
         "@uxf/datepicker": "11.50.0",
-        "@uxf/styles": "11.54.0",
+        "@uxf/styles": "11.58.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",

package/radio/radio.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
-const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));

package/text-link/text-link.d.ts

@@ -1,4 +1,4 @@
-import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { UseAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import { TextLinkVariants } from "@uxf/ui/text-link/theme";
 import React, { AnchorHTMLAttributes } from "react";
 import { NextLink } from "../utils/next-link";

package/text-link/text-link.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLink = void 0;
-const use_anchor_props_1 = require("@uxf/core-react/hooks/use-anchor-props");
+const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 exports.TextLink = (0, react_1.forwardRef)((props, ref) => {