@gisce/react-ooui 1.2.0-rc.7 → 1.2.0-rc.71

package/src/actionbar/TreeActionBar.tsx

@@ -61,6 +61,7 @@ function TreeActionBar(props: Props) {
     previousView,
     results,
     limit,
+    totalItems,
   } = useContext(ActionViewContext) as ActionViewContextType;
 
   const { parentContext = {}, treeExpandable, toolbar } = props;
@@ -162,9 +163,24 @@ function TreeActionBar(props: Props) {
               }
             }}
           />
+          {!treeExpandable && (
+            <ButtonWithBadge
+              icon={
+                <FilterOutlined
+                  style={{ color: searchVisible ? "white" : undefined }}
+                />
+              }
+              tooltip={t("advanced_search")}
+              type={searchVisible ? "primary" : "default"}
+              onClick={() => {
+                setSearchVisible?.(!searchVisible);
+              }}
+              disabled={duplicatingItem || removingItem || treeIsLoading}
+              badgeNumber={searchParams?.length}
+            />
+          )}
           {separator()}
           <NewButton disabled={treeIsLoading} />
-          {separator()}
           <ActionButton
             icon={<CopyOutlined />}
             tooltip={t("duplicate")}
@@ -190,22 +206,6 @@ function TreeActionBar(props: Props) {
           {separator()}
         </>
       )}
-      {!treeExpandable && (
-        <ButtonWithBadge
-          icon={
-            <FilterOutlined
-              style={{ color: searchVisible ? "white" : undefined }}
-            />
-          }
-          tooltip={t("advanced_search")}
-          type={searchVisible ? "primary" : "default"}
-          onClick={() => {
-            setSearchVisible?.(!searchVisible);
-          }}
-          disabled={duplicatingItem || removingItem || treeIsLoading}
-          badgeNumber={searchParams?.length}
-        />
-      )}
       <ActionButton
         icon={<InfoCircleOutlined />}
         tooltip={t("showLogs")}
@@ -289,11 +289,11 @@ function TreeActionBar(props: Props) {
                 width="1em"
                 height="1em"
                 viewBox="0 0 24 24"
-                stroke-width="1.5"
+                strokeWidth="1.5"
                 fill="none"
                 stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
                 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                 <ellipse cx="12" cy="6" rx="8" ry="3" />
@@ -351,14 +351,9 @@ function TreeActionBar(props: Props) {
           searchParams || []
         )}
         limit={limit}
-        totalRegisters={results?.length || 0}
-        selectedRegistersToExport={
-          selectedRowItems &&
-          selectedRowItems.length &&
-          selectedRowItems.length > 0
-            ? selectedRowItems.length
-            : undefined
-        }
+        totalRegisters={totalItems || 0}
+        selectedRegistersToExport={selectedRowItems}
+        visibleRegisters={results?.length || 0}
         context={parentContext}
       />
     </Space>

package/src/common/DatePicker.tsx

@@ -11,18 +11,19 @@ type DatePickerProps = WidgetProps & {
   showTime?: boolean;
 };
 
-const DatePickerConfig = {
+export const DatePickerConfig = {
   date: {
     placeholder: "__/__/____",
-    dateDisplayFormat: "YYYY-MM-DD",
+    dateDisplayFormat: "DD/MM/YYYY",
     dateInternalFormat: "YYYY-MM-DD",
   },
   time: {
     placeholder: "__/__/____ __:__:__",
-    dateDisplayFormat: "YYYY-MM-DD HH:mm:ss",
+    dateDisplayFormat: "DD/MM/YYYY HH:mm:ss",
     dateInternalFormat: "YYYY-MM-DD HH:mm:ss",
   },
 };
+
 const DatePicker = (props: DatePickerProps) => {
   const { ooui, showTime = false } = props;
   const { required } = ooui;

package/src/context/ActionViewContext.tsx

@@ -11,7 +11,7 @@ export type ActionViewContextType = {
   setFormIsSaving?: (value: boolean) => void;
   formHasChanges?: boolean;
   setFormHasChanges?: (value: boolean) => void;
-  onFormSave?: () => void;
+  onFormSave?: () => Promise<{ succeed: boolean; id: number }>;
   formRef?: any;
   searchTreeRef?: any;
   onNewClicked: () => void;
@@ -53,6 +53,7 @@ export type ActionViewContextType = {
   setSearchValues?: (value: any) => void;
   limit?: number;
   setLimit?: (value: number) => void;
+  setTitle?: (value: string) => void;
 };
 
 export const ActionViewContext =
@@ -66,7 +67,7 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
   const {
     children,
     currentView,
-    title,
+    title: titleProps,
     setCurrentView,
     availableViews,
     formRef,
@@ -106,6 +107,7 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
   const [limit, setLimit] = useState<number>(
     limitProps !== undefined ? limitProps : DEFAULT_SEARCH_LIMIT
   );
+  const [title, setTitle] = useState<string>(titleProps);
 
   useEffect(() => {
     if (results && results.length > 0 && !currentItemIndex) {
@@ -139,8 +141,8 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
     }
   }, [currentView]);
 
-  const callOnFormSave = () => {
-    (formRef.current as any)?.submitForm();
+  const callOnFormSave = async () => {
+    return await (formRef.current as any)?.submitForm();
   };
 
   return (
@@ -196,6 +198,7 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
         setSearchValues,
         limit,
         setLimit,
+        setTitle,
       }}
     >
       {children}

package/src/context/ContentRootContext.tsx

@@ -43,15 +43,20 @@ type ActionModalOpts = {
   actionData?: any;
 };
 
-export const ContentRootContext = React.createContext<ContentRootContextType | null>(
-  null
-);
+export const ContentRootContext =
+  React.createContext<ContentRootContextType | null>(null);
 
 type ContentRootProviderProps = {
   children: React.ReactNode;
   globalValues?: any;
 };
 
+const callRefreshValues = async (fns: any[]) => {
+  for (let i = 0; i < fns.length; i++) {
+    await fns?.[i]?.();
+  }
+};
+
 const ContentRootProvider = (
   props: ContentRootProviderProps,
   ref: any
@@ -64,7 +69,7 @@ const ContentRootProvider = (
     TabManagerContext
   ) as TabManagerContextType;
   const { openAction } = tabManagerContext || {};
-  const onRefreshParentValues = useRef<any>();
+  const onRefreshParentValues = useRef<any>([]);
   const { t } = useContext(LocaleContext) as LocaleContextType;
 
   useImperativeHandle(ref, () => ({
@@ -167,7 +172,7 @@ const ContentRootProvider = (
     onRefreshParentValues?: any;
   }) {
     const { type } = actionData;
-    onRefreshParentValues.current = onRefreshParentValuesFn;
+    onRefreshParentValues.current.push(onRefreshParentValuesFn);
 
     if (type === "ir.actions.report.xml") {
       return await generateReport({
@@ -230,6 +235,7 @@ const ContentRootProvider = (
           fields,
           values: { ...values, ...globalValues },
         }),
+        fields,
         context: mergedContext,
       });
     }
@@ -347,7 +353,8 @@ const ContentRootProvider = (
   }
 
   async function onFormModalSucceed() {
-    onRefreshParentValues.current?.();
+    callRefreshValues(onRefreshParentValues.current);
+    onRefreshParentValues.current = [];
     setActionModalVisible(false);
     setActionModalOptions({
       domain: undefined,
@@ -386,7 +393,8 @@ const ContentRootProvider = (
             visible={actionModalVisible}
             onSubmitSucceed={onFormModalSucceed}
             onCancel={() => {
-              onRefreshParentValues.current?.();
+              callRefreshValues(onRefreshParentValues.current);
+              onRefreshParentValues.current = [];
               setActionModalVisible(false);
               setActionModalOptions({
                 domain: undefined,

package/src/context/FormContext.tsx

@@ -18,11 +18,10 @@ export type FormContextType = {
   getValues: () => Promise<any>;
   getPlainValues: () => { [key: string]: any };
   getFields: () => Promise<any>;
-  setOriginalValue: (field: string, value: any) => void;
   domain: any[];
   submitForm?: (options?: {
     callOnSubmitSucceed?: boolean;
-  }) => Promise<boolean>;
+  }) => Promise<{ succeed: boolean; id: number }>;
   fetchValues?: () => void;
   formHasChanges?: () => boolean;
   elementHasLostFocus?: () => void;
@@ -45,7 +44,6 @@ const FormProvider = (props: FormProviderProps): any => {
     getContext,
     getValues,
     getPlainValues,
-    setOriginalValue,
     domain,
     submitForm,
     fetchValues,
@@ -67,7 +65,6 @@ const FormProvider = (props: FormProviderProps): any => {
         getFieldValue,
         executeButtonAction,
         getContext,
-        setOriginalValue,
         submitForm,
         fetchValues,
         formHasChanges,

package/src/helpers/formHelper.ts

@@ -1,4 +1,5 @@
 import { One2manyItem } from "@/widgets/base/one2many/One2manyInput";
+import { Form as FormOoui } from "@gisce/ooui";
 
 const filteredValues = (values: any, fields: any) => {
   if (!fields) {
@@ -100,15 +101,16 @@ export const getTouchedValues = ({
 
 export const checkFieldsType = ({
   changedFields,
-  fields,
+  formOoui,
   types,
 }: {
   changedFields: string[];
-  fields: any;
+  formOoui: FormOoui;
   types: string[];
 }) => {
   const valuesChecked = changedFields.map((key) => {
-    return types.includes(fields[key]?.type);
+    const fieldType = formOoui?.findById(key)?.type!;
+    return types.includes(fieldType);
   });
   return valuesChecked.some((i) => i === true);
 };
@@ -152,16 +154,35 @@ export const getValuesForDomain = (domain: any[]) => {
 export const getOnChangePayload = ({
   onChangeFieldActionArgs,
   values,
+  parentValues = {},
 }: {
   onChangeFieldActionArgs: any[];
   values: any;
+  parentValues?: any;
 }) => {
   const payload: any = {};
   onChangeFieldActionArgs.forEach((arg: string) => {
-    if (values[arg]) {
+    const splittedArg = arg.split("");
+
+    if (arg === "True") {
+      payload[arg] = true;
+    } else if (arg === "False") {
+      payload[arg] = false;
+    } else if (values[arg]) {
       payload[arg] = values[arg];
-    } else if (arg[0] === "'") {
+    } else if (
+      splittedArg[0] === "'" &&
+      splittedArg[splittedArg.length - 1] === "'" &&
+      splittedArg.filter((i: string) => i === "'").length === 2
+    ) {
       payload[arg] = arg.replace(/'/g, "");
+    } else if (splittedArg.includes("'")) {
+      // This is a string with a variable in it.
+      // TODO: pending implement.
+      payload[arg] = arg;
+    } else if (arg.indexOf("parent.") !== -1) {
+      const parentKey = arg.replace("parent.", "");
+      payload[arg] = parentValues[parentKey] || false;
     } else {
       payload[arg] = false;
     }

package/src/helpers/iconMapper.ts

@@ -1,112 +1,120 @@
 import React from "react";
+import * as AntIcons from "@ant-design/icons";
+import * as TablerIcons from "@tabler/icons-react";
 import Icon from "@ant-design/icons";
-import { AntIcons as Icons } from "./icons/antd_icons";
-import { TablerIcons } from "./icons/tabler_icons";
 
-const iconMapping: { [key: string]: React.ElementType } = {
-  "terp-purchase": Icons.ShoppingCartOutlined,
-  "terp-graph": Icons.PieChartOutlined,
-  "terp-crm": Icons.ContactsOutlined,
-  "terp-hr": TablerIcons.IconFriends,
-  "terp-account": TablerIcons.IconBuildingBank,
-  "terp-project": TablerIcons.IconChecklist,
-  "terp-administration": TablerIcons.IconAdjustments,
-  "terp-partner": Icons.TeamOutlined,
-  "terp-mrp": Icons.BuildOutlined,
-  "terp-product": Icons.ShoppingOutlined,
-  STOCK_JUSTIFY_FILL: Icons.UnorderedListOutlined,
-  STOCK_INDENT: TablerIcons.IconIndentIncrease,
-  STOCK_HELP: Icons.QuestionOutlined,
-  STOCK_GO_UP: Icons.ArrowUpOutlined,
-  STOCK_SORT_DESCENDING: Icons.SortDescendingOutlined,
-  STOCK_ADD: Icons.PlusOutlined,
-  STOCK_GOTO_LAST: Icons.FastForwardOutlined,
-  STOCK_FIND: Icons.SearchOutlined,
-  STOCK_PROPERTIES: Icons.ControlOutlined,
-  STOCK_DIALOG_INFO: Icons.InfoOutlined,
-  STOCK_FLOPPY: Icons.UsbOutlined,
-  STOCK_JUSTIFY_CENTER: Icons.AlignCenterOutlined,
-  STOCK_GO_BACK: Icons.ArrowLeftOutlined,
-  STOCK_UNDERLINE: Icons.UnderlineOutlined,
-  STOCK_BOLD: Icons.BoldOutlined,
-  STOCK_APPLY: Icons.CheckOutlined,
-  STOCK_ZOOM_OUT: Icons.ZoomOutOutlined,
-  STOCK_STRIKETHROUGH: Icons.StrikethroughOutlined,
-  STOCK_MEDIA_REWIND: Icons.BackwardOutlined,
-  STOCK_PRINT: Icons.PrinterOutlined,
-  STOCK_NO: Icons.CloseOutlined,
-  STOCK_GOTO_FIRST: Icons.FastBackwardOutlined,
-  STOCK_CLOSE: Icons.CloseOutlined,
-  STOCK_REMOVE: Icons.MinusOutlined,
-  STOCK_CUT: Icons.ScissorOutlined,
-  STOCK_DIALOG_AUTHENTICATION: Icons.SafetyOutlined,
-  STOCK_ZOOM_FIT: Icons.ExpandOutlined,
-  STOCK_JUMP_TO: Icons.SelectOutlined,
-  STOCK_HARDDISK: Icons.HddOutlined,
-  STOCK_SAVE_AS: Icons.SaveOutlined,
-  STOCK_UNDO: Icons.UndoOutlined,
-  STOCK_JUSTIFY_RIGHT: Icons.AlignRightOutlined,
-  STOCK_DIALOG_ERROR: Icons.CloseCircleOutlined,
-  STOCK_INDEX: Icons.ProfileOutlined,
-  STOCK_GOTO_BOTTOM: Icons.VerticalAlignBottomOutlined,
-  STOCK_MEDIA_NEXT: Icons.StepForwardOutlined,
-  STOCK_REDO: Icons.RedoOutlined,
-  STOCK_COPY: Icons.CopyOutlined,
-  STOCK_MEDIA_PAUSE: Icons.PauseOutlined,
-  STOCK_GO_FORWARD: Icons.ArrowRightOutlined,
-  STOCK_UNDELETE: Icons.UndoOutlined,
-  STOCK_EXECUTE: Icons.SettingOutlined,
-  STOCK_SAVE: Icons.SaveOutlined,
-  STOCK_DIALOG_QUESTION: Icons.QuestionCircleOutlined,
-  STOCK_SORT_ASCENDING: Icons.SortAscendingOutlined,
-  STOCK_REFRESH: Icons.ReloadOutlined,
-  STOCK_MEDIA_FORWARD: Icons.ForwardOutlined,
-  STOCK_STOP: Icons.BorderOutlined,
-  STOCK_PRINT_PREVIEW: Icons.PrinterOutlined,
-  STOCK_HOME: Icons.HomeOutlined,
-  STOCK_PASTE: Icons.CarryOutOutlined,
-  STOCK_ZOOM_100: Icons.ZoomInOutlined,
-  STOCK_FIND_AND_REPLACE: Icons.FileSearchOutlined,
-  STOCK_DIALOG_WARNING: Icons.WarningOutlined,
-  STOCK_ZOOM_IN: Icons.ZoomInOutlined,
-  STOCK_CONVERT: Icons.ExportOutlined,
-  STOCK_ITALIC: Icons.ItalicOutlined,
-  STOCK_YES: Icons.CheckOutlined,
-  STOCK_MEDIA_PLAY: Icons.PlayCircleOutlined,
-  STOCK_MEDIA_RECORD: Icons.VideoCameraOutlined,
-  STOCK_MEDIA_PREVIOUS: Icons.StepBackwardOutlined,
-  STOCK_NEW: Icons.FileAddOutlined,
-  STOCK_CANCEL: Icons.CloseOutlined,
-  STOCK_DISCONNECT: Icons.ApiOutlined,
-  STOCK_JUSTIFY_LEFT: Icons.AlignLeftOutlined,
-  STOCK_FILE: Icons.FileOutlined,
-  STOCK_QUIT: Icons.LogoutOutlined,
-  STOCK_EDIT: Icons.EditOutlined,
-  STOCK_CONNECT: Icons.ApiOutlined,
-  STOCK_GO_DOWN: Icons.CaretDownOutlined,
-  STOCK_NETWORK: Icons.ApartmentOutlined,
-  STOCK_OK: Icons.CheckOutlined,
-  STOCK_GOTO_TOP: Icons.VerticalAlignTopOutlined,
-  STOCK_ABOUT: Icons.StarOutlined,
-  STOCK_COLOR_PICKER: Icons.AimOutlined,
-  STOCK_SELECT_FONT: Icons.FontSizeOutlined,
-  STOCK_DELETE: Icons.DeleteOutlined,
-  STOCK_DND: Icons.FileTextOutlined,
-  STOCK_CLEAR: Icons.CloseSquareOutlined,
-  STOCK_UNINDENT: Icons.AlignLeftOutlined,
-  STOCK_PREFERENCES: Icons.SettingOutlined,
+type TablerKey = keyof typeof TablerIcons;
+type AntKey = keyof typeof AntIcons;
+
+const iconMapping: { [key: string]: string } = {
+  "terp-purchase": "ShoppingCart",
+  "terp-graph": "PieChart",
+  "terp-crm": "Contacts",
+  "terp-hr": "Friends",
+  "terp-account": "BuildingBank",
+  "terp-project": "Checklist",
+  "terp-administration": "Adjustments",
+  "terp-partner": "Team",
+  "terp-mrp": "Build",
+  "terp-product": "Shopping",
+  STOCK_JUSTIFY_FILL: "UnorderedList",
+  STOCK_INDENT: "IndentIncrease",
+  STOCK_HELP: "Question",
+  STOCK_GO_UP: "ArrowUp",
+  STOCK_SORT_DESCENDING: "SortDescending",
+  STOCK_ADD: "Plus",
+  STOCK_GOTO_LAST: "FastForward",
+  STOCK_FIND: "Search",
+  STOCK_PROPERTIES: "Control",
+  STOCK_DIALOG_INFO: "Info",
+  STOCK_FLOPPY: "Usb",
+  STOCK_JUSTIFY_CENTER: "AlignCenter",
+  STOCK_GO_BACK: "ArrowLeft",
+  STOCK_UNDERLINE: "Underline",
+  STOCK_BOLD: "Bold",
+  STOCK_APPLY: "Check",
+  STOCK_ZOOM_OUT: "ZoomOut",
+  STOCK_STRIKETHROUGH: "Strikethrough",
+  STOCK_MEDIA_REWIND: "Backward",
+  STOCK_PRINT: "Printer",
+  STOCK_NO: "Close",
+  STOCK_GOTO_FIRST: "FastBackward",
+  STOCK_CLOSE: "Close",
+  STOCK_REMOVE: "Minus",
+  STOCK_CUT: "Scissor",
+  STOCK_DIALOG_AUTHENTICATION: "Safety",
+  STOCK_ZOOM_FIT: "Expand",
+  STOCK_JUMP_TO: "Select",
+  STOCK_HARDDISK: "Hdd",
+  STOCK_SAVE_AS: "Save",
+  STOCK_UNDO: "Undo",
+  STOCK_JUSTIFY_RIGHT: "AlignRight",
+  STOCK_DIALOG_ERROR: "CloseCircle",
+  STOCK_INDEX: "Profile",
+  STOCK_GOTO_BOTTOM: "VerticalAlignBottom",
+  STOCK_MEDIA_NEXT: "StepForward",
+  STOCK_REDO: "Redo",
+  STOCK_COPY: "Copy",
+  STOCK_MEDIA_PAUSE: "Pause",
+  STOCK_GO_FORWARD: "ArrowRight",
+  STOCK_UNDELETE: "Undo",
+  STOCK_EXECUTE: "Setting",
+  STOCK_SAVE: "Save",
+  STOCK_DIALOG_QUESTION: "QuestionCircle",
+  STOCK_SORT_ASCENDING: "SortAscending",
+  STOCK_REFRESH: "Reload",
+  STOCK_MEDIA_FORWARD: "Forward",
+  STOCK_STOP: "Border",
+  STOCK_PRINT_PREVIEW: "Printer",
+  STOCK_HOME: "Home",
+  STOCK_PASTE: "CarryOut",
+  STOCK_ZOOM_100: "ZoomIn",
+  STOCK_FIND_AND_REPLACE: "FileSearch",
+  STOCK_DIALOG_WARNING: "Warning",
+  STOCK_ZOOM_IN: "ZoomIn",
+  STOCK_CONVERT: "Export",
+  STOCK_ITALIC: "Italic",
+  STOCK_YES: "Check",
+  STOCK_MEDIA_PLAY: "PlayCircle",
+  STOCK_MEDIA_RECORD: "VideoCamera",
+  STOCK_MEDIA_PREVIOUS: "StepBackward",
+  STOCK_NEW: "FileAdd",
+  STOCK_CANCEL: "Close",
+  STOCK_DISCONNECT: "Api",
+  STOCK_JUSTIFY_LEFT: "AlignLeft",
+  STOCK_FILE: "File",
+  STOCK_QUIT: "Logout",
+  STOCK_EDIT: "Edit",
+  STOCK_CONNECT: "Api",
+  STOCK_GO_DOWN: "CaretDown",
+  STOCK_NETWORK: "Apartment",
+  STOCK_OK: "Check",
+  STOCK_GOTO_TOP: "VerticalAlignTop",
+  STOCK_ABOUT: "Star",
+  STOCK_COLOR_PICKER: "Aim",
+  STOCK_SELECT_FONT: "FontSize",
+  STOCK_DELETE: "Delete",
+  STOCK_DND: "FileText",
+  STOCK_CLEAR: "CloseSquare",
+  STOCK_UNINDENT: "AlignLeft",
+  STOCK_PREFERENCES: "Setting",
 };
 
-export default (key: string): React.ElementType | undefined => {
+export default (key: string, className?: any) => {
   if (key.indexOf("gtk-") !== -1) {
-    const rootIcon = key.replace("gtk-", "").replace("-", "_");
-    const newKey = `STOCK_${rootIcon.toUpperCase()}`;
-    return iconMapping[newKey];
+    const rootIcon = key.replace("gtk-", "").replace(/\-/g, "_");
+    key = `STOCK_${rootIcon.toUpperCase()}`;
   }
+
   if (iconMapping.hasOwnProperty(key)) {
-    return iconMapping[key];
+    return getIconForKey(iconMapping[key], className);
   }
-  const IconCamelCase = `${key
+
+  return getIconForKey(key, className);
+};
+
+function toCamelCase(key: string): string {
+  return `${key
     .split("-")
     .map((word) =>
       word.replace(
@@ -115,18 +123,37 @@ export default (key: string): React.ElementType | undefined => {
       )
     )
     .join("")}`;
+}
+
+function getIconForKey(key: string, className?: any) {
+  let IconCamelCase = key.charAt(0).toUpperCase() + key.slice(1); // Capitalize first letter
+  if (IconCamelCase.indexOf("-") !== -1) {
+    IconCamelCase = toCamelCase(IconCamelCase);
+  }
 
-  const antKey = `${IconCamelCase}Outlined`;
-  if (Icons.hasOwnProperty(antKey)) {
-    return Icons[antKey];
+  const antKey: AntKey = `${IconCamelCase}Outlined` as any;
+  if (AntIcons[antKey]) {
+    return () =>
+      React.createElement(AntIcons[antKey] as any, {
+        className,
+      });
   }
 
-  const tablerKey = `Icon${IconCamelCase}`;
-  if (TablerIcons.hasOwnProperty(tablerKey)) {
+  const tablerKey: TablerKey = `Icon${IconCamelCase}` as any;
+  if (TablerIcons[tablerKey]) {
+    const TablerIcon = () =>
+      React.createElement(TablerIcons[tablerKey] as any, {
+        fill: "transparent",
+        height: 17,
+        width: 17,
+      });
     const CustomIcon = () =>
-      React.createElement(Icon, { component: TablerIcons[tablerKey] });
+      React.createElement(Icon, {
+        component: TablerIcon,
+        className,
+      });
     return CustomIcon;
   }
 
   return undefined;
-};
+}