@uxf/ui 11.122.0 → 11.122.1

package/checkbox-list/checkbox-list.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-import { CheckboxListProps, CheckboxListValueId } from "./types";
-export declare const CheckboxList: React.ForwardRefExoticComponent<CheckboxListProps<CheckboxListValueId, import("./types").CheckboxListOption<CheckboxListValueId>> & React.RefAttributes<HTMLDivElement>>;
+import { ReactElement, RefAttributes } from "react";
+import { CheckboxListOption, CheckboxListProps, CheckboxListValueId } from "./types";
+export declare const CheckboxList: <ValueId extends CheckboxListValueId = CheckboxListValueId, Option extends CheckboxListOption<ValueId> = CheckboxListOption<ValueId>>(props: CheckboxListProps<ValueId, Option> & RefAttributes<HTMLDivElement>) => ReactElement | null;

package/checkbox-list/checkbox-list.js

@@ -40,7 +40,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const checkbox_input_1 = require("../checkbox-input");
 const form_component_1 = require("../form-component");
-exports.CheckboxList = (0, react_1.forwardRef)((props, ref) => {
+function CheckboxListInner(props, ref) {
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
@@ -58,5 +58,6 @@ exports.CheckboxList = (0, react_1.forwardRef)((props, ref) => {
             return (react_1.default.createElement("li", { key: option.id },
                 react_1.default.createElement(checkbox_input_1.CheckboxInput, { id: `${id}-${option.id}`, isDisabled: option.isDisabled || props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, key: option.id, label: option.label, name: props.name, onBlur: props.onBlur, onChange: (value) => onChange(option.id, value || false), onFocus: props.onFocus, value: (_a = props.value) === null || _a === void 0 ? void 0 : _a.includes(option.id) })));
         }))));
-});
+}
+exports.CheckboxList = (0, react_1.forwardRef)(CheckboxListInner);
 exports.CheckboxList.displayName = "UxfUiCheckboxList";

package/checkbox-list/types.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from "react";
 import { FormControlProps } from "../types";
 export type CheckboxListValueId = number | string;
-export type CheckboxListOption<T = CheckboxListValueId> = {
+export type CheckboxListOption<T extends CheckboxListValueId> = {
     isDisabled?: boolean;
     id: T;
     label: ReactNode;
 };
-export interface CheckboxListProps<ValueId = CheckboxListValueId, Option = CheckboxListOption<ValueId>> extends FormControlProps<ValueId[] | null> {
+export interface CheckboxListProps<ValueId extends CheckboxListValueId = CheckboxListValueId, Option extends CheckboxListOption<ValueId> = CheckboxListOption<ValueId>> extends FormControlProps<ValueId[] | null> {
     className?: string;
     label: ReactNode;
     hasHiddenLabel?: boolean;

package/multi-combobox/multi-combobox.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { MultiComboboxOption, MultiComboboxProps, MultiComboboxValueId } from "./types";
+import { ReactElement, RefAttributes } from "react";
+import { MultiComboboxOption, MultiComboboxProps, MultiComboboxRef, MultiComboboxValueId } from "./types";
 export declare const MULTI_COMBOBOX_COMPONENT_NAME = "multiCombobox";
-export declare const MultiCombobox: React.ForwardRefExoticComponent<MultiComboboxProps<MultiComboboxValueId, MultiComboboxOption<MultiComboboxValueId>> & React.RefAttributes<HTMLInputElement>>;
+export declare const MultiCombobox: <ValueId extends MultiComboboxValueId = MultiComboboxValueId, Option extends MultiComboboxOption<ValueId> = MultiComboboxOption<ValueId>>(props: MultiComboboxProps<ValueId, Option> & RefAttributes<MultiComboboxRef>) => ReactElement | null;

package/multi-combobox/multi-combobox.js

@@ -101,7 +101,7 @@ function useMultiComboboxOptions(query, props) {
     };
 }
 exports.MULTI_COMBOBOX_COMPONENT_NAME = "multiCombobox";
-exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
+function MultiComboboxInner(props, ref) {
     var _a, _b, _c, _d, _e, _f, _g;
     const t = (0, translations_1.useUxfTranslation)();
     const generatedId = (0, react_3.useId)();
@@ -161,7 +161,7 @@ exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
     const isNotInteractive = props.isDisabled || props.isReadOnly;
-    return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), "data-component": exports.MULTI_COMBOBOX_COMPONENT_NAME, "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: changeHandler, style: props.style, value: selectedOptions }, (renderProps) => {
+    return (react_3.default.createElement(react_2.Combobox, { as: "div", by: (a, b) => a.id === b.id, className: (0, cx_1.cx)("uxf-form-component uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), "data-component": exports.MULTI_COMBOBOX_COMPONENT_NAME, "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: changeHandler, style: props.style, value: selectedOptions }, (renderProps) => {
         var _a, _b;
         return (react_3.default.createElement(react_3.default.Fragment, null,
             react_3.default.createElement("div", { className: "uxf-form-component__label" },
@@ -181,5 +181,6 @@ exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
                 react_3.default.createElement(show_1.Show, { when: Boolean(props.helperText) },
                     react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))));
     }));
-});
+}
+exports.MultiCombobox = (0, react_3.forwardRef)(MultiComboboxInner);
 exports.MultiCombobox.displayName = "UxfUiMultiCombobox";

package/multi-combobox/types.d.ts

@@ -5,15 +5,15 @@ import { ChipColor } from "../chip";
 import { IconName } from "../icon/types";
 import { FormControlProps } from "../types";
 export type MultiComboboxValueId = number | string;
-export type MultiComboboxValue<ValueId = MultiComboboxValueId> = {
+export type MultiComboboxValue<ValueId extends MultiComboboxValueId> = {
     id: ValueId;
     label: string;
 };
-export interface MultiComboboxOption<ValueId = MultiComboboxValueId> extends MultiComboboxValue<ValueId> {
+export interface MultiComboboxOption<ValueId extends MultiComboboxValueId> extends MultiComboboxValue<ValueId> {
     color?: ChipColor;
     disabled?: boolean;
 }
-export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = MultiComboboxOption<ValueId>> extends FormControlProps<Option[] | null> {
+export interface MultiComboboxProps<ValueId extends MultiComboboxValueId = MultiComboboxValueId, Option extends MultiComboboxOption<ValueId> = MultiComboboxOption<ValueId>> extends FormControlProps<Option[] | null> {
     allOptionsSelectedMessage?: string;
     className?: string;
     dropdownClassName?: string;

package/multi-select/multi-select.d.ts

@@ -1,4 +1,5 @@
-import React from "react";
-import { MultiSelectOption, MultiSelectProps } from "./types";
+import { SelectableId } from "@uxf/core/types";
+import { ReactElement, RefAttributes } from "react";
+import { MultiSelectOption, MultiSelectProps, MultiSelectTypeRef } from "./types";
 export declare const MULTI_SELECT_COMPONENT_NAME = "multiSelect";
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<import("@uxf/core/types").SelectableId, MultiSelectOption<import("@uxf/core/types").SelectableId>> & React.RefAttributes<HTMLDivElement>>;
+export declare const MultiSelect: <ValueId extends SelectableId = SelectableId, Option extends MultiSelectOption<ValueId> = MultiSelectOption<ValueId>>(props: MultiSelectProps<ValueId, Option> & RefAttributes<MultiSelectTypeRef>) => ReactElement | null;

package/multi-select/multi-select.js

@@ -83,7 +83,7 @@ function Options(props) {
 }
 Options.displayName = "UxfUiMultiSelectOptions";
 exports.MULTI_SELECT_COMPONENT_NAME = "multiSelect";
-exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
+function MultiSelectInner(props, ref) {
     var _a, _b, _c, _d, _e, _f;
     const t = (0, translations_1.useUxfTranslation)();
     const generatedId = (0, react_3.useId)();
@@ -146,5 +146,6 @@ exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
                 react_3.default.createElement(show_1.Show, { when: Boolean(props.helperText) },
                     react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))));
     }));
-});
+}
+exports.MultiSelect = (0, react_3.forwardRef)(MultiSelectInner);
 exports.MultiSelect.displayName = "UxfUiMultiSelect";

package/multi-select/multi-select.stories.js

@@ -80,8 +80,8 @@ function OnlyForE2ETests() {
     const [value, setValue] = (0, react_1.useState)(null);
     const [partialValue, setPartialValue] = (0, react_1.useState)(null);
     return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
-        react_1.default.createElement(multi_select_1.MultiSelect, { label: "Stav", name: "stav", onChange: (v) => setValue(v), options: e2eOptions, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(multi_select_1.MultiSelect, { label: "Stav", name: "stav", onChange: setValue, options: e2eOptions, placeholder: "Vyberte...", value: value }),
         value !== null && react_1.default.createElement("div", { "data-testid": "selected-value" }, value.join(",")),
-        react_1.default.createElement(multi_select_1.MultiSelect, { label: "Stav (partial)", name: "stav-partial", onChange: (v) => setPartialValue(v), options: e2ePartialOptions, placeholder: "Vyberte...", value: partialValue }),
+        react_1.default.createElement(multi_select_1.MultiSelect, { label: "Stav (partial)", name: "stav-partial", onChange: setPartialValue, options: e2ePartialOptions, placeholder: "Vyberte...", value: partialValue }),
         partialValue !== null && react_1.default.createElement("div", { "data-testid": "selected-partial-value" }, partialValue.join(","))));
 }

package/multi-select/types.d.ts

@@ -8,13 +8,13 @@ import { FormControlProps } from "../types";
 /** @deprecated use import { SelectableId } from "@uxf/core/types" */
 export type MultiSelectValueId = SelectableId;
 export type MultiSelectValue<T extends SelectableId> = T[] | null;
-export type MultiSelectOption<T = SelectableId> = {
+export type MultiSelectOption<T extends SelectableId> = {
     color?: ChipColor;
     disabled?: boolean;
     id: T;
     label: ReactNode;
 };
-export interface MultiSelectProps<ValueId extends SelectableId = SelectableId, Option = MultiSelectOption<ValueId>> extends FormControlProps<MultiSelectValue<ValueId>> {
+export interface MultiSelectProps<ValueId extends SelectableId = SelectableId, Option extends MultiSelectOption<ValueId> = MultiSelectOption<ValueId>> extends FormControlProps<MultiSelectValue<ValueId>> {
     allOptionsSelectedMessage?: string;
     className?: string;
     dropdownClassName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.122.0",
+    "version": "11.122.1",
     "description": "",
     "publishConfig": {
         "access": "public"

package/radio-group/radio-group.d.ts

@@ -1,24 +1,24 @@
 import { RadioSize } from "@uxf/ui/radio";
 import { RadioGroupVariant } from "@uxf/ui/radio-group/theme";
-import React, { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactElement, ReactNode, RefAttributes } from "react";
 import { FormControlProps } from "../types";
 export type RadioGroupOptionValueId = string | number;
-export interface RadioGroupOption {
+export interface RadioGroupOption<ValueId extends RadioGroupOptionValueId> {
     disabled?: boolean;
-    id: RadioGroupOptionValueId;
+    id: ValueId;
     label: ReactNode;
 }
-export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValueId | null> {
+export interface RadioGroupProps<ValueId extends RadioGroupOptionValueId = RadioGroupOptionValueId, Option extends RadioGroupOption<ValueId> = RadioGroupOption<ValueId>> extends FormControlProps<ValueId | null> {
     className?: string;
     helperText?: ReactNode;
     forceColumn?: boolean;
     hiddenLabel?: boolean;
     id?: string;
     label: ReactNode;
-    options: RadioGroupOption[];
+    options: Option[];
     radioSize?: RadioSize;
     style?: CSSProperties;
     variant?: RadioGroupVariant;
 }
 export declare const RADIO_GROUP_COMPONENT_NAME = "radioGroup";
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLLabelElement>>;
+export declare const RadioGroup: <ValueId extends RadioGroupOptionValueId = RadioGroupOptionValueId, Option extends RadioGroupOption<ValueId> = RadioGroupOption<ValueId>>(props: RadioGroupProps<ValueId, Option> & RefAttributes<HTMLLabelElement>) => ReactElement | null;

package/radio-group/radio-group.js

@@ -42,7 +42,7 @@ const react_2 = __importStar(require("react"));
 const use_input_submit_1 = require("../hooks/use-input-submit");
 const label_1 = require("../label");
 exports.RADIO_GROUP_COMPONENT_NAME = "radioGroup";
-exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
+function RadioGroupInner(props, ref) {
     var _a, _b;
     const innerRef = (0, react_2.useRef)(null);
     (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", props.isDisabled);
@@ -58,5 +58,6 @@ exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
                 react_2.default.createElement("span", { className: "uxf-radio-group__option-label" }, option.label),
                 react_2.default.createElement(radio_1.Radio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, name: props.name, ref: o.checked ? innerRef : undefined, size: radioSize, value: option.id }))))))),
             props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))));
-});
+}
+exports.RadioGroup = (0, react_2.forwardRef)(RadioGroupInner);
 exports.RadioGroup.displayName = "UxfUiRadioGroup";