@uxf/ui 11.88.2 → 11.89.0

package/content/content-schema.d.ts

@@ -1,3 +1,4 @@
+import { AnyJSON } from "@uxf/core/types";
 export interface ContentSchema {
-    wysiwyg: any;
+    wysiwyg: AnyJSON;
 }

package/content/types.d.ts

@@ -1,3 +1,4 @@
+import { AnyObject } from "@uxf/core/types";
 import { ContentSchema } from "@uxf/ui/content/content-schema";
 import { FC, ReactNode } from "react";
 import { UseControllerProps } from "react-hook-form";
@@ -6,7 +7,7 @@ interface ContentFormProps<TYPE extends ContentType> extends UseControllerProps<
     type: TYPE;
     index: number;
     onRemove: () => void;
-    TypeInputProps: any;
+    TypeInputProps: AnyObject;
 }
 export type ContentFormComponent<TYPE extends ContentType> = FC<ContentFormProps<TYPE>> & {
     getConfig: () => {

package/context/context.d.ts

@@ -11,7 +11,7 @@ export type UiContextType = {
         }>;
     };
     rasterImage: {
-        breakpoints: Record<string, string>;
+        breakpoints: Partial<Record<string, string>>;
     };
 };
 export declare const UiContext: import("react").Context<UiContextType | undefined>;

package/create-component-preview-page/create-component-preview-page.d.ts

@@ -1,3 +1,4 @@
+import { AnyObject } from "@uxf/core/types";
 import React from "react";
 import { components } from "../components";
 type Components = typeof components;
@@ -5,7 +6,7 @@ interface CreateComponentPreviewPageProps {
     componentName: keyof Components | null;
 }
 export declare function CreateComponentPreviewPage(props: CreateComponentPreviewPageProps): React.JSX.Element;
-export declare function getServerSideProps(ctx: any): {
+export declare function getServerSideProps(ctx: AnyObject): {
     props: {
         componentName: any;
     };

package/dialog/dialog.d.ts

@@ -1,7 +1,7 @@
 import { UseFloatingReturn } from "@floating-ui/react";
 import { DialogVariants } from "@uxf/ui/dialog/theme";
 import React, { FC, HTMLProps, ReactNode, Ref } from "react";
-type GetFloatingElementProps = (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+type GetFloatingElementProps = (userProps?: HTMLProps<HTMLElement>) => Partial<Record<string, unknown>>;
 export type DialogVariant = keyof DialogVariants;
 export interface DialogProps {
     children?: ReactNode;

package/icon/icon.d.ts

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from "react";
+import { AnyObject } from "@uxf/core/types";
+import React, { CSSProperties, FunctionComponent } from "react";
 import { IconColor } from "./theme";
 import { IconName } from "./types";
 type NameOrComponentType = {
@@ -6,7 +7,7 @@ type NameOrComponentType = {
     Component?: never;
 } | {
     name?: never;
-    Component: any;
+    Component: FunctionComponent<AnyObject>;
 };
 export type IconProps = {
     "aria-label"?: string;

package/icon/icon.js

@@ -55,7 +55,7 @@ exports.Icon = (0, react_1.forwardRef)((props, ref) => {
     if (CustomComponent) {
         return (react_1.default.createElement(CustomComponent, { "aria-label": props["aria-label"], className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style }));
     }
-    if (props.name && props.name in componentContext.iconsConfig) {
+    if (props.name in componentContext.iconsConfig) {
         const icon = componentContext.iconsConfig[props.name];
         return (react_1.default.createElement("svg", { "aria-label": props["aria-label"], className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${icon.w} ${icon.h}` },
             react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));

package/input/index.d.ts

@@ -1,4 +1,5 @@
 import { InputArrowIcon } from "./input-arrow-icon";
+import { InputRemoveButton } from "./input-remove-button";
 export type { InputProps } from "./input";
 export type { InputElementProps } from "./input-element";
 export type { InputRemoveButtonProps } from "./input-remove-button";
@@ -8,7 +9,7 @@ export declare const Input: import("react").ForwardRefExoticComponent<import("./
     Element: import("react").ForwardRefExoticComponent<import("./input-element").InputElementProps & import("react").RefAttributes<HTMLInputElement>>;
     LeftAddon: import("react").FC<import("./input-left-addon").InputLeftAddonProps>;
     LeftElement: import("react").FC<import("./input-left-element").InputLeftElementProps>;
-    RemoveButton: import("react").FC<import("./input-remove-button").InputRemoveButtonProps>;
+    RemoveButton: typeof InputRemoveButton;
     RightAddon: import("react").FC<import("./input-right-addon").InputRightAddonProps>;
     RightElement: import("react").FC<import("./input-right-element").InputRightElementProps>;
 };

package/input/input-remove-button.d.ts

@@ -1,5 +1,8 @@
-import { FC } from "react";
-export interface InputRemoveButtonProps {
-    onChange?: (value: any) => void;
+import React from "react";
+export interface InputRemoveButtonProps<Value> {
+    onChange?: (value: Value | null) => void;
+}
+export declare function InputRemoveButton<Value>(props: InputRemoveButtonProps<Value>): React.JSX.Element;
+export declare namespace InputRemoveButton {
+    var displayName: string;
 }
-export declare const InputRemoveButton: FC<InputRemoveButtonProps>;

package/input/input-remove-button.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputRemoveButton = void 0;
+exports.InputRemoveButton = InputRemoveButton;
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
-const InputRemoveButton = (props) => {
+function InputRemoveButton(props) {
     const onRemoveClick = (e) => {
         var _a;
         e.preventDefault();
@@ -24,6 +24,5 @@ const InputRemoveButton = (props) => {
     return (react_1.default.createElement("button", { className: "uxf-input__remove-button", onClick: onRemoveClick, onKeyDown: onRemoveKeyDown, type: "button" },
         react_1.default.createElement("span", { className: "uxf-input__remove-button-inner" },
             react_1.default.createElement(icon_1.Icon, { className: "uxf-input__remove-button-icon", name: "xmarkLarge" }))));
-};
-exports.InputRemoveButton = InputRemoveButton;
-exports.InputRemoveButton.displayName = "UxfUiInputRemoveButton";
+}
+InputRemoveButton.displayName = "UxfUiInputRemoveButton";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.88.2",
+    "version": "11.89.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.27.16",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.88.0",
-        "@uxf/core-react": "11.88.0",
+        "@uxf/core": "11.89.0",
+        "@uxf/core-react": "11.89.0",
         "@uxf/datepicker": "11.88.2",
-        "@uxf/styles": "11.88.0",
+        "@uxf/styles": "11.89.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.19",
         "react-dropzone": "14.3.8"

package/raster-image/img-sources.d.ts

@@ -7,7 +7,7 @@ export type ImageSourcesOptions = Omit<GetImgSrcSetOptions, "quality" | "toForma
 };
 export interface ImageSourcesProps {
     breakpointIndex?: number;
-    breakpoints?: string[];
+    breakpoints?: (string | undefined)[];
     height: Dimension;
     options?: ImageSourcesOptions;
     quality?: Quality;

package/raster-image/img-sources.js

@@ -10,7 +10,7 @@ const is_empty_1 = require("@uxf/core/utils/is-empty");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importDefault(require("react"));
 function ImgSources(props) {
-    var _a, _b;
+    var _a, _b, _c;
     if ((0, image_1.isSrcString)(props.src) && (0, is_empty_1.isEmpty)(props.src)) {
         return null;
     }
@@ -21,17 +21,20 @@ function ImgSources(props) {
         return null;
     }
     let media;
-    if ((0, is_not_nil_1.isNotNil)(props.breakpoints) && (0, is_not_nil_1.isNotNil)(props.breakpointIndex)) {
-        media = `(min-width: ${props.breakpoints[props.breakpointIndex]})`;
+    if ((0, is_not_nil_1.isNotNil)(props.breakpointIndex)) {
+        const breakpoint = (_a = props.breakpoints) === null || _a === void 0 ? void 0 : _a.at(props.breakpointIndex);
+        if ((0, is_not_nil_1.isNotNil)(breakpoint)) {
+            media = `(min-width: ${breakpoint})`;
+        }
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(hide_1.Hide, { when: Boolean((_a = props.options) === null || _a === void 0 ? void 0 : _a.isAvifDisabled) },
+        react_1.default.createElement(hide_1.Hide, { when: Boolean((_b = props.options) === null || _b === void 0 ? void 0 : _b.isAvifDisabled) },
             react_1.default.createElement("source", { media: media, srcSet: (0, image_1.getImgSrcSet)(props.src, props.width, props.height, {
                     ...props.options,
                     quality: (0, image_1.getImgQuality)(props.quality, "avif"),
                     toFormat: "avif",
                 }), type: "image/avif" })),
-        react_1.default.createElement(hide_1.Hide, { when: Boolean((_b = props.options) === null || _b === void 0 ? void 0 : _b.isWebPDisabled) },
+        react_1.default.createElement(hide_1.Hide, { when: Boolean((_c = props.options) === null || _c === void 0 ? void 0 : _c.isWebPDisabled) },
             react_1.default.createElement("source", { media: media, srcSet: (0, image_1.getImgSrcSet)(props.src, props.width, props.height, {
                     ...props.options,
                     quality: (0, image_1.getImgQuality)(props.quality, "webp"),

package/raster-image/raster-image.d.ts

@@ -15,7 +15,7 @@ type RasterImageDimensions = {
 };
 export type RasterImageProps = {
     alt: string;
-    breakpoints?: Record<string, string>;
+    breakpoints?: Partial<Record<string, string>>;
     className?: string;
     heights?: number[];
     imgClassName?: string;

package/raster-image/responsive-img-sources.d.ts

@@ -3,7 +3,7 @@ import type { ImageSource } from "@uxf/core/utils/resizer";
 import React from "react";
 import { ImageSourcesOptions } from "./img-sources";
 export interface ResponsiveImgSourcesProps {
-    breakpoints?: Record<string, string>;
+    breakpoints?: Partial<Record<string, string>>;
     height: number | undefined;
     heights?: number[];
     options?: ImageSourcesOptions;

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

@@ -8,6 +8,7 @@ export declare const OUTPUT_TIME_FORMAT = "HH:mm:ss";
 interface CustomTimePickerProps extends ControlProps<TimeString | null> {
     onClose: () => void;
 }
+export declare const TIME_PICKER_INPUT_COMPONENT_NAME = "timePickerInput";
 export interface TimePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
     placeholder?: string;
     triggerElement?: ReactNode;

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

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimePickerInput = exports.OUTPUT_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = void 0;
+exports.TimePickerInput = exports.TIME_PICKER_INPUT_COMPONENT_NAME = exports.OUTPUT_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = void 0;
 const is_time_string_1 = require("@uxf/core/date/is-time-string");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
@@ -68,6 +68,7 @@ function getSelectedTime(value) {
     }
     return null;
 }
+exports.TIME_PICKER_INPUT_COMPONENT_NAME = "timePickerInput";
 exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const onChange = props.onChange;
@@ -88,6 +89,6 @@ exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     }, [onChange]);
     const value = getValue(props.value);
     const selectedTime = getSelectedTime(props.value);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: props.placeholder, ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomTimePicker) ? (react_1.default.createElement(props.CustomTimePicker, { onChange: props.onChange, onClose: close, value: (0, is_time_string_1.isTimeString)(props.value) ? props.value : null })) : (react_1.default.createElement(time_picker_1.TimePicker, { onChange: onTimePickerChange, onClosePopover: close, preventScroll: true, selectedTime: selectedTime }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, "data-component": exports.TIME_PICKER_INPUT_COMPONENT_NAME, onChange: onInputChange, placeholder: props.placeholder, ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomTimePicker) ? (react_1.default.createElement(props.CustomTimePicker, { onChange: props.onChange, onClose: close, value: (0, is_time_string_1.isTimeString)(props.value) ? props.value : null })) : (react_1.default.createElement(time_picker_1.TimePicker, { onChange: onTimePickerChange, onClosePopover: close, preventScroll: true, selectedTime: selectedTime }))));
 });
 exports.TimePickerInput.displayName = "UxfUiTimePickerInput";

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

@@ -42,12 +42,12 @@ const time_picker_input_1 = require("./time-picker-input");
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
-    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 }),
+    return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", label: "\u010Cas \u010Dehokoliv", name: "default", 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 }),
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "disabled", isDisabled: true, label: "\u010Cas disabled", name: "disabled", onChange: onChange, value: value }),
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "readonly", isReadOnly: true, label: "\u010Cas readonly", name: "readonly", onChange: onChange, value: value }),
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "invalid", isClearable: true, isInvalid: true, label: "\u010Cas invalid", name: "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();

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFileUrl = getFileUrl;
+const throw_error_1 = require("@uxf/core/utils/throw-error");
 function getFileUrl(domain, file) {
-    return `${domain}/upload/${file.namespace || "default"}/${file.uuid[0]}/${file.uuid[1]}/${file.uuid}.${file.extension}`;
+    var _a, _b;
+    return `${domain}/upload/${file.namespace || "default"}/${(_a = file.uuid.at(0)) !== null && _a !== void 0 ? _a : (0, throw_error_1.throwError)("Invalid UUID")}/${(_b = file.uuid.at(1)) !== null && _b !== void 0 ? _b : (0, throw_error_1.throwError)("Invalid UUID")}/${file.uuid}.${file.extension}`;
 }

package/utils/storybook-config.d.ts

@@ -1,3 +1,4 @@
+import { AnyObject } from "@uxf/core/types";
 import { ButtonColor, ButtonSize, ButtonVariant } from "@uxf/ui/button";
 import React, { ReactNode } from "react";
 import { AlertBubbleColor, AlertBubbleSize } from "../alert-bubble";
@@ -37,7 +38,7 @@ export interface StorybookConfig {
     Message: {
         colors: MessageColor[];
     };
-    Select: any;
+    Select: AnyObject;
 }
 export declare const defaultConfig: StorybookConfig;
 export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];