@uxf/ui 11.30.1 → 11.32.0

package/time-picker-input/time-picker-input.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./time-picker-input").TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/time-picker-input/time-picker-input.stories.js

@@ -23,25 +23,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const icon_1 = require("@uxf/ui//icon");
 const react_1 = __importStar(require("react"));
+const button_1 = require("../button");
 const action_1 = require("../utils/action");
 const time_picker_input_1 = require("./time-picker-input");
-exports.default = {
-    title: "UI/TimePickerInput",
-    component: time_picker_input_1.TimePickerInput,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
-    const testTimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" },
         react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", label: "\u010Cas \u010Dehokoliv", name: "time", onChange: onChange, placeholder: "Zadejte \u010Das...", value: value }),
         react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", isClearable: true, label: "\u010Cas \u010Dehokoliv vlastn\u00ED ikona", name: "time", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: value }),
         react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-disabled", isDisabled: true, label: "\u010Cas disabled", name: "time-disabled", onChange: onChange, value: value }),
         react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-readonly", isReadOnly: true, label: "\u010Cas readonly", name: "time-readonly", onChange: onChange, value: value }),
-        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-invalid", isClearable: true, isInvalid: true, label: "\u010Cas invalid", name: "time-invalid", onChange: onChange, value: value })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testTimePickers)));
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-invalid", isClearable: true, isInvalid: true, label: "\u010Cas invalid", name: "time-invalid", onChange: onChange, value: value }),
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { CustomTimePicker: (props) => (react_1.default.createElement(button_1.Button, { onClick: () => {
+                    props.onChange("15:00:00");
+                    props.onClose();
+                } }, "15:00")), id: "custom-picker", label: "Custom picker", name: "custom-picker", onChange: onChange, value: value })));
 }
-exports.Default = Default;

package/toggle/toggle.js

@@ -34,6 +34,6 @@ exports.Toggle = (0, react_2.forwardRef)((props, ref) => {
         react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, `uxf-toggle__wrapper--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
             react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, `uxf-toggle--size-${(_d = props.size) !== null && _d !== void 0 ? _d : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
                 react_2.default.createElement("span", { className: "uxf-toggle__inner" })),
-            react_2.default.createElement(react_1.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
+            react_2.default.createElement(react_1.Switch.Label, { className: "uxf-toggle__label", hidden: props.hiddenLabel }, props.label))));
 });
 exports.Toggle.displayName = "UxfUiToggle";

package/toggle/toggle.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const index_1 = require("./index");
@@ -35,12 +35,11 @@ function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, name: "toggle" }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? - size sm", onChange: onChange, value: checked, name: "toggle", size: "sm" }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, isDisabled: true, name: "toggle-disabled" }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, hiddenLabel: true, name: "toggle-hidden-label" }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: onChange, value: checked, variant: "reversed", name: "toggle-reversed" })));
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", name: "toggle", onChange: onChange, value: checked }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? - size sm", name: "toggle", onChange: onChange, size: "sm", value: checked }),
+        react_1.default.createElement(index_1.Toggle, { isDisabled: true, label: "Opravdu?", name: "toggle-disabled", onChange: onChange, value: checked }),
+        react_1.default.createElement(index_1.Toggle, { hiddenLabel: true, label: "Opravdu?", name: "toggle-hidden-label", onChange: onChange, value: checked }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", name: "toggle-reversed", onChange: onChange, value: checked, variant: "reversed" })));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "w-1/2 gap-4 p-20" }, storyToggles)));
 }
-exports.Default = Default;

package/tooltip/tooltip.js

@@ -36,12 +36,12 @@ const STATIC_SIDES = {
     left: "right",
 };
 exports.Tooltip = (0, react_2.forwardRef)(({ children, className, content, style, ...options }, ref) => {
-    var _a, _b;
+    var _a, _b, _c;
     const arrowRef = (0, react_2.useRef)(null);
     const tooltip = (0, use_tooltip_1.useTooltip)({ arrowRef, ...options });
     const arrowX = (_a = tooltip.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x;
     const arrowY = (_b = tooltip.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y;
-    const staticSide = STATIC_SIDES[tooltip.placement.split("-")[0]];
+    const staticSide = STATIC_SIDES[(_c = tooltip.placement.split("-").at(0)) !== null && _c !== void 0 ? _c : "top"];
     const stableRef = (0, react_2.useMemo)(() => (0, compose_refs_1.composeRefs)(ref, tooltip.refs.setReference, children.ref), [ref, tooltip.refs.setReference, children]);
     return (react_2.default.createElement(react_2.default.Fragment, null,
         (0, react_2.cloneElement)(children, tooltip.getReferenceProps({

package/tooltip/tooltip.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const chip_1 = require("../chip");
 const tooltip_1 = require("./tooltip");
@@ -16,4 +16,3 @@ function Default() {
     return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" }, sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", key: placement, placement: placement },
         react_1.default.createElement(chip_1.Chip, { color: "green" }, placement))))));
 }
-exports.Default = Default;

package/tooltip/use-tooltip.d.ts

@@ -35,7 +35,7 @@ export declare function useTooltip(options: TooltipOptions): {
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
@@ -43,12 +43,12 @@ export declare function useTooltip(options: TooltipOptions): {
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
-    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
-    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-    getItemProps: (userProps?: (Omit<import("react").HTMLProps<HTMLElement>, "active" | "selected"> & {
-        active?: boolean | undefined;
-        selected?: boolean | undefined;
-    }) | undefined) => Record<string, unknown>;
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<import("react").HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
     open: boolean;
     setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/tooltip/use-tooltip.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTooltip = void 0;
+exports.useTooltip = useTooltip;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("react");
 function useTooltip(options) {
@@ -33,4 +33,3 @@ function useTooltip(options) {
         ...data,
     }), [open, setOpen, interactions, data]);
 }
-exports.useTooltip = useTooltip;

package/types/file-response.d.ts

@@ -1,5 +1,5 @@
+export type UploadProgressEvent = Pick<ProgressEvent, "lengthComputable" | "loaded" | "total">;
 export interface UploadOptions {
     abortController?: AbortController;
     onUploadProgress?: (progressEvent: UploadProgressEvent) => void;
 }
-export type UploadProgressEvent = Pick<ProgressEvent, "lengthComputable" | "loaded" | "total">;

package/typography/typography.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 exports.default = {
     title: "UI/Typography",
@@ -25,4 +25,3 @@ function Default() {
         react_1.default.createElement("p", { className: "uxf-typo-medium2" }, ".uxf-typo-medium2"),
         react_1.default.createElement("p", { className: "uxf-typo-overline" }, ".uxf-typo-overline")));
 }
-exports.Default = Default;

package/utils/action.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.action = void 0;
+exports.action = action;
 function action(name, handler) {
     return function (...args) {
         // eslint-disable-next-line no-console
@@ -8,4 +8,3 @@ function action(name, handler) {
         handler(...args);
     };
 }
-exports.action = action;

package/utils/files/get-file-icon.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIconNameFromFileExtension = void 0;
+exports.getIconNameFromFileExtension = getIconNameFromFileExtension;
 function getIconNameFromFileExtension(extension) {
     switch (extension) {
         case "jpg":
@@ -16,4 +16,3 @@ function getIconNameFromFileExtension(extension) {
             return "file";
     }
 }
-exports.getIconNameFromFileExtension = getIconNameFromFileExtension;

package/utils/files/get-file-url.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFileUrl = void 0;
+exports.getFileUrl = getFileUrl;
 function getFileUrl(domain, file) {
     return `${domain}/upload/${file.namespace || "default"}/${file.uuid[0]}/${file.uuid[1]}/${file.uuid}.${file.extension}`;
 }
-exports.getFileUrl = getFileUrl;

package/utils/get-dropzone-state.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDropzoneState = void 0;
+exports.getDropzoneState = getDropzoneState;
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 function getDropzoneState(files) {
     const errors = files
         .filter((file) => file.error)
         .map((file) => file.error)
         .join("; ");
-    const isUploading = Boolean(files.find((file) => file.id < 0));
+    const isUploading = (0, is_not_nil_1.isNotNil)(files.find((file) => file.id < 0));
     if (errors) {
         return {
             errorMessage: errors,
@@ -20,4 +21,3 @@ function getDropzoneState(files) {
     }
     return { status: "OK" };
 }
-exports.getDropzoneState = getDropzoneState;

package/utils/mocks/upload-file.mock.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uploadFile = void 0;
+exports.uploadFile = uploadFile;
 function getRandomUuid() {
     return "00000000-0000-0000-0000-000000000000"
         .split("-")
@@ -44,4 +44,3 @@ function uploadFile(file, uploadOptions) {
         }, time);
     });
 }
-exports.uploadFile = uploadFile;

package/utils/snap-test.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.snapTest = void 0;
+const react_1 = require("@testing-library/react");
 const dayjs_1 = __importDefault(require("dayjs"));
-const react_1 = __importDefault(require("react"));
-const react_test_renderer_1 = require("react-test-renderer");
+const react_2 = __importDefault(require("react"));
 const get_provider_config_1 = require("../_private-utils/get-provider-config");
 const context_1 = require("../context");
 const snapTest = (name, component) => {
@@ -15,8 +15,8 @@ const snapTest = (name, component) => {
         jest.setSystemTime((0, dayjs_1.default)().year(2008).month(1).date(22).hour(22).minute(4).second(35).millisecond(0).toDate());
     });
     it(name, () => {
-        const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() }, component)).toJSON();
-        expect(tree).toMatchSnapshot();
+        const { container } = (0, react_1.render)(react_2.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() }, component));
+        expect(container).toMatchSnapshot();
     });
 };
 exports.snapTest = snapTest;

package/utils/storybook-config.d.ts

@@ -5,7 +5,6 @@ import { ChipColor } from "../chip";
 import { InputGroupSizes } from "../input/theme";
 import { LozengeColor, LozengeVariant } from "../lozenge";
 import { MessageColor, MessageVariant } from "../message/theme";
-export declare const defaultConfig: StorybookConfig;
 export interface StorybookConfig {
     AlertBubble: {
         colors: AlertBubbleColor[];
@@ -35,6 +34,7 @@ export interface StorybookConfig {
     };
     Select: any;
 }
+export declare const defaultConfig: StorybookConfig;
 export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];
 interface StorybookContextProviderProps {
     config: StorybookConfig;

package/utils/storybook-config.js

@@ -23,7 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StorybookContextProvider = exports.useStorybookConfig = exports.defaultConfig = void 0;
+exports.defaultConfig = void 0;
+exports.useStorybookConfig = useStorybookConfig;
+exports.StorybookContextProvider = StorybookContextProvider;
 const react_1 = __importStar(require("react"));
 exports.defaultConfig = {
     AlertBubble: {
@@ -60,8 +62,6 @@ const Context = (0, react_1.createContext)(exports.defaultConfig);
 function useStorybookConfig(key) {
     return (0, react_1.useContext)(Context)[key];
 }
-exports.useStorybookConfig = useStorybookConfig;
 function StorybookContextProvider(props) {
     return react_1.default.createElement(Context.Provider, { value: props.config }, props.children);
 }
-exports.StorybookContextProvider = StorybookContextProvider;