@edifice.io/react 2.2.8-develop-b2school.20250603143923 → 2.2.8-develop-b2school.20250606132301

package/dist/components/Combobox/Combobox.d.ts

@@ -19,6 +19,9 @@ export interface ComboboxProps extends React.InputHTMLAttributes<HTMLInputElemen
     renderNoResult?: ReactNode;
     hasDefault?: boolean;
 }
+export interface ComboboxRef {
+    focus: () => void;
+}
 export interface OptionListItemType {
     /**
      * Value
@@ -41,46 +44,7 @@ export interface OptionListItemType {
      */
     disabled?: boolean;
 }
-/**
- * A component that combines an input field with a dropdown list of selectable options.
- *
- * @component
- * @example
- * ```tsx
- * <Combobox
- *   onSearchResultsChange={(values) => console.log(values)}
- *   onSearchInputChange={(e) => console.log(e.target.value)}
- *   options={[{ value: '1', label: 'Option 1' }]}
- *   value=""
- *   isLoading={false}
- *   noResult={false}
- * />
- * ```
- *
- * @param props - The component props
- * @param props.onFocus - Callback fired when the input is focused
- * @param props.onBlur - Callback fired when the input is blured
- * @param props.onSearchResultsChange - Callback fired when the selected values change
- * @param props.onSearchInputChange - Callback fired when the search input value changes
- * @param props.options - Array of options to display in the dropdown
- * @param props.value - Current value of the search input
- * @param props.isLoading - Whether the component is in a loading state
- * @param props.noResult - Whether to show a "no results" message
- * @param props.searchMinLength - Minimum number of characters required to trigger search
- * @param props.placeholder - Placeholder text for the input field
- * @param props.variant - Visual variant of the input ('outline' or 'ghost')
- * @param props.renderInputGroup - Custom render function for the input group
- * @param props.renderList - Custom render function for the dropdown list
- * @param props.renderListItem - Custom render function for each option item
- * @param props.renderSelectedItems - Custom render function for selected items
- * @param props.renderNoResult - Custom render function for no results message
- * @param props.hasDefault - Whether to show default options
- *
- * @extends {React.InputHTMLAttributes<HTMLInputElement>}
- */
-declare const Combobox: {
-    ({ onFocus, onBlur, onSearchResultsChange, onSearchInputChange, onSearchInputKeyUp, options, value, isLoading, noResult, searchMinLength, placeholder, variant, renderInputGroup, renderList, renderListItem, renderSelectedItems, renderNoResult, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ placeholder, value, searchMinLength, onFocus, onBlur, handleSearchInputChange, handleSearchInputKeyUp, renderInputGroup, variant, renderSelectedItems, hasDefault, }: import('./ComboboxTrigger').ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+declare const Combobox: import('react').ForwardRefExoticComponent<ComboboxProps & import('react').RefAttributes<ComboboxRef>> & {
+    Trigger: ({ placeholder, value, searchMinLength, onFocus, onBlur, handleSearchInputChange, handleSearchInputKeyUp, renderInputGroup, variant, renderSelectedItems, hasDefault, inputRef, }: import('./ComboboxTrigger').ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Combobox;

package/dist/components/Combobox/Combobox.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect, Fragment } from "react";
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import ComboboxTrigger from "./ComboboxTrigger.js";
 import Dropdown from "../Dropdown/Dropdown.js";
 import Loading from "../Loading/Loading.js";
-const Combobox = ({
+const ComboboxComponent = /* @__PURE__ */ forwardRef(({
   onFocus,
   onBlur,
   onSearchResultsChange,
@@ -22,30 +22,38 @@ const Combobox = ({
   renderListItem,
   renderSelectedItems,
   renderNoResult
-}) => {
+}, ref) => {
   const {
     t
-  } = useTranslation(), [localValue, setLocalValue] = useState([]);
+  } = useTranslation(), inputRef = useRef(null), [localValue, setLocalValue] = useState([]);
   useEffect(() => {
     onSearchResultsChange == null || onSearchResultsChange(localValue);
   }, [localValue]);
-  const handleOptionClick = (value2) => {
-    setLocalValue([value2]);
-  }, renderContent = () => isLoading ? /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center p-4", children: [
+  const focusInput = () => {
+    var _a;
+    (_a = inputRef.current) == null || _a.focus();
+  }, handleOptionClick = (value2) => {
+    setLocalValue([value2]), focusInput();
+  };
+  useImperativeHandle(ref, () => ({
+    focus: focusInput
+  }));
+  const renderContent = () => isLoading ? /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center p-4", children: [
     /* @__PURE__ */ jsx(Loading, { isLoading }),
     /* @__PURE__ */ jsx("span", { className: "ps-4", children: t("explorer.search.pending") })
   ] }) : noResult ? renderNoResult || /* @__PURE__ */ jsx("div", { className: "p-4", children: t("portal.no.result") }) : renderList ? renderList(options) : options.map((option, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Dropdown.Item, { type: "select", icon: option.icon, onClick: () => handleOptionClick(option.value), disabled: option.disabled, children: renderListItem ? renderListItem(option) : option.label }),
     (option.withSeparator || option.withSeparator === void 0) && index < options.length - 1 && /* @__PURE__ */ jsx(Dropdown.Separator, {})
   ] }, index));
-  return /* @__PURE__ */ jsxs(Dropdown, { block: !0, focusOnVisible: !1, openOnSpace: !1, children: [
+  return /* @__PURE__ */ jsxs(Dropdown, { block: !0, focusOnVisible: !1, openOnSpace: !1, focusOnMouseEnter: !1, children: [
     /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, handleSearchInputKeyUp: (event) => {
       onSearchInputKeyUp == null || onSearchInputKeyUp(event);
-    }, value, variant, renderInputGroup, renderSelectedItems, hasDefault: !!options.length, onFocus, onBlur }),
+    }, value, variant, renderInputGroup, renderSelectedItems, hasDefault: !!options.length, onFocus, onBlur, inputRef }),
     /* @__PURE__ */ jsx(Dropdown.Menu, { children: renderContent() })
   ] });
-};
-Combobox.Trigger = ComboboxTrigger;
+}), Combobox = /* @__PURE__ */ Object.assign(ComboboxComponent, {
+  Trigger: ComboboxTrigger
+});
 export {
   Combobox as default
 };

package/dist/components/Combobox/ComboboxTrigger.d.ts

@@ -11,6 +11,7 @@ export interface ComboboxTriggerProps extends React.ComponentPropsWithRef<'input
     hasDefault: boolean;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
 }
 /**
  * A trigger component for the Combobox that handles user input and displays selected items.
@@ -36,5 +37,5 @@ export interface ComboboxTriggerProps extends React.ComponentPropsWithRef<'input
  *
  * @returns {JSX.Element} A form control containing an input field with optional input group and selected items
  */
-declare const ComboboxTrigger: ({ placeholder, value, searchMinLength, onFocus, onBlur, handleSearchInputChange, handleSearchInputKeyUp, renderInputGroup, variant, renderSelectedItems, hasDefault, }: ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ComboboxTrigger: ({ placeholder, value, searchMinLength, onFocus, onBlur, handleSearchInputChange, handleSearchInputKeyUp, renderInputGroup, variant, renderSelectedItems, hasDefault, inputRef, }: ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default ComboboxTrigger;

package/dist/components/Combobox/ComboboxTrigger.js

@@ -15,7 +15,8 @@ const ComboboxTrigger = ({
   renderInputGroup,
   variant = "outline",
   renderSelectedItems,
-  hasDefault
+  hasDefault,
+  inputRef
 }) => {
   const {
     triggerProps,
@@ -38,7 +39,8 @@ const ComboboxTrigger = ({
     },
     onKeyUp: (event) => {
       handleSearchInputKeyUp == null || handleSearchInputKeyUp(event);
-    }
+    },
+    ref: inputRef
   }, classNameVariant = variant === "ghost" ? " border-0" : "", classNameInput = clsx(classNameVariant, renderSelectedItems ? "flex-fill w-auto " : "");
   return useEffect(() => {
     setVisible(value.length >= searchMinLength);

package/dist/components/Dropdown/Dropdown.d.ts

@@ -40,6 +40,10 @@ export interface DropdownProps {
      * Whether to open the dropdown on space key press.
      */
     openOnSpace?: boolean;
+    /**
+     * Whether to focus the element on mouse enter.
+     */
+    focusOnMouseEnter?: boolean;
 }
 export type DropdownMenuOptions = {
     /**
@@ -65,7 +69,7 @@ export type DropdownMenuOptions = {
     type: 'divider';
 };
 declare const Dropdown: {
-    ({ children, block, overflow, noWrap, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, focusOnVisible, openOnSpace, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, block, overflow, noWrap, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Trigger: import('react').ForwardRefExoticComponent<Omit<import('./DropdownTrigger').DropdownTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Dropdown/Dropdown.js

@@ -21,7 +21,8 @@ const Root = ({
   onToggle,
   isTriggerHovered = !1,
   focusOnVisible = !0,
-  openOnSpace = !0
+  openOnSpace = !0,
+  focusOnMouseEnter = !0
 }) => {
   const {
     visible,
@@ -31,7 +32,7 @@ const Root = ({
     itemProps,
     itemRefs,
     setVisible
-  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace), ref = useClickOutside(() => {
+  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter), ref = useClickOutside(() => {
     setVisible(!1);
   }), value = useMemo(() => ({
     visible,

package/dist/hooks/useDate/useDate.js

@@ -38,7 +38,7 @@ function useDate() {
     const computedDate = toComputedDate(date);
     if (!(computedDate != null && computedDate.isValid())) return "";
     const now = dayjs();
-    return computedDate.isSame(now, "date") ? now.diff(computedDate, "hours") <= 3 ? computedDate.fromNow() : computedDate.format(t("date.format.currentDay")) : computedDate.isSame(now.subtract(1, "day"), "date") ? t("date.format.yesterday") : now.diff(computedDate, "days") <= 7 ? computedDate.format(t("date.format.currentWeek")) : computedDate.isSame(now, "year") ? computedDate.format(t("date.format.currentYear")) : computedDate.format(t("date.format.previousYear"));
+    return computedDate.isSame(now, "date") ? computedDate.fromNow() : computedDate.isSame(now.subtract(1, "day"), "date") ? t("date.format.yesterday") : now.diff(computedDate, "days") <= 7 ? computedDate.format(t("date.format.currentWeek")) : computedDate.isSame(now, "year") ? computedDate.format(t("date.format.currentYear")) : computedDate.format(t("date.format.previousYear"));
   }, [currentLanguage, parseDate]), fromNow = useCallback((date) => {
     const computedDate = toComputedDate(date);
     return computedDate != null && computedDate.isValid() ? computedDate.fromNow() : "";

package/dist/hooks/useDropdown/useDropdown.d.ts

@@ -29,5 +29,5 @@ export interface UseDropdownProps {
     setVisible: Dispatch<SetStateAction<boolean>>;
     openOnSpace?: boolean;
 }
-declare const useDropdown: (placement: Placement | undefined, extraTriggerKeyDownHandler?: (event: React.KeyboardEvent<HTMLButtonElement>) => void, isTriggerHovered?: boolean, focusOnVisible?: boolean, openOnSpace?: boolean) => UseDropdownProps;
+declare const useDropdown: (placement: Placement | undefined, extraTriggerKeyDownHandler?: (event: React.KeyboardEvent<HTMLButtonElement>) => void, isTriggerHovered?: boolean, focusOnVisible?: boolean, openOnSpace?: boolean, focusOnMouseEnter?: boolean) => UseDropdownProps;
 export default useDropdown;

package/dist/hooks/useDropdown/useDropdown.js

@@ -1,7 +1,7 @@
 import { useId, useState, useRef, useEffect, useCallback } from "react";
 import { useFloating, offset, size, flip, autoUpdate, useHover, safePolygon } from "@floating-ui/react";
 import { mergeRefs } from "../../utilities/refs/ref.js";
-const useDropdown = (placement, extraTriggerKeyDownHandler, isTriggerHovered = !1, focusOnVisible = !0, openOnSpace = !0) => {
+const useDropdown = (placement, extraTriggerKeyDownHandler, isTriggerHovered = !1, focusOnVisible = !0, openOnSpace = !0, focusOnMouseEnter = !0) => {
   const id = useId(), [visible, setVisible] = useState(!1), [activeIndex, setActiveIndex] = useState(-1), [isFocused, setIsFocused] = useState(null), {
     refs,
     floatingStyles,
@@ -84,8 +84,10 @@ const useDropdown = (placement, extraTriggerKeyDownHandler, isTriggerHovered = !
     }
     extraTriggerKeyDownHandler == null || extraTriggerKeyDownHandler(event), stopEvents(flag, event);
   }, [closeDropdown, openDropdown]), onMenuItemMouseEnter = (event) => {
-    const index = Object.values(itemRefs.current).findIndex((item) => item.id === event.currentTarget.getAttribute("id"));
-    setActiveIndex(index);
+    if (focusOnMouseEnter) {
+      const index = Object.values(itemRefs.current).findIndex((item) => item.id === event.currentTarget.getAttribute("id"));
+      setActiveIndex(index);
+    }
   }, onMenuItemKeyDown = useCallback((event, onSuccess) => {
     let flag = !1;
     if (event.shiftKey)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.2.8-develop-b2school.20250603143923",
+  "version": "2.2.8-develop-b2school.20250606132301",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -118,9 +118,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.2.8-develop-b2school.20250603143923",
-    "@edifice.io/tiptap-extensions": "2.2.8-develop-b2school.20250603143923",
-    "@edifice.io/utilities": "2.2.8-develop-b2school.20250603143923"
+    "@edifice.io/bootstrap": "2.2.8-develop-b2school.20250606132301",
+    "@edifice.io/tiptap-extensions": "2.2.8-develop-b2school.20250606132301",
+    "@edifice.io/utilities": "2.2.8-develop-b2school.20250606132301"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -151,8 +151,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.2.8-develop-b2school.20250603143923",
-    "@edifice.io/config": "2.2.8-develop-b2school.20250603143923"
+    "@edifice.io/client": "2.2.8-develop-b2school.20250606132301",
+    "@edifice.io/config": "2.2.8-develop-b2school.20250606132301"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",