@edifice.io/react 2.2.9 → 2.2.10-develop-b2school.20250618120112

package/dist/components/Button/Button.d.ts

@@ -25,7 +25,7 @@ export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
     /**
      * Does it has a text ?
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Display Icon Component to the left
      */

package/dist/components/Button/Button.js

@@ -19,10 +19,11 @@ const Button = /* @__PURE__ */ forwardRef(({
   const classes = clsx("btn", {
     [`btn-filled btn-${color}`]: variant === "filled",
     [`btn-${variant}-${color}`]: variant === "outline" || variant === "ghost",
-    "btn-icon": !children,
+    "btn-icon btn-sm": !children,
     "btn-loading": isLoading,
     "btn-lg": size === "lg",
-    "btn-sm": size === "sm"
+    "btn-sm": size === "sm",
+    "btn-md": size === "md"
   }, className);
   return /* @__PURE__ */ jsx("button", { ref, "data-testid": "button", className: classes, type, ...restProps, children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingIcon, loadingPosition, children }) : /* @__PURE__ */ jsxs("span", { children: [
     leftIcon,

package/dist/components/Button/IconButton.js

@@ -11,7 +11,7 @@ const IconButton = /* @__PURE__ */ forwardRef(({
     ...restProps,
     className: clsx("btn-icon btn-sm", className)
   };
-  return /* @__PURE__ */ jsx(Button, { ref, ...buttonProps, children: icon });
+  return /* @__PURE__ */ jsx(Button, { ref, ...buttonProps, leftIcon: icon });
 });
 export {
   IconButton as default

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

@@ -1,13 +1,26 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';
 export interface ComboboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    onSearchResultsChange: (model: (string | number)[]) => void;
     onSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
     options: OptionListItemType[];
     value: string;
     isLoading: boolean;
     noResult: boolean;
+    onFocus?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onSearchResultsChange?: (model: (string | number)[]) => void;
+    onSearchInputKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;
     searchMinLength?: number;
     placeholder?: string;
+    variant?: 'outline' | 'ghost';
+    renderInputGroup?: ReactNode;
+    renderList?: (items: OptionListItemType[]) => ReactNode;
+    renderListItem?: (item: OptionListItemType) => ReactNode;
+    renderSelectedItems?: ReactNode;
+    renderNoResult?: ReactNode;
+    hasDefault?: boolean;
+}
+export interface ComboboxRef {
+    focus: () => void;
 }
 export interface OptionListItemType {
     /**
@@ -17,15 +30,21 @@ export interface OptionListItemType {
     /**
      * Label
      */
-    label: string;
+    label?: string;
     /**
      * Add an icon
      */
     icon?: any;
+    /**
+     * Display Separator or not
+     */
+    withSeparator?: boolean;
+    /**
+     * Disable option
+     */
+    disabled?: boolean;
 }
-declare const Combobox: {
-    ({ onSearchResultsChange, onSearchInputChange, options, value, isLoading, noResult, searchMinLength, placeholder, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ placeholder, value, searchMinLength, handleSearchInputChange, }: 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,40 +1,61 @@
 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,
   onSearchInputChange,
+  onSearchInputKeyUp,
   options,
   value,
   isLoading,
   noResult,
   searchMinLength,
-  placeholder
-}) => {
+  placeholder,
+  variant = "outline",
+  renderInputGroup,
+  renderList,
+  renderListItem,
+  renderSelectedItems,
+  renderNoResult
+}, ref) => {
   const {
     t
-  } = useTranslation(), [localValue, setLocalValue] = useState([]);
+  } = useTranslation(), inputRef = useRef(null), [localValue, setLocalValue] = useState([]);
   useEffect(() => {
-    onSearchResultsChange(localValue);
+    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 ? /* @__PURE__ */ jsx("div", { className: "p-4", children: t("portal.no.result") }) : options.map((option, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Dropdown.Item, { type: "select", icon: option.icon, onClick: () => handleOptionClick(option.value), children: option.label }),
-    index < options.length - 1 && /* @__PURE__ */ jsx(Dropdown.Separator, {})
+  ] }) : 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, children: [
-    /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, value }),
+  return /* @__PURE__ */ jsxs(Dropdown, { block: !0, focusOnVisible: !1, openOnSpace: !1, focusOnMouseEnter: !1, onToggle: (open) => {
+    !open && inputRef.current && (inputRef.current.value = "");
+  }, children: [
+    /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, handleSearchInputKeyUp: (event) => {
+      onSearchInputKeyUp == null || onSearchInputKeyUp(event);
+    }, 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

@@ -1,9 +1,41 @@
-import { ChangeEvent } from 'react';
-export interface ComboboxTriggerProps extends React.ComponentPropsWithRef<'button'> {
+import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';
+export interface ComboboxTriggerProps extends React.ComponentPropsWithRef<'input'> {
     handleSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleSearchInputKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
     value: string;
     searchMinLength?: number;
     placeholder?: string;
+    renderInputGroup?: React.ReactNode;
+    variant?: 'outline' | 'ghost';
+    renderSelectedItems?: ReactNode;
+    hasDefault: boolean;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
 }
-declare const ComboboxTrigger: ({ placeholder, value, searchMinLength, handleSearchInputChange, }: ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A trigger component for the Combobox that handles user input and displays selected items.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ComboboxTrigger
+ *   value={searchValue}
+ *   handleSearchInputChange={(e) => setSearchValue(e.target.value)}
+ *   placeholder="Search..."
+ * />
+ * ```
+ *
+ * @param {object} props - Component props
+ * @param {string} [props.placeholder] - Placeholder text for the search input
+ * @param {string} [props.value=''] - Current value of the search input
+ * @param {number} [props.searchMinLength=3] - Minimum number of characters required before showing dropdown
+ * @param {(event: ChangeEvent<HTMLInputElement>) => void} props.handleSearchInputChange - Handler for input change events
+ * @param {ReactNode} [props.renderInputGroup] - Optional content to render in the input group (e.g., icons)
+ * @param {'outline' | 'ghost'} [props.variant='outline'] - Visual variant of the input
+ * @param {ReactNode} [props.renderSelectedItems] - Optional content to render selected items
+ *
+ * @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, inputRef, }: ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default ComboboxTrigger;

package/dist/components/Combobox/ComboboxTrigger.js

@@ -1,5 +1,6 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
+import clsx from "clsx";
 import { useDropdownContext } from "../Dropdown/DropdownContext.js";
 import Input from "../Input/Input.js";
 import FormControl from "../Form/FormControl.js";
@@ -7,23 +8,49 @@ const ComboboxTrigger = ({
   placeholder,
   value = "",
   searchMinLength = 3,
-  handleSearchInputChange
+  onFocus,
+  onBlur,
+  handleSearchInputChange,
+  handleSearchInputKeyUp,
+  renderInputGroup,
+  variant = "outline",
+  renderSelectedItems,
+  hasDefault,
+  inputRef
 }) => {
   const {
     triggerProps,
     itemProps,
     setVisible
-  } = useDropdownContext(), inputProps = {
+  } = useDropdownContext(), containerProps = {
     ...triggerProps,
+    className: clsx("d-flex combobox-trigger", renderInputGroup ? "input-group flex-nowrap align-items-start" : "flex-wrap align-items-center", triggerProps.className),
+    onClick: (event) => {
+      event.stopPropagation();
+    }
+  }, inputProps = {
     role: "combobox",
-    onClick: () => {
-      value.length >= searchMinLength && setVisible(!0);
+    onChange: (event) => {
+      handleSearchInputChange(event), setVisible(event.target.value.length >= searchMinLength);
     },
-    onChange: handleSearchInputChange
-  };
+    onClick: (event) => {
+      const input = event.target;
+      setVisible(input.value.length >= searchMinLength || hasDefault), input.focus();
+    },
+    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);
-  }, [setVisible, value, searchMinLength]), /* @__PURE__ */ jsx(FormControl, { className: "d-flex align-items-center", id: "search", children: /* @__PURE__ */ jsx(Input, { ...inputProps, className: "max-w-512", noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown }) });
+  }, [value, searchMinLength]), /* @__PURE__ */ jsxs(FormControl, { id: "search", ...containerProps, children: [
+    !!renderInputGroup && /* @__PURE__ */ jsx("label", { className: "input-group-text pe-0" + classNameVariant, htmlFor: triggerProps.id, children: renderInputGroup }),
+    /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center flex-wrap flex-fill", children: [
+      renderSelectedItems,
+      /* @__PURE__ */ jsx(Input, { ...inputProps, className: classNameInput, onFocus, onBlur, noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown })
+    ] })
+  ] });
 };
 export {
   ComboboxTrigger as default

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

@@ -32,6 +32,18 @@ export interface DropdownProps {
      * Whether the trigger is hovered or not.
      */
     isTriggerHovered?: boolean;
+    /**
+     * Whether to focus the first element when the dropdown is opened.
+     */
+    focusOnVisible?: boolean;
+    /**
+     * Whether to open the dropdown on space key press.
+     */
+    openOnSpace?: boolean;
+    /**
+     * Whether to focus the element on mouse enter.
+     */
+    focusOnMouseEnter?: boolean;
 }
 export type DropdownMenuOptions = {
     /**
@@ -57,13 +69,13 @@ export type DropdownMenuOptions = {
     type: 'divider';
 };
 declare const Dropdown: {
-    ({ children, block, overflow, noWrap, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, }: 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>>;
     Menu: import('react').ForwardRefExoticComponent<Omit<import('./DropdownMenu').DropdownMenuProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Item: {
-        ({ type, icon, onClick, children, className, minWidth, ...restProps }: import('./DropdownItem').DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+        ({ type, icon, onClick, children, className, minWidth, disabled, ...restProps }: import('./DropdownItem').DropdownItemProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Separator: {

package/dist/components/Dropdown/Dropdown.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useEffect } from "react";
 import clsx from "clsx";
+import useDropdown from "../../hooks/useDropdown/useDropdown.js";
 import DropdownCheckboxItem from "./DropdownCheckboxItem.js";
 import { DropdownContext } from "./DropdownContext.js";
 import DropdownItem from "./DropdownItem.js";
@@ -9,7 +10,6 @@ import DropdownMenuGroup from "./DropdownMenuGroup.js";
 import DropdownRadioItem from "./DropdownRadioItem.js";
 import DropdownSeparator from "./DropdownSeparator.js";
 import DropdownTrigger from "./DropdownTrigger.js";
-import useDropdown from "../../hooks/useDropdown/useDropdown.js";
 import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
 const Root = ({
   children,
@@ -19,7 +19,10 @@ const Root = ({
   placement = "bottom-start",
   extraTriggerKeyDownHandler,
   onToggle,
-  isTriggerHovered = !1
+  isTriggerHovered = !1,
+  focusOnVisible = !0,
+  openOnSpace = !0,
+  focusOnMouseEnter = !0
 }) => {
   const {
     visible,
@@ -29,7 +32,7 @@ const Root = ({
     itemProps,
     itemRefs,
     setVisible
-  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered), ref = useClickOutside(() => {
+  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter), ref = useClickOutside(() => {
     setVisible(!1);
   }), value = useMemo(() => ({
     visible,

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

@@ -25,9 +25,13 @@ export interface DropdownItemProps {
      * Set minimum width in pixels
      */
     minWidth?: number;
+    /**
+     * Disabled status
+     */
+    disabled?: boolean;
 }
 declare const DropdownItem: {
-    ({ type, icon, onClick, children, className, minWidth, ...restProps }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ type, icon, onClick, children, className, minWidth, disabled, ...restProps }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DropdownItem;

package/dist/components/Dropdown/DropdownItem.js

@@ -9,6 +9,7 @@ const DropdownItem = ({
   children,
   className,
   minWidth,
+  disabled,
   ...restProps
 }) => {
   const {
@@ -20,9 +21,11 @@ const DropdownItem = ({
     onMenuItemMouseEnter,
     onMenuItemClick
   } = itemProps, handleOnClick = (event) => {
-    onClick == null || onClick(event), type === "action" && (onMenuItemClick(), event.stopPropagation());
+    disabled || (onClick == null || onClick(event), type === "action" && (onMenuItemClick(), event.stopPropagation()));
   }, id = useId(), dropdownItem = clsx("dropdown-item", {
     focus: isFocused === id
+  }, {
+    "text-gray-600": disabled
   }, className), style = {
     ...minWidth && {
       minWidth: `${minWidth}px`

package/dist/components/Dropdown/DropdownTrigger.js

@@ -3,6 +3,7 @@ import { forwardRef } from "react";
 import clsx from "clsx";
 import SvgIconRafterUp from "../../modules/icons/components/IconRafterUp.js";
 import { useDropdownContext } from "./DropdownContext.js";
+import Badge from "../Badge/Badge.js";
 const DropdownTrigger = /* @__PURE__ */ forwardRef(({
   label,
   icon,
@@ -46,7 +47,10 @@ const DropdownTrigger = /* @__PURE__ */ forwardRef(({
   return /* @__PURE__ */ jsxs("button", { ref: forwardRef2, type: "button", disabled, ...mergedProps, children: [
     icon,
     label,
-    badgeContent ? /* @__PURE__ */ jsx("span", { className: "badge text-bg-secondary rounded-pill", children: badgeContent }) : !hideCarret && /* @__PURE__ */ jsx(SvgIconRafterUp, { width: 16, height: 16, className: "dropdown-toggle-caret" })
+    badgeContent ? /* @__PURE__ */ jsx(Badge, { variant: {
+      level: "info",
+      type: "notification"
+    }, children: badgeContent }) : !hideCarret && /* @__PURE__ */ jsx(SvgIconRafterUp, { width: 16, height: 16, className: "dropdown-toggle-caret" })
   ] });
 });
 export {

package/dist/components/Input/Input.d.ts

@@ -25,6 +25,10 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, O
      * Optional class for styling purpose
      */
     className?: string;
+    /**
+     * Show count of characters
+     */
+    showCounter?: boolean;
 }
 /**
  * Input Form Component

package/dist/components/Input/Input.js

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
 import clsx from "clsx";
 import { useFormControl } from "../Form/FormContext.js";
 const Input = /* @__PURE__ */ forwardRef(({
@@ -8,23 +8,39 @@ const Input = /* @__PURE__ */ forwardRef(({
   size = "md",
   type = "text",
   className,
+  showCounter,
   ...restProps
 }, ref) => {
+  var _a;
   const {
     id,
     isRequired,
     isReadOnly,
     status
-  } = useFormControl(), classes = clsx({
+  } = useFormControl(), [currentLength, setCurrentLength] = useState(((_a = restProps.value) == null ? void 0 : _a.toString().length) || 0), classes = clsx({
     "form-control": !isReadOnly,
     "form-control-lg": size === "lg",
     "form-control-sm": size === "sm",
     "is-invalid": status === "invalid",
     "is-valid": status === "valid",
     "form-control-plaintext": isReadOnly,
-    "no-validation-icon": noValidationIcon
+    "no-validation-icon": noValidationIcon,
+    "pe-64": showCounter && !status
   }, className);
-  return /* @__PURE__ */ jsx("input", { ref, id, className: classes, type, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("input", { ref, id, className: classes, type, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps, onChange: (e) => {
+      var _a2;
+      setCurrentLength(e.target.value.length), (_a2 = restProps.onChange) == null || _a2.call(restProps, e);
+    } }),
+    showCounter && !status && /* @__PURE__ */ jsxs("span", { className: clsx("caption text-end float-end mt-n32 py-2 px-12 ", {
+      "text-danger": currentLength === restProps.maxLength,
+      "text-gray-700": currentLength !== restProps.maxLength
+    }), children: [
+      currentLength,
+      " / ",
+      restProps.maxLength
+    ] })
+  ] });
 });
 export {
   Input as default

package/dist/components/Layout/components/Header.js

@@ -54,7 +54,7 @@ const Header = ({
     parsedContent,
     parsedHeadline,
     error
-  } = useHelp(hasOldHelpEnableWorkflow), classes = clsx("header", {
+  } = useHelp(hasOldHelpEnableWorkflow), classes = clsx("header d-print-none", {
     "no-2d": is1d,
     "no-1d": !is1d
   }), {

package/dist/components/List/List.d.ts

@@ -5,6 +5,10 @@ export type ListProps<T> = {
      * Toolbar data items
      */
     items?: ToolbarItem[];
+    /**
+     * Checkable list
+     */
+    isCheckable?: boolean;
     /**
      * Generic data
      */
@@ -17,7 +21,18 @@ export type ListProps<T> = {
      * Callback to get selected ids
      */
     onSelectedItems?: (selectedIds: string[]) => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Toolbar options
+     */
+    toolbarOptions?: {
+        shouldHideLabelsOnMobile?: boolean;
+        sticky?: boolean;
+    };
 };
 export declare const List: <T extends {
     _id: string;
-}>({ items, data, renderNode, onSelectedItems, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+}>({ items, isCheckable, data, renderNode, onSelectedItems, className, toolbarOptions, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/List.js

@@ -1,15 +1,18 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useMediaQuery } from "@uidotdev/usehooks";
 import clsx from "clsx";
 import { useEffect, Fragment as Fragment$1 } from "react";
 import { useCheckable } from "../../hooks/useCheckable/useCheckable.js";
+import useBreakpoint from "../../hooks/useBreakpoint/useBreakpoint.js";
 import Checkbox from "../Checkbox/Checkbox.js";
 import { Toolbar } from "../Toolbar/Toolbar.js";
 const List = ({
   items,
+  isCheckable = !1,
   data,
   renderNode,
-  onSelectedItems
+  onSelectedItems,
+  className,
+  toolbarOptions
 }) => {
   const {
     selectedItems,
@@ -17,31 +20,32 @@ const List = ({
     isIndeterminate,
     handleOnSelectAllItems,
     handleOnSelectItem
-  } = useCheckable(data), isDesktopDevice = useMediaQuery("only screen and (min-width: 1024px)");
-  return useEffect(() => {
+  } = useCheckable(data), {
+    lg
+  } = useBreakpoint();
+  useEffect(() => {
     selectedItems && (onSelectedItems == null || onSelectedItems(selectedItems));
-  }, [onSelectedItems, selectedItems]), /* @__PURE__ */ jsxs(Fragment, { children: [
-    items && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: clsx("d-flex align-items-center gap-8", {
-        "px-12": items
-      }), children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-8", children: [
-          /* @__PURE__ */ jsx(Checkbox, { checked: allItemsSelected, indeterminate: isIndeterminate, onChange: () => handleOnSelectAllItems(allItemsSelected) }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "(",
-            selectedItems.length,
-            ")"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Toolbar, { items, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
-          "px-0 ms-auto": !isDesktopDevice
-        }) })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "border-top" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-8", children: data == null ? void 0 : data.map((node) => {
-      const checkbox = /* @__PURE__ */ jsx(Checkbox, { checked: selectedItems.includes(node._id), onChange: () => handleOnSelectItem(node._id) }), checked = selectedItems.includes(node._id);
-      return /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node, checkbox, checked) }, node._id);
+  }, [onSelectedItems, selectedItems]);
+  const toolbarClassName = clsx("list-header d-flex align-items-center gap-8 px-12 bg-white border-bottom", className, {
+    "sticky-top": toolbarOptions == null ? void 0 : toolbarOptions.sticky
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (items || isCheckable) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: toolbarClassName, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-8 py-12", children: [
+        /* @__PURE__ */ jsx(Checkbox, { checked: allItemsSelected, indeterminate: isIndeterminate, onChange: () => handleOnSelectAllItems(allItemsSelected) }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "(",
+          selectedItems.length,
+          ")"
+        ] })
+      ] }),
+      items && /* @__PURE__ */ jsx(Toolbar, { items, shouldHideLabelsOnMobile: toolbarOptions == null ? void 0 : toolbarOptions.shouldHideLabelsOnMobile, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
+        "px-0 ms-auto": !lg
+      }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { children: data == null ? void 0 : data.map((node) => {
+      const checked = selectedItems.includes(node._id);
+      return /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node, /* @__PURE__ */ jsx(Checkbox, { checked, onChange: () => handleOnSelectItem(node._id), onClick: (event) => event.stopPropagation() }), checked) }, node._id);
     }) })
   ] });
 };

package/dist/components/Modal/ModalHeader.js

@@ -17,8 +17,8 @@ const ModalHeader = (props) => {
   return useEffect(() => {
     var _a;
     focusId || (_a = closeButtonRef.current) == null || _a.focus();
-  }, [focusId]), /* @__PURE__ */ jsxs("div", { className: "modal-header", children: [
-    /* @__PURE__ */ jsx("h2", { id: ariaLabelId, className: "modal-title", tabIndex: -1, children }),
+  }, [focusId]), /* @__PURE__ */ jsxs("div", { className: "modal-header align-self-center", children: [
+    /* @__PURE__ */ jsx("h2", { id: ariaLabelId, className: "modal-title text-center", tabIndex: -1, children }),
     /* @__PURE__ */ jsx(IconButton, { ref: closeButtonRef, "aria-label": t("close"), color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconClose, {}), type: "button", variant: "ghost", title: t("close"), onClick: onModalClose, className: "btn-close" })
   ] });
 };

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import { Size } from '../../types';
-export interface BaseProps {
+export interface BaseProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
     /**
      * String or Template literal with React i18next namespace
      */

package/dist/components/SearchBar/SearchBar.js

@@ -24,10 +24,12 @@ const SearchBar = ({
     "ps-48": isVariant
   }), handleClick = () => {
     onClick == null || onClick();
+  }, handleKeyDown = (e) => {
+    e.key === "Enter" && (e.preventDefault(), handleClick());
   };
   return /* @__PURE__ */ jsxs(FormControl, { id: "search-bar", className: searchbar, children: [
     isVariant && /* @__PURE__ */ jsx("div", { className: "position-absolute z-1 top-50 start-0 translate-middle-y border-0 ps-12 bg-transparent", children: /* @__PURE__ */ jsx(SvgIconSearch, {}) }),
-    /* @__PURE__ */ jsx(FormControl.Input, { type: "search", placeholder: t(placeholder), size, noValidationIcon: !0, className: input, onChange, disabled, ...restProps }),
+    /* @__PURE__ */ jsx(FormControl.Input, { type: "search", placeholder: t(placeholder), size, noValidationIcon: !0, className: input, onChange, disabled, onKeyDown: handleKeyDown, ...restProps }),
     !isVariant && /* @__PURE__ */ jsx(SearchButton, { type: "submit", "aria-label": t("search"), icon: /* @__PURE__ */ jsx(SvgIconSearch, {}), className: "border-start-0", onClick: handleClick })
   ] });
 };