@m4l/components 9.2.64 → 9.2.65-JT17072025.beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/components/AppBar/AppBar.js +12 -10
  2. package/components/AppBar/constants.d.ts +1 -1
  3. package/components/AppBar/constants.js +1 -1
  4. package/components/AppBar/slots/AppBarEnum.d.ts +1 -5
  5. package/components/AppBar/slots/AppBarEnum.js +0 -4
  6. package/components/AppBar/slots/AppBarSlots.d.ts +4 -18
  7. package/components/AppBar/slots/AppBarSlots.js +3 -27
  8. package/components/AppBar/styles.js +0 -42
  9. package/components/AppBar/types.d.ts +8 -0
  10. package/components/Chip/ChipStyles.js +1 -1
  11. package/components/DataGrid/Datagrid.styles.js +95 -8
  12. package/components/DataGrid/formatters/ColumnBooleanFormatter/formatter.d.ts +2 -1
  13. package/components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js +2 -3
  14. package/components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.d.ts +1 -1
  15. package/components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.d.ts +2 -1
  16. package/components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js +5 -4
  17. package/components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.d.ts +1 -1
  18. package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.d.ts +2 -1
  19. package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js +11 -4
  20. package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.d.ts +1 -1
  21. package/components/DataGrid/formatters/ColumnDateFormatter/formatter.d.ts +2 -1
  22. package/components/DataGrid/formatters/ColumnDateFormatter/formatter.js +13 -4
  23. package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.d.ts +1 -1
  24. package/components/DataGrid/formatters/ColumnIconFormatter/formatter.d.ts +2 -1
  25. package/components/DataGrid/formatters/ColumnIconFormatter/formatter.js +2 -2
  26. package/components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.d.ts +1 -1
  27. package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/types.d.ts +2 -2
  28. package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.d.ts +2 -1
  29. package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js +4 -3
  30. package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts +1 -1
  31. package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.d.ts +2 -1
  32. package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.js +13 -5
  33. package/components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.d.ts +1 -1
  34. package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.d.ts +2 -1
  35. package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.js +11 -4
  36. package/components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.d.ts +1 -1
  37. package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.d.ts +2 -2
  38. package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js +1 -1
  39. package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts +1 -1
  40. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.d.ts +2 -1
  41. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js +15 -6
  42. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.d.ts +1 -1
  43. package/components/DataGrid/index.d.ts +1 -1
  44. package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js +4 -5
  45. package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts +2 -2
  46. package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts +2 -2
  47. package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js +15 -6
  48. package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +13 -7
  49. package/components/DataGrid/subcomponents/Table/index.d.ts +3 -1
  50. package/components/DataGrid/subcomponents/Table/index.js +38 -9
  51. package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js +1 -1
  52. package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.d.ts +2 -2
  53. package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts +2 -2
  54. package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js +10 -8
  55. package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js +1 -1
  56. package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js +7 -7
  57. package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts +15 -5
  58. package/components/DataGrid/types.d.ts +9 -4
  59. package/components/LoadingError/slots/LoadingErrorSlots.js +1 -1
  60. package/components/NumberInput/hooks/useNumberInput/useNumberInput.js +0 -2
  61. package/components/SideBar/SideBar.js +6 -2
  62. package/components/SideBar/constants.d.ts +8 -6
  63. package/components/SideBar/constants.js +8 -8
  64. package/components/SideBar/context/sideBarContext/index.js +9 -10
  65. package/components/SideBar/context/sideBarContext/types.d.ts +2 -10
  66. package/components/SideBar/slots/SideBarEnum.d.ts +8 -7
  67. package/components/SideBar/slots/SideBarEnum.js +6 -5
  68. package/components/SideBar/slots/SideBarSlots.d.ts +12 -9
  69. package/components/SideBar/slots/SideBarSlots.js +36 -28
  70. package/components/SideBar/styles.js +3 -3
  71. package/components/SideBar/subcomponents/ContentComponent/index.js +12 -68
  72. package/components/SideBar/subcomponents/ContentComponent/style.js +134 -107
  73. package/components/SideBar/subcomponents/{Promotion → FooterComponent}/index.d.ts +1 -1
  74. package/components/SideBar/subcomponents/{Promotion → FooterComponent}/index.js +4 -4
  75. package/components/SideBar/subcomponents/{Promotion → FooterComponent}/styles.js +8 -2
  76. package/components/SideBar/subcomponents/HeaderComponent/HeaderComponent.d.ts +5 -0
  77. package/components/SideBar/subcomponents/HeaderComponent/HeaderComponent.js +37 -0
  78. package/components/SideBar/subcomponents/HeaderComponent/index.d.ts +1 -0
  79. package/components/SideBar/subcomponents/HeaderComponent/index.js +1 -0
  80. package/components/SideBar/subcomponents/HeaderComponent/styles.d.ts +2 -0
  81. package/components/SideBar/subcomponents/HeaderComponent/styles.js +40 -0
  82. package/components/SideBar/subcomponents/SideBarDesktop/index.js +4 -3
  83. package/components/SideBar/subcomponents/SideBarDesktop/styles.js +4 -32
  84. package/components/SideBar/subcomponents/SideBarMobile/index.js +1 -1
  85. package/components/SideBar/subcomponents/TreeGroupItems/index.js +4 -3
  86. package/components/SideBar/subcomponents/TreeGroupItems/styles.js +112 -2
  87. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/AdormentIcon.d.ts +7 -0
  88. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/AdormentIcon.js +12 -0
  89. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/types.d.ts +4 -0
  90. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js +9 -7
  91. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts +1 -0
  92. package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.js +11 -6
  93. package/components/SideBar/types.d.ts +12 -7
  94. package/components/areas/contexts/AreasContext/store.js +2 -2
  95. package/components/commercial/HamburgerMenu/HamburgerMenu.js +1 -2
  96. package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js +0 -5
  97. package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js +4 -4
  98. package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.d.ts +1 -1
  99. package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js +7 -6
  100. package/components/mui_extended/MenuItem/MenuItem.js +3 -2
  101. package/components/mui_extended/MenuItem/types.d.ts +4 -0
  102. package/components/mui_extended/TabContent/TabContent.js +2 -2
  103. package/components/mui_extended/TabContent/TabContent.styles.js +1 -1
  104. package/components/mui_extended/TabContent/types.d.ts +13 -1
  105. package/package.json +2 -2
  106. package/storybook/components/DataGrid/DataGrid.stories.d.ts +4 -0
  107. package/storybook/components/DataGrid/helpers/types.d.ts +3 -2
  108. package/storybook/components/SideBar/SideBar.stories.d.ts +5 -11
  109. package/storybook/components/SideBar/subcomponents/FooterComponentHost/FooterComponentHost.d.ts +4 -0
  110. package/storybook/components/SideBar/subcomponents/FooterComponentHost/index.d.ts +1 -0
  111. package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/FooterComponentMicrofrontend.d.ts +4 -0
  112. package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/FooterComponentMicrofrontend.stories.d.ts +14 -0
  113. package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/constants.d.ts +1 -0
  114. package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/index.d.ts +1 -0
  115. package/storybook/components/SideBar/subcomponents/HeaderComponentHost/HeaderComponentHost.d.ts +5 -0
  116. package/storybook/components/SideBar/subcomponents/HeaderComponentHost/constants.d.ts +1 -0
  117. package/storybook/components/SideBar/subcomponents/HeaderComponentMicrofrontend/HeaderComponentMicrofrontend.d.ts +5 -0
  118. package/storybook/components/SideBar/subcomponents/HeaderComponentMicrofrontend/constants.d.ts +1 -0
  119. package/utils/getSizeStyles/getSizeStyles.d.ts +1 -1
  120. package/components/SideBar/subcomponents/HeaderSidebar/index.d.ts +0 -6
  121. package/components/SideBar/subcomponents/HeaderSidebar/styles.d.ts +0 -2
  122. package/components/SideBar/subcomponents/HeaderSidebar/styles.js +0 -24
  123. package/components/SideBar/subcomponents/HeaderSidebar/types.d.ts +0 -5
  124. package/helpers/getFieldValueWithRow.js +0 -10
  125. package/storybook/components/SideBar/subcomponents/FooterPromotion/FooterPromotion.d.ts +0 -4
  126. package/storybook/components/SideBar/subcomponents/FooterPromotion/index.d.ts +0 -1
  127. /package/components/SideBar/subcomponents/{Promotion → FooterComponent}/styles.d.ts +0 -0
  128. /package/components/SideBar/subcomponents/{Promotion → FooterComponent}/types.d.ts +0 -0
  129. /package/storybook/components/SideBar/subcomponents/{FooterPromotion → FooterComponentHost}/constants.d.ts +0 -0
@@ -3,11 +3,11 @@ import { useIsMobile } from "@m4l/graphics";
3
3
  import { useEnvironment, useModuleDictionary } from "@m4l/core";
4
4
  import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
5
5
  import { g as getNameDataTestId } from "./tests/utils.js";
6
- import { A as AppBarRootStyled, C as ContainerIsotypeNameStyled, a as ContentIsotypeStyled, I as ImageIsotypeStyled, b as CompanyNameStyled, D as DividerStyled, M as MenuIconButtonStyled, c as ContentStyled } from "./slots/AppBarSlots.js";
6
+ import { A as AppBarRootStyled, M as MenuIconButtonStyled, C as ContentStyled } from "./slots/AppBarSlots.js";
7
7
  import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
8
8
  import { P as PATH_IMG_HAMBURGUER, A as APP_BAR_KEY } from "./constants.js";
9
9
  const AppBar = (props) => {
10
- const { onToggleVisible, children, companyLogo, companyName, dataTestid, size } = props;
10
+ const { onToggleVisible, onToggleAnchored, sidebarAnchored, children, dataTestid, size } = props;
11
11
  const isMobile = useIsMobile();
12
12
  const { host_static_assets, environment_assets } = useEnvironment();
13
13
  const { getLabel } = useModuleDictionary();
@@ -22,13 +22,6 @@ const AppBar = (props) => {
22
22
  className: classRoot,
23
23
  ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId(dataTestid) } : {},
24
24
  children: [
25
- !isMobile ? /* @__PURE__ */ jsxs(ContainerIsotypeNameStyled, { children: [
26
- /* @__PURE__ */ jsxs(ContentIsotypeStyled, { children: [
27
- companyLogo && /* @__PURE__ */ jsx(ImageIsotypeStyled, { alt: "logo", src: companyLogo, size }),
28
- /* @__PURE__ */ jsx(CompanyNameStyled, { variant: "bodyDens", skeletonWidth: "100px", size, children: companyName })
29
- ] }),
30
- /* @__PURE__ */ jsx(DividerStyled, { orientation: "vertical", flexItem: true })
31
- ] }) : null,
32
25
  isMobile ? /* @__PURE__ */ jsx(
33
26
  MenuIconButtonStyled,
34
27
  {
@@ -37,7 +30,16 @@ const AppBar = (props) => {
37
30
  src: `${host_static_assets}/${environment_assets}/${PATH_IMG_HAMBURGUER}`,
38
31
  onClick: onToggleVisible
39
32
  }
40
- ) : null,
33
+ ) : /* @__PURE__ */ jsx(
34
+ MenuIconButtonStyled,
35
+ {
36
+ src: `${host_static_assets}/${environment_assets}/${PATH_IMG_HAMBURGUER}`,
37
+ onClick: onToggleAnchored,
38
+ rotationAngle: sidebarAnchored ? 0 : 180,
39
+ variant: "contained",
40
+ role: "anchored-button"
41
+ }
42
+ ),
41
43
  /* @__PURE__ */ jsx(
42
44
  ContentStyled,
43
45
  {
@@ -1,2 +1,2 @@
1
1
  export declare const APP_BAR_KEY = "M4LAppBar";
2
- export declare const PATH_IMG_HAMBURGUER = "frontend/components/settings/assets/icons/options.svg";
2
+ export declare const PATH_IMG_HAMBURGUER = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
@@ -1,5 +1,5 @@
1
1
  const APP_BAR_KEY = "M4LAppBar";
2
- const PATH_IMG_HAMBURGUER = "frontend/components/settings/assets/icons/options.svg";
2
+ const PATH_IMG_HAMBURGUER = "frontend/components/sidebar/assets/icons/panel-left-close.svg";
3
3
  export {
4
4
  APP_BAR_KEY as A,
5
5
  PATH_IMG_HAMBURGUER as P
@@ -1,10 +1,6 @@
1
1
  export declare enum AppBarSlots {
2
2
  appBarRoot = "appBarRoot",
3
3
  containerIsotypeName = "containerIsotypeName",
4
- imageIsotype = "imageIsotype",
5
- companyName = "companyName",
6
4
  menuIconButton = "menuIconButton",
7
- content = "content",
8
- contentIsoType = "contentIsoType",
9
- divider = "divider"
5
+ content = "content"
10
6
  }
@@ -1,12 +1,8 @@
1
1
  var AppBarSlots = /* @__PURE__ */ ((AppBarSlots2) => {
2
2
  AppBarSlots2["appBarRoot"] = "appBarRoot";
3
3
  AppBarSlots2["containerIsotypeName"] = "containerIsotypeName";
4
- AppBarSlots2["imageIsotype"] = "imageIsotype";
5
- AppBarSlots2["companyName"] = "companyName";
6
4
  AppBarSlots2["menuIconButton"] = "menuIconButton";
7
5
  AppBarSlots2["content"] = "content";
8
- AppBarSlots2["contentIsoType"] = "contentIsoType";
9
- AppBarSlots2["divider"] = "divider";
10
6
  return AppBarSlots2;
11
7
  })(AppBarSlots || {});
12
8
  export {
@@ -1,26 +1,12 @@
1
- export declare const AppBarRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
1
+ export declare const AppBarRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
2
2
  ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
3
3
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
4
- export declare const ContainerIsotypeNameStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
4
+ export declare const ContainerIsotypeNameStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
5
5
  ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
6
6
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
7
- export declare const ImageIsotypeStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
7
+ export declare const MenuIconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "placement" | "rotationAngle" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
8
8
  ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
9
9
  }, {}, {}>;
10
- export declare const CompanyNameStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
11
- ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
12
- }, {}, {}>;
13
- export declare const MenuIconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "placement" | "rotationAngle" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
14
- ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
15
- }, {}, {}>;
16
- export declare const ContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
10
+ export declare const ContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
17
11
  ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
18
12
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
19
- export declare const ContentIsotypeStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
20
- ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
21
- }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
22
- export declare const DividerStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').DividerOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
23
- ref?: ((instance: HTMLHRElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLHRElement> | null | undefined;
24
- }, "children" | "light" | "style" | "absolute" | "variant" | "textAlign" | "className" | "classes" | "sx" | "orientation" | "flexItem">, "children" | "ref" | "title" | "id" | "light" | "hidden" | "color" | "content" | "style" | "absolute" | "variant" | "textAlign" | "translate" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "orientation" | "flexItem"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
25
- ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
26
- }, {}, {}>;
@@ -2,26 +2,15 @@ import { styled } from "@mui/material/styles";
2
2
  import { A as APP_BAR_KEY } from "../constants.js";
3
3
  import { A as AppBarSlots } from "./AppBarEnum.js";
4
4
  import { a as appBarStyles } from "../styles.js";
5
- import { Divider } from "@mui/material";
6
- import { I as Image } from "../../Image/Image.js";
7
- import { T as Typography } from "../../mui_extended/Typography/Typography.js";
8
5
  import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
9
6
  const AppBarRootStyled = styled("header", {
10
7
  name: APP_BAR_KEY,
11
8
  slot: AppBarSlots.appBarRoot
12
9
  })(appBarStyles?.appBarRoot);
13
- const ContainerIsotypeNameStyled = styled("div", {
10
+ styled("div", {
14
11
  name: APP_BAR_KEY,
15
12
  slot: AppBarSlots.containerIsotypeName
16
13
  })(appBarStyles?.containerIsotypeName);
17
- const ImageIsotypeStyled = styled(Image, {
18
- name: APP_BAR_KEY,
19
- slot: AppBarSlots.imageIsotype
20
- })(appBarStyles?.imageIsotype);
21
- const CompanyNameStyled = styled(Typography, {
22
- name: APP_BAR_KEY,
23
- slot: AppBarSlots.companyName
24
- })(appBarStyles?.companyName);
25
14
  const MenuIconButtonStyled = styled(IconButton, {
26
15
  name: APP_BAR_KEY,
27
16
  slot: AppBarSlots.menuIconButton
@@ -30,21 +19,8 @@ const ContentStyled = styled("div", {
30
19
  name: APP_BAR_KEY,
31
20
  slot: AppBarSlots.content
32
21
  })(appBarStyles?.content);
33
- const ContentIsotypeStyled = styled("div", {
34
- name: APP_BAR_KEY,
35
- slot: AppBarSlots.contentIsoType
36
- })(appBarStyles?.contentIsoType);
37
- const DividerStyled = styled(Divider, {
38
- name: APP_BAR_KEY,
39
- slot: AppBarSlots.divider
40
- })(appBarStyles?.divider);
41
22
  export {
42
23
  AppBarRootStyled as A,
43
- ContainerIsotypeNameStyled as C,
44
- DividerStyled as D,
45
- ImageIsotypeStyled as I,
46
- MenuIconButtonStyled as M,
47
- ContentIsotypeStyled as a,
48
- CompanyNameStyled as b,
49
- ContentStyled as c
24
+ ContentStyled as C,
25
+ MenuIconButtonStyled as M
50
26
  };
@@ -35,26 +35,6 @@ const appBarStyles = {
35
35
  width: "204px",
36
36
  minWidth: "204px"
37
37
  }),
38
- /**
39
- * ****************************************************
40
- * Estilos para la imagen del logotipo de la empresa.
41
- * ****************************************************
42
- */
43
- imageIsotype: ({ theme }) => ({
44
- width: `${theme.vars.size.baseSpacings.sp6} !important`,
45
- height: `${theme.vars.size.baseSpacings.sp6} !important`,
46
- border: `1px solid ${theme.vars.palette.border.default}`
47
- }),
48
- /**
49
- * ****************************************************
50
- * Estilos para el nombre de la empresa.
51
- * ****************************************************
52
- */
53
- companyName: ({ theme }) => ({
54
- display: "grid",
55
- placeContent: "center",
56
- color: theme.vars.palette.text.primary
57
- }),
58
38
  /**
59
39
  * ****************************************************
60
40
  * Estilos para el botón de menú de la barra de app
@@ -79,28 +59,6 @@ const appBarStyles = {
79
59
  flex: "1",
80
60
  height: theme.vars.size.baseSpacings.sp12,
81
61
  overflow: "auto"
82
- }),
83
- /**
84
- * **************************************************************
85
- * Estilos para el contenedor del contenido del logotipo y nombre
86
- * **************************************************************
87
- */
88
- contentIsoType: ({ theme }) => ({
89
- display: "flex",
90
- flexDirection: "row",
91
- alignItems: "center",
92
- gap: theme.vars.size.baseSpacings.sp3,
93
- height: theme.vars.size.baseSpacings.sp6
94
- }),
95
- /**
96
- * **************************************************************
97
- * Estilos para el divisor entre el logotipo y el contenido
98
- * **************************************************************
99
- */
100
- divider: ({ theme, ownerState }) => ({
101
- height: "100%",
102
- borderColor: theme.vars.palette.border.secondary,
103
- borderRightWidth: ownerState?.isMobile ? "thin" : "none"
104
62
  })
105
63
  };
106
64
  export {
@@ -25,10 +25,18 @@ export interface AppBarProps {
25
25
  * Opción de aparición de la barra de aplicaciones.
26
26
  */
27
27
  variant?: 'standard';
28
+ /**
29
+ * Indica si la barra lateral está anclada.
30
+ */
31
+ sidebarAnchored: boolean;
28
32
  /**
29
33
  * Función que activa la visualización del menú de la aplicación en la vista móvil.
30
34
  */
31
35
  onToggleVisible: () => void;
36
+ /**
37
+ * Función que activa la visualización del menú de la aplicación en la vista móvil.
38
+ */
39
+ onToggleAnchored: () => void;
32
40
  /**
33
41
  * Elementos secundarios de la barra de aplicaciones.
34
42
  */
@@ -43,7 +43,7 @@ const chipStyles = {
43
43
  display: "flex",
44
44
  alignItems: "center",
45
45
  padding: theme.vars.size.baseSpacings.sp1,
46
- borderRadius: theme.vars.size.borderRadius["r0-5"],
46
+ borderRadius: theme.vars.size.borderRadius["r1-5"],
47
47
  gap: theme.vars.size.baseSpacings["sp0-5"],
48
48
  width: "max-content",
49
49
  cursor: "pointer",
@@ -221,7 +221,14 @@ const dataGridStyles = {
221
221
  verticalAlign: "top",
222
222
  textAlign: "right",
223
223
  fontFamily: "inherit",
224
+ background: "transparent",
224
225
  "&:focus": {
226
+ outline: "none",
227
+ border: "none",
228
+ boxShadow: "none"
229
+ },
230
+ "&:hover": {
231
+ border: "none",
225
232
  outline: "none"
226
233
  },
227
234
  "&::placeholder": {
@@ -263,6 +270,9 @@ const dataGridStyles = {
263
270
  border: theme.vars.size.borderStroke.container,
264
271
  borderColor: theme.vars.palette?.border.secondary,
265
272
  "& .rdg ": {
273
+ display: "grid",
274
+ contain: "content",
275
+ boxSizing: "border-box",
266
276
  border: "none",
267
277
  background: theme.vars.palette.background.default,
268
278
  gridColumnGap: theme.vars.size.baseSpacings.sp0,
@@ -291,6 +301,19 @@ const dataGridStyles = {
291
301
  boxShadow: `inset 0 0.5px 0 0 ${theme.vars.palette?.border.secondary}`
292
302
  }
293
303
  },
304
+ "&.MeasuringCell": {
305
+ contain: "strict",
306
+ gridRow: "1",
307
+ visibility: "hidden"
308
+ },
309
+ "&::before": {
310
+ content: "''",
311
+ gridColumn: "1/-1",
312
+ gridRow: "1/-1"
313
+ },
314
+ '& [role="row"], & .rdg-row, & .rdg-header-row, & .rdg-summary-row': {
315
+ display: "contents"
316
+ },
294
317
  '& [role="columnheader"]': {
295
318
  justifyContent: "center",
296
319
  alignItems: "center",
@@ -306,6 +329,13 @@ const dataGridStyles = {
306
329
  }
307
330
  },
308
331
  "& .rdg-row": {
332
+ display: "contents",
333
+ '&[aria-selected="true"]': {
334
+ backgroundColor: theme.vars.palette.primary.toneOpacity,
335
+ "&:hover": {
336
+ backgroundColor: theme.vars.palette.primary.toneOpacity
337
+ }
338
+ },
309
339
  "& .rdg-cell": {
310
340
  backgroundColor: theme.vars.palette.background.default
311
341
  },
@@ -329,18 +359,29 @@ const dataGridStyles = {
329
359
  backgroundColor: "transparent"
330
360
  },
331
361
  "& .rdg-cell": {
362
+ overflow: "clip",
363
+ position: "sticky",
364
+ outline: "none",
332
365
  color: theme.vars.palette.text.primary,
333
- display: "inline",
334
- justifyContent: "center",
335
- alignItems: "center",
336
- textOverflow: "inline",
337
- gridTemplateColumns: "auto",
366
+ paddingBlock: 0,
367
+ paddingInline: "8px",
368
+ borderInlineEnd: "1px solid var(--rdg-border-color)",
369
+ borderBlockEnd: "1px solid var(--rdg-border-color)",
370
+ gridRowStart: "var(--rdg-grid-row-start)",
371
+ alignContent: "center",
372
+ backgroundColor: "inherit",
373
+ whiteSpace: "nowrap",
374
+ textOverflow: "ellipsis",
338
375
  ...getTypographyStyles(
339
376
  theme.generalSettings.isMobile,
340
377
  ownerState?.size || "medium",
341
378
  "body"
342
379
  ),
343
380
  lineHeight: "var(--rdg-row-height)!important",
381
+ '&[aria-selected="true"]': {
382
+ outline: `2px solid var(--rdg-selection-color)`,
383
+ outlineOffset: "-2px"
384
+ },
344
385
  "& .checkbox-checked": {
345
386
  "& path:first-of-type": {
346
387
  fill: theme.vars.palette.primary.main
@@ -400,6 +441,16 @@ const dataGridStyles = {
400
441
  },
401
442
  "& .m4l_icon": {
402
443
  height: "100%"
444
+ },
445
+ '&[role="columnheader"]': {
446
+ position: "sticky",
447
+ top: 0,
448
+ zIndex: 2,
449
+ justifyContent: "center",
450
+ alignItems: "center",
451
+ '&[aria-colindex="1"]': {
452
+ borderTopLeftRadius: theme.vars.size.baseSpacings.sp2
453
+ }
403
454
  }
404
455
  },
405
456
  '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
@@ -495,7 +546,16 @@ const dataGridStyles = {
495
546
  borderColor: theme.vars.palette.background.surface
496
547
  },
497
548
  "& .rdg-header-row": {
498
- backgroundColor: theme.vars.palette.background.base
549
+ display: "contents",
550
+ backgroundColor: theme.vars.palette.background.base,
551
+ fontWeight: "bold",
552
+ "& > .rdg-cell": {
553
+ zIndex: 2,
554
+ position: "sticky"
555
+ },
556
+ "& > .rdg-cell.rdg-cell-frozen": {
557
+ zIndex: 3
558
+ }
499
559
  },
500
560
  // Estilado de celdas de la cabecera
501
561
  "& .rdg-header-row .rdg-cell": {
@@ -504,9 +564,13 @@ const dataGridStyles = {
504
564
  boxShadow: "unset!important",
505
565
  borderBottom: theme.vars.size.borderStroke.container,
506
566
  borderColor: `${theme.vars.palette?.background.surface}!important`,
567
+ cursor: "pointer",
507
568
  "&:hover": {
508
569
  boxShadow: `inset 1px 0 0 0 ${theme.vars.palette?.border.default}, inset -1px 0 0 0 ${theme.vars.palette?.border.default}!important `
509
570
  },
571
+ "&[data-resize]": {
572
+ touchAction: "none"
573
+ },
510
574
  '& [draggable="true"]': {
511
575
  fontSize: theme.typography.body
512
576
  },
@@ -528,6 +592,15 @@ const dataGridStyles = {
528
592
  // Modificar el tamaño de la flecha
529
593
  "& .rdg-sort-arrow": {}
530
594
  },
595
+ // Estilo específico para el resize handle generado por react-data-grid
596
+ '& [class*="r1y6ywlx"]': {
597
+ cursor: "col-resize",
598
+ position: "absolute",
599
+ insetBlockStart: 0,
600
+ insetInlineEnd: 0,
601
+ insetBlockEnd: 0,
602
+ inlineSize: "10px"
603
+ },
531
604
  // Estilado de la ultima celda Header
532
605
  "& .rdg-header-row :last-child.rdg-cell": {
533
606
  borderTopRightRadius: theme.vars.size.baseSpacings.sp0,
@@ -576,6 +649,7 @@ const dataGridStyles = {
576
649
  alignItems: "center",
577
650
  backgroundColor: theme.vars.palette.default.enabled,
578
651
  padding: theme.vars.size.baseSpacings.sp1,
652
+ marginBottom: theme.vars.size.baseSpacings.sp2,
579
653
  gap: theme.vars.size.baseSpacings.sp1,
580
654
  borderRadius: theme.vars.size.borderRadius.r1,
581
655
  ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
@@ -664,11 +738,24 @@ const dataGridStyles = {
664
738
  /**
665
739
  * Estilos para el contenedor del boton de acciones del header
666
740
  */
667
- buttonHeaderActions: () => ({
741
+ buttonHeaderActions: ({ theme }) => ({
668
742
  display: "flex",
669
743
  alignItems: "center",
670
744
  justifyContent: "space-between",
671
- width: "100%"
745
+ width: "100%",
746
+ cursor: "pointer",
747
+ height: "100%",
748
+ "> span": {
749
+ display: "flex",
750
+ alignItems: "center",
751
+ justifyContent: "space-between",
752
+ width: "100%",
753
+ "& svg": {
754
+ width: "8px",
755
+ height: "8px",
756
+ color: theme.vars.palette.chips.default.contained.backgroundColorTone
757
+ }
758
+ }
672
759
  }),
673
760
  /**
674
761
  * Estilos para el formatter de iconos
@@ -1,5 +1,6 @@
1
1
  import { ColumnBooleanFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Función para formatear un booleano en una columna de un DataGrid
4
5
  */
5
- export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,11 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getPropertyByString } from "@m4l/core";
3
3
  import React from "react";
4
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
5
4
  import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
6
5
  function ColumnBooleanFormatter(props) {
7
6
  const { fieldValue, presentationType, Component = React.Fragment } = props;
8
- return (obProps) => {
9
- const valueMaybeString = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
7
+ return (renderProps) => {
8
+ const valueMaybeString = getPropertyByString(renderProps.row, fieldValue);
10
9
  let fixedValue;
11
10
  if (typeof valueMaybeString === "boolean") {
12
11
  fixedValue = valueMaybeString;
@@ -3,7 +3,7 @@ import { ColumnBooleanFormatterProps } from './types';
3
3
  * Hook function that return the formatter, filter and customSort for a boolean column
4
4
  */
5
5
  export declare const useColumnBoolean: <TRow>(props: ColumnBooleanFormatterProps<TRow>) => {
6
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
7
7
  customFilter: (row: TRow, value: string) => boolean;
8
8
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
9
9
  };
@@ -1,7 +1,8 @@
1
1
  import { ColumnChipStatusFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Formatter para mostrar un chip de estado en una columna de un DataGrid
4
5
  * @param props - Propiedades del formatter
5
6
  * @returns Componente ChipStatusFormatter
6
7
  */
7
- export declare const ColumnChipStatusFormatter: (props: ColumnChipStatusFormatterProps<any>) => (obProps: any) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const ColumnChipStatusFormatter: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,14 +1,15 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getPropertyByString } from "@m4l/core";
3
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
4
3
  import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
5
4
  import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
6
5
  import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
7
6
  const ColumnChipStatusFormatter = (props) => {
8
7
  const { fieldStatus, fieldLabel, statusesColors, fallbackColor } = props;
9
- return (obProps) => {
10
- const status = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldStatus.toString())));
11
- const label = typeof fieldLabel === "string" ? getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldLabel))) : fieldLabel(obProps.row, status);
8
+ return (renderProps) => {
9
+ const cleanFieldStatus = fieldStatus.toString().startsWith("row.") ? fieldStatus.toString().substring(4) : fieldStatus.toString();
10
+ const cleanFieldLabel = typeof fieldLabel === "string" && fieldLabel.startsWith("row.") ? fieldLabel.substring(4) : fieldLabel;
11
+ const status = getNullGuard(getPropertyByString(renderProps.row, cleanFieldStatus));
12
+ const label = typeof cleanFieldLabel === "string" ? getNullGuard(getPropertyByString(renderProps.row, cleanFieldLabel)) : typeof fieldLabel === "function" ? fieldLabel(renderProps.row, status) : "";
12
13
  return /* @__PURE__ */ jsx(
13
14
  ChipStatusFormatter,
14
15
  {
@@ -3,7 +3,7 @@ import { ColumnChipStatusFormatterProps } from './types';
3
3
  * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
4
4
  */
5
5
  export declare const useColumnChipStatus: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => {
6
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
7
7
  customFilter: (row: TRow, value: string | number) => boolean;
8
8
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
9
9
  };
@@ -1,5 +1,6 @@
1
1
  import { ColumnConcatenatedValuesFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Function to DataGrid that concatenates an array of strings
4
5
  */
5
- export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,13 +1,13 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getPropertyByString } from "@m4l/core";
3
3
  import React from "react";
4
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
5
4
  import { C as ConcatenatedFormatter } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
6
5
  function ColumnConcatenatedValuesFormatter(props) {
7
6
  const { fieldValue, fieldSeparator, Component = React.Fragment } = props;
8
- return (obProps) => {
7
+ return (renderProps) => {
8
+ const rowData = renderProps.row;
9
9
  const values = fieldValue.map((element) => {
10
- const valueMaybeString = getPropertyByString(obProps, getFieldValueWithRow(element));
10
+ const valueMaybeString = getPropertyByString(rowData, element);
11
11
  let fixedValue;
12
12
  if (typeof valueMaybeString === "string" || typeof valueMaybeString === "number") {
13
13
  fixedValue = valueMaybeString.toString();
@@ -16,7 +16,14 @@ function ColumnConcatenatedValuesFormatter(props) {
16
16
  }
17
17
  return fixedValue;
18
18
  });
19
- return /* @__PURE__ */ jsx(ConcatenatedFormatter, { values, separator: fieldSeparator, Component });
19
+ return /* @__PURE__ */ jsx(
20
+ ConcatenatedFormatter,
21
+ {
22
+ values,
23
+ separator: fieldSeparator,
24
+ Component
25
+ }
26
+ );
20
27
  };
21
28
  }
22
29
  export {
@@ -3,7 +3,7 @@ import { ColumnConcatenatedValuesFormatterProps } from './types';
3
3
  * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
4
4
  */
5
5
  export declare const useColumnConcatenatedValues: <TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>) => {
6
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
7
7
  customFilter: (row: TRow, value: string) => boolean;
8
8
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
9
9
  };