@gpa-gemstone/common-pages 0.0.146 → 0.0.148

package/lib/ErrorBoundary.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { CSSProperties } from 'styled-components';
 interface IError {
     name: string;
     message: string;
 }
 interface IProps {
-    HeaderErrorMessage: string;
-    BodyErrorMessage: string;
-    Height: number | string;
-    Width: number | string;
+    ErrorMessage: string;
+    Style?: CSSProperties;
+    ClassName?: string;
     ErrorIconSize?: number;
 }
 export default class ErrorBoundary extends React.Component<IProps, IError> {

package/lib/ErrorBoundary.js

@@ -79,10 +79,8 @@ var ErrorBoundary = /** @class */ (function (_super) {
     ErrorBoundary.prototype.render = function () {
         var _a;
         if (this.state.name.length > 0) {
-            return (React.createElement("div", { className: "card", style: { width: this.props.Width, height: this.props.Height } },
-                React.createElement("div", { className: "card-header" }, this.props.HeaderErrorMessage),
-                React.createElement("div", { className: "card-body", style: { overflowY: 'auto' } },
-                    React.createElement(react_interactive_1.ServerErrorIcon, { Show: true, Label: this.props.BodyErrorMessage, Size: (_a = this.props.ErrorIconSize) !== null && _a !== void 0 ? _a : 150 }))));
+            return (React.createElement("div", { className: this.props.ClassName, style: this.props.Style },
+                React.createElement(react_interactive_1.ServerErrorIcon, { Show: true, Label: this.props.ErrorMessage, Size: (_a = this.props.ErrorIconSize) !== null && _a !== void 0 ? _a : 150 })));
         }
         else
             return React.createElement(React.Fragment, null, this.props.children);

package/lib/Pipelines/CSVPipeline/CSVPipeline.js

@@ -414,7 +414,7 @@ function CsvPipelineEditStep(props) {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "container-fluid d-flex flex-column p-0 h-100" },
-            React.createElement(ErrorBoundary_1.default, { Height: '100%', Width: '100%', BodyErrorMessage: 'Error loading page.', HeaderErrorMessage: 'Error' },
+            React.createElement(ErrorBoundary_1.default, { ClassName: "row h-100", ErrorMessage: 'Error loading page.' },
                 React.createElement("div", { className: 'row h-100' },
                     React.createElement("div", { className: 'col-12 d-flex flex-column h-100' }, pagedData.length !== 0 ?
                         React.createElement(React.Fragment, null,

package/lib/TimeFilter/QuickSelects.d.ts

@@ -1,10 +1,24 @@
-import { ITimeFilter } from './TimeFilter';
+import * as React from 'react';
+import { DateTimeSetting, ITimeFilter } from './TimeFilter';
+import { TimeUnit } from './TimeWindowUtils';
 export type DateUnit = ('datetime-local' | 'date' | 'time');
 interface IQuickSelect {
     label: string;
     hideQuickPick: (format?: DateUnit) => boolean;
     createFilter: (timeZone: string, format?: DateUnit) => ITimeFilter;
 }
+interface IProps {
+    DateTimeSetting: DateTimeSetting;
+    Format?: "YYYY-MM-DD" | "HH:mm:ss.SSS" | "MM/DD/YYYY HH:mm:ss.SSS";
+    DateUnit?: DateUnit;
+    Timezone: string;
+    ActiveQP: number;
+    SetActiveQP: (qp: number) => void;
+    SetFilter: (start: string, end: string, unit: TimeUnit, duration: number) => void;
+    AddRowContainer?: boolean;
+    SplitSelects?: boolean;
+}
+declare const QuickSelects: (props: IProps) => React.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[];
-export {};

package/lib/TimeFilter/QuickSelects.js

@@ -22,14 +22,74 @@
 //  06/20/2024 - Ali Karrar
 //       Moved QuickSelects from TimeFilter to new file
 //******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvailableQuickSelects = void 0;
 exports.getFormat = getFormat;
+var React = __importStar(require("react"));
+var TimeFilter_1 = require("./TimeFilter");
 var moment_1 = __importDefault(require("moment"));
 var moment_timezone_1 = __importDefault(require("moment-timezone"));
+var QuickSelects = function (props) {
+    var _a;
+    var CurrentQuickSelects = React.useMemo(function () { return exports.AvailableQuickSelects.filter(function (qs) { return !qs.hideQuickPick(props.DateUnit); }); }, [props.DateUnit]);
+    return (React.createElement(Container, { AddRow: (_a = props.AddRowContainer) !== null && _a !== void 0 ? _a : true }, CurrentQuickSelects.map(function (qs, i) {
+        var _a;
+        if (i % 3 !== 0)
+            return null;
+        return (React.createElement("div", { key: i, className: getColSize(props.DateTimeSetting, (_a = props.SplitSelects) !== null && _a !== void 0 ? _a : false), style: {
+                paddingLeft: (props.DateTimeSetting === 'startEnd' ? 0 : (i % 9 == 0 ? 15 : 0)),
+                paddingRight: (props.DateTimeSetting === 'startEnd' ? 2 : ((i % 18 == 6 || i % 18 == 15) ? 15 : 2)),
+                marginTop: 10
+            } },
+            React.createElement("ul", { className: "list-group", key: i },
+                React.createElement("li", { key: i, style: { cursor: 'pointer' }, onClick: function () {
+                        var flt = (0, TimeFilter_1.getTimeWindowFromFilter)(CurrentQuickSelects[i].createFilter(props.Timezone, props.DateUnit), props.Format);
+                        props.SetFilter(flt.start, flt.end, flt.unit, flt.duration);
+                        props.SetActiveQP(i);
+                    }, className: "item badge badge-" + (i == props.ActiveQP ? "primary" : "secondary") }, CurrentQuickSelects[i].label),
+                i + 1 < CurrentQuickSelects.length ?
+                    React.createElement("li", { key: i + 1, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 1 == props.ActiveQP ? "primary" : "secondary"), onClick: function () {
+                            var flt = (0, TimeFilter_1.getTimeWindowFromFilter)(CurrentQuickSelects[i + 1].createFilter(props.Timezone, props.DateUnit), props.Format);
+                            props.SetFilter(flt.start, flt.end, flt.unit, flt.duration);
+                            props.SetActiveQP(i + 1);
+                        } }, CurrentQuickSelects[i + 1].label)
+                    : null,
+                i + 2 < CurrentQuickSelects.length ?
+                    React.createElement("li", { key: i + 2, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 2 == props.ActiveQP ? "primary" : "secondary"), onClick: function () {
+                            var flt = (0, TimeFilter_1.getTimeWindowFromFilter)(CurrentQuickSelects[i + 2].createFilter(props.Timezone, props.DateUnit), props.Format);
+                            props.SetFilter(flt.start, flt.end, flt.unit, flt.duration);
+                            props.SetActiveQP(i + 2);
+                        } }, CurrentQuickSelects[i + 2].label)
+                    : null)));
+    })));
+};
+exports.default = QuickSelects;
 function getFormat(format) {
     if (format == 'date')
         return 'YYYY-MM-DD';
@@ -38,6 +98,18 @@ function getFormat(format) {
     else
         return 'MM/DD/YYYY HH:mm:ss.SSS';
 }
+var getColSize = function (dateTimeSetting, splitSelects) {
+    if (dateTimeSetting === 'startEnd') {
+        if (splitSelects)
+            return 'col-4';
+        else
+            return 'col-2';
+    }
+    if (splitSelects)
+        return 'col-8';
+    else
+        return 'col-4';
+};
 //update all quick selects to use new timefilters
 exports.AvailableQuickSelects = [
     {
@@ -300,3 +372,9 @@ exports.AvailableQuickSelects = [
         }
     }
 ];
+var Container = function (props) {
+    if (props.AddRow)
+        return React.createElement("div", { className: 'row m-0 align-items-center justify-content-center' }, props.children);
+    else
+        return React.createElement(React.Fragment, null, props.children);
+};

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

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

package/lib/TimeFilter/StartEndFilter/DateFilter.js

@@ -0,0 +1,97 @@
+"use strict";
+//******************************************************************************************************
+//  DateFilter.tsx - Gbtc
+//
+//  Copyright © 2025, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2025 - Preston Crawford
+//       Generated original version of source code.
+//******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var TimeFilter_1 = require("../TimeFilter");
+var QuickSelects_1 = __importDefault(require("../QuickSelects"));
+var DateFilter = function (props) {
+    var FirstFallbackBreakpoint = 1050;
+    var SecondFallbackBreakpoint = 541;
+    var FirstFallbackBreakpointNoQS = 375;
+    var handleSetTimeWindowFilter = React.useCallback(function (record) {
+        var flt = (0, TimeFilter_1.getTimeWindowFromFilter)({ start: record.start, end: record.end }, props.Format);
+        props.SetTimeWindowFilter(flt);
+        props.SetActiveQP(-1);
+    }, [props.Format]);
+    var startEndCol = React.useMemo(function () {
+        if (props.ShowQuickSelects && props.ContainerWidth > FirstFallbackBreakpoint)
+            return 'col-2';
+        if (!props.ShowQuickSelects && props.ContainerWidth > FirstFallbackBreakpointNoQS)
+            return 'col-6';
+        else
+            return 'col-12';
+    }, [props.ShowQuickSelects, props.ContainerWidth]);
+    var quickSelectClass = React.useMemo(function () {
+        if (props.ContainerWidth > FirstFallbackBreakpoint)
+            return 'col-8';
+        else
+            return 'col-12';
+    }, [props.ContainerWidth]);
+    if (props.ContainerWidth > FirstFallbackBreakpoint)
+        return (React.createElement("div", { className: 'row m-0' },
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "start", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'Start', Type: props.DateUnit, Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "end", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'End', Type: props.DateUnit, Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            props.ShowQuickSelects ?
+                React.createElement("div", { className: quickSelectClass },
+                    React.createElement(QuickSelects_1.default, { DateTimeSetting: 'startEnd', Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit })) : null));
+    else
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'row m-0' },
+                React.createElement("div", { className: startEndCol },
+                    React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "start", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'Start', Type: props.DateUnit, Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+                React.createElement("div", { className: startEndCol },
+                    React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "end", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'End', Type: props.DateUnit, Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy }))),
+            props.ShowQuickSelects ?
+                React.createElement("div", { className: quickSelectClass },
+                    React.createElement(QuickSelects_1.default, { DateTimeSetting: 'startEnd', Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit, SplitSelects: props.ContainerWidth < SecondFallbackBreakpoint })) : null));
+};
+exports.default = DateFilter;

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

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

package/lib/TimeFilter/StartEndFilter/DateTimeLocalFilter.js

@@ -0,0 +1,121 @@
+"use strict";
+//******************************************************************************************************
+//  DateTimeLocalFilter.tsx - Gbtc
+//
+//  Copyright © 2025, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2025 - Preston Crawford
+//       Generated original version of source code.
+//******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var TimeFilter_1 = require("../TimeFilter");
+var QuickSelects_1 = __importDefault(require("../QuickSelects"));
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+var DateTimeLocalFilter = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var FirstFallbackBreakpointQS = 1768;
+    var SecondFallbackBreakpointQS = 612, FirstFallbacKBreakpointNoQS = 612;
+    var _g = React.useState(false), showQuickPickModal = _g[0], setShowQuickPickModal = _g[1];
+    var handleSetTimeWindowFilter = React.useCallback(function (record) {
+        var flt = (0, TimeFilter_1.getTimeWindowFromFilter)({ start: record.start, end: record.end }, props.Format);
+        props.SetTimeWindowFilter(flt);
+        props.SetActiveQP(-1);
+    }, [props.Format]);
+    var startEndCol = React.useMemo(function () {
+        if (props.ShowQuickSelects) {
+            if (props.ContainerWidth > FirstFallbackBreakpointQS)
+                return 'col-2';
+            else if (props.ContainerWidth > SecondFallbackBreakpointQS)
+                return 'col-6';
+            else
+                return 'col-12';
+        }
+        if (props.ContainerWidth > FirstFallbacKBreakpointNoQS)
+            return 'col-6';
+        else
+            return 'col-12';
+    }, [props.ShowQuickSelects, props.DateUnit, props.ContainerWidth]);
+    var quickSelectCol = React.useMemo(function () {
+        if (props.ContainerWidth > FirstFallbackBreakpointQS)
+            return 'col-8';
+        return 'col-12';
+    }, [props.DateUnit, props.ContainerWidth]);
+    if (props.ContainerWidth > FirstFallbackBreakpointQS) {
+        return (React.createElement("div", { className: 'row m-0' },
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "start", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'Start', Type: (_a = props.DateUnit) !== null && _a !== void 0 ? _a : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "end", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'End', Type: (_b = props.DateUnit) !== null && _b !== void 0 ? _b : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            props.ShowQuickSelects ?
+                React.createElement("div", { className: quickSelectCol },
+                    React.createElement(QuickSelects_1.default, { DateTimeSetting: 'startEnd', Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit })) : null));
+    }
+    else if (props.ContainerWidth > SecondFallbackBreakpointQS) {
+        return (React.createElement("div", { className: 'row m-0' },
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "start", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'Start', Type: (_c = props.DateUnit) !== null && _c !== void 0 ? _c : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "end", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'End', Type: (_d = props.DateUnit) !== null && _d !== void 0 ? _d : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            React.createElement("div", { className: 'row m-0 w-100' }, props.ShowQuickSelects ?
+                React.createElement("div", { className: quickSelectCol },
+                    React.createElement(QuickSelects_1.default, { DateTimeSetting: 'startEnd', Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit }))
+                : null)));
+    }
+    else {
+        return (React.createElement("div", { className: 'row m-0' },
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "start", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'Start', Type: (_e = props.DateUnit) !== null && _e !== void 0 ? _e : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "end", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'End', Type: (_f = props.DateUnit) !== null && _f !== void 0 ? _f : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            props.ShowQuickSelects ?
+                React.createElement("div", { className: 'row m-0 w-100' },
+                    React.createElement("div", { className: 'col-12 d-flex align-items-center justify-content-center' },
+                        React.createElement("button", { className: 'btn btn-primary  w-100', onClick: function () { return setShowQuickPickModal(true); } }, "Quick Selects")),
+                    React.createElement(react_interactive_1.Modal, { Show: showQuickPickModal, Title: 'Quick Selects', CallBack: function () { return setShowQuickPickModal(false); }, ShowX: true, ShowCancel: false, ShowConfirm: false, Size: 'xlg' },
+                        React.createElement("div", { className: quickSelectCol },
+                            React.createElement(QuickSelects_1.default, { DateTimeSetting: 'startEnd', Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit }))))
+                : null));
+    }
+};
+exports.default = DateTimeLocalFilter;

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ITimeWindow } from "../TimeFilter";
+import { DateUnit } from '../QuickSelects';
+import { Gemstone } from '@gpa-gemstone/application-typings';
+import { TimeUnit } from '../TimeWindowUtils';
+export interface IFilterProps {
+    TimeWindowFilter: ITimeWindow;
+    SetTimeWindowFilter: React.Dispatch<React.SetStateAction<ITimeWindow>>;
+    HelpMessage?: string;
+    Format: "YYYY-MM-DD" | "HH:mm:ss.SSS" | "MM/DD/YYYY HH:mm:ss.SSS";
+    DateUnit: DateUnit;
+    Timezone: string;
+    Accuracy?: Gemstone.TSX.Types.Accuracy;
+    ActiveQP: number;
+    SetActiveQP: React.Dispatch<React.SetStateAction<number>>;
+    SetFilter: (start: string, end: string, unit: TimeUnit, duration: number) => void;
+    ShowQuickSelects: boolean;
+    ContainerWidth: number;
+}
+declare const StartEndFilter: (props: IFilterProps) => React.JSX.Element;
+export default StartEndFilter;

package/lib/TimeFilter/StartEndFilter/StartEndFilter.js

@@ -0,0 +1,74 @@
+"use strict";
+//******************************************************************************************************
+//  StartEndFilter.tsx - Gbtc
+//
+//  Copyright © 2025, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2025 - Preston Crawford
+//       Generated original version of source code.
+//******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var DateTimeLocalFilter_1 = __importDefault(require("./DateTimeLocalFilter"));
+var TimeFilter_1 = __importDefault(require("./TimeFilter"));
+var DateFilter_1 = __importDefault(require("./DateFilter"));
+var StartEndFilter = function (props) {
+    if (props.DateUnit === 'datetime-local')
+        return React.createElement(DateTimeLocalFilter_1.default, __assign({}, props));
+    if (props.DateUnit === 'time')
+        return React.createElement(TimeFilter_1.default, __assign({}, props));
+    if (props.DateUnit === 'date')
+        return React.createElement(DateFilter_1.default, __assign({}, props));
+    return React.createElement(React.Fragment, null);
+};
+exports.default = StartEndFilter;

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

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

package/lib/TimeFilter/StartEndFilter/TimeFilter.js

@@ -0,0 +1,93 @@
+"use strict";
+//******************************************************************************************************
+//  TimeFilter.tsx - Gbtc
+//
+//  Copyright © 2025, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2025 - Preston Crawford
+//       Generated original version of source code.
+//******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var TimeFilter_1 = require("../TimeFilter");
+var QuickSelects_1 = __importDefault(require("../QuickSelects"));
+var TimeFilter = function (props) {
+    var FirstFallback_BreakpointQS = 634;
+    var FirstFallback_BreakpointNoQS = 454;
+    var handleSetTimeWindowFilter = React.useCallback(function (record) {
+        var flt = (0, TimeFilter_1.getTimeWindowFromFilter)({ start: record.start, end: record.end }, props.Format);
+        props.SetTimeWindowFilter(flt);
+        props.SetActiveQP(-1);
+    }, [props.Format]);
+    var startEndCol = React.useMemo(function () {
+        if (props.ShowQuickSelects) {
+            if (props.ContainerWidth > FirstFallback_BreakpointQS)
+                return 'col-5';
+            return 'col-6';
+        }
+        if (props.ContainerWidth > FirstFallback_BreakpointNoQS)
+            return 'col-6';
+        else
+            return 'col-12';
+    }, [props.ShowQuickSelects, props.DateUnit, props.ContainerWidth]);
+    if (props.ContainerWidth > FirstFallback_BreakpointQS)
+        return (React.createElement("div", { className: 'row m-0' },
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "start", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'Start', Type: props.DateUnit, Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            React.createElement("div", { className: startEndCol },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "end", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'End', Type: props.DateUnit, Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+            props.ShowQuickSelects ?
+                React.createElement(QuickSelects_1.default, { DateTimeSetting: 'startEnd', Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit, AddRowContainer: false })
+                : null));
+    else
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'row m-0' },
+                React.createElement("div", { className: startEndCol },
+                    React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "start", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'Start', Type: props.DateUnit, Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+                React.createElement("div", { className: startEndCol },
+                    React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: "end", Help: props.HelpMessage, Setter: handleSetTimeWindowFilter, Label: 'End', Type: props.DateUnit, Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy }))),
+            props.ShowQuickSelects ?
+                React.createElement(QuickSelects_1.default, { DateTimeSetting: 'startEnd', Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit })
+                : null));
+};
+exports.default = TimeFilter;

package/lib/TimeFilter/TimeFilter.d.ts

@@ -2,27 +2,51 @@ import * as React from 'react';
 import { IStartEnd, IStartDuration, IEndDuration, TimeUnit } from './TimeWindowUtils';
 import { DateUnit } from './QuickSelects';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-interface ITimeWindow {
+export interface ITimeWindow {
     start: string;
     end: string;
     unit: TimeUnit;
     duration: number;
 }
 export type ITimeFilter = IStartEnd | IStartDuration | IEndDuration;
-/**
-*    filter: an interface of IStartEnd | IStartDuration | IEndDuration | ICenterDuration
-*    showQuickSelect: displays Quick Select component
-*    isHorizontal: displays Quick Selects in horizontal view
-*/
+export type DateTimeSetting = 'startWindow' | 'endWindow' | 'startEnd';
 interface IProps {
+    /**
+     * Filter to be used in form
+     */
     filter: ITimeFilter;
+    /**
+     * Setter function to update filter
+     * @param start - Start Time
+     * @param end - End Time
+     * @param unit - Time Unit
+     * @param duration - Duration
+     * @returns
+     */
     setFilter: (start: string, end: string, unit: TimeUnit, duration: number) => void;
+    /**
+     * Flag to toggle QuickSelects UI
+     */
     showQuickSelect: boolean;
-    dateTimeSetting: 'startWindow' | 'endWindow' | 'startEnd';
+    /**
+     * Type of TimeFilter to render
+     */
+    dateTimeSetting: DateTimeSetting;
+    /**
+     * Time zone to use
+     */
     timeZone: string;
-    isHorizontal: boolean;
+    /**
+     * Format for date/time input
+     */
     format?: DateUnit;
+    /**
+     * Accuracy of the time input
+     */
     accuracy?: Gemstone.TSX.Types.Accuracy;
+    /**
+     * Flag to toggle usage of helper message
+     */
     showHelpMessage?: boolean;
 }
 declare const TimeFilter: (props: IProps) => React.JSX.Element;

package/lib/TimeFilter/TimeFilter.js

@@ -51,16 +51,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimeWindowFromFilter = getTimeWindowFromFilter;
 var React = __importStar(require("react"));
-var react_forms_1 = require("@gpa-gemstone/react-forms");
 var TimeWindowUtils_1 = require("./TimeWindowUtils");
 var moment_1 = __importDefault(require("moment"));
 var QuickSelects_1 = require("./QuickSelects");
 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 TimeFilter = function (props) {
     var _a, _b, _c, _d;
+    var containerRef = React.useRef(null);
+    var width = (0, helper_functions_1.useGetContainerPosition)(containerRef).width;
     var format = (0, QuickSelects_1.getFormat)(props.format);
-    var QuickSelects = React.useMemo(function () { return QuickSelects_1.AvailableQuickSelects.filter(function (qs) { return !qs.hideQuickPick(props.format); }); }, [props.format]);
-    var _e = React.useState(-1), activeQP = _e[0], setActiveQP = _e[1];
+    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) {
@@ -78,118 +81,16 @@ var TimeFilter = function (props) {
             setFilter(flt);
         }
     }, [props.filter]);
-    return (React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%', overflow: 'hidden' } },
+    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:"),
-        React.createElement(Row, { addRow: props.isHorizontal, class: 'm-0' },
-            props.dateTimeSetting === 'startWindow' || props.dateTimeSetting === 'startEnd' ?
-                React.createElement(Row, { addRow: !props.isHorizontal, class: 'm-0' },
-                    React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? props.dateTimeSetting === 'startEnd' ? 'col-2' : 'col-4' : 'col-6') : 'col-12 p-0' },
-                        React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "start", Help: ((_a = props.showHelpMessage) !== null && _a !== void 0 ? _a : true) ? "All times shown are in system time (".concat(props.timeZone, ").") : undefined, Setter: function (r) {
-                                var flt = props.dateTimeSetting === 'startWindow' ?
-                                    getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, format) :
-                                    getTimeWindowFromFilter({ start: r.start, end: r.end }, format);
-                                setFilter(flt);
-                                setActiveQP(-1);
-                            }, Label: 'Start', Type: (_b = props.format) !== null && _b !== void 0 ? _b : 'datetime-local', Valid: function () { return true; }, Format: format, Accuracy: props.accuracy }),
-                        props.showQuickSelect && props.dateTimeSetting === 'startWindow' ?
-                            React.createElement(StartWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
-                            : null))
-                : null,
-            props.dateTimeSetting === 'endWindow' || props.dateTimeSetting === 'startEnd' ?
-                React.createElement(Row, { addRow: !props.isHorizontal, class: 'm-0' },
-                    React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? props.dateTimeSetting === 'startEnd' ? 'col-2' : 'col-4' : 'col-6') : 'col-12 p-0' },
-                        React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "end", Help: ((_c = props.showHelpMessage) !== null && _c !== void 0 ? _c : true) ? "All times shown are in system time (".concat(props.timeZone, ").") : undefined, Setter: function (r) {
-                                var flt = props.dateTimeSetting === 'endWindow' ?
-                                    getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, format) :
-                                    getTimeWindowFromFilter({ start: r.start, end: r.end }, format);
-                                setFilter(flt);
-                                setActiveQP(-1);
-                            }, Label: 'End', Type: (_d = props.format) !== null && _d !== void 0 ? _d : 'datetime-local', Valid: function () { return true; }, Format: format, Accuracy: props.accuracy }),
-                        props.showQuickSelect && props.dateTimeSetting === 'endWindow' ?
-                            React.createElement(EndWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
-                            : null))
-                : null,
-            props.dateTimeSetting === 'startWindow' && !props.showQuickSelect ?
-                React.createElement(StartWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
-                : null,
-            props.dateTimeSetting === 'endWindow' && !props.showQuickSelect ?
-                React.createElement(EndWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
-                : null,
-            props.showQuickSelect ?
-                React.createElement("div", { className: props.isHorizontal ? "col-8 ".concat(props.dateTimeSetting !== 'startEnd' ? 'pt-3' : '') : 'row m-0 flex-grow-1' },
-                    React.createElement(Row, { addRow: props.isHorizontal, class: "m-0 justify-content-center align-items-center" }, QuickSelects.map(function (qs, i) {
-                        if (i % 3 !== 0)
-                            return null;
-                        return (React.createElement("div", { key: i, className: props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 'col-2' : "col-4", style: {
-                                paddingLeft: (props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 0 : (i % 9 == 0 ? 15 : 0)),
-                                paddingRight: (props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 2 : ((i % 18 == 6 || i % 18 == 15) ? 15 : 2)),
-                                marginTop: 10
-                            } },
-                            React.createElement("ul", { className: "list-group", key: i },
-                                React.createElement("li", { key: i, style: { cursor: 'pointer' }, onClick: function () {
-                                        var flt = getTimeWindowFromFilter(QuickSelects[i].createFilter(props.timeZone, props.format), format);
-                                        props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
-                                        setActiveQP(i);
-                                    }, className: "item badge badge-" + (i == activeQP ? "primary" : "secondary") }, QuickSelects[i].label),
-                                i + 1 < QuickSelects.length ?
-                                    React.createElement("li", { key: i + 1, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 1 == activeQP ? "primary" : "secondary"), onClick: function () {
-                                            var flt = getTimeWindowFromFilter(QuickSelects[i + 1].createFilter(props.timeZone, props.format), format);
-                                            props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
-                                            setActiveQP(i + 1);
-                                        } }, QuickSelects[i + 1].label)
-                                    : null,
-                                i + 2 < QuickSelects.length ?
-                                    React.createElement("li", { key: i + 2, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 2 == activeQP ? "primary" : "secondary"), onClick: function () {
-                                            var flt = getTimeWindowFromFilter(QuickSelects[i + 2].createFilter(props.timeZone, props.format), format);
-                                            props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
-                                            setActiveQP(i + 2);
-                                        } }, QuickSelects[i + 2].label)
-                                    : null)));
-                    })))
-                : 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: (_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' })));
 };
-var StartWindowForm = function (props) {
-    return (React.createElement(Row, { addRow: !props.IsHorizontal, class: 'm-0' },
-        React.createElement("div", { className: props.IsHorizontal ? props.ShowQuickSelect ? 'col-12 p-0' : 'col-6' : 'col-12 p-0' },
-            React.createElement("div", { className: 'form-group' },
-                React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Span(+)"),
-                React.createElement("div", { className: 'row' },
-                    React.createElement("div", { className: 'col-6' },
-                        React.createElement(react_forms_1.Input, { Record: props.Filter, Field: 'duration', Label: '', Valid: function () { return true; }, Type: 'number', Setter: function (r) {
-                                props.SetFilter(getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, props.Format));
-                                props.SetActiveQP(-1);
-                            } })),
-                    React.createElement("div", { className: 'col-6' },
-                        React.createElement(react_forms_1.Select, { Record: props.Filter, Label: '', Field: 'unit', Options: TimeWindowUtils_1.units.map(function (unit) { return ({ Value: unit, Label: (0, TimeWindowUtils_1.readableUnit)(unit) }); }), Setter: function (r) {
-                                props.SetFilter(getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, props.Format));
-                                props.SetActiveQP(-1);
-                            } })))))));
-};
-var EndWindowForm = function (props) {
-    return (React.createElement(Row, { addRow: !props.IsHorizontal, class: 'm-0' },
-        React.createElement("div", { className: props.IsHorizontal ? props.ShowQuickSelect ? 'col-12 p-0' : 'col-6' : 'col-12 p-0' },
-            React.createElement("div", { className: 'form-group' },
-                React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Span(-)"),
-                React.createElement("div", { className: 'row' },
-                    React.createElement("div", { className: 'col-6' },
-                        React.createElement(react_forms_1.Input, { Record: props.Filter, Field: 'duration', Label: '', Valid: function () { return true; }, Type: 'number', Setter: function (r) {
-                                props.SetFilter(getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, props.Format));
-                                props.SetActiveQP(-1);
-                            } })),
-                    React.createElement("div", { className: 'col-6' },
-                        React.createElement(react_forms_1.Select, { Record: props.Filter, Label: '', Field: 'unit', Options: TimeWindowUtils_1.units.map(function (unit) { return ({ Value: unit, Label: (0, TimeWindowUtils_1.readableUnit)(unit) }); }), Setter: function (r) {
-                                props.SetFilter(getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, props.Format));
-                                props.SetActiveQP(-1);
-                            } })))))));
-};
-// Returns a row div element with props as children of row 
-function Row(props) {
-    var _a;
-    if (props.addRow) {
-        return React.createElement("div", { className: "row ".concat((_a = props.class) !== null && _a !== void 0 ? _a : '') }, props.children);
-    }
-    return React.createElement(React.Fragment, null, props.children);
-}
 // Converts ITimeFilter to an ITimeWindow filter
 function getTimeWindowFromFilter(flt, format) {
     var start;

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

@@ -0,0 +1,8 @@
+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;
+export default WindowFilter;

package/lib/TimeFilter/WindowFilter/WindowFilter.js

@@ -0,0 +1,111 @@
+"use strict";
+//******************************************************************************************************
+//  TimeWindowFilter.tsx - Gbtc
+//
+//  Copyright © 2025, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2025 - Preston Crawford
+//       Generated original version of source code.
+//******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var React = __importStar(require("react"));
+var TimeFilter_1 = require("../TimeFilter");
+var QuickSelects_1 = __importDefault(require("../QuickSelects"));
+var WindowForm_1 = __importDefault(require("./WindowForm"));
+var WINDOW_FirstFallbackBreakpoint = 898;
+var WINDOW_SecondFallbackBreakpoint = 611;
+var WindowFilter = function (props) {
+    var _a, _b, _c, _d;
+    var DatePickerField = props.Window;
+    var DatePickerLabel = props.Window.charAt(0).toUpperCase() + props.Window.slice(1);
+    var filterType = props.Window === 'start' ? 'startWindow' : 'endWindow';
+    var setter = React.useCallback(function (record) {
+        if (props.Window === 'start') {
+            var flt = (0, TimeFilter_1.getTimeWindowFromFilter)({ start: record.start, duration: record.duration, unit: record.unit }, props.Format);
+            props.SetTimeWindowFilter(flt);
+            props.SetActiveQP(-1);
+        }
+        else {
+            var flt = (0, TimeFilter_1.getTimeWindowFromFilter)({ end: record.end, duration: record.duration, unit: record.unit }, props.Format);
+            props.SetTimeWindowFilter(flt);
+            props.SetActiveQP(-1);
+        }
+    }, [props.Window, props.SetTimeWindowFilter, props.SetActiveQP, props.Format]);
+    if (!props.ShowQuickSelects) {
+        return (React.createElement("div", { className: 'row m-0' },
+            React.createElement("div", { className: 'col-12' },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: DatePickerField, Help: props.HelpMessage, Setter: setter, Label: DatePickerLabel, Type: (_a = props.DateUnit) !== null && _a !== void 0 ? _a : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy }),
+                React.createElement(WindowForm_1.default, { Filter: props.TimeWindowFilter, SetFilter: props.SetTimeWindowFilter, SetActiveQP: props.SetActiveQP, Format: props.Format, ShowQuickSelect: props.ShowQuickSelects, Window: props.Window }))));
+    }
+    else if (props.ContainerWidth > WINDOW_FirstFallbackBreakpoint)
+        return (React.createElement("div", { className: 'row m-0' },
+            React.createElement("div", { className: 'col-4' },
+                React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: DatePickerField, Help: props.HelpMessage, Setter: setter, Label: DatePickerLabel, Type: (_b = props.DateUnit) !== null && _b !== void 0 ? _b : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy }),
+                React.createElement(WindowForm_1.default, { Filter: props.TimeWindowFilter, SetFilter: props.SetTimeWindowFilter, SetActiveQP: props.SetActiveQP, Format: props.Format, ShowQuickSelect: props.ShowQuickSelects, Window: props.Window })),
+            React.createElement("div", { className: 'col-8 pt-3' },
+                React.createElement(QuickSelects_1.default, { DateTimeSetting: filterType, Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit }))));
+    else if (props.ContainerWidth > WINDOW_SecondFallbackBreakpoint) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'row m-0' },
+                React.createElement("div", { className: 'col-6' },
+                    React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: DatePickerField, Help: props.HelpMessage, Setter: setter, Label: DatePickerLabel, Type: (_c = props.DateUnit) !== null && _c !== void 0 ? _c : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy })),
+                React.createElement("div", { className: 'col-6' },
+                    React.createElement(WindowForm_1.default, { Filter: props.TimeWindowFilter, SetFilter: props.SetTimeWindowFilter, SetActiveQP: props.SetActiveQP, Format: props.Format, ShowQuickSelect: props.ShowQuickSelects, Window: props.Window }))),
+            React.createElement("div", { className: 'row m-0' },
+                React.createElement("div", { className: 'col-12' },
+                    React.createElement(QuickSelects_1.default, { DateTimeSetting: filterType, Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit })))));
+    }
+    else {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'row m-0' },
+                React.createElement("div", { className: 'col-12' },
+                    React.createElement(react_forms_1.DatePicker, { Record: props.TimeWindowFilter, Field: DatePickerField, Help: props.HelpMessage, Setter: setter, Label: DatePickerLabel, Type: (_d = props.DateUnit) !== null && _d !== void 0 ? _d : 'datetime-local', Valid: function () { return true; }, Format: props.Format, Accuracy: props.Accuracy }))),
+            React.createElement("div", { className: 'row m-0' },
+                React.createElement("div", { className: 'col-12' },
+                    React.createElement(WindowForm_1.default, { Filter: props.TimeWindowFilter, SetFilter: props.SetTimeWindowFilter, SetActiveQP: props.SetActiveQP, Format: props.Format, ShowQuickSelect: props.ShowQuickSelects, Window: props.Window }))),
+            React.createElement("div", { className: 'row m-0' },
+                React.createElement("div", { className: 'col-12' },
+                    React.createElement(QuickSelects_1.default, { DateTimeSetting: filterType, Timezone: props.Timezone, ActiveQP: props.ActiveQP, SetActiveQP: props.SetActiveQP, SetFilter: props.SetFilter, Format: props.Format, DateUnit: props.DateUnit })))));
+    }
+};
+exports.default = WindowFilter;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ITimeWindow } from '../TimeFilter';
+export type Window = "start" | "end";
+export interface IProps {
+    Filter: ITimeWindow;
+    SetFilter: (filter: ITimeWindow) => void;
+    SetActiveQP: (qp: number) => void;
+    Format: string;
+    ShowQuickSelect: boolean;
+    Window: Window;
+}
+declare const WindowForm: (props: IProps) => React.JSX.Element;
+export default WindowForm;

package/lib/TimeFilter/WindowFilter/WindowForm.js

@@ -0,0 +1,73 @@
+"use strict";
+//******************************************************************************************************
+//  WindowForm.tsx - Gbtc
+//
+//  Copyright © 2025, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2025 - Preston Crawford
+//       Generated original version of source code.
+//******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var React = __importStar(require("react"));
+var TimeFilter_1 = require("../TimeFilter");
+var TimeWindowUtils_1 = require("../TimeWindowUtils");
+var WindowForm = function (props) {
+    var setter = React.useCallback(function (record) {
+        if (props.Window === 'start') {
+            props.SetFilter((0, TimeFilter_1.getTimeWindowFromFilter)({ start: record.start, duration: record.duration, unit: record.unit }, props.Format));
+            props.SetActiveQP(-1);
+        }
+        else {
+            props.SetFilter((0, TimeFilter_1.getTimeWindowFromFilter)({ end: record.end, duration: record.duration, unit: record.unit }, props.Format));
+            props.SetActiveQP(-1);
+        }
+    }, [props.Window, props.Format, props.SetActiveQP, props.SetActiveQP]);
+    return (React.createElement("div", { className: 'form-group' },
+        React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } },
+            "Span(",
+            props.Window === 'start' ? '+' : '-',
+            ")"),
+        React.createElement("div", { className: 'row' },
+            React.createElement("div", { className: 'col-6' },
+                React.createElement(react_forms_1.Input, { Record: props.Filter, Field: 'duration', Label: '', Valid: function () { return true; }, Type: 'number', Setter: setter })),
+            React.createElement("div", { className: 'col-6' },
+                React.createElement(react_forms_1.Select, { Record: props.Filter, Label: '', Field: 'unit', Options: TimeWindowUtils_1.units.map(function (unit) { return ({ Value: unit, Label: (0, TimeWindowUtils_1.readableUnit)(unit) }); }), Setter: setter })))));
+};
+exports.default = WindowForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/common-pages",
-  "version": "0.0.146",
+  "version": "0.0.148",
   "description": "Common UI pages for GPA products",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -47,9 +47,9 @@
     "@gpa-gemstone/application-typings": "0.0.87",
     "@gpa-gemstone/gpa-symbols": "0.0.53",
     "@gpa-gemstone/helper-functions": "0.0.45",
-    "@gpa-gemstone/react-forms": "1.1.96",
-    "@gpa-gemstone/react-interactive": "1.0.157",
-    "@gpa-gemstone/react-table": "1.2.80",
+    "@gpa-gemstone/react-forms": "1.1.97",
+    "@gpa-gemstone/react-interactive": "1.0.159",
+    "@gpa-gemstone/react-table": "1.2.82",
     "@reduxjs/toolkit": "1.8.3",
     "crypto-js": "^4.2.0",
     "moment": "^2.29.4",