@edifice.io/react 2.2.11-develop-enabling.20250707100621 → 2.2.11-develop-pedago.20250707105307

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' | 'black';
+export type ButtonColors = 'primary' | 'secondary' | 'tertiary' | 'danger';
 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,6 +1,15 @@
 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);
@@ -68,10 +77,7 @@ export type DropdownMenuOptions = {
      */
     type: 'divider';
 };
-declare const Dropdown: {
-    ({ children, block, overflow, noWrap, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-} & {
+declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<DropdownApi>> & {
     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 { useMemo, useEffect } from "react";
+import { forwardRef, useImperativeHandle, 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 = ({
+const Root = /* @__PURE__ */ forwardRef(({
   children,
   block,
   overflow = !0,
@@ -23,7 +23,7 @@ const Root = ({
   focusOnVisible = !0,
   openOnSpace = !0,
   focusOnMouseEnter = !0
-}) => {
+}, refDropdown) => {
   const {
     visible,
     isFocused,
@@ -31,8 +31,22 @@ const Root = ({
     menuProps,
     itemProps,
     itemRefs,
-    setVisible
-  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter), ref = useClickOutside(() => {
+    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(!1);
   }), value = useMemo(() => ({
     visible,
@@ -42,8 +56,10 @@ const Root = ({
     itemProps,
     itemRefs,
     block,
-    setVisible
-  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible]), dropdown = clsx("dropdown", {
+    setVisible,
+    openDropdown,
+    closeDropdown
+  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible, openDropdown, closeDropdown]), dropdown = clsx("dropdown", {
     "w-100": block,
     "dropdown-nowrap": noWrap,
     overflow
@@ -51,7 +67,7 @@ const Root = ({
   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,9 +4,11 @@ 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, ...restProps }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, headless, whiteBg, ...restProps }: LayoutProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Layout;

package/dist/components/Layout/Layout.js

@@ -12,6 +12,7 @@ import Button from "../Button/Button.js";
 const Layout = ({
   children,
   headless = !1,
+  whiteBg = !0,
   ...restProps
 }) => {
   const {
@@ -24,7 +25,8 @@ const Layout = ({
     handleCloseCookiesConsent
   } = useCookiesConsent();
   useZendeskGuide(), useCantoo();
-  const classes = clsx("d-flex flex-column bg-white", {
+  const classes = clsx("d-flex flex-column", {
+    "bg-white": whiteBg,
     "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,19 +1,16 @@
 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 key for i18next translation
+     * String or Template literal with React i18next namespace
      */
     placeholder?: string;
     /**
-     * Control SearchBar size (excluding 'sm')
+     * Control SearchBar size
      */
     size?: Exclude<Size, 'sm'>;
     /**
-     * Disable the input
+     * Disabled status
      */
     disabled?: boolean;
     /**
@@ -22,58 +19,37 @@ export interface BaseProps extends Omit<React.ComponentPropsWithoutRef<'input'>,
     buttonDisabled?: boolean;
     /**
      * Optional class for styling purpose
-     * Optional class for custom styling
      */
     className?: string;
     /**
-     * onChange handler for input changes
+     * ChangeEvent Handler
      */
     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 = {
     /**
-     * Use false to render the default SearchBar (with a button)
+     * Switch between button or dynamic search bar
      */
     isVariant: false;
     /**
-     * Callback when clicking the search button
+     * Handle Search with Default SearchBar
      */
     onClick: () => void;
 };
-/**
- * Dynamic SearchBar with icon and no submit button
- */
 type DynamicSearchBar = {
     /**
-     * Use true to render the dynamic SearchBar (with an icon inside input)
+     * Switch between button or dynamic search bar
      */
     isVariant: true;
     /**
-     * onClick must be undefined for dynamic variant
+     * Handle Search with Default SearchBar
      */
     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, value, clearable, ...restProps }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+    ({ isVariant, size, placeholder, className, disabled, buttonDisabled, onChange, onClick, ...restProps }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SearchBar;

package/dist/components/SearchBar/SearchBar.js

@@ -1,7 +1,6 @@
 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";
@@ -14,8 +13,6 @@ const SearchBar = ({
   buttonDisabled,
   onChange,
   onClick,
-  value,
-  clearable = !1,
   ...restProps
 }) => {
   const {
@@ -25,38 +22,15 @@ const SearchBar = ({
     "position-relative": isVariant
   }), input = clsx({
     "border-end-0": !isVariant,
-    "ps-48": isVariant,
-    "searchbar-hide-native-clear": isVariant && clearable
+    "ps-48": isVariant
   }), handleClick = () => {
     onClick == null || onClick();
-  }, handleClear = () => {
-    const event = {
-      target: {
-        value: ""
-      }
-    };
-    onChange == null || onChange(event);
+  }, 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,
-        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
-    } }) }),
+    /* @__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, disabled: buttonDisabled })
   ] });
 };

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

@@ -17,12 +17,20 @@ 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, onChange, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ defaultId, items, fullWidth, fullHeight, onChange, children, }: TabsProps): import("react/jsx-runtime").JSX.Element;
     Item: {
         ({ icon, badge, label, id, order, }: TabsItemProps & {
             order: number;
@@ -30,11 +38,11 @@ export declare const Tabs: {
         displayName: string;
     };
     Panel: {
-        ({ children, currentItem }: import('./TabsPanel').TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, currentItem, fullHeight }: import('./TabsPanel').TabsPanelProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     List: {
-        (props: import('react').ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+        (props: import('./TabsList').TabsListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     displayName: string;

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

@@ -8,6 +8,8 @@ import TabsPanel from "./TabsPanel.js";
 const Tabs = ({
   defaultId,
   items,
+  fullWidth = !1,
+  fullHeight = !1,
   onChange,
   children
 }) => {
@@ -32,8 +34,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, {}),
-    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, children: currentItem == null ? void 0 : currentItem.content })
+    /* @__PURE__ */ jsx(Tabs.List, { fullWidth }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, fullHeight, children: currentItem == null ? void 0 : currentItem.content })
   ] }) });
 };
 Tabs.Item = TabsItem;

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

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

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

@@ -9,10 +9,13 @@ const TabsList = (props) => {
     tabUnderlineWidth
   } = useTabsContext(), {
     className,
+    fullWidth,
     ...restProps
-  } = props, tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
+  } = props, ulClasses = clsx("nav nav-tabs flex-nowrap", {
+    "w-100": fullWidth
+  }), tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
   return /* @__PURE__ */ jsxs("div", { className: tabslist, ...restProps, children: [
-    /* @__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("ul", { className: ulClasses, 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,9 +9,13 @@ export interface TabsPanelProps {
      * Current Item
      */
     currentItem: TabsItemProps | undefined;
+    /**
+     * Whether tabs should take full available height
+     */
+    fullHeight?: boolean;
 }
 declare const TabsPanel: {
-    ({ children, currentItem }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, currentItem, fullHeight }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default TabsPanel;

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

@@ -1,13 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { useTabsContext } from "../context/TabsContext.js";
+import clsx from "clsx";
 const TabsPanel = ({
   children,
-  currentItem
+  currentItem,
+  fullHeight
 }) => {
   const {
     activeTab
-  } = 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 }) });
+  } = 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 }) });
 };
 export {
   TabsPanel as default

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

@@ -28,6 +28,8 @@ 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,6 +159,8 @@ 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: (appCodeName?: string) => string | null;
+declare const useLibraryUrl: () => 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 = (appCodeName) => {
+const useLibraryUrl = () => {
   var _a;
   const {
     user,
     appCode
-  } = useEdificeClient(), appName = libraryMaps[appCodeName ?? appCode], libraryApp = user == null ? void 0 : user.apps.find((app) => app.isExternal && app.address.includes("library"));
+  } = useEdificeClient(), appName = libraryMaps[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("?");