@m4l/components 9.2.60 → 9.2.62

package/components/DataGrid/subcomponents/Table/index.js

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useEffect } from "react";
 import DataGrid from "react-data-grid";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -9,15 +9,52 @@ import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
 import { l as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
+import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {
-  const { columns, rows, onRowsChange, rowKeyGetter, selectedRows, onSelectedRowsChange } = props;
-  const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
+  const {
     columns,
-    rows
+    rows,
+    onRowsChange,
+    rowKeyGetter,
+    selectedRows,
+    onSelectedRowsChange
+  } = props;
+  const { finalColumns, finalRows } = useSortColumnsRows(
+    columns,
+    rows,
+    useMemo(
+      () => ({
+        /**
+         * Función que abre el menú de acciones para una columna
+         */
+        openPopover: (anchorEl, columnKey) => {
+          if (anchorEl instanceof HTMLDivElement) {
+            setPopoverState({
+              anchorEl,
+              columnKey
+            });
+          }
+        }
+      }),
+      []
+    )
   );
   const { activeFilters } = useFilters();
-  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight, size } = useDataGrid();
+  const {
+    onChangeColumnWidth,
+    setRowsCount,
+    currentRowHeight,
+    currentRowHeaderHeight,
+    size,
+    sortColumns,
+    setSortColumns
+  } = useDataGrid();
   const ref_data_grid = useRef(null);
+  const [popoverState, setPopoverState] = useState({
+    anchorEl: null,
+    columnKey: null
+  });
   const onRowClick = (row) => {
     if (selectedRows && onSelectedRowsChange) {
       if (selectedRows.entries().next().value) {
@@ -32,11 +69,17 @@ function Table(props) {
   useEffect(() => {
     let columnIndice = 0;
     for (const column of finalColumns) {
-      const index = sortColumns.findIndex((sortColumn) => column.key === sortColumn.columnKey);
+      const index = sortColumns.findIndex(
+        (sortColumn) => column.key === sortColumn.columnKey
+      );
       if (index !== -1) {
-        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.setAttribute("aria-columnsort", `${sortColumns[index].direction}`);
+        ref_data_grid.current?.element?.querySelector(
+          `[role="columnheader"][aria-colindex="${columnIndice + 1}"]`
+        )?.setAttribute("aria-columnsort", `${sortColumns[index].direction}`);
       } else {
-        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.removeAttribute("aria-columnsort");
+        ref_data_grid.current?.element?.querySelector(
+          `[role="columnheader"][aria-colindex="${columnIndice + 1}"]`
+        )?.removeAttribute("aria-columnsort");
       }
       columnIndice++;
     }
@@ -47,31 +90,51 @@ function Table(props) {
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };
-  const onChangeSort = (newSortColumns) => {
-    setSortColumns(newSortColumns);
-  };
-  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { ownerState: { size }, children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
-    DataGrid,
-    {
-      className: "rdg-light",
-      ref: ref_data_grid,
-      headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-      columns: finalColumns,
-      sortColumns,
-      onSortColumnsChange: onChangeSort,
-      onColumnResize,
-      rows: finalRows,
-      onRowsChange,
-      selectedRows,
-      onSelectedRowsChange,
-      onRowClick,
-      rowHeight: currentRowHeight,
-      rowKeyGetter,
-      cellNavigationMode: "LOOP_OVER_ROW",
-      components: { checkboxFormatter: CheckboxFormatter },
-      defaultColumnOptions: { resizable: true, sortable: true }
-    }
-  ) }) }) });
+  const defaultColumnOptions = { resizable: true, sortable: true };
+  const menuActions = useHeaderMenuActions(
+    popoverState.columnKey,
+    finalColumns,
+    defaultColumnOptions.sortable
+  );
+  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(TableWrapperDataGridStyled, { ownerState: { size }, children: [
+    /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        className: "rdg-light",
+        ref: ref_data_grid,
+        headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
+        columns: finalColumns,
+        sortColumns,
+        onSortColumnsChange: setSortColumns,
+        onColumnResize,
+        rows: finalRows,
+        onRowsChange,
+        selectedRows,
+        onSelectedRowsChange,
+        onRowClick,
+        rowHeight: currentRowHeight,
+        rowKeyGetter,
+        cellNavigationMode: "LOOP_OVER_ROW",
+        components: { checkboxFormatter: CheckboxFormatter },
+        defaultColumnOptions
+      }
+    ) }),
+    popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(
+      HeaderRenderClick,
+      {
+        externalOpen: popoverState.anchorEl,
+        onOpen: (open) => {
+          if (!open) {
+            setPopoverState({
+              anchorEl: null,
+              columnKey: null
+            });
+          }
+        },
+        menuActions
+      }
+    )
+  ] }) });
 }
 export {
   Table as T

package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useTheme } from "@mui/material";
-import { d as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
+import { e as DATAGRID_SEMANTIC_WIDTHS, f as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts

@@ -1,6 +1,7 @@
 import { HeaderRendererProps } from 'react-data-grid';
 interface DraggableHeaderRendererProps<TRow> extends HeaderRendererProps<TRow> {
     onColumnsReorder: (sourceKey: string, targetKey: string) => void;
+    openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
 }
 /**
  * TODO: Documentar

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -5,17 +5,31 @@ import { useDrag, useDrop } from "react-dnd";
 import { HeaderRenderer } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { m as DraggableHeaderRootStyled, n as DraggableWrapperInputBaseStyled, I as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, m as NameColumnStyled, I as IconColumnStyled, n as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, o as DraggableWrapperInputBaseStyled, p as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
+import { I as Icon } from "../../../../Icon/Icon.js";
 function DraggableHeaderRenderer(props) {
-  const { onColumnsReorder, column, isCellSelected, ...others } = props;
+  const {
+    onColumnsReorder,
+    column,
+    isCellSelected,
+    openPopover,
+    onSort,
+    ...others
+  } = props;
   const { ref, tabIndex } = useFocusRef(isCellSelected);
   const { getLabel } = useModuleDictionary();
-  const { size, classes } = useDataGrid();
+  const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { activeFilters, filters, onChangeFilter } = useFilters();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
+  const currentExternalSort = externalSortSettings?.sortsApplied?.find(
+    (s) => s.columnKey === column.key
+  );
+  const currentExternalFilter = externalFilterSettings?.filtersApplied?.find(
+    (f) => f.columnKey === column.key
+  );
   const [{ isDragging }, drag] = useDrag({
     type: "COLUMN_DRAG",
     item: { key: column.key },
@@ -44,6 +58,39 @@ function DraggableHeaderRenderer(props) {
     }
     setFilter(e.target.value);
   };
+  const getSortIcon = (direction) => direction === "asc" ? `${host_static_assets}/${environment_assets}/${pathIcons.sortAsc}` : `${host_static_assets}/${environment_assets}/${pathIcons.sortDesc}`;
+  const getColumnIcons = () => {
+    const icons = [];
+    if (currentExternalSort) {
+      const sortIconPath = getSortIcon(currentExternalSort.direction);
+      icons.push(
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            src: sortIconPath,
+            size: "small",
+            color: "text.secondary"
+          },
+          "sort-icon"
+        )
+      );
+    }
+    if (currentExternalFilter?.isValid) {
+      const filterIconPath = `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`;
+      icons.push(
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            src: filterIconPath,
+            size: "small",
+            color: "text.secondary"
+          },
+          "filter-icon"
+        )
+      );
+    }
+    return icons.length > 0 ? icons : null;
+  };
   useEffect(() => {
     if (!activeFilters) {
       setFilter("");
@@ -53,6 +100,15 @@ function DraggableHeaderRenderer(props) {
   if (newColumn.withinHeaderRenderer) {
     newColumn.name = newColumn.withinHeaderRenderer(props);
   }
+  if (!newColumn.withinHeaderRenderer) {
+    const columnIcons = getColumnIcons();
+    if (columnIcons) {
+      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
+        /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
+        /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
+      ] });
+    }
+  }
   return /* @__PURE__ */ jsxs(
     DraggableHeaderRootStyled,
     {
@@ -66,7 +122,26 @@ function DraggableHeaderRenderer(props) {
         backgroundColor: isOver ? "#ececec" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
+        /* @__PURE__ */ jsx(
+          ButtonHeaderActionsStyled,
+          {
+            role: "button",
+            "aria-label": `header-column-button-${column.key}`,
+            onClick: (e) => {
+              openPopover?.(e.currentTarget, column.key);
+            },
+            children: /* @__PURE__ */ jsx(
+              HeaderRenderer,
+              {
+                column: newColumn,
+                isCellSelected,
+                onSort: () => {
+                },
+                ...others
+              }
+            )
+          }
+        ),
         activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsxs(DraggableWrapperInputBaseStyled, { children: [
           /* @__PURE__ */ jsx(
             IconSearchStyled,

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.d.ts

@@ -0,0 +1,5 @@
+import { HeaderRenderClickProps } from './types';
+/**
+ * Componente que renderiza un menú de acciones para un encabezado de columna en un DataGrid.
+ */
+export declare function HeaderRenderClick(props: HeaderRenderClickProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -0,0 +1,146 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
+import { M as MenuListStyled, q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
+import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { g as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
+import { u as useFilters } from "../../../../hooks/useFilters.js";
+function HeaderRenderClick(props) {
+  const {
+    menuActions,
+    size = "medium",
+    externalOpen,
+    onOpen,
+    objItem = {},
+    actionKey,
+    className,
+    arrowType = "right-top",
+    paperProps = {},
+    slots = {},
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const { activeFilters } = useFilters();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const resolvedAnchorEl = externalOpen ?? anchorEl;
+  const open = typeof externalOpen !== "undefined" ? Boolean(externalOpen) : Boolean(anchorEl);
+  const ownerState = useMemo(
+    () => ({
+      selected: open
+    }),
+    [open]
+  );
+  useEffect(() => {
+    if (!open) {
+      setAnchorEl(null);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (onOpen) {
+      onOpen(open);
+    }
+  }, [open, onOpen]);
+  const handleOpenClose = useCallback(() => {
+    setAnchorEl(null);
+    if (onOpen) {
+      onOpen(false);
+    }
+  }, [onOpen]);
+  const handleClick = useCallback(
+    (e, menuAction) => {
+      e.stopPropagation();
+      setAnchorEl(null);
+      if (onOpen) {
+        onOpen(false);
+      }
+      menuAction.onClick && menuAction.onClick(e);
+    },
+    [onOpen]
+  );
+  const renderMenuContent = useCallback(() => {
+    let processedActions = [];
+    let finalActions = [];
+    if (menuActions) {
+      if (typeof menuActions === "function") {
+        processedActions = menuActions(objItem);
+      } else {
+        processedActions = menuActions;
+      }
+    }
+    if (Array.isArray(processedActions)) {
+      finalActions = processedActions;
+    }
+    if (finalActions.length === 0) {
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          disabled: true,
+          role: "menu-no-actions",
+          label: getLabel(DICTIONARY.NO_ACTIONS_LABEL)
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(MenuListStyled, { ownerState: {}, children: finalActions.map((menuAction, index) => {
+      const key = actionKey ?? index;
+      switch (menuAction.type ?? "menuItem") {
+        case "divider":
+          return /* @__PURE__ */ jsx(
+            MenuDivider,
+            {
+              variant: "solid",
+              size
+            },
+            `divider-${key}`
+          );
+        case "customNode":
+          return menuAction.customNode;
+        case "menuItem":
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              size,
+              ...menuAction,
+              label: menuAction.label ?? getLabel(DICTIONARY.NO_ACTIONS_LABEL),
+              onClick: menuAction.onClick ? (e) => handleClick(e, menuAction) : void 0,
+              "aria-label": menuAction.type === "menuItem" && menuAction.dataTestId ? menuAction.dataTestId : "header-render-click-menu-item"
+            },
+            `${DATAGRID_HEADER_RENDER_CLICK_KEY}${menuAction.label ?? key}`
+          );
+        default:
+          return null;
+      }
+    }) });
+  }, [menuActions, size, objItem, getLabel, actionKey, handleClick]);
+  return /* @__PURE__ */ jsx(HeaderRenderClickStyled, { className, ownerState: { ownerState }, children: open && /* @__PURE__ */ jsx(
+    Popover,
+    {
+      id: "Popover",
+      open,
+      anchorEl: resolvedAnchorEl,
+      onClose: handleOpenClose,
+      arrowType,
+      ...other,
+      slots: { ...slots },
+      slotProps: {
+        paper: {
+          ...paperProps,
+          sx: {
+            mt: !activeFilters ? 0.3 : 6.5,
+            ...paperProps?.sx
+          }
+        }
+      },
+      disableAutoFocus: true,
+      disableEnforceFocus: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      children: renderMenuContent()
+    }
+  ) });
+}
+export {
+  HeaderRenderClick as H
+};

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/index.d.ts

@@ -0,0 +1 @@
+export * from './HeaderRenderClick';

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/types.d.ts

@@ -0,0 +1,131 @@
+import { ReactElement, ReactNode } from 'react';
+import { Sizes, ComponentPalletColor } from '@m4l/styles';
+import { PopoverProps } from '../../../../../mui_extended/Popover/types';
+import { MenuItemProps } from '../../../../../mui_extended/MenuItem/types';
+import { ComponentNameToClassKey, PaperProps, SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+export type MenuTypes = 'menuItem' | 'divider' | 'loader' | 'customNode';
+interface BaseMenuAction {
+    type?: MenuTypes;
+}
+export interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> {
+    type?: 'menuItem';
+    onClick?: (arg?: any) => void;
+    customNode?: never;
+    error?: boolean;
+    dataTestId?: string;
+}
+interface DividerAction extends BaseMenuAction {
+    type: 'divider';
+    label?: never;
+    onClick?: never;
+    customNode?: never;
+    error?: never;
+}
+interface CustomNodeAction extends BaseMenuAction {
+    type: 'customNode';
+    customNode: ReactNode;
+    label?: never;
+    onClick?: never;
+    error?: never;
+}
+/**
+ * Define una acción del menú, con propiedades heredadas de `MenuItemProps`.
+ * [onClick] - Función opcional a ejecutar al hacer clic en la acción del menú.
+ * [error] - Indicador de error en la acción del menú.
+ */
+export type MenuAction = MenuItemAction | DividerAction | CustomNodeAction;
+export interface HeaderRenderClickProps extends Omit<PopoverProps, 'open' | 'anchorEl'> {
+    /**
+     * Tamaño opcional del menú (pequeño o mediano).
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Objeto personalizado a pasar al componente.
+     */
+    objItem?: any;
+    /**
+     * Acciones del menú, puede ser un array o una función que genere acciones.
+     */
+    menuActions: MenuAction[] | ((row: any) => MenuAction[]);
+    /**
+     * Texto del tooltip opcional.
+     */
+    toolTip?: string;
+    /**
+     * Elemento opcional que se renderiza al final de la lista del menú.
+     */
+    endListElement?: ReactElement;
+    /**
+     * Estilos personalizados para las acciones del menú.
+     */
+    menuActionSx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
+    /**
+     * Contenido del `Badge` si está presente.
+     */
+    badgeContent?: string;
+    /**
+     * Elemento externo para abrir el menú.
+     */
+    externalOpen?: HTMLDivElement | null;
+    /**
+     * Función externa para cerrar el menú.
+     */
+    externalClose?: (element: null | HTMLDivElement) => void;
+    /**
+     * Tipo de flecha del menú.
+     */
+    disabled?: boolean;
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots?: {
+        root?: React.ElementType;
+        paper?: React.ElementType;
+    };
+    /**
+     * Propiedad objeto que se usa para poder editar las propiedades del paper o agregar estilos desde su sx
+     */
+    paperProps?: PaperProps;
+    /**
+     * Propiedad checked
+     */
+    checked?: boolean;
+    /**
+     * Propiedad checkable para el menú
+     */
+    checkable?: boolean;
+    /**
+     * Propiedad para agregar un node al menú
+     */
+    customNode?: ReactNode;
+    /**
+     * Define el color del componente.
+     */
+    color?: Extract<ComponentPalletColor, 'primary'>;
+    /**
+     * Define la clave de la acción.
+     */
+    actionKey?: string;
+    /**
+     * agrega un header al menú
+     */
+    header?: ReactNode;
+    /**
+     * agrega un footer al menú
+     */
+    footer?: ReactNode;
+    /**
+     * Define el tipo de flecha del menú.
+     */
+    onOpen?: (param: boolean) => void;
+}
+/**
+ * Estado del propietario para `HeaderRenderClick`.
+ */
+export interface HeaderRenderClickOwnerState {
+    selected: boolean;
+}
+export {};

package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRowSelection, SelectCellFormatter } from "react-data-grid";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { o as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { r as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/tests/HeaderRenderClick.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/useHeaderMenuActions.test.d.ts

@@ -0,0 +1 @@
+export {};