@inceptionbg/iui 2.0.16 → 2.0.17

package/src/components/Table/components/templates/CreateTemplateDialog.tsx

@@ -0,0 +1,48 @@
+import { useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ILocalPopupControl } from '../../../../types/IPopup';
+import type { IReportTemplate } from '../../../../types/ITable';
+import { Dialog } from '../../../Dialog/Dialog';
+import { TextInput } from '../../../Inputs/TextInput';
+import { Checkbox } from '../../../Inputs/Checkbox';
+import { useTableContext } from '../../contexts/TableContext';
+
+interface Props {
+  control: ILocalPopupControl;
+}
+
+export const CreateTemplateDialog: FC<Props> = ({ control }) => {
+  const { t } = useTranslation();
+  const { templateData: { createItem } = {} } = useTableContext();
+
+  const [formData, setFormData] = useState<Partial<IReportTemplate>>({});
+
+  return (
+    <Dialog
+      title={t('CreateTemplateLong')}
+      control={control}
+      onFormSubmit={() => createItem?.onCreate(formData)}
+      footer={{
+        confirmButton: {
+          label: t('CreateTemplate'),
+          type: 'submit',
+        },
+      }}
+      onCloseCallback={() => setFormData({})}
+    >
+      <TextInput
+        label={t('TemplateName')}
+        required
+        value={formData.name}
+        setValue={name => setFormData({ ...formData, name })}
+      />
+      {createItem?.allowPublicCreate && (
+        <Checkbox
+          label={t('PublicTemplate')}
+          value={formData.isPublic}
+          setValue={isPublic => setFormData({ ...formData, isPublic })}
+        />
+      )}
+    </Dialog>
+  );
+};

package/src/components/Table/components/templates/TableTemplates.tsx

@@ -1,4 +1,4 @@
-import { type FC } from 'react';
+import { useEffect, type FC } from 'react';
 import { IconButton } from '../../../Button/IconButton';
 import { useTranslation } from 'react-i18next';
 import { useTableContext } from '../../contexts/TableContext';
@@ -6,11 +6,30 @@ import { faBookmark, faBookmarkSlash, faTrashCan } from '../../../../assets/icon
 import { Pullover } from '../../../Pullover/Pullover';
 import { List } from '../../../List/List';
 import { setTemplateData } from '../../../../utils/tableUtils';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { CreateTemplateDialog } from './CreateTemplateDialog';
 
 export const TableTemplates: FC = () => {
   const { t } = useTranslation();
   const { templateData, columnData, filterData, sortData } = useTableContext();
 
+  const createTemplatePopupController = usePopupControl();
+
+  useEffect(() => {
+    if (templateData?.defaultTemplate) {
+      setTemplateData({
+        template: templateData.defaultTemplate,
+        columnData,
+        setFilters: e => {
+          filterData?.setSearchData(e);
+          filterData?.onSearch(e);
+        },
+        setSort: sortData?.setSort,
+      });
+    }
+    // eslint-disable-next-line
+  }, [templateData?.defaultTemplate]);
+
   if (!templateData) return null;
 
   return (
@@ -34,12 +53,12 @@ export const TableTemplates: FC = () => {
         footer={{
           confirmButton: {
             label: t('CreateTemplate'),
-            onClick: templateData.initiateCreate,
+            onClick: createTemplatePopupController.onOpen,
             splitActions: [
               {
                 label: t('CreateDefaultTemplate'),
                 icon: faBookmark,
-                onClick: templateData.initiateCreateDefault,
+                onClick: templateData.createItem.onCreateDefault,
               },
             ],
           },
@@ -86,7 +105,8 @@ export const TableTemplates: FC = () => {
           noItemsMessage={t('NoTemplatesAvailable')}
         />
       </Pullover>
-      {templateData.TemplateNode}
+      <CreateTemplateDialog control={createTemplatePopupController.control} />
+      {templateData.DeleteDialog}
     </>
   );
 };

package/src/components/Table/contexts/TableContext.tsx

@@ -11,21 +11,24 @@ import {
   IPaginationControl,
   ITable,
   ITableColumnsData,
+  ITableDataActions,
   ITableEdit,
   ITableSelectedAction,
 } from '../../../types/ITable';
 import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
 import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
+import { useTranslation } from 'react-i18next';
 
-interface ITableContext extends ITable {
+interface ITableContext<T = unknown> extends ITable<T> {
   columnData: ITableColumnsData;
   selectActions: ITableSelectedAction[];
-  dataActions?: ITable['dataActions'] & {
+  dataActions?: ITableDataActions<T> & {
     hasItemActions: boolean;
     isEditable: boolean;
     isDeletable: boolean;
+    filteredActions: ITableSelectedAction[];
   };
-  editable?: ITableEdit & {
+  editable?: ITableEdit<T> & {
     isAdding: boolean;
     setIsAdding: Dispatch<SetStateAction<boolean>>;
   };
@@ -35,17 +38,13 @@ interface ITableContext extends ITable {
   };
 }
 
-const TableContext = createContext<ITableContext>({
+const TableContext = createContext<ITableContext<any>>({
   columnData: { columns: [], defaultColumns: [] },
   data: [],
   selectActions: [],
 });
 
-interface Props extends ITable {
-  children: ReactNode;
-}
-
-export const TableProvider = ({
+export const TableProvider = <T,>({
   columnData,
   data: initialData,
   dataActions,
@@ -54,38 +53,48 @@ export const TableProvider = ({
   children,
   rowSelect,
   ...rest
-}: Props) => {
+}: ITable<T> & { children: ReactNode }) => {
+  const { t } = useTranslation();
   const [isAdding, setIsAdding] = useState(false);
 
-  const selectActions = useMemo(
-    () => rowSelect?.actions.filter(e => !e.hidden) || [],
-    [rowSelect?.actions]
-  );
+  const selectActions = useMemo(() => {
+    const actions = (rowSelect?.actions ?? []).filter(e => !e.hidden);
+    if (rest.itemDeleteData?.hasAccess) {
+      actions.push({
+        label: t('Delete'),
+        onClick: e => rest.itemDeleteData!.setItemToDeleteUuids([...e]),
+      });
+    }
+    return actions;
+  }, [rowSelect?.actions, rest.itemDeleteData, t]);
+
   const updatedDataActions = useMemo(() => {
-    const isEditable = Boolean(dataActions?.edit?.hasAccess);
-    const isDeletable = Boolean(dataActions?.delete?.hasAccess);
-    const filteredDataActions = dataActions?.actions?.filter(e => e.hasAccess) ?? [];
+    const isEditable = Boolean(dataActions?.hasEditAccess);
+    const isDeletable = Boolean(rest.itemDeleteData?.hasAccess);
+    const filteredActions = dataActions?.actions?.().filter(e => e.hasAccess) ?? [];
     return {
-      ...dataActions,
-      actions: filteredDataActions,
-      hasItemActions: isEditable || isDeletable || filteredDataActions.length > 0,
+      hasEditAccess: isEditable,
+      actions: dataActions?.actions,
+      filteredActions,
+      hasItemActions: isEditable || isDeletable || filteredActions.length > 0,
       isEditable,
       isDeletable,
     };
-  }, [dataActions]);
+  }, [dataActions, rest.itemDeleteData?.hasAccess]);
 
   const localPagination = useLocalTablePagination({
     defaultLimit: footer?.customPagination?.defaultLimit,
   });
-  const data = useLocalTableData({
+  const data = useLocalTableData<T>({
     initialData,
     localPagination,
     controledPagination: !!footer?.paginationControl,
     dataActions: updatedDataActions,
+    isDeletable: updatedDataActions.isDeletable,
     rowSelect,
   });
 
-  const tableContextValue: ITableContext = {
+  const tableContextValue: ITableContext<T> = {
     ...rest,
     data,
     dataActions: updatedDataActions,
@@ -99,7 +108,7 @@ export const TableProvider = ({
     tableContextValue.footer = {
       ...footer,
       paginationControl: footer?.paginationControl ?? localPagination,
-      totalRows: footer?.totalRows ?? initialData.length,
+      totalRows: footer?.totalRows ?? initialData?.length ?? 0,
       noTotalRows: footer?.totalRows === undefined,
     };
 

package/src/components/Table/hooks/localHooks/useLocalTableColumns.tsx

@@ -25,9 +25,9 @@ export const useLocalTableColumns = () => {
     if (hasSelect) {
       const selectableData = data.filter(e => !e.disableSelect);
       const selectedSome =
-        !!rowSelect.selectedRows.size &&
+        !!rowSelect?.selectedRows.size &&
         selectableData.some(e => !rowSelect.selectedRows.has(e.uuid));
-      const selectedAll = !!rowSelect.selectedRows.size && !selectedSome;
+      const selectedAll = !!rowSelect?.selectedRows.size && !selectedSome;
 
       const selectColumn: ITableColumn = {
         id: 'select',
@@ -37,7 +37,7 @@ export const useLocalTableColumns = () => {
             setValue={() => {
               selectedAll
                 ? rowSelect.setSelectedRows(new Set<string>())
-                : rowSelect.setSelectedRows(oldValue => {
+                : rowSelect?.setSelectedRows(oldValue => {
                     let newSet = new Set(oldValue);
                     selectableData.forEach(e => newSet.add(e.uuid!));
                     return newSet;
@@ -53,13 +53,15 @@ export const useLocalTableColumns = () => {
     }
 
     newCols = newCols.concat(filteredColumns);
-    hasItemActions &&
+    // Actions Column
+    if (hasItemActions) {
       newCols.push({
         id: 'actions',
         label: t('Actions'),
         align: 'center',
         className: 'actions-col',
       });
+    }
 
     return newCols;
   }, [columns, selectActions.length, data, rowSelect, hasItemActions, t]);

package/src/components/Table/hooks/localHooks/useLocalTableData.tsx

@@ -1,24 +1,31 @@
 import { useEffect, useState } from 'react';
-import { IPaginationControl, ITable, ITableDataItem } from '../../../../types/ITable';
+import {
+  IPaginationControl,
+  ITable,
+  ITableDataActions,
+  ITableDataItem,
+} from '../../../../types/ITable';
 import { Checkbox } from '../../../Inputs/Checkbox';
 import { TableItemActions } from '../../components/items/TableItemActions';
 
-interface Props {
-  initialData: ITableDataItem[];
+interface Props<T> {
+  initialData: ITableDataItem<T>[];
   controledPagination: boolean;
   localPagination: IPaginationControl;
-  dataActions?: ITable['dataActions'];
+  dataActions?: ITableDataActions<T>;
+  isDeletable: boolean;
   rowSelect: ITable['rowSelect'];
 }
 
-export const useLocalTableData = ({
+export const useLocalTableData = <T,>({
   initialData,
   controledPagination,
   localPagination,
   dataActions,
+  isDeletable,
   rowSelect,
-}: Props) => {
-  const [data, setData] = useState<ITableDataItem[]>(initialData);
+}: Props<T>) => {
+  const [data, setData] = useState<ITableDataItem<T>[]>(initialData);
 
   useEffect(() => {
     const newData =
@@ -29,11 +36,9 @@ export const useLocalTableData = ({
             localPagination.offset * localPagination.limit + localPagination.limit
           );
 
-    const additionalDataActions = dataActions?.actions?.filter(e => e.hasAccess) ?? [];
+    const additionalDataActions = dataActions?.actions?.().filter(e => e.hasAccess) ?? [];
     const withActions = Boolean(
-      dataActions?.edit?.hasAccess ||
-        dataActions?.delete?.hasAccess ||
-        additionalDataActions.length
+      dataActions?.hasEditAccess || isDeletable || additionalDataActions.length
     );
 
     const withAdditionalColumns = Boolean(rowSelect || withActions);
@@ -71,6 +76,7 @@ export const useLocalTableData = ({
     localPagination.limit,
     localPagination.offset,
     rowSelect,
+    isDeletable,
     dataActions,
   ]);
 

package/src/components/Table/hooks/localHooks/useLocalTableKeyboard.ts

@@ -7,13 +7,14 @@ import { useTableContext } from '../../contexts/TableContext';
 export const useLocalTableKeyboard = () => {
   const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
 
-  const { keyboard, data, editable, dataActions, rowSelect, footer } = useTableContext();
+  const { keyboard, data, editable, itemDeleteData, dataActions, rowSelect, footer } =
+    useTableContext();
 
   useEffect(() => {
     if (keyboard?.enabled) {
       const isEditing = !!editable?.selectedItem;
       const isAdding = !!editable?.isAdding;
-      const isEditDisabled = !editable || keyboard?.actions.editDisabled;
+      const isEditDisabled = !editable || keyboard?.actions?.editDisabled;
       const isAddDisabled = !!editable?.addDisabled;
       const isMoveDisabled = !!keyboard?.actions?.moveDisabled;
       const isBulkAction =
@@ -55,7 +56,7 @@ export const useLocalTableKeyboard = () => {
             ctrl: true,
             disabled: isEditing || isEditDisabled || !focusedRow,
             onAction: () => {
-              editable?.setSelectedItem(focusedRow?.item ?? null);
+              editable?.setSelectedItem(focusedRow);
             },
           },
           {
@@ -83,10 +84,9 @@ export const useLocalTableKeyboard = () => {
           },
           {
             code: 'Delete',
-            disabled: isEditing || !keyboard?.actions.delete?.enabled || !focusedRow,
+            disabled: !dataActions?.isDeletable || isEditing || !focusedRow,
             onAction: () =>
-              keyboard?.actions.delete?.onAction ??
-              keyboard?.actions.delete?.setItemToDeleteUuids(
+              itemDeleteData?.setItemToDeleteUuids(
                 isBulkAction ? Array.from(rowSelect.selectedRows) : [focusedRow!.uuid]
               ),
           },
@@ -162,6 +162,8 @@ export const useLocalTableKeyboard = () => {
     editable,
     keyboard,
     dataActions?.hasItemActions,
+    dataActions?.isDeletable,
+    itemDeleteData,
     focusedRow,
     footer,
     rowSelect,

package/src/components/Table/hooks/useTableColumns.ts

@@ -3,13 +3,11 @@ import { ITableColumn, ITableColumnsData } from '../../../types/ITable';
 
 export interface ITableColumnsProps {
   defaultColumns: ITableColumn[];
-  templateColumns?: ITableColumn[];
   enableEdit?: boolean;
 }
 
 export const useTableColumns = ({
   defaultColumns,
-  templateColumns,
   enableEdit,
 }: ITableColumnsProps): ITableColumnsData => {
   const [columns, setColumns] = useState<ITableColumn[]>([]);
@@ -21,7 +19,7 @@ export const useTableColumns = ({
 
   useLayoutEffect(() => {
     setColumns(availableColumns);
-  }, [availableColumns, templateColumns]);
+  }, [availableColumns]);
 
   const columnData = useMemo(
     () => ({

package/src/components/Table/hooks/useTableEdit.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { ITableEdit } from '../../../types/ITable';
+import { ITableDataItem, ITableEdit } from '../../../types/ITable';
 import { deleteProps, hasValue } from '../../../utils/objectUtils';
 import { Select } from '../../Inputs/Selects/Select';
 import { TextInput } from '../../Inputs/TextInput';
 import { DateInput } from '../../Inputs/DateInput/DateInput';
+import { NumberInput } from '../../Inputs/NumberInput';
 
 interface BaseItemProps<T> {
   id: keyof T;
@@ -20,7 +21,7 @@ interface SelectProps<T> extends BaseItemProps<T> {
 }
 
 export const useTableEdit = <T extends Record<string, any>>() => {
-  const [selectedItem, setSelectedItem] = useState<T | null>(null);
+  const [selectedItem, setSelectedItem] = useState<ITableDataItem<T> | null>(null);
   const [editData, setEditData] = useState<Partial<T>>({});
 
   // Text
@@ -43,6 +44,26 @@ export const useTableEdit = <T extends Record<string, any>>() => {
     ),
   });
 
+  // Number
+  const numberEditCell = ({
+    placeholder,
+    required,
+    id,
+    additionalClearIds = [],
+  }: BaseItemProps<T>) => ({
+    value: (
+      <NumberInput
+        placeholder={placeholder}
+        required={required}
+        value={editData[id]}
+        setValue={e =>
+          setEditData(e ? { ...editData, [id]: e } : deleteProps(editData as T, [id]))
+        }
+        onClear={() => deleteProps(editData as T, [id, ...additionalClearIds])}
+      />
+    ),
+  });
+
   // Date
   const dateEditCell = ({
     id,
@@ -105,6 +126,7 @@ export const useTableEdit = <T extends Record<string, any>>() => {
   return {
     editable: returnEditable,
     textEditCell,
+    numberEditCell,
     dateEditCell,
     selectEditCell,
   };

package/src/components/Table/hooks/useTablePrint.ts

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
-import { IGetPrintData, IPrintData } from '../../../types/ITable';
+import { useEffect, useMemo, useState } from 'react';
+import { IGetPrintData, IPrintData, ITableDataItem } from '../../../types/ITable';
 import { usePopupControl } from '../../../hooks/usePopupControl';
 
 type Props<T> = {
   getPrintData: IGetPrintData<T>;
+  createTableData?: (data: T[]) => ITableDataItem<T>[];
   totalRows?: number;
 };
 
@@ -12,6 +13,7 @@ const defaultData = { items: [], totalRows: 0 };
 
 export const useTablePrint = <T>({
   getPrintData,
+  createTableData,
   totalRows: initialTotalRows = 0,
 }: Props<T>) => {
   const printPopupControl = usePopupControl();
@@ -58,13 +60,19 @@ export const useTablePrint = <T>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [printPopupControl.control.isOpen, initialTotalRows, offset]);
 
-  const loaded = data.items.length;
+  const loaded = data.items?.length;
   const progress = data.totalRows ? (loaded / data.totalRows) * 100 : 0;
 
+  const tableData = useMemo(
+    () => (!isLoading ? (createTableData?.(data.items) ?? []) : []),
+    [isLoading, data.items, createTableData]
+  );
+
   const printData: Pick<
     IPrintData<T>,
-    'printPopupControl' | 'isLoading' | 'progress' | 'items'
+    'tableData' | 'printPopupControl' | 'isLoading' | 'progress' | 'items'
   > = {
+    tableData,
     printPopupControl,
     isLoading,
     progress,

package/src/components/Table/hooks/useTableSelect.ts

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { ITableSelectedAction } from '../../../types/ITable';
 
-export const useTableSelect = ({ actions }: { actions: ITableSelectedAction[] }) => {
+export const useTableSelect = (actions: ITableSelectedAction[] = []) => {
   const [selectedRows, setSelectedRows] = useState(new Set<string>());
 
   const rowSelect = useMemo(

package/src/components/Tooltip/Tooltip.tsx

@@ -103,31 +103,98 @@ const setAbsolutePosition = (
 ) => {
   const containerRect = containerEl.getBoundingClientRect();
   const tooltipRect = targetEl.getBoundingClientRect();
+  const margin = 16; // Distance from container
+  const screenPadding = 8; // Minimum distance from screen edges
 
   if (position === 'bottom' || position === 'top') {
-    const bottom = Math.floor(containerRect.bottom + 16);
-    const top = Math.floor(containerRect.top - tooltipRect.height - 16);
-    const leftCenter = Math.floor(
+    const bottom = Math.floor(containerRect.bottom + margin);
+    const top = Math.floor(containerRect.top - tooltipRect.height - margin);
+    let leftCenter = Math.floor(
       containerRect.left + containerRect.width / 2 - tooltipRect.width / 2
     );
+
+    // Check if tooltip overflows horizontally and adjust
+    if (leftCenter < screenPadding) {
+      targetEl.style.width = `${tooltipRect.width + leftCenter}px`;
+      leftCenter = screenPadding;
+    } else if (leftCenter + tooltipRect.width > window.innerWidth - screenPadding) {
+      leftCenter = window.innerWidth - tooltipRect.width - screenPadding;
+    }
+
     const reverse =
       position === 'top' ? top < 0 : bottom + tooltipRect.height > window.innerHeight;
 
     setNewPosition(reverse ? (position === 'bottom' ? 'top' : 'bottom') : '');
 
-    targetEl.style.top = `${
-      position === 'bottom' ? (reverse ? top : bottom) : reverse ? bottom : top
-    }px`;
+    let finalTop =
+      position === 'bottom' ? (reverse ? top : bottom) : reverse ? bottom : top;
+
+    // Ensure tooltip doesn't go above screen
+    if (finalTop < screenPadding) {
+      finalTop = screenPadding;
+    }
+    // Ensure tooltip doesn't go below screen
+    if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
+      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
+    }
+
+    targetEl.style.top = `${finalTop}px`;
     targetEl.style.left = `${leftCenter}px`;
   } else if (position === 'right') {
-    targetEl.style.top =
-      Math.floor(containerRect.top + containerRect.height / 2 - tooltipRect.height / 2) +
-      'px';
-    targetEl.style.left = Math.floor(containerRect.right + 16) + 'px';
+    let finalTop = Math.floor(
+      containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
+    );
+    let finalLeft = Math.floor(containerRect.right + margin);
+
+    // Check if tooltip overflows vertically and adjust
+    if (finalTop < screenPadding) {
+      finalTop = screenPadding;
+    } else if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
+      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
+    }
+
+    // Check if tooltip overflows to the right and flip to left
+    if (finalLeft + tooltipRect.width > window.innerWidth - screenPadding) {
+      finalLeft = Math.floor(containerRect.left - tooltipRect.width - margin);
+      setNewPosition('left');
+
+      // If it still overflows on the left, position it at the edge
+      if (finalLeft < screenPadding) {
+        finalLeft = screenPadding;
+      }
+    } else {
+      setNewPosition('');
+    }
+
+    targetEl.style.top = `${finalTop}px`;
+    targetEl.style.left = `${finalLeft}px`;
   } else if (position === 'left') {
-    targetEl.style.top =
-      Math.floor(containerRect.top + containerRect.height / 2 - tooltipRect.height / 2) +
-      'px';
-    targetEl.style.left = Math.floor(containerRect.left - tooltipRect.width - 16) + 'px';
+    let finalTop = Math.floor(
+      containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
+    );
+    let finalLeft = Math.floor(containerRect.left - tooltipRect.width - margin);
+
+    // Check if tooltip overflows vertically and adjust
+    if (finalTop < screenPadding) {
+      finalTop = screenPadding;
+    } else if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
+      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
+    }
+
+    // Check if tooltip overflows to the left and flip to right
+    if (finalLeft < screenPadding) {
+      finalLeft = Math.floor(containerRect.right + margin);
+      setNewPosition('right');
+
+      // If it still overflows on the right, position it at the edge
+      if (finalLeft + tooltipRect.width > window.innerWidth - screenPadding) {
+        finalLeft = window.innerWidth - tooltipRect.width - screenPadding;
+      }
+    } else {
+      setNewPosition('');
+    }
+
+    targetEl.style.top = `${finalTop}px`;
+    targetEl.style.left = `${finalLeft}px`;
   }
 };

package/src/hooks/useIsMenuOpen.ts

@@ -4,8 +4,8 @@ export const useIsMenuOpen = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return {
-    isMenuOpen: isOpen,
-    onMenuOpen: () => setIsOpen(true),
-    onMenuClose: () => setTimeout(() => setIsOpen(false)),
+    isOpen,
+    onOpen: () => setIsOpen(true),
+    onClose: () => setTimeout(() => setIsOpen(false)),
   };
 };

package/src/hooks/usePopupControl.ts

@@ -1,13 +1,18 @@
 import { useCallback, useRef, useState } from 'react';
-import { IPopupControl, PopupControlRef } from '../types/IPopup';
+import { IPopupControl, IPopupControlRef } from '../types/IPopup';
 
-export const usePopupControl: () => IPopupControl = () => {
+export const usePopupControl: (props?: {
+  onCloseCallback?: () => void;
+}) => IPopupControl = props => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const controlRef = useRef<PopupControlRef>(null);
+  const controlRef = useRef<IPopupControlRef>(null);
 
   const onOpen = useCallback(() => controlRef.current?.onOpen(), []);
-  const onClose = useCallback(() => controlRef.current?.onClose(), []);
+  const onClose = useCallback(() => {
+    controlRef.current?.onClose();
+    props?.onCloseCallback?.();
+  }, [props]);
 
   return {
     control: { controlRef, isOpen, setIsOpen },