@edifice.io/react 2.2.11 → 2.2.12-develop-enabling.20250716115923

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/Button/Button.js

@@ -19,7 +19,7 @@ const Button = /* @__PURE__ */ forwardRef(({
   const classes = clsx("btn", {
     [`btn-filled btn-${color}`]: variant === "filled",
     [`btn-${variant}-${color}`]: variant === "outline" || variant === "ghost",
-    "btn-icon btn-sm": !children,
+    "btn-icon": !children,
     "btn-loading": isLoading,
     "btn-lg": size === "lg",
     "btn-sm": size === "sm",

package/dist/components/Button/IconButton.js

@@ -9,7 +9,8 @@ const IconButton = /* @__PURE__ */ forwardRef(({
 }, ref) => {
   const buttonProps = {
     ...restProps,
-    className: clsx("btn-icon btn-sm", className)
+    className: clsx("btn-icon", className),
+    size: restProps.size || "sm"
   };
   return /* @__PURE__ */ jsx(Button, { ref, ...buttonProps, leftIcon: icon });
 });

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,27 @@ 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, onKeyDown: handleKeyDown, ...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/Toolbar/Toolbar.js

@@ -66,7 +66,7 @@ const Toolbar = /* @__PURE__ */ forwardRef(({
       case "divider":
         return /* @__PURE__ */ jsx("div", { className: "toolbar-divider" }, item.name ?? index);
       case "button":
-        return /* @__PURE__ */ jsx(Tooltip, { message: hideLabel ? renderTooltipMessage(item) : void 0, placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, children: !hideLabel && item.props.children, "aria-label": item.name, key: item.name ?? index, color: item.props.color || "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+        return /* @__PURE__ */ jsx(Tooltip, { message: hideLabel ? renderTooltipMessage(item) : void 0, placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, children: !hideLabel && item.props.children, "aria-label": item.name, key: item.name ?? index, color: item.props.color || "tertiary", variant: "ghost", size: item.props.size || hideLabel ? "sm" : "md", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
       case "icon":
         return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(IconButton, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: item.props.variant ? item.props.variant : "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
       case "dropdown":

package/dist/hooks/useDirectory/useDirectory.d.ts

@@ -1,6 +1,6 @@
 import { ID } from '@edifice.io/client';
 declare const useDirectory: () => {
-    getAvatarURL: (userId: ID, type: "user" | "group") => string;
+    getAvatarURL: (userId: ID, type: "user" | "group") => string | undefined;
     getUserbookURL: (userId: ID, type: "user" | "group") => string;
 };
 export default useDirectory;

package/dist/hooks/useDirectory/useDirectory.js

@@ -1,7 +1,8 @@
 import { odeServices } from "@edifice.io/client";
 const useDirectory = () => {
   function getAvatarURL(userId, type) {
-    return odeServices.directory().getAvatarUrl(userId, type);
+    if (userId !== "")
+      return odeServices.directory().getAvatarUrl(userId, type);
   }
   function getUserbookURL(userId, type) {
     return odeServices.directory().getDirectoryUrl(userId, type);

package/dist/hooks/useDropdown/useDropdown.js

@@ -35,7 +35,12 @@ const useDropdown = (placement, extraTriggerKeyDownHandler, isTriggerHovered = !
     visible && menuRef.current && focusOnVisible ? (menuRef.current.focus(), setActiveIndex(0)) : (setActiveIndex(-1), itemRefs.current = {});
   }, [visible]), useEffect(() => {
     if (activeIndex !== -1) {
-      const currentItem = Object.values(itemRefs.current)[activeIndex];
+      const filteredItems = Object.values(itemRefs.current).filter((item) => !!item);
+      if (activeIndex < 0 || activeIndex >= filteredItems.length) {
+        setActiveIndex(-1), setIsFocused(null);
+        return;
+      }
+      const currentItem = filteredItems[activeIndex];
       if (currentItem) {
         const id2 = currentItem.getAttribute("id");
         setIsFocused(id2), currentItem.focus();

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("?");

package/dist/hooks/useUploadFiles/useUploadFiles.js

@@ -11,7 +11,8 @@ const useUploadFiles = ({
   const [uploadedFiles, setUploadedFiles] = useState([]), [editingImage, setEditingImage] = useState(void 0), {
     files,
     deleteFile,
-    replaceFileAt
+    replaceFileAt,
+    inputRef
   } = useDropzoneContext(), {
     remove,
     createOrUpdate
@@ -21,18 +22,19 @@ const useUploadFiles = ({
     clearUploadStatus,
     uploadFile,
     uploadAlternateFile
-  } = useUpload(visibility, application), tryUploading = useCallback((files2) => {
+  } = useUpload(visibility, application), resetInputValue = useCallback(() => {
+    inputRef.current && (inputRef.current.value = "");
+  }, [inputRef]), tryUploading = useCallback((files2) => {
     files2.forEach(async (file, index) => {
       if (file == null) return;
-      let resource;
+      let resource, replacement;
       if (file.type.startsWith("image"))
         try {
-          const replacement = await ImageResizer.resizeImageFile(file);
-          resource = await uploadAlternateFile(file, replacement), replaceFileAt(index, replacement);
+          replacement = await ImageResizer.resizeImageFile(file), resource = await uploadAlternateFile(file, replacement), replaceFileAt(index, replacement);
         } catch (err) {
           console.error(err);
         }
-      resource || (resource = await uploadFile(file)), resource && setUploadedFiles((prevFiles) => [...prevFiles, resource]);
+      !resource && !replacement && (resource = await uploadFile(file)), resource ? setUploadedFiles((prevFiles) => [...prevFiles, resource]) : resetInputValue();
     });
   }, [uploadAlternateFile, uploadFile, replaceFileAt]);
   useEffect(() => {
@@ -53,7 +55,7 @@ const useUploadFiles = ({
   };
   async function removeFile(file) {
     const resource = uploadedFiles.find((uploadedFile) => uploadedFile.name === file.name);
-    resource && (await remove(resource), clearUploadStatus(file), setUploadedFiles((prevFiles) => prevFiles.filter((prevFile) => prevFile.name !== (resource == null ? void 0 : resource.name)))), deleteFile(file);
+    resource && (await remove(resource), clearUploadStatus(file), setUploadedFiles((prevFiles) => prevFiles.filter((prevFile) => prevFile.name !== (resource == null ? void 0 : resource.name)))), deleteFile(file), resetInputValue();
   }
   async function updateImage({
     blob,

package/dist/hooks/useZendeskGuide/useZendeskGuide.js

@@ -60,7 +60,8 @@ function useZendeskGuide() {
                 messageButton: {
                   "*": "Assistance ENT",
                   "es-419": "Asistencia ENT"
-                }
+                },
+                originalArticleButton: zendeskGuideConfig.articleRedirectButton ?? !0
               }
             }
           }), window.addEventListener("scroll", () => {