@uxf/ui 1.0.0-beta.102 → 1.0.0-beta.103

package/combobox/combobox.d.ts

@@ -2,13 +2,15 @@ import { Placement } from "@floating-ui/react";
 import React, { ReactNode } from "react";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
-export declare type ComboboxValue = number | string;
-export declare type ComboboxOption<T = ComboboxValue> = {
-    disabled?: boolean;
-    id: T;
+export declare type ComboboxValueId = number | string;
+export declare type ComboboxValue<ValueId = ComboboxValueId> = {
+    id: ValueId;
     label: string;
 };
-export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Value>> extends FormControlProps<Value | null> {
+export interface ComboboxOption<ValueId = ComboboxValueId> extends ComboboxValue<ValueId> {
+    disabled?: boolean;
+}
+export interface ComboboxProps<ValueId = ComboboxValueId, Option = ComboboxOption<ValueId>> extends FormControlProps<Option | null> {
     className?: string;
     dropdownPlacement?: Placement;
     helperText?: ReactNode;
@@ -22,4 +24,4 @@ export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Va
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
 }
-export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps<ComboboxValueId, ComboboxOption<ComboboxValueId>> & React.RefAttributes<HTMLDivElement>>;

package/combobox/combobox.js

@@ -36,6 +36,7 @@ const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
 const label_1 = require("../label");
 const use_async_loading_1 = require("../hooks/use-async-loading");
+// TODO make the component generic ComboboxProps<T>
 exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     var _a, _b, _c, _d;
     const generatedId = (0, react_2.useId)();
@@ -43,7 +44,7 @@ exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     const isAsync = !!props.loadOptions;
     const [query, setQuery] = (0, react_2.useState)("");
     const options = (0, use_async_loading_1.useAsyncLoading)(query, (_b = props.options) !== null && _b !== void 0 ? _b : [], props.loadOptions);
-    const selectedOption = options.find((option) => option.id === props.value);
+    const selectedOption = options.find((option) => { var _a; return option.id === ((_a = props.value) === null || _a === void 0 ? void 0 : _a.id); });
     const filteredData = query === "" || isAsync ? options : options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
     const innerRef = (0, react_2.useRef)(null);
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
@@ -51,7 +52,7 @@ exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     const dropdown = (0, use_dropdown_1.useDropdown)((_c = props.dropdownPlacement) !== null && _c !== void 0 ? _c : "bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
     const iconName = (_d = props.iconName) !== null && _d !== void 0 ? _d : "chevronDown";
-    return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-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), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-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), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__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" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),

package/combobox/combobox.stories.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
-import { ComboboxValue } from "./combobox";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./combobox").ComboboxProps<ComboboxValue, import("./combobox").ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./combobox").ComboboxProps<import("./combobox").ComboboxValueId, import("./combobox").ComboboxOption<import("./combobox").ComboboxValueId>> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare function Default(): JSX.Element;

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

@@ -3,14 +3,16 @@ import React, { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
-export declare type MultiComboboxValue = number | string;
-export declare type MultiComboboxOption<T = MultiComboboxValue> = {
-    color?: ChipColor;
-    disabled?: boolean;
-    id: T;
+export declare type MultiComboboxValueId = number | string;
+export declare type MultiComboboxValue<ValueId = MultiComboboxValueId> = {
+    id: ValueId;
     label: string;
 };
-export interface MultiComboboxProps<Value = MultiComboboxValue[], Option = MultiComboboxOption> extends FormControlProps<Value | null> {
+export interface MultiComboboxOption<ValueId = MultiComboboxValueId> extends MultiComboboxValue<ValueId> {
+    color?: ChipColor;
+    disabled?: boolean;
+}
+export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = MultiComboboxOption<ValueId>> extends FormControlProps<Option[] | null> {
     className?: string;
     dropdownPlacement?: Placement;
     helperText?: ReactNode;
@@ -25,4 +27,4 @@ export interface MultiComboboxProps<Value = MultiComboboxValue[], Option = Multi
     renderOption?: (option: Option) => ReactNode;
     withCheckboxes?: boolean;
 }
-export declare const MultiCombobox: React.ForwardRefExoticComponent<MultiComboboxProps<MultiComboboxValue[], MultiComboboxOption<MultiComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
+export declare const MultiCombobox: React.ForwardRefExoticComponent<MultiComboboxProps<MultiComboboxValueId, MultiComboboxOption<MultiComboboxValueId>> & React.RefAttributes<HTMLDivElement>>;

package/mutli-combobox/multi-combobox.js

@@ -45,12 +45,12 @@ exports.MultiCombobox = (0, forwardRef_1.forwardRef)("MultiCombobox", (props, re
     const isAsync = !!props.loadOptions;
     const [query, setQuery] = (0, react_2.useState)("");
     const options = (0, use_async_loading_1.useAsyncLoading)(query, (_b = props.options) !== null && _b !== void 0 ? _b : [], props.loadOptions);
-    const [selectedOptions, setSelectedOptions] = (0, react_2.useState)(() => options.filter((option) => { var _a; return (_a = props.value) === null || _a === void 0 ? void 0 : _a.includes(option.id); }));
+    const [selectedOptions, setSelectedOptions] = (0, react_2.useState)(() => options.filter((option) => { var _a; return (_a = props.value) === null || _a === void 0 ? void 0 : _a.some((v) => v.id === option.id); }));
     const filteredData = isAsync
         ? options
         : options.filter((item) => {
             var _a;
-            return (!((_a = props.value) === null || _a === void 0 ? void 0 : _a.includes(item.id)) || props.withCheckboxes) &&
+            return (!((_a = props.value) === null || _a === void 0 ? void 0 : _a.some((v) => v.id === item.id)) || props.withCheckboxes) &&
                 (query === "" || (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
         });
     const innerRef = (0, react_2.useRef)(null);
@@ -59,19 +59,21 @@ exports.MultiCombobox = (0, forwardRef_1.forwardRef)("MultiCombobox", (props, re
     const dropdown = (0, use_dropdown_1.useDropdown)((_c = props.dropdownPlacement) !== null && _c !== void 0 ? _c : "bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
     const iconName = (_d = props.iconName) !== null && _d !== void 0 ? _d : "chevronDown";
-    const handleRemove = (value) => () => {
+    const handleRemove = (valueId) => () => {
         var _a, _b, _c;
-        setSelectedOptions((prev) => prev.filter((v) => v.id !== value));
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.filter((v) => v !== value)) !== null && _c !== void 0 ? _c : []);
+        setSelectedOptions((prev) => prev.filter((v) => v.id !== valueId));
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.filter((v) => v.id !== valueId)) !== null && _c !== void 0 ? _c : []);
     };
-    const handleCheckboxChange = (value) => (checked) => {
+    const handleCheckboxChange = (valueId) => (checked) => {
         var _a, _b, _c, _d;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a.includes(value)) && !checked) {
-            handleRemove(value)();
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a.some((v) => v.id === valueId)) && !checked) {
+            handleRemove(valueId)();
             return;
         }
-        if (!((_b = props.value) === null || _b === void 0 ? void 0 : _b.includes(value)) && checked) {
-            (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, [...((_d = props.value) !== null && _d !== void 0 ? _d : []), value]);
+        const newOption = options.find((o) => o.id === valueId);
+        //adding new option if not in value
+        if (!((_b = props.value) === null || _b === void 0 ? void 0 : _b.some((v) => v.id === valueId)) && checked && newOption) {
+            (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, [...((_d = props.value) !== null && _d !== void 0 ? _d : []), newOption]);
         }
     };
     const handleInputKeyDown = (event) => {
@@ -83,7 +85,7 @@ exports.MultiCombobox = (0, forwardRef_1.forwardRef)("MultiCombobox", (props, re
     const handleComboboxValueChange = (v) => {
         var _a;
         setSelectedOptions(v);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.map((option) => option.id));
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.map((option) => option));
         setQuery("");
     };
     return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,

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

@@ -1,9 +1,8 @@
 import React from "react";
 import { MultiComboboxOption } from "./index";
-import { MultiComboboxValue } from "./multi-combobox";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./multi-combobox").MultiComboboxProps<MultiComboboxValue[], MultiComboboxOption<MultiComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./multi-combobox").MultiComboboxProps<import("./multi-combobox").MultiComboboxValueId, MultiComboboxOption<import("./multi-combobox").MultiComboboxValueId>> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.102",
+  "version": "1.0.0-beta.103",
   "description": "",
   "publishConfig": {
     "access": "public"

package/tooltip/tooltip.js

@@ -40,7 +40,7 @@ exports.Tooltip = (0, forwardRef_1.forwardRef)("Tooltip", ({ children, content,
     const arrowRef = (0, react_2.useRef)(null);
     const tooltip = (0, use_tooltip_1.useTooltip)({ arrowRef, ...options });
     const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([
-        (0, react_1.useHover)(tooltip.context),
+        (0, react_1.useHover)(tooltip.context, { delay: 200, handleClose: (0, react_1.safePolygon)() }),
         (0, react_1.useFocus)(tooltip.context),
         (0, react_1.useRole)(tooltip.context, { role: "tooltip" }),
         (0, react_1.useDismiss)(tooltip.context),