@edifice.io/react 2.2.11-develop-pedago.20250707151414 → 2.2.11-develop-enabling.20250710092201

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { LoadingIcon, LoadingPosition } from '../Loading';
 export type ButtonRef = HTMLButtonElement;
 export type ButtonTypes = 'button' | 'submit' | 'reset';
-export type ButtonColors = 'primary' | 'secondary' | 'tertiary' | 'danger';
+export type ButtonColors = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'black';
 export type ButtonVariants = 'filled' | 'outline' | 'ghost';
 export type ButtonSizes = 'sm' | 'md' | 'lg';
 export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {

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

@@ -1,15 +1,6 @@
 import { ReactNode } from 'react';
 import { Placement } from '@floating-ui/react';
 import { default as DropdownCheckboxItem } from './DropdownCheckboxItem';
-export interface DropdownApi {
-    visible: boolean;
-    isFocused: string | null;
-    menuRef: React.MutableRefObject<HTMLUListElement | null>;
-    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
-    setVisible: (visible: boolean) => void;
-    openDropdown: () => void;
-    closeDropdown: () => void;
-}
 export interface DropdownProps {
     /** Children Props */
     children: ReactNode | ((...props: any) => ReactNode);
@@ -77,7 +68,10 @@ export type DropdownMenuOptions = {
      */
     type: 'divider';
 };
-declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<DropdownApi>> & {
+declare const Dropdown: {
+    ({ 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: {

package/dist/components/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useMemo, useEffect } from "react";
+import { useMemo, useEffect } from "react";
 import clsx from "clsx";
 import useDropdown from "../../hooks/useDropdown/useDropdown.js";
 import DropdownCheckboxItem from "./DropdownCheckboxItem.js";
@@ -11,7 +11,7 @@ import DropdownRadioItem from "./DropdownRadioItem.js";
 import DropdownSeparator from "./DropdownSeparator.js";
 import DropdownTrigger from "./DropdownTrigger.js";
 import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
-const Root = /* @__PURE__ */ forwardRef(({
+const Root = ({
   children,
   block,
   overflow = !0,
@@ -23,7 +23,7 @@ const Root = /* @__PURE__ */ forwardRef(({
   focusOnVisible = !0,
   openOnSpace = !0,
   focusOnMouseEnter = !0
-}, refDropdown) => {
+}) => {
   const {
     visible,
     isFocused,
@@ -31,22 +31,8 @@ const Root = /* @__PURE__ */ forwardRef(({
     menuProps,
     itemProps,
     itemRefs,
-    setVisible,
-    menuRef,
-    triggerRef,
-    closeDropdown,
-    openDropdown
-  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter);
-  useImperativeHandle(refDropdown, () => ({
-    visible,
-    setVisible,
-    isFocused,
-    menuRef,
-    triggerRef,
-    closeDropdown,
-    openDropdown
-  }));
-  const ref = useClickOutside(() => {
+    setVisible
+  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter), ref = useClickOutside(() => {
     setVisible(!1);
   }), value = useMemo(() => ({
     visible,
@@ -56,10 +42,8 @@ const Root = /* @__PURE__ */ forwardRef(({
     itemProps,
     itemRefs,
     block,
-    setVisible,
-    openDropdown,
-    closeDropdown
-  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible, openDropdown, closeDropdown]), dropdown = clsx("dropdown", {
+    setVisible
+  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible]), dropdown = clsx("dropdown", {
     "w-100": block,
     "dropdown-nowrap": noWrap,
     overflow
@@ -67,7 +51,7 @@ const Root = /* @__PURE__ */ forwardRef(({
   return useEffect(() => {
     onToggle == null || onToggle(visible);
   }, [visible]), /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: dropdown, children: typeof children == "function" ? children(triggerProps, itemRefs, setVisible) : children }) });
-}), Dropdown = /* @__PURE__ */ Object.assign(Root, {
+}, Dropdown = /* @__PURE__ */ Object.assign(Root, {
   Trigger: DropdownTrigger,
   Menu: DropdownMenu,
   Item: DropdownItem,

package/dist/components/Layout/Layout.d.ts

@@ -4,11 +4,9 @@ export interface LayoutProps extends ComponentPropsWithoutRef<any> {
     children: ReactNode;
     /** Full screen mode without header component  */
     headless?: boolean;
-    /** Control white background - defaults to true */
-    whiteBg?: boolean;
 }
 export declare const Layout: {
-    ({ children, headless, whiteBg, ...restProps }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, headless, ...restProps }: LayoutProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Layout;

package/dist/components/Layout/Layout.js

@@ -12,7 +12,6 @@ import Button from "../Button/Button.js";
 const Layout = ({
   children,
   headless = !1,
-  whiteBg = !0,
   ...restProps
 }) => {
   const {
@@ -25,8 +24,7 @@ const Layout = ({
     handleCloseCookiesConsent
   } = useCookiesConsent();
   useZendeskGuide(), useCantoo();
-  const classes = clsx("d-flex flex-column", {
-    "bg-white": whiteBg,
+  const classes = clsx("d-flex flex-column bg-white", {
     "container-fluid": !headless,
     "rounded-4 border": (theme == null ? void 0 : theme.is1d) && !headless,
     "mt-24": (theme == null ? void 0 : theme.is1d) && !headless

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

@@ -1,16 +1,19 @@
 import { ChangeEvent } from 'react';
 import { Size } from '../../types';
+/**
+ * Base props shared by both SearchBar variants
+ */
 export interface BaseProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
     /**
-     * String or Template literal with React i18next namespace
+     * String or template literal key for i18next translation
      */
     placeholder?: string;
     /**
-     * Control SearchBar size
+     * Control SearchBar size (excluding 'sm')
      */
     size?: Exclude<Size, 'sm'>;
     /**
-     * Disabled status
+     * Disable the input
      */
     disabled?: boolean;
     /**
@@ -19,37 +22,58 @@ export interface BaseProps extends Omit<React.ComponentPropsWithoutRef<'input'>,
     buttonDisabled?: boolean;
     /**
      * Optional class for styling purpose
+     * Optional class for custom styling
      */
     className?: string;
     /**
-     * ChangeEvent Handler
+     * onChange handler for input changes
      */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Current value of the input
+     */
+    value?: string;
+    /**
+     * Show a clear (reset) button when value is present
+     */
+    clearable?: boolean;
 }
+/**
+ * Default SearchBar with a submit button
+ */
 type DefaultSearchBar = {
     /**
-     * Switch between button or dynamic search bar
+     * Use false to render the default SearchBar (with a button)
      */
     isVariant: false;
     /**
-     * Handle Search with Default SearchBar
+     * Callback when clicking the search button
      */
     onClick: () => void;
 };
+/**
+ * Dynamic SearchBar with icon and no submit button
+ */
 type DynamicSearchBar = {
     /**
-     * Switch between button or dynamic search bar
+     * Use true to render the dynamic SearchBar (with an icon inside input)
      */
     isVariant: true;
     /**
-     * Handle Search with Default SearchBar
+     * onClick must be undefined for dynamic variant
      */
     onClick?: undefined;
 };
+/**
+ * Props for the SearchBar component
+ */
 export type Props = DefaultSearchBar | DynamicSearchBar;
 export type SearchBarProps = BaseProps & Props;
+/**
+ * SearchBar component to handle dynamic or static search input
+ */
 declare const SearchBar: {
-    ({ isVariant, size, placeholder, className, disabled, buttonDisabled, onChange, onClick, ...restProps }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+    ({ isVariant, size, placeholder, className, disabled, buttonDisabled, onChange, onClick, value, clearable, ...restProps }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SearchBar;

package/dist/components/SearchBar/SearchBar.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
 import SvgIconSearch from "../../modules/icons/components/IconSearch.js";
 import FormControl from "../Form/FormControl.js";
 import SearchButton from "../Button/SearchButton.js";
@@ -13,6 +14,8 @@ const SearchBar = ({
   buttonDisabled,
   onChange,
   onClick,
+  value,
+  clearable = !1,
   ...restProps
 }) => {
   const {
@@ -22,15 +25,38 @@ const SearchBar = ({
     "position-relative": isVariant
   }), input = clsx({
     "border-end-0": !isVariant,
-    "ps-48": isVariant
+    "ps-48": isVariant,
+    "searchbar-hide-native-clear": isVariant && clearable
   }), handleClick = () => {
     onClick == null || onClick();
-  }, handleKeyDown = (e) => {
-    e.key === "Enter" && (e.preventDefault(), handleClick());
+  }, handleClear = () => {
+    const event = {
+      target: {
+        value: ""
+      }
+    };
+    onChange == null || onChange(event);
   };
   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, onKeyDown: handleKeyDown, ...restProps }),
+    /* @__PURE__ */ jsx(
+      FormControl.Input,
+      {
+        type: "search",
+        placeholder: t(placeholder),
+        size,
+        noValidationIcon: !0,
+        className: input,
+        onChange,
+        value,
+        disabled,
+        ...restProps
+      }
+    ),
+    isVariant && clearable && value && onChange && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: "position-absolute end-0 top-50 translate-middle-y pe-12 bg-transparent border-0", "aria-label": t("clear"), children: /* @__PURE__ */ jsx(SvgIconClose, { className: "color-gray", style: {
+      width: 12,
+      height: 12
+    } }) }),
     !isVariant && /* @__PURE__ */ jsx(SearchButton, { type: "submit", "aria-label": t("search"), icon: /* @__PURE__ */ jsx(SvgIconSearch, {}), className: "border-start-0", onClick: handleClick, disabled: buttonDisabled })
   ] });
 };

package/dist/components/Tabs/components/Tabs.d.ts

@@ -17,20 +17,12 @@ export interface TabsProps {
      * Children Props
      */
     children?: (...props: any) => ReactNode;
-    /**
-     * Whether tabs should take full available width
-     */
-    fullWidth?: boolean;
-    /**
-     * Whether tabs should take full available height
-     */
-    fullHeight?: boolean;
 }
 /**
  * Tab Content displayed one at a time when a Tab Item is selected
  */
 export declare const Tabs: {
-    ({ defaultId, items, fullWidth, fullHeight, onChange, children, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ defaultId, items, onChange, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
     Item: {
         ({ icon, badge, label, id, order, }: TabsItemProps & {
             order: number;
@@ -38,11 +30,11 @@ export declare const Tabs: {
         displayName: string;
     };
     Panel: {
-        ({ children, currentItem, fullHeight }: import('./TabsPanel').TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, currentItem }: import('./TabsPanel').TabsPanelProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     List: {
-        (props: import('./TabsList').TabsListProps): import("react/jsx-runtime").JSX.Element;
+        (props: import('react').ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     displayName: string;

package/dist/components/Tabs/components/Tabs.js

@@ -8,8 +8,6 @@ import TabsPanel from "./TabsPanel.js";
 const Tabs = ({
   defaultId,
   items,
-  fullWidth = !1,
-  fullHeight = !1,
   onChange,
   children
 }) => {
@@ -34,8 +32,8 @@ const Tabs = ({
     onKeyDown
   }), [activeTab, items, onKeyDown, setSelectedTab, tabUnderlineLeft, tabUnderlineWidth, tabsRef]), currentItem = items.find((item) => item.id === activeTab);
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: typeof children == "function" ? children(currentItem) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tabs.List, { fullWidth }),
-    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, fullHeight, children: currentItem == null ? void 0 : currentItem.content })
+    /* @__PURE__ */ jsx(Tabs.List, {}),
+    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, children: currentItem == null ? void 0 : currentItem.content })
   ] }) });
 };
 Tabs.Item = TabsItem;

package/dist/components/Tabs/components/TabsList.d.ts

@@ -1,12 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
-export interface TabsListProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Whether tabs should take full available width
-     */
-    fullWidth?: boolean;
-}
 declare const TabsList: {
-    (props: TabsListProps): import("react/jsx-runtime").JSX.Element;
+    (props: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default TabsList;

package/dist/components/Tabs/components/TabsList.js

@@ -9,13 +9,10 @@ const TabsList = (props) => {
     tabUnderlineWidth
   } = useTabsContext(), {
     className,
-    fullWidth,
     ...restProps
-  } = props, ulClasses = clsx("nav nav-tabs flex-nowrap", {
-    "w-100": fullWidth
-  }), tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
+  } = props, tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
   return /* @__PURE__ */ jsxs("div", { className: tabslist, ...restProps, children: [
-    /* @__PURE__ */ jsx("ul", { className: ulClasses, role: "tablist", children: items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)) }),
+    /* @__PURE__ */ jsx("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)) }),
     /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
       left: tabUnderlineLeft,
       width: tabUnderlineWidth

package/dist/components/Tabs/components/TabsPanel.d.ts

@@ -9,13 +9,9 @@ export interface TabsPanelProps {
      * Current Item
      */
     currentItem: TabsItemProps | undefined;
-    /**
-     * Whether tabs should take full available height
-     */
-    fullHeight?: boolean;
 }
 declare const TabsPanel: {
-    ({ children, currentItem, fullHeight }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, currentItem }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default TabsPanel;

package/dist/components/Tabs/components/TabsPanel.js

@@ -1,17 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useTabsContext } from "../context/TabsContext.js";
-import clsx from "clsx";
 const TabsPanel = ({
   children,
-  currentItem,
-  fullHeight
+  currentItem
 }) => {
   const {
     activeTab
-  } = useTabsContext(), contentClasses = clsx("tab-content d-flex flex-fill w-100", {
-    "position-relative h-100": fullHeight
-  });
-  return /* @__PURE__ */ jsx("div", { className: contentClasses, children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
+  } = useTabsContext();
+  return /* @__PURE__ */ jsx("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
 };
 export {
   TabsPanel as default

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

@@ -28,8 +28,6 @@ export interface UseDropdownProps {
     itemProps: Record<string, any>;
     setVisible: Dispatch<SetStateAction<boolean>>;
     openOnSpace?: boolean;
-    openDropdown: () => void;
-    closeDropdown: () => void;
 }
 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

@@ -159,8 +159,6 @@ const useDropdown = (placement, extraTriggerKeyDownHandler, isTriggerHovered = !
       onMenuItemClick: closeDropdown,
       onMenuItemKeyDown
     },
-    openDropdown,
-    closeDropdown,
     setVisible
   };
 };

package/dist/hooks/useLibraryUrl/useLibraryUrl.d.ts

@@ -3,5 +3,5 @@
  *
  * @returns the Library URL as a string. Returns null if no library was found in user apps.
  */
-declare const useLibraryUrl: () => string | null;
+declare const useLibraryUrl: (appCodeName?: string) => string | null;
 export default useLibraryUrl;

package/dist/hooks/useLibraryUrl/useLibraryUrl.js

@@ -1,11 +1,11 @@
 import { libraryMaps } from "@edifice.io/utilities";
 import { useEdificeClient } from "../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
-const useLibraryUrl = () => {
+const useLibraryUrl = (appCodeName) => {
   var _a;
   const {
     user,
     appCode
-  } = useEdificeClient(), appName = libraryMaps[appCode], libraryApp = user == null ? void 0 : user.apps.find((app) => app.isExternal && app.address.includes("library"));
+  } = useEdificeClient(), appName = libraryMaps[appCodeName ?? appCode], libraryApp = user == null ? void 0 : user.apps.find((app) => app.isExternal && app.address.includes("library"));
   if (!libraryApp)
     return null;
   const libraryUrlSplit = (_a = libraryApp.address) == null ? void 0 : _a.split("?");