@gpa-gemstone/common-pages 0.0.152 → 0.0.153

package/lib/BulkUpload.d.ts

@@ -1,41 +1,33 @@
-import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
 interface IProps<T> {
     /**
     * Attribute used to control what type of files are filtered by default in file explorer
-    * @type {string}
     * */
     FileTypeAttribute: string;
     /**
     * Array of available pipelines to use
-    * @type {IPipeline[]}
     * */
     Pipelines: Gemstone.TSX.Interfaces.IPipeline<T, any>[];
     /**
     * React Component to be used in the Review Step
-    * @type {React.FC<IReviewProps<T>>}
     * */
     ReviewUI: (props: {
         Data: T[];
     }) => JSX.Element;
     /**
     * React Component to be used in the Complete Step
-    * @type {React.FC<IReviewProps<T>>}
     * */
     CompleteUI?: JSX.Element;
     /**
     * Index of the steps array in the current pipline
-    * @type {React.FC<IReviewProps<T>>}
     * */
     CurrentPipelineStep: number;
     /**
     * Setter to pass into the pipeline UI Components
-    * @type {React.FC<IReviewProps<T>>}
     * */
     SetCurrentPipelineStep: (step: number) => void;
     /**
     * Step to represent current stage of component
-    * @type {'Upload' | 'Process' | 'Review' | 'Complete'}
     * */
     Step: Gemstone.TSX.Types.BulkUploadStep;
     /**
@@ -50,14 +42,12 @@ interface IProps<T> {
     SetErrors: (errors: string[]) => void;
     /**
      * Optional Progress Bar component to replace internal Progress Bar.
-     * @type {JSX.Element}
      */
     ProgressBar?: JSX.Element;
     /**
      * Optional flag to call OnComplete handler when the review step is hit.
-     * @type {boolean}
      */
     CompleteOnReview?: boolean;
 }
-export default function BulkUpload<T>(props: IProps<T>): React.JSX.Element;
+export default function BulkUpload<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/ErrorBoundary.d.ts

@@ -10,9 +10,9 @@ interface IProps {
     ClassName?: string;
     ErrorIconSize?: number;
 }
-export default class ErrorBoundary extends React.Component<IProps, IError> {
+export default class ErrorBoundary extends React.Component<React.PropsWithChildren<IProps>, IError> {
     constructor(props: IProps);
     componentDidCatch(error: IError): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

package/lib/EventCharacteristicFilter.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { OpenXDA } from '@gpa-gemstone/application-typings';
 interface IProps {
     setEventFilters: (characteristics?: IEventCharacteristicFilters, types?: number[]) => void;
@@ -36,5 +35,5 @@ interface IEventCharacteristicFilters {
     curveInside: boolean;
     curveOutside: boolean;
 }
-declare const EventCharacteristicFilter: (props: IProps) => React.JSX.Element | null;
+declare const EventCharacteristicFilter: (props: IProps) => JSX.Element | null;
 export default EventCharacteristicFilter;

package/lib/EventTypeFilter.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import 'moment';
 import { OpenXDA } from '@gpa-gemstone/application-typings';
 interface IProps {
@@ -7,5 +6,5 @@ interface IProps {
     EventTypes: OpenXDA.Types.EventType[];
     SelectedTypeID: number[];
 }
-declare const EventTypeFilter: React.FC<IProps>;
+declare const EventTypeFilter: (props: IProps) => JSX.Element;
 export default EventTypeFilter;

package/lib/NavBarFilterButton.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import 'moment';
 import { OpenXDA, SystemCenter } from '@gpa-gemstone/application-typings';
 type S = SystemCenter.Types.DetailedMeter | SystemCenter.Types.DetailedAsset | SystemCenter.Types.DetailedLocation | OpenXDA.Types.AssetGroup;
@@ -11,5 +10,5 @@ interface IProps<S> {
         selected: string;
     };
 }
-declare function NavbarFilterButton(props: IProps<S>): React.JSX.Element;
+declare function NavbarFilterButton(props: IProps<S>): JSX.Element;
 export default NavbarFilterButton;

package/lib/Note.d.ts

@@ -16,5 +16,5 @@ interface IProps {
     DefaultApplication?: OpenXDA.Types.NoteApplication;
     Filter?: (note: OpenXDA.Types.Note) => boolean;
 }
-declare function Note(props: React.PropsWithChildren<IProps>): React.JSX.Element;
+declare function Note(props: React.PropsWithChildren<IProps>): JSX.Element;
 export default Note;

package/lib/RoleAcessErrorPage.d.ts

@@ -4,5 +4,5 @@ interface IProps {
     ClassName?: string;
     Logo?: string;
 }
-declare const RoleAccessErrorPage: React.FunctionComponent<IProps>;
+declare const RoleAccessErrorPage: (props: IProps) => JSX.Element;
 export default RoleAccessErrorPage;

package/lib/SearchBar.d.ts

@@ -21,16 +21,16 @@ interface IOptions {
 /** This Implements a few standardized SearchBars */
 export declare namespace DefaultSearch {
     /** This Implements a standard Meter Search */
-    const Meter: React.FC<IProps<SystemCenter.Types.DetailedMeter>>;
+    const Meter: (props: React.PropsWithChildren<IProps<SystemCenter.Types.DetailedMeter>>) => JSX.Element;
     /** This Implements a standard Substation Search */
-    const Location: React.FC<IProps<SystemCenter.Types.DetailedLocation>>;
+    const Location: (props: React.PropsWithChildren<IProps<SystemCenter.Types.DetailedLocation>>) => JSX.Element;
     /** This Implements a standard Transmission Asset Search */
-    const Asset: React.FC<IProps<SystemCenter.Types.DetailedAsset>>;
+    const Asset: (props: React.PropsWithChildren<IProps<SystemCenter.Types.DetailedAsset>>) => JSX.Element;
     /** This Implements a standard AssetGroup Search */
-    const AssetGroup: React.FC<IProps<OpenXDA.Types.AssetGroup>>;
+    const AssetGroup: (props: React.PropsWithChildren<IProps<OpenXDA.Types.AssetGroup>>) => JSX.Element;
     /** This Implements a standard User Search */
-    const User: React.FC<IProps<Application.Types.iUserAccount>>;
+    const User: (props: React.PropsWithChildren<IProps<Application.Types.iUserAccount>>) => JSX.Element;
     /** This Implements a standard Customer Search */
-    const Customer: React.FC<IProps<OpenXDA.Types.Customer>>;
+    const Customer: (props: React.PropsWithChildren<IProps<OpenXDA.Types.Customer>>) => JSX.Element;
 }
 export {};

package/lib/SelectionPopup.d.ts

@@ -25,16 +25,16 @@ interface IOptions {
 /** This Implements a few standardized Selection Popups */
 export declare namespace DefaultSelects {
     /** This Implements a standard Meter Selection Modal */
-    function Meter(props: IProps<SystemCenter.Types.DetailedMeter>): React.JSX.Element;
+    function Meter(props: IProps<SystemCenter.Types.DetailedMeter>): JSX.Element;
     /** This Implements a standard Substation Selection Modal */
-    function Location(props: IProps<SystemCenter.Types.DetailedLocation>): React.JSX.Element;
+    function Location(props: IProps<SystemCenter.Types.DetailedLocation>): JSX.Element;
     /** This Implements a standard Transmission Asset Selection Modal */
-    function Asset(props: IProps<SystemCenter.Types.DetailedAsset>): React.JSX.Element;
+    function Asset(props: IProps<SystemCenter.Types.DetailedAsset>): JSX.Element;
     /** This Implements a standard Asset Group Selection Modal */
-    function AssetGroup(props: IProps<OpenXDA.Types.AssetGroup>): React.JSX.Element;
+    function AssetGroup(props: IProps<OpenXDA.Types.AssetGroup>): JSX.Element;
     /** This Implements a standard User Selection Modal */
-    function User(props: IProps<Application.Types.iUserAccount>): React.JSX.Element;
+    function User(props: IProps<Application.Types.iUserAccount>): JSX.Element;
     /** This Implements a standard Customer Selection Modal */
-    function Customer(props: IProps<OpenXDA.Types.Customer>): React.JSX.Element;
+    function Customer(props: IProps<OpenXDA.Types.Customer>): JSX.Element;
 }
 export {};

package/lib/StandardSelectPopup.d.ts

@@ -14,5 +14,5 @@ interface IProps<T extends U> {
     MinSelection?: number;
     children?: React.ReactNode;
 }
-export default function SelectPopup<T extends U>(props: IProps<T>): React.JSX.Element;
+export default function SelectPopup<T extends U>(props: IProps<T>): JSX.Element;
 export {};

package/lib/TimeFilter/QuickSelects.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { DateTimeSetting, ITimeFilter } from './TimeFilter';
 import { TimeUnit } from './TimeWindowUtils';
 export type DateUnit = ('datetime-local' | 'date' | 'time');
@@ -18,7 +17,7 @@ interface IProps {
     AddRowContainer?: boolean;
     SplitSelects?: boolean;
 }
-declare const QuickSelects: (props: IProps) => React.JSX.Element;
+declare const QuickSelects: (props: IProps) => JSX.Element;
 export default QuickSelects;
 export declare function getFormat(format?: DateUnit): "MM/DD/YYYY HH:mm:ss.SSS" | "YYYY-MM-DD" | "HH:mm:ss.SSS";
 export declare const AvailableQuickSelects: IQuickSelect[];

package/lib/TimeFilter/StartEndFilter/DateFilter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { IFilterProps } from './StartEndFilter';
-declare const DateFilter: (props: IFilterProps) => React.JSX.Element;
+declare const DateFilter: (props: IFilterProps) => JSX.Element;
 export default DateFilter;

package/lib/TimeFilter/StartEndFilter/DateTimeLocalFilter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { IFilterProps } from './StartEndFilter';
-declare const DateTimeLocalFilter: (props: IFilterProps) => React.JSX.Element;
+declare const DateTimeLocalFilter: (props: IFilterProps) => JSX.Element;
 export default DateTimeLocalFilter;

package/lib/TimeFilter/StartEndFilter/StartEndFilter.d.ts

@@ -17,5 +17,5 @@ export interface IFilterProps {
     ShowQuickSelects: boolean;
     ContainerWidth: number;
 }
-declare const StartEndFilter: (props: IFilterProps) => React.JSX.Element;
+declare const StartEndFilter: (props: IFilterProps) => JSX.Element;
 export default StartEndFilter;

package/lib/TimeFilter/StartEndFilter/TimeFilter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { IFilterProps } from './StartEndFilter';
-declare const TimeFilter: (props: IFilterProps) => React.JSX.Element;
+declare const TimeFilter: (props: IFilterProps) => JSX.Element;
 export default TimeFilter;

package/lib/TimeFilter/TimeFilter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { IStartEnd, IStartDuration, IEndDuration, TimeUnit } from './TimeWindowUtils';
 import { DateUnit } from './QuickSelects';
 import { Gemstone } from '@gpa-gemstone/application-typings';
@@ -48,7 +47,15 @@ interface IProps {
      * Flag to toggle usage of helper message
      */
     showHelpMessage?: boolean;
+    /**
+     * Optional Flag to enable collapsing of TimeFilter
+     */
+    enableCollapse?: boolean;
+    /**
+     * Optional setter to push collapse state to parent
+    */
+    setCollapsed?: (collapsed: boolean) => void;
 }
-declare const TimeFilter: (props: IProps) => React.JSX.Element;
+declare const TimeFilter: (props: IProps) => JSX.Element;
 export declare function getTimeWindowFromFilter(flt: ITimeFilter, format?: string): ITimeWindow;
 export default TimeFilter;

package/lib/TimeFilter/TimeFilter.js

@@ -58,38 +58,53 @@ var lodash_1 = __importDefault(require("lodash"));
 var StartEndFilter_1 = __importDefault(require("./StartEndFilter/StartEndFilter"));
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var WindowFilter_1 = __importDefault(require("./WindowFilter/WindowFilter"));
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 var TimeFilter = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     var containerRef = React.useRef(null);
     var width = (0, helper_functions_1.useGetContainerPosition)(containerRef).width;
     var format = (0, QuickSelects_1.getFormat)(props.format);
-    var _e = React.useState(-1), activeQuickSelect = _e[0], setActiveQuickSelect = _e[1];
-    var _f = React.useState(getTimeWindowFromFilter(props.filter, format)), filter = _f[0], setFilter = _f[1];
-    // Checks typing of ITimeFilter and then compares to ITimeWindow
-    function isEqual(timeWindow, timeFilter) {
-        var flt = getTimeWindowFromFilter(timeFilter, format);
-        return lodash_1.default.isEqual(timeWindow, flt);
-    }
+    var _f = React.useState(-1), activeQuickSelect = _f[0], setActiveQuickSelect = _f[1];
+    var _g = React.useState(getTimeWindowFromFilter(props.filter, format)), filter = _g[0], setFilter = _g[1];
+    var _h = React.useState(false), collapsed = _h[0], setCollapsed = _h[1];
+    //Effect to set parent filter when internal filter changes
     React.useEffect(function () {
         if (!isEqual(filter, props.filter)) {
             props.setFilter(filter.start, filter.end, filter.unit, filter.duration);
         }
     }, [filter]);
+    //Effect to sync filter if external filter changes
     React.useEffect(function () {
         if (!isEqual(filter, props.filter)) {
             var flt = getTimeWindowFromFilter(props.filter, format);
             setFilter(flt);
         }
     }, [props.filter]);
+    //Effect to push collapse state to parent
+    React.useEffect(function () {
+        if (props.setCollapsed == null)
+            return;
+        props.setCollapsed(collapsed);
+    }, [collapsed]);
+    // Checks typing of ITimeFilter and then compares to ITimeWindow
+    var isEqual = function (timeWindow, timeFilter) {
+        var flt = getTimeWindowFromFilter(timeFilter, format);
+        return lodash_1.default.isEqual(timeWindow, flt);
+    };
     var helpMessaage = ((_a = props.showHelpMessage) !== null && _a !== void 0 ? _a : true) ? "All times shown are in system time (".concat(props.timeZone, ").") : undefined;
     return (React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%', overflow: 'hidden' }, ref: containerRef },
-        React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Date/Time Filter:"),
-        props.dateTimeSetting === 'startEnd' ?
-            React.createElement(StartEndFilter_1.default, { TimeWindowFilter: filter, SetTimeWindowFilter: setFilter, Timezone: props.timeZone, ActiveQP: activeQuickSelect, SetActiveQP: setActiveQuickSelect, SetFilter: props.setFilter, Accuracy: props.accuracy, Format: format, DateUnit: (_b = props.format) !== null && _b !== void 0 ? _b : 'datetime-local', ShowQuickSelects: props.showQuickSelect, ContainerWidth: width, HelpMessage: helpMessaage })
-            : props.dateTimeSetting === 'startWindow' ?
-                React.createElement(WindowFilter_1.default, { TimeWindowFilter: filter, SetTimeWindowFilter: setFilter, Timezone: props.timeZone, ActiveQP: activeQuickSelect, SetActiveQP: setActiveQuickSelect, SetFilter: props.setFilter, Accuracy: props.accuracy, Format: format, DateUnit: (_c = props.format) !== null && _c !== void 0 ? _c : 'datetime-local', ShowQuickSelects: props.showQuickSelect, ContainerWidth: width, HelpMessage: helpMessaage, Window: 'start' })
-                :
-                    React.createElement(WindowFilter_1.default, { TimeWindowFilter: filter, SetTimeWindowFilter: setFilter, Timezone: props.timeZone, ActiveQP: activeQuickSelect, SetActiveQP: setActiveQuickSelect, SetFilter: props.setFilter, Accuracy: props.accuracy, Format: format, DateUnit: (_d = props.format) !== null && _d !== void 0 ? _d : 'datetime-local', ShowQuickSelects: props.showQuickSelect, ContainerWidth: width, HelpMessage: helpMessaage, Window: 'end' })));
+        React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } },
+            React.createElement("div", { className: "d-flex align-items-center" },
+                React.createElement("span", { className: "mr-2" }, "Date/Time Filter:"),
+                ((_b = props.enableCollapse) !== null && _b !== void 0 ? _b : false) ?
+                    React.createElement("button", { type: "button", className: "btn p-0 ml-auto", onClick: function () { return setCollapsed(function (x) { return !x; }); } }, collapsed ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null)) : null)),
+        collapsed ? null :
+            props.dateTimeSetting === 'startEnd' ?
+                React.createElement(StartEndFilter_1.default, { TimeWindowFilter: filter, SetTimeWindowFilter: setFilter, Timezone: props.timeZone, ActiveQP: activeQuickSelect, SetActiveQP: setActiveQuickSelect, SetFilter: props.setFilter, Accuracy: props.accuracy, Format: format, DateUnit: (_c = props.format) !== null && _c !== void 0 ? _c : 'datetime-local', ShowQuickSelects: props.showQuickSelect, ContainerWidth: width, HelpMessage: helpMessaage })
+                : props.dateTimeSetting === 'startWindow' ?
+                    React.createElement(WindowFilter_1.default, { TimeWindowFilter: filter, SetTimeWindowFilter: setFilter, Timezone: props.timeZone, ActiveQP: activeQuickSelect, SetActiveQP: setActiveQuickSelect, SetFilter: props.setFilter, Accuracy: props.accuracy, Format: format, DateUnit: (_d = props.format) !== null && _d !== void 0 ? _d : 'datetime-local', ShowQuickSelects: props.showQuickSelect, ContainerWidth: width, HelpMessage: helpMessaage, Window: 'start' })
+                    :
+                        React.createElement(WindowFilter_1.default, { TimeWindowFilter: filter, SetTimeWindowFilter: setFilter, Timezone: props.timeZone, ActiveQP: activeQuickSelect, SetActiveQP: setActiveQuickSelect, SetFilter: props.setFilter, Accuracy: props.accuracy, Format: format, DateUnit: (_e = props.format) !== null && _e !== void 0 ? _e : 'datetime-local', ShowQuickSelects: props.showQuickSelect, ContainerWidth: width, HelpMessage: helpMessaage, Window: 'end' })));
 };
 // Converts ITimeFilter to an ITimeWindow filter
 function getTimeWindowFromFilter(flt, format) {

package/lib/TimeFilter/WindowFilter/WindowFilter.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import { IFilterProps } from '../StartEndFilter/StartEndFilter';
 import { Window } from './WindowForm';
 export interface IProps extends IFilterProps {
     Window: Window;
 }
-declare const WindowFilter: (props: IProps) => React.JSX.Element;
+declare const WindowFilter: (props: IProps) => JSX.Element;
 export default WindowFilter;

package/lib/TimeFilter/WindowFilter/WindowForm.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ITimeWindow } from '../TimeFilter';
 export type Window = "start" | "end";
 export interface IProps {
@@ -9,5 +8,5 @@ export interface IProps {
     ShowQuickSelect: boolean;
     Window: Window;
 }
-declare const WindowForm: (props: IProps) => React.JSX.Element;
+declare const WindowForm: (props: IProps) => JSX.Element;
 export default WindowForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/common-pages",
-  "version": "0.0.152",
+  "version": "0.0.153",
   "description": "Common UI pages for GPA products",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -35,6 +35,8 @@
     "@types/crypto-js": "^4.2.0",
     "@types/jest": "^27.0.0",
     "@types/jquery": "3.5.6",
+    "@types/lodash": "^4.17.20",
+    "@types/react": "18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
     "eslint": "^8.43.0",
@@ -44,19 +46,22 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.89",
-    "@gpa-gemstone/gpa-symbols": "0.0.56",
-    "@gpa-gemstone/helper-functions": "0.0.47",
-    "@gpa-gemstone/react-forms": "1.1.101",
-    "@gpa-gemstone/react-interactive": "1.0.163",
-    "@gpa-gemstone/react-table": "1.2.86",
+    "@gpa-gemstone/application-typings": "0.0.90",
+    "@gpa-gemstone/gpa-symbols": "0.0.57",
+    "@gpa-gemstone/helper-functions": "0.0.48",
+    "@gpa-gemstone/react-forms": "1.1.102",
+    "@gpa-gemstone/react-interactive": "1.0.164",
+    "@gpa-gemstone/react-table": "1.2.87",
     "@reduxjs/toolkit": "1.8.3",
     "crypto-js": "^4.2.0",
     "moment": "^2.29.4",
     "moment-timezone": "0.5.43",
-    "react": "^18.2.0",
     "react-redux": "8.0.2",
     "styled-components": "5.3.3"
   },
+  "peerDependencies":   {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
   "publishConfig": {"access": "public"}
 }