@uxf/ui 11.79.0 → 11.80.0

package/multi-select/index.d.ts

@@ -1,2 +1,2 @@
 export { MultiSelect } from "./multi-select";
-export type { MultiSelectOption, MultiSelectProps, MultiSelectTypeRef, MultiSelectValueId } from "./types";
+export type { MultiSelectOption, MultiSelectProps, MultiSelectTypeRef, MultiSelectValue, MultiSelectValueId, } from "./types";

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

@@ -1,4 +1,4 @@
 import React from "react";
-import { MultiSelectOption, MultiSelectProps, MultiSelectValueId } from "./types";
+import { MultiSelectOption, MultiSelectProps } from "./types";
 export declare const MULTI_SELECT_COMPONENT_NAME = "multiSelect";
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<MultiSelectValueId, MultiSelectOption<MultiSelectValueId>> & React.RefAttributes<HTMLDivElement>>;
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<import("@uxf/core/types").SelectableId, MultiSelectOption<import("@uxf/core/types").SelectableId>> & React.RefAttributes<HTMLDivElement>>;

package/multi-select/multi-select.js

@@ -84,21 +84,22 @@ exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
     const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
-    const selectedOptions = (_d = props.value) !== null && _d !== void 0 ? _d : empty_array_1.EMPTY_ARRAY;
-    const filteredOptions = props.options.filter((option) => !selectedOptions.some((v) => v.id === option.id) || props.withCheckboxes);
+    const value = (_d = props.value) !== null && _d !== void 0 ? _d : empty_array_1.EMPTY_ARRAY;
+    const selectedOptions = props.options.filter((o) => value.includes(o.id));
+    const filteredOptions = props.options.filter((option) => !value.some((v) => v === option.id) || props.withCheckboxes);
     const inputKeyDownHandler = (e) => {
         if (e.key === "Backspace" && (0, is_not_empty_1.isNotEmpty)(selectedOptions)) {
-            handleInputKeyDownRecursion(selectedOptions, (v) => props.onChange(selectedOptions.filter((option) => option.id !== v)));
+            handleInputKeyDownRecursion(selectedOptions, (v) => props.onChange(value.filter((option) => option !== v)));
         }
     };
-    const optionRemoveHandler = (valueId) => props.onChange(selectedOptions.filter((v) => v.id !== valueId));
+    const optionRemoveHandler = (valueId) => props.onChange(value.filter((v) => v !== valueId));
     const chipCloseHandler = (valueId) => (e) => {
         e.preventDefault();
         e.stopPropagation();
         optionRemoveHandler(valueId);
     };
     const checkboxChangeHandler = (valueId) => (checked) => {
-        const isAlreadySelected = selectedOptions.some((v) => v.id === valueId);
+        const isAlreadySelected = value.some((v) => v === valueId);
         if (isAlreadySelected && !checked) {
             optionRemoveHandler(valueId);
             return;
@@ -106,14 +107,14 @@ exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
         const newOption = props.options.find((o) => o.id === valueId);
         // adding new option if not in value
         if (!isAlreadySelected && checked && newOption) {
-            props.onChange([...selectedOptions, newOption]);
+            props.onChange([...value, newOption.id]);
         }
     };
-    const emptyMessage = (0, is_empty_1.isEmpty)(filteredOptions) && (0, is_not_empty_1.isNotEmpty)(selectedOptions)
+    const emptyMessage = (0, is_empty_1.isEmpty)(filteredOptions) && (0, is_not_empty_1.isNotEmpty)(value)
         ? ((_e = props.allOptionsSelectedMessage) !== null && _e !== void 0 ? _e : t("uxf-ui-multi-select:all-options-selected"))
         : ((_f = props.noOptionsMessage) !== null && _f !== void 0 ? _f : t("uxf-ui-multi-select:no-options-message"));
     const isNotInteractive = props.isDisabled || props.isReadOnly;
-    return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", 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_SELECT_COMPONENT_NAME, "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: props.onChange, value: selectedOptions }, (renderProps) => {
+    return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", 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_SELECT_COMPONENT_NAME, "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: (v) => props.onChange(v.map((o) => o.id)), 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" },
@@ -122,7 +123,7 @@ exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
                 react_3.default.createElement(react_2.Listbox.Button, { "aria-describedby": errorId, "aria-invalid": props.isInvalid, as: "div", className: (0, cx_1.cx)("uxf-input uxf-multi-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), id: id, onBlur: input.onBlur, onFocus: input.onFocus, onKeyDown: inputKeyDownHandler, ref: stableRef, tabIndex: isNotInteractive ? undefined : 0 },
                     props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
                     props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
-                    react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__element uxf-multi-select__input", (0, is_empty_1.isEmpty)(selectedOptions) && `${classes_1.CLASSES.IS_EMPTY} uxf-multi-select__input--is-empty`) }, (0, is_empty_1.isEmpty)(selectedOptions)
+                    react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__element uxf-multi-select__input", (0, is_empty_1.isEmpty)(value) && `${classes_1.CLASSES.IS_EMPTY} uxf-multi-select__input--is-empty`) }, (0, is_empty_1.isEmpty)(value)
                         ? props.placeholder
                         : selectedOptions.map((item) => (react_3.default.createElement(chip_1.Chip, { className: "uxf-multi-select__input-chip", color: item.color, key: item.id, onClose: props.isDisabled || item.disabled
                                 ? undefined

package/multi-select/types.d.ts

@@ -1,17 +1,20 @@
 import { Placement, Strategy } from "@floating-ui/react";
+import { SelectableId } from "@uxf/core/types";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 import { CSSProperties, ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
-export type MultiSelectValueId = number | string;
+/** @deprecated use import { SelectableId } from "@uxf/core/types" */
+export type MultiSelectValueId = SelectableId;
+export type MultiSelectValue<T extends SelectableId> = T[] | null;
 export type MultiSelectOption<T = MultiSelectValueId> = {
     color?: ChipColor;
     disabled?: boolean;
     id: T;
     label: ReactNode;
 };
-export interface MultiSelectProps<ValueId = MultiSelectValueId, Option = MultiSelectOption<ValueId>> extends FormControlProps<Option[] | null> {
+export interface MultiSelectProps<ValueId = MultiSelectValueId, Option = MultiSelectOption<ValueId>> extends FormControlProps<ValueId[] | null> {
     allOptionsSelectedMessage?: string;
     className?: string;
     dropdownClassName?: string;

package/package.json

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

package/translations.d.ts

@@ -0,0 +1,12 @@
+import type { TranslationsPaths } from "@uxf/core-react/translations/types";
+import uiTranslations from "@uxf/ui/translations/translations";
+
+type uiTypes = typeof uiTranslations;
+
+type TranslationsKeys = TranslationsPaths<uiTypes>;
+
+type TypeSafeTranslate = (key: TranslationsKeys, options?: Record<string, any>) => string;
+
+declare module "@uxf/core-react/translations" {
+    export function useUxfTranslation(): TypeSafeTranslate;
+}