@hitachivantara/uikit-react-core 5.37.0 → 5.37.2
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.
|
@@ -4,8 +4,9 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const material = require("@mui/material");
|
|
6
6
|
const isString = require("lodash/isString");
|
|
7
|
-
const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
|
|
8
7
|
const Grid_styles = require("./Grid.styles.cjs");
|
|
8
|
+
const useWidth = require("../../hooks/useWidth.cjs");
|
|
9
|
+
const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
|
|
9
10
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
10
11
|
const isString__default = /* @__PURE__ */ _interopDefault(isString);
|
|
11
12
|
const BREAKPOINT_GUTTERS = {
|
|
@@ -53,8 +54,40 @@ function getNumberOfColumns(columns) {
|
|
|
53
54
|
}
|
|
54
55
|
return numberOfColumns;
|
|
55
56
|
}
|
|
57
|
+
function getContainerProps(spacing, rowSpacing, columnSpacing, columns) {
|
|
58
|
+
const containerProps = {
|
|
59
|
+
container: true
|
|
60
|
+
};
|
|
61
|
+
if (spacing != null) {
|
|
62
|
+
containerProps.spacing = getGridSpacing(spacing);
|
|
63
|
+
}
|
|
64
|
+
if (rowSpacing != null) {
|
|
65
|
+
containerProps.rowSpacing = getGridSpacing(rowSpacing);
|
|
66
|
+
}
|
|
67
|
+
if (columnSpacing != null) {
|
|
68
|
+
containerProps.columnSpacing = getGridSpacing(columnSpacing);
|
|
69
|
+
}
|
|
70
|
+
if (columns != null) {
|
|
71
|
+
containerProps.columns = getNumberOfColumns(columns);
|
|
72
|
+
}
|
|
73
|
+
return containerProps;
|
|
74
|
+
}
|
|
75
|
+
const WidthGrid = React.forwardRef((props, ref) => {
|
|
76
|
+
const {
|
|
77
|
+
container,
|
|
78
|
+
spacing,
|
|
79
|
+
rowSpacing,
|
|
80
|
+
columnSpacing,
|
|
81
|
+
columns,
|
|
82
|
+
...others
|
|
83
|
+
} = props;
|
|
84
|
+
const width = useWidth.useWidth();
|
|
85
|
+
const containerProps = container ? getContainerProps(spacing === "auto" ? width : spacing, rowSpacing === "auto" ? width : rowSpacing, columnSpacing === "auto" ? width : columnSpacing, columns) : {};
|
|
86
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { ref, ...containerProps, ...others });
|
|
87
|
+
});
|
|
56
88
|
const HvGrid = React.forwardRef((props, ref) => {
|
|
57
89
|
const {
|
|
90
|
+
item,
|
|
58
91
|
container,
|
|
59
92
|
spacing = "auto",
|
|
60
93
|
rowSpacing,
|
|
@@ -66,23 +99,11 @@ const HvGrid = React.forwardRef((props, ref) => {
|
|
|
66
99
|
const {
|
|
67
100
|
classes
|
|
68
101
|
} = Grid_styles.useClasses(classesProp);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
containerProps.container = true;
|
|
72
|
-
if (spacing != null) {
|
|
73
|
-
containerProps.spacing = getGridSpacing(spacing);
|
|
74
|
-
}
|
|
75
|
-
if (rowSpacing != null) {
|
|
76
|
-
containerProps.rowSpacing = getGridSpacing(rowSpacing);
|
|
77
|
-
}
|
|
78
|
-
if (columnSpacing != null) {
|
|
79
|
-
containerProps.columnSpacing = getGridSpacing(columnSpacing);
|
|
80
|
-
}
|
|
81
|
-
if (columns != null) {
|
|
82
|
-
containerProps.columns = getNumberOfColumns(columns);
|
|
83
|
-
}
|
|
102
|
+
if (container && item && (spacing === "auto" || rowSpacing === "auto" || columnSpacing === "auto")) {
|
|
103
|
+
return /* @__PURE__ */ jsxRuntime.jsx(WidthGrid, { ref, classes, item, container, spacing, rowSpacing, columnSpacing, columns, ...others });
|
|
84
104
|
}
|
|
85
|
-
|
|
105
|
+
const containerProps = container ? getContainerProps(spacing, rowSpacing, columnSpacing, columns) : {};
|
|
106
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { ref, classes, item, ...containerProps, ...others });
|
|
86
107
|
});
|
|
87
108
|
exports.gridClasses = Grid_styles.staticClasses;
|
|
88
109
|
exports.HvGrid = HvGrid;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.cjs","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n xs: 2,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport type HvGridDirection =\n | \"row\"\n | \"row-reverse\"\n | \"column\"\n | \"column-reverse\";\n\nexport type HvGridSpacing =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"auto\"\n | 1\n | 2\n | 3\n | 4\n | 5\n | 6\n | 7\n | 8\n | 9\n | 10;\n\nexport interface HvGridProps\n extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n HvBaseProps<HTMLDivElement, \"color\"> {\n /**\n * If `true`, the component will have the flex *container* behavior.\n * You should be wrapping *items* with a *container*.\n */\n container?: boolean;\n /**\n * If `true`, the component will have the flex *item* behavior.\n * You should be wrapping *items* with a *container*.\n */\n item?: boolean;\n /**\n * Defines the space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n */\n spacing?: HvGridSpacing | number;\n /**\n * Defines the vertical space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n rowSpacing?: HvGridSpacing | number;\n /**\n * Defines the horizontal space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n columnSpacing?: HvGridSpacing | number;\n /**\n * The number of columns.\n * Defaults to a 12-column grid.\n * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n * @default 12\n */\n columns?: \"auto\" | MuiGridProps[\"columns\"];\n /**\n * Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n */\n direction?: HvGridDirection;\n /**\n * Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n */\n justify?:\n | \"flex-start\"\n | \"center\"\n | \"flex-end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n */\n xs?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n */\n sm?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n */\n md?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n */\n lg?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n */\n xl?: number | boolean;\n /**\n * Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n */\n wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n /**\n * If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n */\n zeroMinWidth?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n let gridSpacing: MuiGridProps[\"spacing\"];\n\n if (isString(spacing)) {\n if (spacing === \"auto\") {\n gridSpacing = BREAKPOINT_GUTTERS;\n } else {\n gridSpacing = BREAKPOINT_GUTTERS[spacing];\n }\n } else if (typeof spacing === \"object\") {\n gridSpacing = Object.keys(spacing).reduce(\n (acc, breakpoint) => ({\n ...acc,\n [breakpoint]:\n BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n }),\n {}\n );\n } else if (spacing === 0) {\n gridSpacing = { xs: 0 };\n } else {\n gridSpacing = spacing;\n }\n\n return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n let numberOfColumns: MuiGridProps[\"columns\"];\n\n if (columns === \"auto\") {\n numberOfColumns = BREAKPOINT_COLUMNS;\n } else {\n numberOfColumns = columns;\n }\n\n return numberOfColumns;\n}\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs | [0-600[ | 16 | 4 |\n * | sm | [600-960[ | 16 | 8 |\n * | md | [960-1270[ | 32 | 12 |\n * | lg | [1270-1920[ | 32 | 12 |\n * | xl | [1920-...[ | 32 | 12 |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n const {\n container,\n spacing = \"auto\",\n rowSpacing,\n columnSpacing,\n columns,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvGrid\", props);\n\n const { classes } = useClasses(classesProp);\n\n const containerProps: Pick<\n MuiGridProps,\n \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n > = {};\n\n if (container) {\n containerProps.container = true;\n\n if (spacing != null) {\n containerProps.spacing = getGridSpacing(spacing);\n }\n if (rowSpacing != null) {\n containerProps.rowSpacing = getGridSpacing(rowSpacing);\n }\n if (columnSpacing != null) {\n containerProps.columnSpacing = getGridSpacing(columnSpacing);\n }\n if (columns != null) {\n containerProps.columns = getNumberOfColumns(columns);\n }\n }\n\n return (\n <MuiGrid ref={ref} classes={classes} {...containerProps} {...others} />\n );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","classes","classesProp","others","useDefaultProps","useClasses","containerProps","MuiGrid"],"mappings":";;;;;;;;;;AAeA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,kBAAAA,QAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,MAAAA,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACAS,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUR,KAAK;AAE7B,QAAA;AAAA,IAAEK;AAAAA,EAAAA,IAAYI,YAAAA,WAAWH,WAAW;AAE1C,QAAMI,iBAGF,CAAA;AAEJ,MAAIR,WAAW;AACbQ,mBAAeR,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,wCACGe,SAAQ,MAAA,EAAA,KAAU,SAAsBD,GAAAA,gBAAgB,GAAIH,OAAU,CAAA;AAE3E,CAAC;;;"}
|
|
1
|
+
{"version":3,"file":"Grid.cjs","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps, useWidth } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n xs: 2,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport type HvGridDirection =\n | \"row\"\n | \"row-reverse\"\n | \"column\"\n | \"column-reverse\";\n\nexport type HvGridSpacing =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"auto\"\n | 1\n | 2\n | 3\n | 4\n | 5\n | 6\n | 7\n | 8\n | 9\n | 10;\n\nexport interface HvGridProps\n extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n HvBaseProps<HTMLDivElement, \"color\"> {\n /**\n * If `true`, the component will have the flex *container* behavior.\n * You should be wrapping *items* with a *container*.\n */\n container?: boolean;\n /**\n * If `true`, the component will have the flex *item* behavior.\n * You should be wrapping *items* with a *container*.\n */\n item?: boolean;\n /**\n * Defines the space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n */\n spacing?: HvGridSpacing | number;\n /**\n * Defines the vertical space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n rowSpacing?: HvGridSpacing | number;\n /**\n * Defines the horizontal space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n columnSpacing?: HvGridSpacing | number;\n /**\n * The number of columns.\n * Defaults to a 12-column grid.\n * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n * @default 12\n */\n columns?: \"auto\" | MuiGridProps[\"columns\"];\n /**\n * Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n */\n direction?: HvGridDirection;\n /**\n * Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n */\n justify?:\n | \"flex-start\"\n | \"center\"\n | \"flex-end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n */\n xs?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n */\n sm?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n */\n md?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n */\n lg?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n */\n xl?: number | boolean;\n /**\n * Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n */\n wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n /**\n * If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n */\n zeroMinWidth?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n let gridSpacing: MuiGridProps[\"spacing\"];\n\n if (isString(spacing)) {\n if (spacing === \"auto\") {\n gridSpacing = BREAKPOINT_GUTTERS;\n } else {\n gridSpacing = BREAKPOINT_GUTTERS[spacing];\n }\n } else if (typeof spacing === \"object\") {\n gridSpacing = Object.keys(spacing).reduce(\n (acc, breakpoint) => ({\n ...acc,\n [breakpoint]:\n BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n }),\n {}\n );\n } else if (spacing === 0) {\n gridSpacing = { xs: 0 };\n } else {\n gridSpacing = spacing;\n }\n\n return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n let numberOfColumns: MuiGridProps[\"columns\"];\n\n if (columns === \"auto\") {\n numberOfColumns = BREAKPOINT_COLUMNS;\n } else {\n numberOfColumns = columns;\n }\n\n return numberOfColumns;\n}\n\nfunction getContainerProps(\n spacing: HvGridProps[\"spacing\"],\n rowSpacing: HvGridProps[\"rowSpacing\"],\n columnSpacing: HvGridProps[\"columnSpacing\"],\n columns: HvGridProps[\"columns\"]\n) {\n const containerProps: Pick<\n MuiGridProps,\n \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n > = { container: true };\n\n if (spacing != null) {\n containerProps.spacing = getGridSpacing(spacing);\n }\n if (rowSpacing != null) {\n containerProps.rowSpacing = getGridSpacing(rowSpacing);\n }\n if (columnSpacing != null) {\n containerProps.columnSpacing = getGridSpacing(columnSpacing);\n }\n if (columns != null) {\n containerProps.columns = getNumberOfColumns(columns);\n }\n\n return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n props;\n\n const width = useWidth();\n\n const containerProps = container\n ? getContainerProps(\n spacing === \"auto\" ? width : spacing,\n rowSpacing === \"auto\" ? width : rowSpacing,\n columnSpacing === \"auto\" ? width : columnSpacing,\n columns\n )\n : {};\n\n return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs | [0-600[ | 16 | 4 |\n * | sm | [600-960[ | 16 | 8 |\n * | md | [960-1270[ | 32 | 12 |\n * | lg | [1270-1920[ | 32 | 12 |\n * | xl | [1920-...[ | 32 | 12 |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n const {\n item,\n container,\n spacing = \"auto\",\n rowSpacing,\n columnSpacing,\n columns,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvGrid\", props);\n\n const { classes } = useClasses(classesProp);\n\n // Fixes MUI error when using spacings as objects and the grid is an item and container\n // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n // The condition avoids using useWidth and re-rendering the component unnecessarily\n if (\n container &&\n item &&\n (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n ) {\n return (\n <WidthGrid\n ref={ref}\n classes={classes}\n item={item}\n container={container}\n spacing={spacing}\n rowSpacing={rowSpacing}\n columnSpacing={columnSpacing}\n columns={columns}\n {...others}\n />\n );\n }\n\n const containerProps = container\n ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n : {};\n\n return (\n <MuiGrid\n ref={ref}\n classes={classes}\n item={item}\n {...containerProps}\n {...others}\n />\n );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","getContainerProps","rowSpacing","columnSpacing","containerProps","container","WidthGrid","forwardRef","props","ref","others","width","useWidth","MuiGrid","HvGrid","item","classes","classesProp","useDefaultProps","useClasses","jsx"],"mappings":"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"}
|
|
@@ -2,9 +2,10 @@ import { jsx } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Grid } from "@mui/material";
|
|
4
4
|
import isString from "lodash/isString";
|
|
5
|
-
import { useDefaultProps } from "../../hooks/useDefaultProps.js";
|
|
6
5
|
import { useClasses } from "./Grid.styles.js";
|
|
7
6
|
import { staticClasses } from "./Grid.styles.js";
|
|
7
|
+
import { useWidth } from "../../hooks/useWidth.js";
|
|
8
|
+
import { useDefaultProps } from "../../hooks/useDefaultProps.js";
|
|
8
9
|
const BREAKPOINT_GUTTERS = {
|
|
9
10
|
xs: 2,
|
|
10
11
|
sm: 2,
|
|
@@ -50,8 +51,40 @@ function getNumberOfColumns(columns) {
|
|
|
50
51
|
}
|
|
51
52
|
return numberOfColumns;
|
|
52
53
|
}
|
|
54
|
+
function getContainerProps(spacing, rowSpacing, columnSpacing, columns) {
|
|
55
|
+
const containerProps = {
|
|
56
|
+
container: true
|
|
57
|
+
};
|
|
58
|
+
if (spacing != null) {
|
|
59
|
+
containerProps.spacing = getGridSpacing(spacing);
|
|
60
|
+
}
|
|
61
|
+
if (rowSpacing != null) {
|
|
62
|
+
containerProps.rowSpacing = getGridSpacing(rowSpacing);
|
|
63
|
+
}
|
|
64
|
+
if (columnSpacing != null) {
|
|
65
|
+
containerProps.columnSpacing = getGridSpacing(columnSpacing);
|
|
66
|
+
}
|
|
67
|
+
if (columns != null) {
|
|
68
|
+
containerProps.columns = getNumberOfColumns(columns);
|
|
69
|
+
}
|
|
70
|
+
return containerProps;
|
|
71
|
+
}
|
|
72
|
+
const WidthGrid = forwardRef((props, ref) => {
|
|
73
|
+
const {
|
|
74
|
+
container,
|
|
75
|
+
spacing,
|
|
76
|
+
rowSpacing,
|
|
77
|
+
columnSpacing,
|
|
78
|
+
columns,
|
|
79
|
+
...others
|
|
80
|
+
} = props;
|
|
81
|
+
const width = useWidth();
|
|
82
|
+
const containerProps = container ? getContainerProps(spacing === "auto" ? width : spacing, rowSpacing === "auto" ? width : rowSpacing, columnSpacing === "auto" ? width : columnSpacing, columns) : {};
|
|
83
|
+
return /* @__PURE__ */ jsx(Grid, { ref, ...containerProps, ...others });
|
|
84
|
+
});
|
|
53
85
|
const HvGrid = forwardRef((props, ref) => {
|
|
54
86
|
const {
|
|
87
|
+
item,
|
|
55
88
|
container,
|
|
56
89
|
spacing = "auto",
|
|
57
90
|
rowSpacing,
|
|
@@ -63,23 +96,11 @@ const HvGrid = forwardRef((props, ref) => {
|
|
|
63
96
|
const {
|
|
64
97
|
classes
|
|
65
98
|
} = useClasses(classesProp);
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
containerProps.container = true;
|
|
69
|
-
if (spacing != null) {
|
|
70
|
-
containerProps.spacing = getGridSpacing(spacing);
|
|
71
|
-
}
|
|
72
|
-
if (rowSpacing != null) {
|
|
73
|
-
containerProps.rowSpacing = getGridSpacing(rowSpacing);
|
|
74
|
-
}
|
|
75
|
-
if (columnSpacing != null) {
|
|
76
|
-
containerProps.columnSpacing = getGridSpacing(columnSpacing);
|
|
77
|
-
}
|
|
78
|
-
if (columns != null) {
|
|
79
|
-
containerProps.columns = getNumberOfColumns(columns);
|
|
80
|
-
}
|
|
99
|
+
if (container && item && (spacing === "auto" || rowSpacing === "auto" || columnSpacing === "auto")) {
|
|
100
|
+
return /* @__PURE__ */ jsx(WidthGrid, { ref, classes, item, container, spacing, rowSpacing, columnSpacing, columns, ...others });
|
|
81
101
|
}
|
|
82
|
-
|
|
102
|
+
const containerProps = container ? getContainerProps(spacing, rowSpacing, columnSpacing, columns) : {};
|
|
103
|
+
return /* @__PURE__ */ jsx(Grid, { ref, classes, item, ...containerProps, ...others });
|
|
83
104
|
});
|
|
84
105
|
export {
|
|
85
106
|
HvGrid,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n xs: 2,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport type HvGridDirection =\n | \"row\"\n | \"row-reverse\"\n | \"column\"\n | \"column-reverse\";\n\nexport type HvGridSpacing =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"auto\"\n | 1\n | 2\n | 3\n | 4\n | 5\n | 6\n | 7\n | 8\n | 9\n | 10;\n\nexport interface HvGridProps\n extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n HvBaseProps<HTMLDivElement, \"color\"> {\n /**\n * If `true`, the component will have the flex *container* behavior.\n * You should be wrapping *items* with a *container*.\n */\n container?: boolean;\n /**\n * If `true`, the component will have the flex *item* behavior.\n * You should be wrapping *items* with a *container*.\n */\n item?: boolean;\n /**\n * Defines the space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n */\n spacing?: HvGridSpacing | number;\n /**\n * Defines the vertical space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n rowSpacing?: HvGridSpacing | number;\n /**\n * Defines the horizontal space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n columnSpacing?: HvGridSpacing | number;\n /**\n * The number of columns.\n * Defaults to a 12-column grid.\n * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n * @default 12\n */\n columns?: \"auto\" | MuiGridProps[\"columns\"];\n /**\n * Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n */\n direction?: HvGridDirection;\n /**\n * Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n */\n justify?:\n | \"flex-start\"\n | \"center\"\n | \"flex-end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n */\n xs?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n */\n sm?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n */\n md?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n */\n lg?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n */\n xl?: number | boolean;\n /**\n * Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n */\n wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n /**\n * If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n */\n zeroMinWidth?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n let gridSpacing: MuiGridProps[\"spacing\"];\n\n if (isString(spacing)) {\n if (spacing === \"auto\") {\n gridSpacing = BREAKPOINT_GUTTERS;\n } else {\n gridSpacing = BREAKPOINT_GUTTERS[spacing];\n }\n } else if (typeof spacing === \"object\") {\n gridSpacing = Object.keys(spacing).reduce(\n (acc, breakpoint) => ({\n ...acc,\n [breakpoint]:\n BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n }),\n {}\n );\n } else if (spacing === 0) {\n gridSpacing = { xs: 0 };\n } else {\n gridSpacing = spacing;\n }\n\n return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n let numberOfColumns: MuiGridProps[\"columns\"];\n\n if (columns === \"auto\") {\n numberOfColumns = BREAKPOINT_COLUMNS;\n } else {\n numberOfColumns = columns;\n }\n\n return numberOfColumns;\n}\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs | [0-600[ | 16 | 4 |\n * | sm | [600-960[ | 16 | 8 |\n * | md | [960-1270[ | 32 | 12 |\n * | lg | [1270-1920[ | 32 | 12 |\n * | xl | [1920-...[ | 32 | 12 |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n const {\n container,\n spacing = \"auto\",\n rowSpacing,\n columnSpacing,\n columns,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvGrid\", props);\n\n const { classes } = useClasses(classesProp);\n\n const containerProps: Pick<\n MuiGridProps,\n \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n > = {};\n\n if (container) {\n containerProps.container = true;\n\n if (spacing != null) {\n containerProps.spacing = getGridSpacing(spacing);\n }\n if (rowSpacing != null) {\n containerProps.rowSpacing = getGridSpacing(rowSpacing);\n }\n if (columnSpacing != null) {\n containerProps.columnSpacing = getGridSpacing(columnSpacing);\n }\n if (columns != null) {\n containerProps.columns = getNumberOfColumns(columns);\n }\n }\n\n return (\n <MuiGrid ref={ref} classes={classes} {...containerProps} {...others} />\n );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","classes","classesProp","others","useDefaultProps","useClasses","containerProps","MuiGrid"],"mappings":";;;;;;;AAeA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,SAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACAS,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,UAAUR,KAAK;AAE7B,QAAA;AAAA,IAAEK;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAE1C,QAAMI,iBAGF,CAAA;AAEJ,MAAIR,WAAW;AACbQ,mBAAeR,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,6BACGe,MAAQ,EAAA,KAAU,SAAsBD,GAAAA,gBAAgB,GAAIH,OAAU,CAAA;AAE3E,CAAC;"}
|
|
1
|
+
{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps, useWidth } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n xs: 2,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n xs: 4,\n sm: 8,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport type HvGridDirection =\n | \"row\"\n | \"row-reverse\"\n | \"column\"\n | \"column-reverse\";\n\nexport type HvGridSpacing =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"auto\"\n | 1\n | 2\n | 3\n | 4\n | 5\n | 6\n | 7\n | 8\n | 9\n | 10;\n\nexport interface HvGridProps\n extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n HvBaseProps<HTMLDivElement, \"color\"> {\n /**\n * If `true`, the component will have the flex *container* behavior.\n * You should be wrapping *items* with a *container*.\n */\n container?: boolean;\n /**\n * If `true`, the component will have the flex *item* behavior.\n * You should be wrapping *items* with a *container*.\n */\n item?: boolean;\n /**\n * Defines the space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n */\n spacing?: HvGridSpacing | number;\n /**\n * Defines the vertical space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n rowSpacing?: HvGridSpacing | number;\n /**\n * Defines the horizontal space between the type item component. It can only be used on a type container component.\n * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n * (number between 0 and 10), breakpoint or auto.\n * It overrides the value of the spacing prop.\n */\n columnSpacing?: HvGridSpacing | number;\n /**\n * The number of columns.\n * Defaults to a 12-column grid.\n * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n * @default 12\n */\n columns?: \"auto\" | MuiGridProps[\"columns\"];\n /**\n * Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n */\n direction?: HvGridDirection;\n /**\n * Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n */\n justify?:\n | \"flex-start\"\n | \"center\"\n | \"flex-end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n */\n xs?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n */\n sm?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n */\n md?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n */\n lg?: number | boolean;\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n */\n xl?: number | boolean;\n /**\n * Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n */\n wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n /**\n * If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n */\n zeroMinWidth?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n let gridSpacing: MuiGridProps[\"spacing\"];\n\n if (isString(spacing)) {\n if (spacing === \"auto\") {\n gridSpacing = BREAKPOINT_GUTTERS;\n } else {\n gridSpacing = BREAKPOINT_GUTTERS[spacing];\n }\n } else if (typeof spacing === \"object\") {\n gridSpacing = Object.keys(spacing).reduce(\n (acc, breakpoint) => ({\n ...acc,\n [breakpoint]:\n BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n }),\n {}\n );\n } else if (spacing === 0) {\n gridSpacing = { xs: 0 };\n } else {\n gridSpacing = spacing;\n }\n\n return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n let numberOfColumns: MuiGridProps[\"columns\"];\n\n if (columns === \"auto\") {\n numberOfColumns = BREAKPOINT_COLUMNS;\n } else {\n numberOfColumns = columns;\n }\n\n return numberOfColumns;\n}\n\nfunction getContainerProps(\n spacing: HvGridProps[\"spacing\"],\n rowSpacing: HvGridProps[\"rowSpacing\"],\n columnSpacing: HvGridProps[\"columnSpacing\"],\n columns: HvGridProps[\"columns\"]\n) {\n const containerProps: Pick<\n MuiGridProps,\n \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n > = { container: true };\n\n if (spacing != null) {\n containerProps.spacing = getGridSpacing(spacing);\n }\n if (rowSpacing != null) {\n containerProps.rowSpacing = getGridSpacing(rowSpacing);\n }\n if (columnSpacing != null) {\n containerProps.columnSpacing = getGridSpacing(columnSpacing);\n }\n if (columns != null) {\n containerProps.columns = getNumberOfColumns(columns);\n }\n\n return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n props;\n\n const width = useWidth();\n\n const containerProps = container\n ? getContainerProps(\n spacing === \"auto\" ? width : spacing,\n rowSpacing === \"auto\" ? width : rowSpacing,\n columnSpacing === \"auto\" ? width : columnSpacing,\n columns\n )\n : {};\n\n return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs | [0-600[ | 16 | 4 |\n * | sm | [600-960[ | 16 | 8 |\n * | md | [960-1270[ | 32 | 12 |\n * | lg | [1270-1920[ | 32 | 12 |\n * | xl | [1920-...[ | 32 | 12 |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n const {\n item,\n container,\n spacing = \"auto\",\n rowSpacing,\n columnSpacing,\n columns,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvGrid\", props);\n\n const { classes } = useClasses(classesProp);\n\n // Fixes MUI error when using spacings as objects and the grid is an item and container\n // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n // The condition avoids using useWidth and re-rendering the component unnecessarily\n if (\n container &&\n item &&\n (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n ) {\n return (\n <WidthGrid\n ref={ref}\n classes={classes}\n item={item}\n container={container}\n spacing={spacing}\n rowSpacing={rowSpacing}\n columnSpacing={columnSpacing}\n columns={columns}\n {...others}\n />\n );\n }\n\n const containerProps = container\n ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n : {};\n\n return (\n <MuiGrid\n ref={ref}\n classes={classes}\n item={item}\n {...containerProps}\n {...others}\n />\n );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","getContainerProps","rowSpacing","columnSpacing","containerProps","container","WidthGrid","forwardRef","props","ref","others","width","useWidth","MuiGrid","HvGrid","item","classes","classesProp","useDefaultProps","useClasses"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.37.
|
|
3
|
+
"version": "5.37.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"access": "public",
|
|
65
65
|
"directory": "package"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "e9c3f86ac43bceca95f4cdf88d62fca278576c51",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|