udp-react-enterprise-component-library 25.16.0 → 25.16.1

package/dist/GeoLocation-Dv1vb1xw.js

@@ -0,0 +1,116 @@
+import { FluentButton } from "./FluentButton-h_8VjXGT.js";
+import { FluentTextField } from "./FluentTextField-DCzp_6wE.js";
+import React, { useEffect, useState } from "react";
+import { Button, InputAdornment, makeStyles } from "@material-ui/core";
+import { SearchIcon } from "@fluentui/react-icons";
+import { fromLonLat } from "ol/proj";
+
+//#region src/map-library/geoLocation/FreeFormField.jsx
+const FreeFormField = (props) => {
+	const [text, setText] = useState("");
+	return /* @__PURE__ */ React.createElement(FluentTextField, {
+		variant: "outlined",
+		size: "small",
+		name: "map search",
+		"aria-describedby": "search-by-address",
+		value: text,
+		fullWidth: true,
+		InputProps: { startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null)) },
+		onChange: (event) => {
+			setText(event.target.value);
+			props.didUpdateText(event.target.value);
+		}
+	});
+};
+
+//#endregion
+//#region src/map-library/geoLocation/GeoLocation.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	button: { marginTop: theme.spacing(1) }
+}));
+const GeoLocation = (props) => {
+	const [city, setCity] = useState("");
+	const [state, setState] = useState("");
+	const [zip, setZip] = useState("");
+	const [country, setCountry] = useState("");
+	const [house, setHouse] = useState("");
+	const [address1, setAddress1] = useState("");
+	const [address2, setAddress2] = useState("");
+	const [response, setResponse] = useState("{}");
+	const [coordinates, setCoordinates] = useState([-117.29982, 33.054275]);
+	const { sendSelected, center } = props;
+	const debug = true;
+	async function geocode(address) {
+		let formattedAddress = address.split(" ").join("+");
+		formattedAddress = formattedAddress.split("\n").join("+");
+		console.log("FORMATTED ADDRESS", formattedAddress);
+		const url = `https://geocoder.say.rocks/?address=${formattedAddress}&debug=${debug}`;
+		try {
+			const response$1 = await fetch(url, {});
+			if (!response$1.ok) throw new Error(response$1.statusText);
+			const json = await response$1.json();
+			const { house_number, country: country$1, house: house$1, road, city: city$1, state: state$1, unit, postcode } = json;
+			setAddress1(`${house_number} ${road}`);
+			setAddress2(`${unit}`);
+			setHouse(house$1);
+			setCity(city$1);
+			setState(state$1);
+			setZip(postcode);
+			setCountry(country$1);
+			setResponse(JSON.stringify(json, null, 2));
+		} catch (err) {
+			console.log(`Node: ${err}`);
+		}
+	}
+	async function getPoints(address) {
+		const url = `http://dev.virtualearth.net/REST/v1/Locations/US/${house}%20${address1},%20${city},%20${state}?o=json&key=AuLp5uwpaqURqvvQt3hd8V5YDYx2yCWSUZuuHHhgwR5PYW8vlOT7Zh__eC-Su9rA`;
+		try {
+			const response$1 = await fetch(url, {});
+			if (!response$1.ok) throw new Error(response$1.statusText);
+			const json = await response$1.json();
+			console.log("BING RESPONSE: ", json.resourceSets[0].resources[0].geocodePoints[0].coordinates);
+			setCoordinates(json.resourceSets[0].resources[0].geocodePoints[0].coordinates);
+			sendSelected(fromLonLat(json.resourceSets[0].resources[0].geocodePoints[0].coordinates.reverse()));
+		} catch (err) {
+			console.log(`Node: ${err}`);
+		}
+	}
+	useEffect(() => {
+		const listener = (event) => {
+			if (event.code === "Enter" || event.code === "NumpadEnter") {
+				console.log("Enter key was pressed.", event);
+				getPoints();
+			}
+		};
+		document.addEventListener("keydown", listener);
+		return () => {
+			document.removeEventListener("keydown", listener);
+		};
+	}, [center]);
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(FreeFormField, { didUpdateText: (text) => {
+		if (text.length) geocode(text);
+		else {
+			setAddress1("");
+			setAddress2("");
+			setCity("");
+			setState("");
+			setZip("");
+			setCountry("");
+			setResponse("{}");
+		}
+	} }), /* @__PURE__ */ React.createElement(FluentButton, {
+		className: classes.button,
+		size: "small",
+		onClick: getPoints
+	}, "Go"));
+};
+var GeoLocation_default = GeoLocation;
+
+//#endregion
+export { FreeFormField, GeoLocation_default };
+//# sourceMappingURL=GeoLocation-Dv1vb1xw.js.map

package/dist/GeoLocation-Dv1vb1xw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoLocation-Dv1vb1xw.js","names":["response","house","city","state","country"],"sources":["../src/map-library/geoLocation/FreeFormField.jsx","../src/map-library/geoLocation/GeoLocation.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { InputAdornment } from '@material-ui/core'\nimport { SearchIcon } from '@fluentui/react-icons'\nimport { FluentTextField } from '../../UI/inputs/textField/FluentTextField'\n\nexport const FreeFormField = (props) => {\n  const [text, setText] = useState('')\n  return (\n    <FluentTextField\n      variant='outlined'\n      size='small'\n      name='map search'\n      // helperText=\"Search by address\"  @todo - needs a fix in fluent textField\n      aria-describedby='search-by-address'\n      value={text}\n      fullWidth\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position='start'>\n            <SearchIcon />\n          </InputAdornment>\n        )\n      }}\n      onChange={(event) => {\n        setText(event.target.value)\n        props.didUpdateText(event.target.value)\n      }}\n    />\n  )\n}\n","import React, { useState, useEffect } from 'react'\nimport { Button, makeStyles } from '@material-ui/core'\nimport { FreeFormField } from './FreeFormField'\nimport { FluentButton } from '../../UI/inputs/buttons/FluentButton'\nimport { fromLonLat } from 'ol/proj'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  button: {\n    marginTop: theme.spacing(1)\n  }\n}))\n\n// @todo: build out address options\nconst GeoLocation = (props) => {\n  const [city, setCity] = useState('')\n  const [state, setState] = useState('')\n  const [zip, setZip] = useState('')\n  const [country, setCountry] = useState('')\n  const [house, setHouse] = useState('')\n  const [address1, setAddress1] = useState('')\n  const [address2, setAddress2] = useState('')\n  const [response, setResponse] = useState('{}')\n  const [coordinates, setCoordinates] = useState([-117.29982, 33.054275])\n\n  const { sendSelected, center } = props\n\n  const debug = true\n  async function geocode(address) {\n    let formattedAddress = address.split(' ').join('+')\n    formattedAddress = formattedAddress.split('\\n').join('+')\n    console.log('FORMATTED ADDRESS', formattedAddress)\n    const url = `https://geocoder.say.rocks/?address=${formattedAddress}&debug=${debug}`\n\n    try {\n      const response = await fetch(url, {})\n      if (!response.ok) {\n        throw new Error(response.statusText)\n      }\n\n      const json = await response.json()\n      const {\n        house_number,\n        country,\n        house,\n        road,\n        city,\n        state,\n        unit,\n        postcode\n      } = json\n\n      setAddress1(`${house_number} ${road}`)\n      setAddress2(`${unit}`)\n      setHouse(house)\n      setCity(city)\n      setState(state)\n      setZip(postcode)\n      setCountry(country)\n      setResponse(JSON.stringify(json, null, 2))\n    } catch (err) {\n      console.log(`Node: ${err}`)\n    }\n  }\n\n  async function getPoints(address) {\n    const url = `http://dev.virtualearth.net/REST/v1/Locations/US/${house}%20${address1},%20${city},%20${state}?o=json&key=AuLp5uwpaqURqvvQt3hd8V5YDYx2yCWSUZuuHHhgwR5PYW8vlOT7Zh__eC-Su9rA`\n\n    try {\n      const response = await fetch(url, {})\n      if (!response.ok) {\n        throw new Error(response.statusText)\n      }\n\n      const json = await response.json()\n      console.log(\n        'BING RESPONSE: ',\n        json.resourceSets[0].resources[0].geocodePoints[0].coordinates\n      )\n      setCoordinates(\n        json.resourceSets[0].resources[0].geocodePoints[0].coordinates\n      )\n      sendSelected(\n        fromLonLat(\n          json.resourceSets[0].resources[0].geocodePoints[0].coordinates.reverse()\n        )\n      )\n    } catch (err) {\n      console.log(`Node: ${err}`)\n    }\n  }\n\n  useEffect(() => {\n    const listener = (event) => {\n      if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n        console.log('Enter key was pressed.', event)\n        getPoints()\n      }\n    }\n    document.addEventListener('keydown', listener)\n    return () => {\n      document.removeEventListener('keydown', listener)\n    }\n  }, [center])\n\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <FreeFormField\n        didUpdateText={(text) => {\n          if (text.length) {\n            geocode(text)\n          } else {\n            // setHouse(\"\");\n            setAddress1('')\n            setAddress2('')\n            setCity('')\n            setState('')\n            setZip('')\n            setCountry('')\n            setResponse('{}')\n          }\n        }}\n      />\n      <FluentButton className={classes.button} size='small' onClick={getPoints}>\n        Go\n      </FluentButton>\n      {/* {console.log('RESPONSE: ', debug && response)} */}\n    </div>\n  )\n}\n\nexport default GeoLocation\n"],"mappings":"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"}

package/dist/GeoMap-CVGJXRRA.js

@@ -0,0 +1,108 @@
+import { Map_default } from "./Map-CM3OkjUS.js";
+import { Layers, TileLayer } from "./TileLayer-Bk6rITEu.js";
+import { osm_default } from "./Source-BUBwrbaZ.js";
+import { Controls_default, FullScreenControl_default } from "./Controls-Dns0KUBq.js";
+import { MapControlsStandard_default } from "./MapControlsStandard-twyqBTRG.js";
+import React, { useCallback, useState } from "react";
+import { Toolbar, makeStyles } from "@material-ui/core";
+import { fromLonLat } from "ol/proj";
+import BingMaps from "ol/source/BingMaps";
+import "ol/ol.css";
+
+//#region src/maps/GeoMap.jsx
+const useStyles = makeStyles((theme) => ({ toolbar: {
+	padding: 0,
+	minHeight: theme.spacing(6)
+} }));
+const GeoMap = (props) => {
+	const { locations, start, mapType, tooltip, bingKey, toolbar, width, height, defaultZoom } = props;
+	const classes = useStyles();
+	const [center, setCenter] = useState(start);
+	const [zoom, setZoom] = useState(defaultZoom);
+	const [showLayer1, setShowLayer1] = useState(true);
+	const [showLayer2, setShowLayer2] = useState(true);
+	const [lat, setLat] = useState();
+	const [long, setLong] = useState();
+	const [displayType, setDisplayType] = useState(mapType);
+	const resetPosition = () => {
+		setCenter(start);
+		setZoom(9);
+	};
+	const sendPosition = (position) => {
+		setCenter(position);
+		console.log("POSITION", position);
+	};
+	const controlZoom = (input) => {
+		setZoom(zoom + (input === "in" ? 1 : -1));
+	};
+	const handleSliderChange = (event, newValue) => {
+		setZoom(newValue);
+	};
+	const handleInputChange = (event) => {
+		setZoom(event.target.value === "" ? "" : Number(event.target.value));
+	};
+	const handleBlur = () => {
+		if (zoom < 0) setZoom(0);
+		else if (zoom > 100) setZoom(100);
+	};
+	const handleInputPositionLat = (event) => {
+		setLat(event.target.value);
+	};
+	const handleInputPositionLong = (event) => {
+		setLong(event.target.value);
+	};
+	const setNewPosition = () => {
+		setCenter([lat, long]);
+	};
+	const handleViewType = useCallback((event, newType) => {
+		setDisplayType(newType);
+	}, []);
+	const getLocationValue = (value) => {
+		setCenter(value.location);
+	};
+	return /* @__PURE__ */ React.createElement("div", { style: {
+		width,
+		height,
+		overflow: "hidden"
+	} }, toolbar && /* @__PURE__ */ React.createElement(Toolbar, { className: classes.toolbar }, /* @__PURE__ */ React.createElement(MapControlsStandard_default, {
+		showLayer1,
+		showLayer2,
+		setShowLayer1,
+		setShowLayer2,
+		zoomIn: () => controlZoom("in"),
+		zoomOut: () => controlZoom("out"),
+		value: zoom,
+		setValue: setZoom,
+		handleSliderChange,
+		handleInputChange,
+		handleBlur,
+		reset: resetPosition,
+		changeLat: handleInputPositionLat,
+		changeLong: handleInputPositionLong,
+		setPosition: setNewPosition,
+		handleChange: handleViewType,
+		displayType,
+		getLocation: sendPosition,
+		locations,
+		tooltip,
+		getLocationValue
+	})), /* @__PURE__ */ React.createElement(Map_default, {
+		center: fromLonLat(center),
+		zoom
+	}, /* @__PURE__ */ React.createElement(Layers, null, /* @__PURE__ */ React.createElement(TileLayer, {
+		source: osm_default(),
+		zIndex: 0
+	}), /* @__PURE__ */ React.createElement(TileLayer, {
+		source: new BingMaps({
+			preload: Infinity,
+			visible: true,
+			imagerySet: displayType,
+			key: bingKey
+		}),
+		zIndex: 0
+	})), /* @__PURE__ */ React.createElement(Controls_default, null, /* @__PURE__ */ React.createElement(FullScreenControl_default, null))));
+};
+
+//#endregion
+export { GeoMap };
+//# sourceMappingURL=GeoMap-CVGJXRRA.js.map

package/dist/GeoMap-CVGJXRRA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoMap-CVGJXRRA.js","names":["MapControlsStandard","Map","osm","Controls","FullScreenControl"],"sources":["../src/maps/GeoMap.jsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { Toolbar } from '@material-ui/core';\nimport Map from './openLayerMaps/Map';\nimport { Layers, TileLayer } from './openLayerMaps/Layers';\nimport { osm } from './openLayerMaps/Source';\nimport { fromLonLat } from 'ol/proj';\nimport { Controls, FullScreenControl } from './openLayerMaps/Controls';\nimport MapControlsStandard from './openLayerMaps/ui/MapControlsStandard';\nimport BingMaps from 'ol/source/BingMaps';\nimport 'ol/ol.css';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  toolbar: {\n    padding: 0,\n    minHeight: theme.spacing(6)\n  }\n}));\n\n// original default -94.9065, 38.9884\nexport const GeoMap = (props) => {\n  const {\n    locations,\n    start,\n    mapType,\n    tooltip,\n    bingKey,\n    toolbar,\n    width,\n    height,\n    defaultZoom\n  } = props;\n  const classes = useStyles();\n  const [center, setCenter] = useState(start);\n  const [zoom, setZoom] = useState(defaultZoom);\n  const [showLayer1, setShowLayer1] = useState(true);\n  const [showLayer2, setShowLayer2] = useState(true);\n  const [lat, setLat] = useState();\n  const [long, setLong] = useState();\n  // RoadOnDemand, CanvasDark, Aerial\n  const [displayType, setDisplayType] = useState(mapType);\n\n  const resetPosition = () => {\n    setCenter(start);\n    setZoom(9);\n  };\n\n  const sendPosition = (position) => {\n    setCenter(position);\n    console.log('POSITION', position);\n  };\n\n  const controlZoom = (input) => {\n    const direction = input === 'in' ? 1 : -1;\n    setZoom(zoom + direction);\n  };\n\n  const handleSliderChange = (event, newValue) => {\n    setZoom(newValue);\n  };\n\n  const handleInputChange = (event) => {\n    setZoom(event.target.value === '' ? '' : Number(event.target.value));\n  };\n\n  const handleBlur = () => {\n    if (zoom < 0) {\n      setZoom(0);\n    } else if (zoom > 100) {\n      setZoom(100);\n    }\n  };\n\n  const handleInputPositionLat = (event) => {\n    setLat(event.target.value);\n  };\n  const handleInputPositionLong = (event) => {\n    setLong(event.target.value);\n  };\n\n  const setNewPosition = () => {\n    setCenter([lat, long]);\n  };\n\n  const handleViewType = useCallback((event, newType) => {\n    setDisplayType(newType);\n  }, []);\n\n  const getLocationValue = (value) => {\n    setCenter(value.location);\n  };\n\n  return (\n    <div style={{ width: width, height: height, overflow: 'hidden' }}>\n      {toolbar && (\n        <Toolbar className={classes.toolbar}>\n          <MapControlsStandard\n            showLayer1={showLayer1}\n            showLayer2={showLayer2}\n            setShowLayer1={setShowLayer1}\n            setShowLayer2={setShowLayer2}\n            zoomIn={() => controlZoom('in')}\n            zoomOut={() => controlZoom('out')}\n            value={zoom}\n            setValue={setZoom}\n            handleSliderChange={handleSliderChange}\n            handleInputChange={handleInputChange}\n            handleBlur={handleBlur}\n            reset={resetPosition}\n            changeLat={handleInputPositionLat}\n            changeLong={handleInputPositionLong}\n            setPosition={setNewPosition}\n            handleChange={handleViewType}\n            displayType={displayType}\n            getLocation={sendPosition}\n            locations={locations}\n            tooltip={tooltip}\n            getLocationValue={getLocationValue}\n          />\n        </Toolbar>\n      )}\n      <Map center={fromLonLat(center)} zoom={zoom}>\n        <Layers>\n          <TileLayer source={osm()} zIndex={0} />\n\n          <TileLayer\n            source={\n              new BingMaps({\n                preload: Infinity,\n                visible: true,\n                imagerySet: displayType,\n                key: bingKey\n              })\n            }\n            zIndex={0}\n          />\n        </Layers>\n\n        <Controls>\n          <FullScreenControl />\n        </Controls>\n      </Map>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,YAAY,YAAY,WAAW,EACvC,SAAS;CACP,SAAS;CACT,WAAW,MAAM,QAAQ,EAAE;CAC5B,EACF,EAAE;AAGH,MAAa,UAAU,UAAU;CAC/B,MAAM,EACJ,WACA,OACA,SACA,SACA,SACA,SACA,OACA,QACA,gBACE;CACJ,MAAM,UAAU,WAAW;CAC3B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,MAAM,WAAW,SAAS,YAAY;CAC7C,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,KAAK,UAAU,UAAU;CAChC,MAAM,CAAC,MAAM,WAAW,UAAU;CAElC,MAAM,CAAC,aAAa,kBAAkB,SAAS,QAAQ;CAEvD,MAAM,sBAAsB;AAC1B,YAAU,MAAM;AAChB,UAAQ,EAAE;;CAGZ,MAAM,gBAAgB,aAAa;AACjC,YAAU,SAAS;AACnB,UAAQ,IAAI,YAAY,SAAS;;CAGnC,MAAM,eAAe,UAAU;AAE7B,UAAQ,QADU,UAAU,OAAO,IAAI,IACd;;CAG3B,MAAM,sBAAsB,OAAO,aAAa;AAC9C,UAAQ,SAAS;;CAGnB,MAAM,qBAAqB,UAAU;AACnC,UAAQ,MAAM,OAAO,UAAU,KAAK,KAAK,OAAO,MAAM,OAAO,MAAM,CAAC;;CAGtE,MAAM,mBAAmB;AACvB,MAAI,OAAO,EACT,SAAQ,EAAE;WACD,OAAO,IAChB,SAAQ,IAAI;;CAIhB,MAAM,0BAA0B,UAAU;AACxC,SAAO,MAAM,OAAO,MAAM;;CAE5B,MAAM,2BAA2B,UAAU;AACzC,UAAQ,MAAM,OAAO,MAAM;;CAG7B,MAAM,uBAAuB;AAC3B,YAAU,CAAC,KAAK,KAAK,CAAC;;CAGxB,MAAM,iBAAiB,aAAa,OAAO,YAAY;AACrD,iBAAe,QAAQ;IACtB,EAAE,CAAC;CAEN,MAAM,oBAAoB,UAAU;AAClC,YAAU,MAAM,SAAS;;AAG3B,QACE,oCAAC,SAAI,OAAO;EAAS;EAAe;EAAQ,UAAU;EAAU,IAC7D,WACC,oCAAC,WAAQ,WAAW,QAAQ,WAC1B,oCAACA;EACa;EACA;EACG;EACA;EACf,cAAc,YAAY,KAAK;EAC/B,eAAe,YAAY,MAAM;EACjC,OAAO;EACP,UAAU;EACU;EACD;EACP;EACZ,OAAO;EACP,WAAW;EACX,YAAY;EACZ,aAAa;EACb,cAAc;EACD;EACb,aAAa;EACF;EACF;EACS;GAClB,CACM,EAEZ,oCAACC;EAAI,QAAQ,WAAW,OAAO;EAAQ;IACrC,oCAAC,cACC,oCAAC;EAAU,QAAQC,aAAK;EAAE,QAAQ;GAAK,EAEvC,oCAAC;EACC,QACE,IAAI,SAAS;GACX,SAAS;GACT,SAAS;GACT,YAAY;GACZ,KAAK;GACN,CAAC;EAEJ,QAAQ;GACR,CACK,EAET,oCAACC,wBACC,oCAACC,gCAAoB,CACZ,CACP,CACF"}

package/dist/Grid-5LtTpExg.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Grid } from "@material-ui/core";
+
+//#region src/UI/Grid.jsx
+const Grid$1 = (props) => {
+	const { container, item, spacing,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Grid, {
+		container,
+		item,
+		spacing,
+		...otherProps
+	});
+};
+
+//#endregion
+export { Grid$1 as Grid };
+//# sourceMappingURL=Grid-5LtTpExg.js.map

package/dist/Grid-5LtTpExg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-5LtTpExg.js","names":["Grid","MuiGrid"],"sources":["../src/UI/Grid.jsx"],"sourcesContent":["import React from 'react';\nimport { Grid as MuiGrid } from '@material-ui/core';\n\nexport const Grid = props => {\n  const { container, item, spacing, ...otherProps } = props;\n\n  return (\n    <MuiGrid\n      container={container}\n      item={item}\n      spacing={spacing}\n      {...otherProps}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,MAAaA,UAAO,UAAS;CAC3B,MAAM,EAAE,WAAW,MAAM,QAAS,GAAG,eAAe;AAEpD,QACE,oCAACC;EACY;EACL;EACG;EACT,GAAI;GACJ"}

package/dist/GridFunctions-Dx91xe8e.js

@@ -0,0 +1,150 @@
+import { GridStateTypeEnums } from "./unitySystemEnums-DXk8yS3v.js";
+
+//#region src/utilities/aggrid/GridFunctions.js
+const useGridFormat = () => {
+	const gridFormat = (gridApi, type) => {
+		type === "expand" && gridApi.expandAll();
+		type === "collapse" && gridApi.collapseAll();
+		type === "resize" && gridApi.sizeColumnsToFit();
+	};
+	return [gridFormat];
+};
+const useGridClear = () => {
+	const gridClear = (gridApi, gridColumnApi) => {
+		gridColumnApi.setRowGroupColumns([]);
+		gridApi.setFilterModel(null);
+		gridApi.setQuickFilter("");
+		gridApi.sizeColumnsToFit();
+		gridColumnApi.resetColumnState();
+	};
+	return [gridClear];
+};
+const useQuickFilter = () => {
+	const quickFilter = (gridApi, event) => {
+		gridApi.setQuickFilter(event?.target.value);
+	};
+	return [quickFilter];
+};
+const useExport = () => {
+	const gridExport = (gridApi, type) => {
+		type === "excel" && gridApi.exportDataAsExcel();
+		type === "csv" && gridApi.exportDataAsCsv();
+	};
+	return [gridExport];
+};
+const saveGridState = async (gridId, gridApi, gridColumnApi, execute) => {
+	const columnState = gridColumnApi?.getColumnState();
+	const columnGroupState = gridColumnApi?.getColumnGroupState();
+	const sortModel = gridApi.getSortModel();
+	const filterModel = gridApi.getFilterModel();
+	const isPivotMode = gridColumnApi.isPivotMode();
+	const gridState = [];
+	const columnGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Pivot_Mode,
+		gridId,
+		values: JSON.stringify(isPivotMode)
+	};
+	gridState.push(columnGridConfiguration);
+	gridState.push(columnGroupGridConfiguration);
+	gridState.push(columnSortGridConfiguration);
+	gridState.push(columnFilterGridConfiguration);
+	gridState.push(pivotGridConfiguration);
+	return await execute({ data: gridState });
+};
+const getGridState = (gridApi, gridColumnApi, gridId) => {
+	const columnState = gridColumnApi?.getColumnState();
+	const columnGroupState = gridColumnApi?.getColumnGroupState();
+	const sortModel = gridApi.getSortModel();
+	const filterModel = gridApi.getFilterModel();
+	const isPivotMode = gridColumnApi.isPivotMode();
+	const gridState = [];
+	const columnGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Pivot_Mode,
+		gridId,
+		values: JSON.stringify(isPivotMode)
+	};
+	gridState.push(columnGridConfiguration);
+	gridState.push(columnGroupGridConfiguration);
+	gridState.push(columnSortGridConfiguration);
+	gridState.push(columnFilterGridConfiguration);
+	gridState.push(pivotGridConfiguration);
+	return gridState;
+};
+const deleteGridState = async (gridApi, gridColumnApi, deleteGridState$1) => {
+	clearGridState(gridApi, gridColumnApi);
+	return await deleteGridState$1();
+};
+const clearGridState = (gridApi, gridColumnApi) => {
+	gridColumnApi.resetColumnState();
+	gridColumnApi.resetColumnGroupState();
+	gridApi.setFilterModel({});
+	gridApi.setSortModel([]);
+	gridColumnApi.setPivotMode(false);
+	gridApi.sizeColumnsToFit();
+};
+const onFirstDataRendered = (gridApi, gridColumnApi, gridStates) => {
+	if (gridStates && gridStates.length) gridStates.forEach((state) => {
+		switch (state.gridStateTypeId) {
+			case GridStateTypeEnums.Column:
+				gridColumnApi.setColumnState(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Group:
+				gridColumnApi.setColumnGroupState(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Pivot_Mode:
+				gridColumnApi.setPivotMode(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Sort:
+				gridApi.setSortModel(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Filter:
+				gridApi.setFilterModel(JSON.parse(state.values));
+				break;
+			default: break;
+		}
+	});
+};
+
+//#endregion
+export { clearGridState, deleteGridState, getGridState, onFirstDataRendered, saveGridState, useExport, useGridClear, useGridFormat, useQuickFilter };
+//# sourceMappingURL=GridFunctions-Dx91xe8e.js.map

package/dist/GridFunctions-Dx91xe8e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridFunctions-Dx91xe8e.js","names":["deleteGridState"],"sources":["../src/utilities/aggrid/GridFunctions.js"],"sourcesContent":["import { GridStateTypeEnums } from '../../enums/unitySystemEnums.ts';\n\nexport const useGridFormat = () => {\n  const gridFormat = (gridApi, type) => {\n    type === 'expand' && gridApi.expandAll()\n    type === 'collapse' && gridApi.collapseAll()\n    type === 'resize' && gridApi.sizeColumnsToFit()\n  }\n  return [gridFormat]\n}\n\nexport const useGridClear = () => {\n  const gridClear = (gridApi, gridColumnApi) => {\n    gridColumnApi.setRowGroupColumns([])\n    gridApi.setFilterModel(null)\n    gridApi.setQuickFilter('')\n    gridApi.sizeColumnsToFit()\n    gridColumnApi.resetColumnState()\n  }\n  return [gridClear]\n}\n\nexport const useQuickFilter = () => {\n  const quickFilter = (gridApi, event) => {\n    gridApi.setQuickFilter(event?.target.value)\n  }\n  return [quickFilter]\n}\n\nexport const useExport = () => {\n  const gridExport = (gridApi, type) => {\n    type === 'excel' && gridApi.exportDataAsExcel()\n    type === 'csv' && gridApi.exportDataAsCsv()\n  }\n  return [gridExport]\n}\n\nexport const saveGridState = async (\n  gridId,\n  gridApi,\n  gridColumnApi,\n  execute\n) => {\n  const columnState = gridColumnApi?.getColumnState();\n  const columnGroupState = gridColumnApi?.getColumnGroupState();\n  const sortModel = gridApi.getSortModel();\n  const filterModel = gridApi.getFilterModel();\n  const isPivotMode = gridColumnApi.isPivotMode();\n\n  const gridState = [];\n  const columnGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column,\n    gridId: gridId,\n    values: JSON.stringify(columnState),\n  };\n  const columnGroupGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Group,\n    gridId: gridId,\n    values: JSON.stringify(columnGroupState),\n  };\n  const columnSortGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Sort,\n    gridId: gridId,\n    values: JSON.stringify(sortModel),\n  };\n  const columnFilterGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Filter,\n    gridId: gridId,\n    values: JSON.stringify(filterModel),\n  };\n  const pivotGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Pivot_Mode,\n    gridId: gridId,\n    values: JSON.stringify(isPivotMode),\n  };\n  gridState.push(columnGridConfiguration);\n  gridState.push(columnGroupGridConfiguration);\n  gridState.push(columnSortGridConfiguration);\n  gridState.push(columnFilterGridConfiguration);\n  gridState.push(pivotGridConfiguration);\n\n  return await execute({ data: gridState });\n};\n\n\nexport const getGridState = (gridApi, gridColumnApi, gridId) => {\n  const columnState = gridColumnApi?.getColumnState();\n  const columnGroupState = gridColumnApi?.getColumnGroupState();\n  const sortModel = gridApi.getSortModel();\n  const filterModel = gridApi.getFilterModel();\n  const isPivotMode = gridColumnApi.isPivotMode();\n\n  const gridState = [];\n  const columnGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column,\n    gridId: gridId,\n    values: JSON.stringify(columnState),\n  };\n  const columnGroupGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Group,\n    gridId: gridId,\n    values: JSON.stringify(columnGroupState),\n  };\n  const columnSortGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Sort,\n    gridId: gridId,\n    values: JSON.stringify(sortModel),\n  };\n  const columnFilterGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Filter,\n    gridId: gridId,\n    values: JSON.stringify(filterModel),\n  };\n  const pivotGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Pivot_Mode,\n    gridId: gridId,\n    values: JSON.stringify(isPivotMode),\n  };\n  gridState.push(columnGridConfiguration);\n  gridState.push(columnGroupGridConfiguration);\n  gridState.push(columnSortGridConfiguration);\n  gridState.push(columnFilterGridConfiguration);\n  gridState.push(pivotGridConfiguration);\n\n  return gridState;\n}\n\nexport const deleteGridState = async (\n  gridApi,\n  gridColumnApi,\n  deleteGridState\n) => {\n  clearGridState(gridApi, gridColumnApi);\n  return await deleteGridState();\n};\n\nexport const clearGridState = (gridApi, gridColumnApi) => {\n  gridColumnApi.resetColumnState();\n  gridColumnApi.resetColumnGroupState();\n  gridApi.setFilterModel({});\n  gridApi.setSortModel([]);\n  gridColumnApi.setPivotMode(false);\n  gridApi.sizeColumnsToFit();\n};\n\nexport const onFirstDataRendered = (gridApi, gridColumnApi, gridStates) => {\n  if (gridStates && gridStates.length) {\n    gridStates.forEach(state => {\n      switch (state.gridStateTypeId) {\n        case GridStateTypeEnums.Column:\n          gridColumnApi.setColumnState(JSON.parse(state.values));\n          break;\n        case GridStateTypeEnums.Column_Group:\n          gridColumnApi.setColumnGroupState(JSON.parse(state.values));\n          break;\n        case GridStateTypeEnums.Pivot_Mode:\n          gridColumnApi.setPivotMode(JSON.parse(state.values));\n          break;\n        case GridStateTypeEnums.Column_Sort:\n          gridApi.setSortModel(JSON.parse(state.values));\n          break;\n        case GridStateTypeEnums.Column_Filter:\n          gridApi.setFilterModel(JSON.parse(state.values));\n          break;\n        default:\n          break;\n      }\n    });\n  }\n};"],"mappings":"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"}

package/dist/GridGroupingSidebar-nHJQULrr.js

@@ -0,0 +1,142 @@
+import { LayoutUnit } from "./LayoutUnit-fGVQwt6Y.js";
+import { AmbientTokenButton } from "./AmbientTokenButton-CpdlLmsF.js";
+import { Token } from "./Token-DOIAu9p4.js";
+import { AmbientToggleButton } from "./AmbientToggleButton-C-7jtLY0.js";
+import { AmbientToggleButtonGroupDefault_default } from "./AmbientToggleButtonGroupDefault-JAnbpfxZ.js";
+import React, { useState } from "react";
+import { Paper, Typography, makeStyles } from "@material-ui/core";
+import { AssessmentGroupIcon, ChevronFold10Icon, ChevronUnfold10Icon, ChromeCloseIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/templates/ui/GridSidebarContainer.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {},
+	groupWrapper: {
+		padding: theme.spacing(2),
+		height: (props) => props?.height ? `${props.height} !important` : "calc(100vh - 280px) !important",
+		overflow: "auto"
+	}
+}));
+const GridSidebarContainer = (props) => {
+	const { children, color } = props;
+	const classes = useStyles$2(props);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Paper, {
+		elevation: "0",
+		square: true,
+		style: { background: color }
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.groupWrapper }, children)));
+};
+GridSidebarContainer.propTypes = {
+	children: PropTypes.node,
+	color: PropTypes.string
+};
+
+//#endregion
+//#region src/UI/templates/ui/GridGroupingHeader.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {},
+	actionHeader: {
+		display: "flex",
+		flexDirection: "row",
+		gap: 10
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.secondary.main
+	}
+}));
+const GridGroupingHeader = ({ expandClick, collapseClick }) => {
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.actionHeader }, /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		icon: ChevronFold10Icon,
+		tooltip: "Collapse All",
+		ariaLabel: "Collapse All",
+		onClick: collapseClick
+	}), /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		icon: ChevronUnfold10Icon,
+		tooltip: "Expand All",
+		ariaLabel: "Expand All",
+		onClick: expandClick
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { className: classes.label }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "Group By:")), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }));
+};
+GridGroupingHeader.propTypes = {
+	expandClick: PropTypes.func.isRequired,
+	collapseClick: PropTypes.func.isRequired
+};
+
+//#endregion
+//#region src/UI/templates/ui/GridGroupingSidebar.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	groupActionContainer: {
+		display: "flex",
+		flexDirection: "column",
+		flexWrap: "wrap",
+		alignContent: "space-around"
+	},
+	buttonRoot: {
+		textTransform: "none",
+		fontWeight: 700,
+		justifyContent: "flex-start"
+	},
+	buttonGroupWrapper: { gap: theme.spacing(2) }
+}));
+const GridGroupingSidebar = ({ groupItem, expandClick, collapseClick, closeClick, groupingData, height, color = "#F5F2F8" }) => {
+	const classes = useStyles();
+	const [view, setView] = useState("");
+	const handleChange = (event, nextView) => {
+		setView(nextView);
+	};
+	const GroupItem = ({ label, clear }) => {
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Token, {
+			icon: clear ? ChromeCloseIcon : AssessmentGroupIcon,
+			color: "trigger",
+			size: "small",
+			variant: "filled",
+			type: "icon"
+		}), /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			style: { color: "black" }
+		}, " ", label, " "));
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(GridSidebarContainer, {
+		color,
+		height
+	}, /* @__PURE__ */ React.createElement(GridGroupingHeader, {
+		expandClick,
+		collapseClick,
+		closeClick
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.groupActionContainer }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroupDefault_default, {
+		orientation: "vertical",
+		value: view,
+		exclusive: true,
+		onChange: handleChange,
+		className: classes.buttonGroupWrapper
+	}, groupingData.map((item) => {
+		return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+			value: item.value,
+			"aria-label": item.label,
+			onClick: () => groupItem(item.groupItem)
+		}, /* @__PURE__ */ React.createElement(GroupItem, { label: item.label }));
+	}), /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+		value: "noGroups",
+		"aria-label": "noGroups",
+		onClick: closeClick
+	}, /* @__PURE__ */ React.createElement(GroupItem, {
+		label: "No Groups",
+		clear: true
+	}))))));
+};
+GridGroupingSidebar.propTypes = {
+	groupItem: PropTypes.func,
+	expandClick: PropTypes.func,
+	collapseClick: PropTypes.func,
+	closeClick: PropTypes.func,
+	groupingData: PropTypes.array,
+	color: PropTypes.string
+};
+
+//#endregion
+export { GridGroupingHeader, GridGroupingSidebar, GridSidebarContainer };
+//# sourceMappingURL=GridGroupingSidebar-nHJQULrr.js.map

package/dist/GridGroupingSidebar-nHJQULrr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridGroupingSidebar-nHJQULrr.js","names":["useStyles","useStyles","AmbientToggleButtonGroupDefault"],"sources":["../src/UI/templates/ui/GridSidebarContainer.jsx","../src/UI/templates/ui/GridGroupingHeader.jsx","../src/UI/templates/ui/GridGroupingSidebar.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Paper } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  groupWrapper: {\n    padding: theme.spacing(2),\n    height: (props) =>\n      props?.height\n        ? `${props.height} !important`\n        : 'calc(100vh - 280px) !important',\n    overflow: 'auto'\n  }\n}));\n\nexport const GridSidebarContainer = (props) => {\n  const { children, color } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div className={classes.root}>\n      <Paper elevation='0' square style={{ background: color }}>\n        <div className={classes.groupWrapper}>{children}</div>\n      </Paper>\n    </div>\n  );\n};\nGridSidebarContainer.propTypes = {\n  /**\n   * Children of component\n   */\n  children: PropTypes.node,\n  color: PropTypes.string\n};\n","import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport { ChevronFold10Icon, ChevronUnfold10Icon } from '@fluentui/react-icons';\nimport { AmbientTokenButton } from '../../inputs/buttons/AmbientTokenButton'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  actionHeader: {\n    display: 'flex',\n    flexDirection: 'row',\n    gap: 10\n  },\n  icon:{\n    background: theme.palette.common.white,\n    padding: theme.spacing(1),\n    color: theme.palette.secondary.main\n  }\n\n}))\n\nexport const GridGroupingHeader = ({expandClick, collapseClick }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.root} >\n      <div className={classes.actionHeader} >\n          <AmbientTokenButton icon={ChevronFold10Icon} tooltip=\"Collapse All\" ariaLabel=\"Collapse All\" onClick={collapseClick}  />\n          <AmbientTokenButton icon={ChevronUnfold10Icon} tooltip=\"Expand All\" ariaLabel=\"Expand All\" onClick={expandClick}  />\n      </div>\n      <LayoutUnit unit=\"nudge\" />    \n    <div className={classes.label} ><Typography variant=\"caption\">Group By:</Typography></div>\n      <LayoutUnit unit=\"nudge\" />\n    </div>\n  )\n}\nGridGroupingHeader.propTypes = {\n  /**\n   * expand fucntion to expand grid when items are grouped\n   */\n   expandClick: PropTypes.func.isRequired,\n  /**\n   * expand fucntion to collapse grid when items are grouped\n   */\n   collapseClick: PropTypes.func.isRequired,\n}\n","import React, { useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { GridSidebarContainer } from './GridSidebarContainer';\nimport { GridGroupingHeader } from './GridGroupingHeader';\nimport { AssessmentGroupIcon, ChromeCloseIcon } from '@fluentui/react-icons';\nimport { Token } from '../../components/dataDisplay/Token';\nimport { AmbientToggleButton } from '../../inputs/buttons/AmbientToggleButton';\nimport AmbientToggleButtonGroupDefault from '../../inputs/buttons/AmbientToggleButtonGroupDefault';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  groupActionContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'wrap',\n    alignContent: 'space-around'\n  },\n  buttonRoot: {\n    textTransform: 'none',\n    fontWeight: 700,\n    justifyContent: 'flex-start'\n  },\n  buttonGroupWrapper: {\n    gap: theme.spacing(2)\n  }\n}));\n\nexport const GridGroupingSidebar = ({\n  groupItem,\n  expandClick,\n  collapseClick,\n  closeClick,\n  groupingData,\n  height,\n  color = '#F5F2F8'\n}) => {\n  const classes = useStyles();\n\n  const [view, setView] = useState('');\n\n  const handleChange = (event, nextView) => {\n    setView(nextView);\n  };\n\n  const GroupItem = ({ label, clear }) => {\n    return (\n      <>\n        <Token\n          icon={clear ? ChromeCloseIcon : AssessmentGroupIcon}\n          color='trigger'\n          size='small'\n          variant='filled'\n          type='icon'\n        />\n        <Typography variant='caption' style={{ color: 'black' }}>\n          {' '}\n          {label}{' '}\n        </Typography>\n      </>\n    );\n  };\n\n  return (\n    <div className={classes.root}>\n      <GridSidebarContainer color={color} height={height}>\n        <GridGroupingHeader\n          expandClick={expandClick}\n          collapseClick={collapseClick}\n          closeClick={closeClick}\n        />\n        <div className={classes.groupActionContainer}>\n          <AmbientToggleButtonGroupDefault\n            orientation='vertical'\n            value={view}\n            exclusive\n            onChange={handleChange}\n            className={classes.buttonGroupWrapper}\n          >\n            {\n              // @todo: consider combining value and groupItem.\n              groupingData.map((item) => {\n                return (\n                  <AmbientToggleButton\n                    value={item.value}\n                    aria-label={item.label}\n                    onClick={() => groupItem(item.groupItem)}\n                  >\n                    <GroupItem label={item.label} />\n                  </AmbientToggleButton>\n                );\n              })\n            }\n            <AmbientToggleButton\n              value='noGroups'\n              aria-label='noGroups'\n              onClick={closeClick}\n            >\n              <GroupItem label='No Groups' clear />\n            </AmbientToggleButton>\n          </AmbientToggleButtonGroupDefault>\n        </div>\n      </GridSidebarContainer>\n    </div>\n  );\n};\nGridGroupingSidebar.propTypes = {\n  /**\n   * Function to pass along grid grouping\n   */\n  groupItem: PropTypes.func,\n  /**\n   * Expand Grouped items on grid\n   */\n  expandClick: PropTypes.func,\n  /**\n   * Collapse grouped items on grid\n   */\n  collapseClick: PropTypes.func,\n  /**\n   * Clear grouped items\n   */\n  closeClick: PropTypes.func,\n  /**\n   * Array of data to create grouping list. Example: {groupItem: 'instructors', label: 'Instructors', value: 'instructors'},\n   */\n  groupingData: PropTypes.array,\n  /**\n   * Color of the sidebar\n   */\n  color: PropTypes.string\n};\n"],"mappings":"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"}