impact-ui 4.0.1-alpha.8 → 4.0.1

package/dist/components/Select/menuList.js

@@ -1,39 +1,39 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { useMemo, useRef, useEffect } from "react";
+import { ShowAll as ShowAll_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
 import { components } from "react-select";
 import { FixedSizeList } from "react-window";
-import { getAssetUrl } from "../../utils/assetBase.js";
 import { Button } from "../Button/index.js";
 import { Loader } from "../Loader/index.js";
-const ShowAllIcon = getAssetUrl("icons/showAll.svg");
+import { useTranslation } from "../../i18n/useTranslation.js";
 const MenuList = (props) => {
+  var _a;
+  const { t } = useTranslation();
   const { options, children, maxHeight, selectProps } = props;
   const { isLoading } = selectProps;
   const itemHeight = 37;
   const optionList = options;
-  const [dynamicHeight, setDynamicHeight] = useState(
-    Math.min(optionList.length * itemHeight, maxHeight)
-  );
+  const dynamicHeight = useMemo(() => {
+    let calcHeight = options.length * itemHeight;
+    if (props.selectProps.isLoadingMore) {
+      calcHeight += 92;
+    }
+    return Math.min(calcHeight, maxHeight);
+  }, [options.length, props.selectProps.isLoadingMore, maxHeight]);
   const internalListRef = useRef(null);
   const highlightedIndex = selectProps.highlightedIndex ?? -1;
+  const isKeyboardNav = props.selectProps.isKeyboardNav;
   const listboxId = selectProps.listboxId;
-  useEffect(() => {
-    let calcHeight = optionList.length * itemHeight;
-    if (selectProps.isLoadingMore) {
-      calcHeight += 92;
-    }
-    setDynamicHeight(Math.min(calcHeight, maxHeight));
-  }, [optionList.length, maxHeight, selectProps.isLoadingMore, itemHeight]);
   useEffect(() => {
     if (selectProps.listRef && internalListRef.current) {
       selectProps.listRef.current = internalListRef.current;
     }
   });
   useEffect(() => {
-    if (highlightedIndex >= 0 && internalListRef.current) {
+    if (isKeyboardNav && highlightedIndex >= 0 && internalListRef.current) {
       internalListRef.current.scrollToItem(highlightedIndex, "smart");
     }
-  }, [highlightedIndex]);
+  }, [isKeyboardNav, highlightedIndex]);
   const handleScroll = ({
     scrollOffset,
     scrollUpdateWasRequested
@@ -55,46 +55,57 @@ const MenuList = (props) => {
   const childrenArr = Array.isArray(children) ? children : [];
   const itemCount = selectProps.isLoadingMore ? optionList.length + 1 : optionList.length;
   const footerMessage = selectProps.showFooterMessage;
+  const hasFooter = !!((props.selectProps.maxSelectableOptions || ((_a = props.selectProps.showFooterMessage) == null ? void 0 : _a.description)) && options.length > 0);
+  const menuListClass = `menulistScroll${hasFooter ? " has-footer" : ""}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "aria-label": "Options", className: "menulistScroll", id: listboxId, role: "listbox", children: /* @__PURE__ */ jsx(components.MenuList, { className: "menulistScroll", ...props, children: /* @__PURE__ */ jsx(
-      FixedSizeList,
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        ref: internalListRef,
-        height: dynamicHeight,
-        itemCount,
-        itemSize: itemHeight,
-        width: "100%",
-        onScroll: handleScroll,
-        children: ({ index, style }) => {
-          if (selectProps.isLoadingMore && index === optionList.length) {
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "ia-select-loading-container ia-select-loading-more-container",
-                style,
-                children: /* @__PURE__ */ jsx(Loader, { size: "small" })
+        "aria-label": t("select.ariaOptions"),
+        className: "menulistScroll",
+        id: listboxId,
+        role: "listbox",
+        children: /* @__PURE__ */ jsx(components.MenuList, { className: menuListClass, ...props, children: /* @__PURE__ */ jsx(
+          FixedSizeList,
+          {
+            ref: internalListRef,
+            height: dynamicHeight,
+            itemCount,
+            itemSize: itemHeight,
+            width: "100%",
+            onScroll: handleScroll,
+            children: ({ index, style }) => {
+              if (selectProps.isLoadingMore && index === optionList.length) {
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ia-select-loading-container ia-select-loading-more-container",
+                    style,
+                    children: /* @__PURE__ */ jsx(Loader, { size: "small" })
+                  }
+                );
               }
-            );
+              return /* @__PURE__ */ jsx("div", { style, children: childrenArr[index] });
+            }
           }
-          return /* @__PURE__ */ jsx("div", { style, children: childrenArr[index] });
-        }
+        ) })
       }
-    ) }) }),
+    ),
     selectProps.maxSelectableOptions != null && selectProps.maxSelectableOptions > 0 && optionList.length > 0 && /* @__PURE__ */ jsx("span", { className: "ia-select-max-selectable-options", children: `Maximum ${selectProps.maxSelectableOptions} selections` }),
     (footerMessage == null ? void 0 : footerMessage.description) && optionList.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ia-select-footer-message", children: [
       /* @__PURE__ */ jsx("span", { className: "ia-select-max-selectable-options", children: footerMessage.description }),
       footerMessage.actionButtonText && /* @__PURE__ */ jsx(
         Button,
         {
-          icon: /* @__PURE__ */ jsx("img", { alt: "", src: ShowAllIcon }),
+          icon: /* @__PURE__ */ jsx(ShowAll_default, { height: 16, width: 16 }),
           iconPlacement: "right",
           size: "small",
           type: "default",
           variant: "url",
           onClick: (e) => {
-            var _a;
+            var _a2;
             e.stopPropagation();
-            (_a = footerMessage.action) == null ? void 0 : _a.call(footerMessage);
+            (_a2 = footerMessage.action) == null ? void 0 : _a2.call(footerMessage);
           },
           children: footerMessage.actionButtonText
         }

package/dist/components/Select/utils.d.ts

@@ -6,7 +6,7 @@ export declare const handleSelectAllWhenCompLoads: ({ currentOptions, selectedOp
 export declare const handleClearAll: ({ externalOnClearAll, setSelectedOptions, setIsSelectAll, handleSelect, syncParentChildSelection, }: HandleClearAllParams) => void;
 export declare const handleDropdownClose: ({ externalOnDropdownClose, setCurrentOptions, initialOptions, currentOptions, setIsOpen, onBlur, event, }: HandleDropdownCloseParams) => void;
 export declare const handleDropdownOpen: ({ externalOnDropdownOpen, isOpen, setIsOpen, }: HandleDropdownOpenParams) => void;
-export declare const getPlaceholder: (isMulti: boolean | undefined, selectedOptions: SelectOption | SelectOption[] | undefined, placeholder: string | undefined, customPlaceholderAfterSelect?: string | number | null, selectionLabels?: SelectSelectionLabels) => string;
+export declare const getPlaceholder: (isMulti: boolean | undefined, selectedOptions: SelectOption | SelectOption[] | undefined, placeholder: string | undefined, customPlaceholderAfterSelect?: string | number | null, selectionLabels?: SelectSelectionLabels, t?: (key: string) => string) => string;
 export declare const onKeyDown: ({ e, focusedIndex, currentOptions, }: {
     e: React.KeyboardEvent;
     focusedIndex: React.MutableRefObject<number>;

package/dist/components/Select/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Select/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,qBAAqB,EACrB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,wBAAwB,EACxB,kCAAkC,EACnC,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,YAAY,GAAI,gFAM1B,kBAAkB,KAAG,IAsBvB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,oHAQ7B,qBAAqB,KAAG,IAqB1B,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,0DAI1C,kCAAkC,KAAG,IASvC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,qGAM5B,oBAAoB,KAAG,IASzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,2GAQjC,yBAAyB,KAAG,IAU9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,gDAIhC,wBAAwB,KAAG,IAO7B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,SAAS,OAAO,GAAG,SAAS,EAC5B,iBAAiB,YAAY,GAAG,YAAY,EAAE,GAAG,SAAS,EAC1D,aAAa,MAAM,GAAG,SAAS,EAC/B,+BAA8B,MAAM,GAAG,MAAM,GAAG,IAAW,EAC3D,kBAAiB,qBAA0B,KAC1C,MAYF,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,sCAIvB;IACD,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvB,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC7C,cAAc,EAAE,YAAY,EAAE,CAAC;CAChC,KAAG,IA0BH,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,SAAS,YAAY,EAAE,GAAG,SAAS,KAAG,YAAY,EAQhF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Select/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,qBAAqB,EACrB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,wBAAwB,EACxB,kCAAkC,EACnC,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,YAAY,GAAI,gFAM1B,kBAAkB,KAAG,IAsBvB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,oHAQ7B,qBAAqB,KAAG,IAqB1B,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,0DAI1C,kCAAkC,KAAG,IASvC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,qGAM5B,oBAAoB,KAAG,IASzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,2GAQjC,yBAAyB,KAAG,IAU9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,gDAIhC,wBAAwB,KAAG,IAO7B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,SAAS,OAAO,GAAG,SAAS,EAC5B,iBAAiB,YAAY,GAAG,YAAY,EAAE,GAAG,SAAS,EAC1D,aAAa,MAAM,GAAG,SAAS,EAC/B,+BAA8B,MAAM,GAAG,MAAM,GAAG,IAAW,EAC3D,kBAAiB,qBAA0B,EAC3C,IAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAqE,KACxF,MAYF,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,sCAIvB;IACD,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvB,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC7C,cAAc,EAAE,YAAY,EAAE,CAAC;CAChC,KAAG,IA0BH,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,SAAS,YAAY,EAAE,GAAG,SAAS,KAAG,YAAY,EAQhF,CAAC"}

package/dist/components/Select/utils.js

@@ -66,13 +66,13 @@ const handleDropdownOpen = ({
     setIsOpen(!isOpen);
   }
 };
-const getPlaceholder = (isMulti, selectedOptions, placeholder, customPlaceholderAfterSelect = null, selectionLabels = {}) => {
+const getPlaceholder = (isMulti, selectedOptions, placeholder, customPlaceholderAfterSelect = null, selectionLabels = {}, t = (key) => key === "select.selectedLabel" ? "Selected" : key) => {
   var _a;
   if (!isMulti && Object.entries(selectedOptions ?? {}).length > 0) {
     const single = selectedOptions;
     return typeof single.value !== "undefined" ? single.label : placeholder ?? "";
   } else if (isMulti && Array.isArray(selectedOptions) && selectedOptions.length > 0) {
-    return selectedOptions.length === 1 ? ((_a = selectedOptions[0]) == null ? void 0 : _a.label) ?? placeholder ?? "" : `${selectionLabels.selected ?? "Selected"} (${customPlaceholderAfterSelect ?? selectedOptions.length})`;
+    return selectedOptions.length === 1 ? ((_a = selectedOptions[0]) == null ? void 0 : _a.label) ?? placeholder ?? "" : `${selectionLabels.selected ?? t("select.selectedLabel")} (${customPlaceholderAfterSelect ?? selectedOptions.length})`;
   }
   return placeholder ?? "";
 };

package/dist/components/Sidebar/SidebarActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarActions.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarActions.tsx"],"names":[],"mappings":"AAKA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,mBAAmB,2CAiCzE;yBAjCe,cAAc"}
+{"version":3,"file":"SidebarActions.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarActions.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,mBAAmB,2CAmCzE;yBAnCe,cAAc"}

package/dist/components/Sidebar/SidebarActions.js

@@ -1,8 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getAssetUrl } from "../../utils/assetBase.js";
 import { Tooltip } from "../Tooltip/index.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 const LogOutIcon = getAssetUrl("icons/logout-icon.svg");
 function SidebarActions({ open, handleLogOut }) {
+  const { t } = useTranslation();
+  const logoutLabel = t("sidebar.logout");
   const logoutRow = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -22,15 +25,15 @@ function SidebarActions({ open, handleLogOut }) {
         }
       },
       children: [
-        /* @__PURE__ */ jsx("img", { alt: "Logout", className: "logout-container-img", src: LogOutIcon }),
-        /* @__PURE__ */ jsx("div", { className: "impact-sidebar-actions-list-item-label", children: "Logout" })
+        /* @__PURE__ */ jsx("img", { alt: logoutLabel, className: "logout-container-img", src: LogOutIcon }),
+        /* @__PURE__ */ jsx("div", { className: "impact-sidebar-actions-list-item-label", children: logoutLabel })
       ]
     }
   );
   if (open) {
     return logoutRow;
   }
-  return /* @__PURE__ */ jsx(Tooltip, { orientation: "right", title: "Logout", variant: "tertiary", children: logoutRow });
+  return /* @__PURE__ */ jsx(Tooltip, { orientation: "right", title: logoutLabel, variant: "tertiary", children: logoutRow });
 }
 SidebarActions.displayName = "SidebarActions";
 export {

package/dist/components/Sidebar/SidebarMenus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenus.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarMenus.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB,EAAE,CACvB,IAAI,EAAE,YAAY,EAClB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,KAC3C,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,CACtB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,YAAY,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,KAC3C,IAAI,CAAC;IACV,cAAc,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAkED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,MAAM,EACN,YAAY,EACZ,uBAAuB,EACvB,WAAW,EACX,sBAAsB,EACtB,cAAc,EACd,mBAA2C,GAC5C,EAAE,iBAAiB,2CA0EnB;yBApFe,YAAY"}
+{"version":3,"file":"SidebarMenus.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarMenus.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB,EAAE,CACvB,IAAI,EAAE,YAAY,EAClB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,KAC3C,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,CACtB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,YAAY,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,KAC3C,IAAI,CAAC;IACV,cAAc,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAkED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,MAAM,EACN,YAAY,EACZ,uBAAuB,EACvB,WAAW,EACX,sBAAsB,EACtB,cAAc,EACd,mBAA2C,GAC5C,EAAE,iBAAiB,2CA2EnB;yBArFe,YAAY"}

package/dist/components/Sidebar/SidebarMenus.js

@@ -3,6 +3,7 @@ import { useState, Fragment } from "react";
 import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowDownOutlined.js";
 import { ChildMenu } from "./ChildMenu.js";
 import { ParentMenu } from "./ParentMenu.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 const DEFAULT_VISIBLE_COUNT = 6;
 function MenuConfig({
   showItem,
@@ -58,6 +59,7 @@ function SidebarMenus({
   isMemoryRouter,
   visibleModulesCount = DEFAULT_VISIBLE_COUNT
 }) {
+  const { t } = useTranslation();
   const visibleMenu = routes.slice(0, visibleModulesCount);
   const hiddenMenu = routes.slice(visibleModulesCount);
   const [showChild, setShowChild] = useState("");
@@ -105,10 +107,7 @@ function SidebarMenus({
           children: [
             /* @__PURE__ */ jsx(default_1, { "aria-hidden": "true" }),
             " ",
-            /* @__PURE__ */ jsxs("span", { children: [
-              "View ",
-              showHiddenMenu ? "Less" : "More"
-            ] })
+            /* @__PURE__ */ jsx("span", { children: showHiddenMenu ? t("sidebar.viewLess") : t("sidebar.viewMore") })
           ]
         }
       ),

package/dist/components/Sidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,uBAAuB,CAAC;AAK/B,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElE,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,SAAS,EACT,WAAW,EACX,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,uBAAuB,EACvB,WAAW,EACX,sBAAsB,EACtB,YAAY,EACZ,uBAA8B,EAC9B,cAAqB,EACrB,mBAAmB,EACnB,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,GAC1B,EAAE,YAAY,2CAsGd;yBAvHe,OAAO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,uBAAuB,CAAC;AAK/B,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElE,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,SAAS,EACT,WAAW,EACX,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,uBAAuB,EACvB,WAAW,EACX,sBAAsB,EACtB,YAAY,EACZ,uBAA8B,EAC9B,cAAqB,EACrB,mBAAmB,EACnB,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,GAC1B,EAAE,YAAY,2CAuGd;yBAxHe,OAAO"}

package/dist/components/Sidebar/index.js

@@ -6,6 +6,7 @@ import { SidebarActions } from "./SidebarActions.js";
 import { SidebarMenus } from "./SidebarMenus.js";
 import { useShortcut } from "../Shortcuts/useShortcut.js";
 
+import { useTranslation } from "../../i18n/useTranslation.js";
 const HamburgerClose = getAssetUrl("icons/collapse-icon.svg");
 const HamburgerOpen = getAssetUrl("icons/hamburger-close.svg");
 function Sidebar({
@@ -26,6 +27,7 @@ function Sidebar({
   id,
   "data-testid": dataTestId
 }) {
+  const { t } = useTranslation();
   const sidebarRef = useRef(null);
   const handleToggle = useCallback(() => {
     setIsOpen((prev) => !prev);
@@ -35,13 +37,13 @@ function Sidebar({
       {
         keys: "mod+b",
         id: "sidebar-toggle-mod-b",
-        description: "Toggle sidebar",
+        description: t("sidebar.shortcut.toggleSidebar"),
         handler: handleToggle
       },
       {
         keys: "alt+l",
         id: "sidebar-logout-alt-l",
-        description: "Log out",
+        description: t("sidebar.shortcut.logOut"),
         handler: () => {
           handleLogOut();
         }
@@ -68,7 +70,7 @@ function Sidebar({
     "nav",
     {
       ref: sidebarRef,
-      "aria-label": "Main navigation",
+      "aria-label": t("sidebar.mainNavigation"),
       className: `impact-sidebar-container ${isOpen ? "sidebar-open" : ""} ${className ?? ""}`.trim(),
       "data-testid": dataTestId,
       id,
@@ -76,7 +78,7 @@ function Sidebar({
         /* @__PURE__ */ jsx(
           "div",
           {
-            "aria-label": isOpen ? "Collapse sidebar" : "Expand sidebar",
+            "aria-label": isOpen ? t("sidebar.collapseSidebar") : t("sidebar.expandSidebar"),
             className: "impact-sidebar-toggle-btns",
             role: "button",
             tabIndex: 0,

package/dist/components/Slider/index.d.ts

@@ -4,7 +4,7 @@ export type { SliderProps, SliderHeaderOrientation, SliderVariant, SliderInputPo
 /**
  * Slider with optional header, label, and range inputs. Wraps MUI Slider; supports single and ranged variants.
  */
-export declare function Slider({ headerOrientation, header, label, value, onChange, required, disabled, min, max, variant, inputPosition, colorChangeThreshold, valueFormat, messageTimeout, className, id, 'data-testid': dataTestId, ...sliderProps }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ headerOrientation: _headerOrientation, header, label, value, onChange, required, disabled, min, max, variant, inputPosition, colorChangeThreshold, valueFormat, messageTimeout, className, id, 'data-testid': dataTestId, ...sliderProps }: SliderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Slider {
     var displayName: string;
 }

package/dist/components/Slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,sBAAsB,CAAC;AAE9B,YAAY,EACV,WAAW,EACX,uBAAuB,EACvB,aAAa,EACb,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AASxB;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,iBAAyB,EACzB,MAAM,EACN,KAAK,EACL,KAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAO,EACP,GAAS,EACT,OAAmB,EACnB,aAAwB,EACxB,oBAAoB,EACpB,WAAW,EACX,cAAqB,EACrB,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,GAAG,WAAW,EACf,EAAE,WAAW,2CAqQb;yBAxRe,MAAM"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,sBAAsB,CAAC;AAE9B,YAAY,EACV,WAAW,EACX,uBAAuB,EACvB,aAAa,EACb,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AASxB;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EAAE,kBAA0B,EAC7C,MAAM,EACN,KAAK,EACL,KAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAO,EACP,GAAS,EACT,OAAmB,EACnB,aAAwB,EACxB,oBAAoB,EACpB,WAAW,EACX,cAAqB,EACrB,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,GAAG,WAAW,EACf,EAAE,WAAW,2CA+Pb;yBAlRe,MAAM"}

package/dist/components/Slider/index.js

@@ -12,7 +12,7 @@ function isRangedValue(value) {
   return Array.isArray(value) && value.length === 2;
 }
 function Slider({
-  headerOrientation = "top",
+  headerOrientation: _headerOrientation = "top",
   header,
   label,
   value = 0,
@@ -133,13 +133,7 @@ function Slider({
     if (!focusedInput && valueFormat && typeof formatted === "string") return formatted;
     return raw;
   };
-  const layoutClass = [
-    "impact_slider_layout",
-    "slider-container",
-    headerOrientation === "top" ? "header-top" : "header-left",
-    `input-position-${inputPosition}`,
-    className ?? ""
-  ].filter(Boolean).join(" ");
+  const layoutClass = ["impact_slider_layout", `input-position-${inputPosition}`, className ?? ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: "slider-container", "data-testid": dataTestId, id, children: [
     /* @__PURE__ */ jsxs("div", { className: layoutClass, children: [
       isRanged && inputPosition === "inline" && /* @__PURE__ */ jsx("div", { className: "input_layout_style ranged ranged-start", children: /* @__PURE__ */ jsx("form", { noValidate: true, autoComplete: "off", children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(

package/dist/components/Table/AdvanceSearchModalItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdvanceSearchModalItem.d.ts","sourceRoot":"","sources":["../../../src/components/Table/AdvanceSearchModalItem.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,sBAAsB,GAAI;;;;;;;;;;;;;;;;;;;;;;;;CAwB/B,4CAmUA,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"AdvanceSearchModalItem.d.ts","sourceRoot":"","sources":["../../../src/components/Table/AdvanceSearchModalItem.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,sBAAsB,GAAI;;;;;;;;;;;;;;;;;;;;;;;;CAwB/B,4CAoUA,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/Table/AdvanceSearchModalItem.js

@@ -9,6 +9,7 @@ import { DatePicker } from "../DatePicker/index.js";
 import { DateRangePicker } from "../DateRangePicker/index.js";
 import { Input } from "../Input/index.js";
 import { Select } from "../Select/index.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 const AdvanceSearchModalItem = ({
   colDefs,
   control,
@@ -36,6 +37,7 @@ const AdvanceSearchModalItem = ({
   ...args
 }) => {
   var _a, _b, _c, _d;
+  const { t } = useTranslation();
   const [isColumnOptionsOpen, setIsColumnOptionsOpen] = useState(false);
   const [isOperationOptionsOpen, setIsOperationOptionsOpen] = useState(false);
   const [isThirdOptionDropdownOpen, setIsThirdOptionDropdownOpen] = useState(false);
@@ -151,7 +153,7 @@ const AdvanceSearchModalItem = ({
         isOpen: isColumnOptionsOpen,
         minWidth: activeOption !== "advanceSearch" ? 400 : void 0,
         name: `filters.${formIndex}.column`,
-        placeholder: "Select",
+        placeholder: t("table.search.selectPlaceholder"),
         selectedOptions: columnField.value || null,
         setCurrentOptions: setCurrentFilteredColumnsInitialOptions,
         setIsOpen: (val) => {
@@ -204,7 +206,7 @@ const AdvanceSearchModalItem = ({
         isDisabled: !columnField.value,
         isOpen: isOperationOptionsOpen,
         name: `filters.${formIndex}.operation`,
-        placeholder: "Select",
+        placeholder: t("table.search.selectPlaceholder"),
         selectedOptions: operationField.value || null,
         setCurrentOptions: setCurrentOperationOptions,
         setIsOpen: (val) => {
@@ -229,7 +231,7 @@ const AdvanceSearchModalItem = ({
         isOpen: isThirdOptionDropdownOpen,
         minWidth: activeOption !== "advanceSearch" ? 344 : void 0,
         name: `filters.${formIndex}.value`,
-        placeholder: "Select value",
+        placeholder: t("table.search.selectValue"),
         selectedOptions: valueField.value || null,
         setCurrentOptions: setCurrentThirdOptionDropdownOptions,
         setIsOpen: setIsThirdOptionDropdownOpen,
@@ -248,7 +250,7 @@ const AdvanceSearchModalItem = ({
         fullWidth: true,
         isDisabled: !operationField.value,
         name: `filters.${formIndex}.value`,
-        placeholder: "Select date",
+        placeholder: t("table.search.selectDate"),
         selectedDate: valueField.value ? moment(valueField.value) : void 0,
         setSelectedDate: (date) => {
           valueField.onChange(date);
@@ -282,7 +284,7 @@ const AdvanceSearchModalItem = ({
       {
         isDisabled: activeOption == "advanceSearch" && !operationField.value,
         name: `filters.${formIndex}.value`,
-        placeholder: "Enter text",
+        placeholder: t("table.search.enterText"),
         value: valueField.value || "",
         onChange: (e) => {
           valueField.onChange(e.target.value);

package/dist/components/Table/AdvanceSortModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdvanceSortModal.d.ts","sourceRoot":"","sources":["../../../src/components/Table/AdvanceSortModal.tsx"],"names":[],"mappings":"AAuKA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAY,EAAE,SAAc,EAAE,OAAO,EAAE;;;;;;CAAA,2CAkJhG"}
+{"version":3,"file":"AdvanceSortModal.d.ts","sourceRoot":"","sources":["../../../src/components/Table/AdvanceSortModal.tsx"],"names":[],"mappings":"AAmKA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAY,EAAE,SAAc,EAAE,OAAO,EAAE;;;;;;CAAA,2CAoJhG"}

package/dist/components/Table/AdvanceSortModal.js

@@ -1,30 +1,29 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
+import { Plus as Plus_default, SaveViewDeleteIcon as SaveViewDeleteIcon_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
 import default_1 from "../../node_modules/@mui/icons-material/DragIndicator.js";
-import { getAssetUrl } from "../../utils/assetBase.js";
 import { Badge } from "../Badge/index.js";
 import { Button } from "../Button/index.js";
 import { Modal } from "../Modal/index.js";
 import { Select } from "../Select/index.js";
 import { Tooltip } from "../Tooltip/index.js";
-const SaveViewDeleteIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/saveViewDeleteIcon.svg"), ...props });
-const AddOutlinedIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/plus.svg"), ...props });
-const SORT_ORDER_OPTIONS_TEXT = [
-  { label: "Ascending (A To Z)", value: "asc" },
-  { label: "Descending (Z To A)", value: "desc" }
-];
-const SORT_ORDER_OPTIONS_NUMBER = [
-  { label: "Smallest to largest", value: "asc" },
-  { label: "Largest to smallest", value: "desc" }
-];
-function getSortOrderOptionsByFilter(filterType) {
+import { useTranslation } from "../../i18n/useTranslation.js";
+function getSortOrderOptionsByFilter(filterType, t) {
+  const textOptions = [
+    { label: t("table.sort.ascending"), value: "asc" },
+    { label: t("table.sort.descending"), value: "desc" }
+  ];
+  const numberOptions = [
+    { label: t("table.sort.smallestToLargest"), value: "asc" },
+    { label: t("table.sort.largestToSmallest"), value: "desc" }
+  ];
   if (filterType === "agNumberColumnFilter") {
-    return SORT_ORDER_OPTIONS_NUMBER;
+    return numberOptions;
   }
   if (filterType === "agTextColumnFilter") {
-    return SORT_ORDER_OPTIONS_TEXT;
+    return textOptions;
   }
-  return SORT_ORDER_OPTIONS_TEXT;
+  return textOptions;
 }
 let nextId = 1;
 const generateId = () => `sort-row-${nextId++}`;
@@ -61,19 +60,20 @@ function SortRow({
   onOrderChange,
   onDelete,
   dragHandlers,
-  rowsCount
+  rowsCount,
+  t
 }) {
   const [columnIsOpen, setColumnIsOpen] = useState(false);
   const [orderIsOpen, setOrderIsOpen] = useState(false);
   const [columnCurrentOptions, setColumnCurrentOptions] = useState(availableColumnOptions);
   const [orderCurrentOptions, setOrderCurrentOptions] = useState(
-    getSortOrderOptionsByFilter(selectedColumnFilter)
+    getSortOrderOptionsByFilter(selectedColumnFilter, t)
   );
   useEffect(() => {
     setColumnCurrentOptions(availableColumnOptions);
   }, [availableColumnOptions]);
   useEffect(() => {
-    setOrderCurrentOptions(getSortOrderOptionsByFilter(selectedColumnFilter));
+    setOrderCurrentOptions(getSortOrderOptionsByFilter(selectedColumnFilter, t));
   }, [selectedColumnFilter]);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -99,9 +99,9 @@ function SortRow({
                 handleChange: (val) => onColumnChange(index, val),
                 initialOptions: availableColumnOptions,
                 isOpen: columnIsOpen,
-                label: "Column",
+                label: t("table.sort.column"),
                 minWidth: "210px",
-                placeholder: "Select column",
+                placeholder: t("table.sort.selectColumn"),
                 selectedOptions: selectedColumnOption,
                 setCurrentOptions: setColumnCurrentOptions,
                 setIsOpen: setColumnIsOpen,
@@ -115,11 +115,11 @@ function SortRow({
                 withPortal: true,
                 currentOptions: orderCurrentOptions,
                 handleChange: (val) => onOrderChange(index, val),
-                initialOptions: getSortOrderOptionsByFilter(selectedColumnFilter),
+                initialOptions: getSortOrderOptionsByFilter(selectedColumnFilter, t),
                 isOpen: orderIsOpen,
-                label: "Sorting Order",
+                label: t("table.sort.sortingOrder"),
                 minWidth: "210px",
-                placeholder: "Select sorting order",
+                placeholder: t("table.sort.selectSortingOrder"),
                 selectedOptions: selectedOrderOption,
                 setCurrentOptions: setOrderCurrentOptions,
                 setIsOpen: setOrderIsOpen,
@@ -134,7 +134,7 @@ function SortRow({
             Badge,
             {
               color: "default",
-              label: `Priority ${index + 1}`,
+              label: t("table.sort.priority", { number: index + 1 }),
               size: "default",
               sx: {
                 background: "#F1F3FE !important",
@@ -146,11 +146,11 @@ function SortRow({
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "divider-line" }),
-          /* @__PURE__ */ jsx(Tooltip, { title: "Delete", variant: "tertiary", children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block" }, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Tooltip, { title: t("table.sort.delete"), variant: "tertiary", children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block" }, children: /* @__PURE__ */ jsx(
             Button,
             {
               disabled: rowsCount === 1,
-              icon: /* @__PURE__ */ jsx(SaveViewDeleteIcon, {}),
+              icon: /* @__PURE__ */ jsx(SaveViewDeleteIcon_default, {}),
               size: "medium",
               type: "destructive",
               variant: "secondary",
@@ -163,6 +163,7 @@ function SortRow({
   );
 }
 function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply }) {
+  const { t } = useTranslation();
   const [rows, setRows] = useState([makeEmptyRow()]);
   const dragIndexRef = useRef(null);
   const dragOverIndexRef = useRef(null);
@@ -233,7 +234,7 @@ function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply
   const getSelectedOrderOption = (order, colId) => {
     var _a;
     const filterType = (_a = getSelectedColumnOption(colId)) == null ? void 0 : _a.filter;
-    return getSortOrderOptionsByFilter(filterType).find((o) => o.value === order) || null;
+    return getSortOrderOptionsByFilter(filterType, t).find((o) => o.value === order) || null;
   };
   const usedColIds = rows.map((r) => r.colId).filter(Boolean);
   const getAvailableColumnOptionsForRow = (rowColId) => columnOptions.filter((opt) => opt.value === rowColId || !usedColIds.includes(opt.value));
@@ -242,17 +243,17 @@ function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply
     {
       className: "advance-sort-modal",
       open,
-      primaryButtonLabel: "Apply",
-      secondaryButtonLabel: "Cancel",
+      primaryButtonLabel: t("common.apply"),
+      secondaryButtonLabel: t("common.cancel"),
       size: "medium",
-      title: "Advance Sort",
+      title: t("table.sort.title"),
       onClose,
       onPrimaryButtonClick: handleApply,
       onSecondaryButtonClick: onClose,
       children: /* @__PURE__ */ jsxs("div", { className: "advance-sort-modal-body", children: [
         /* @__PURE__ */ jsxs("div", { className: "advance-sort-section-header", children: [
-          /* @__PURE__ */ jsx("span", { className: "advance-sort-section-title", children: "Column sort" }),
-          /* @__PURE__ */ jsx(Button, { variant: "url", onClick: handleClearAll, children: "Clear All" })
+          /* @__PURE__ */ jsx("span", { className: "advance-sort-section-title", children: t("table.sort.columnSort") }),
+          /* @__PURE__ */ jsx(Button, { variant: "url", onClick: handleClearAll, children: t("common.clearAll") })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "advance-sort-rows", children: rows.map((row, index) => {
           var _a;
@@ -267,6 +268,7 @@ function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply
               selectedColumnFilter: (_a = getSelectedColumnOption(row.colId)) == null ? void 0 : _a.filter,
               selectedColumnOption: getSelectedColumnOption(row.colId),
               selectedOrderOption: getSelectedOrderOption(row.order, row.colId),
+              t,
               onColumnChange: handleColumnChange,
               onDelete: handleDeleteRow,
               onOrderChange: handleOrderChange
@@ -275,16 +277,16 @@ function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply
           );
         }) }),
         /* @__PURE__ */ jsxs("div", { className: "advance-sort-footer-actions", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleClearValues, children: "Clear Values" }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleClearValues, children: t("table.sort.clearValues") }),
           /* @__PURE__ */ jsx(
             Button,
             {
               className: "advance-sort-add-level-button",
               disabled: columnOptions.length === rows.length,
-              icon: /* @__PURE__ */ jsx(AddOutlinedIcon, {}),
+              icon: /* @__PURE__ */ jsx(Plus_default, {}),
               variant: "tertiary",
               onClick: handleAddLevel,
-              children: "Add Level"
+              children: t("table.sort.addLevel")
             }
           )
         ] })

package/dist/components/Table/AgGridHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgGridHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/AgGridHeader.tsx"],"names":[],"mappings":"AAwBA,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,YAAY,EACZ,cAAc,EACd,oBAA2B,EAC3B,GAAG,IAAI,EACR;;;;;;;;;;CAAA,kDAm5BA;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AgGridHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/AgGridHeader.tsx"],"names":[],"mappings":"AA8BA,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,YAAY,EACZ,cAAc,EACd,oBAA2B,EAC3B,GAAG,IAAI,EACR;;;;;;;;;;CAAA,kDAm8BA;AAED,eAAe,YAAY,CAAC"}