@map-colonies/react-components 3.12.0 → 3.12.2

package/dist/cssbaseline/index.d.ts

@@ -1 +1 @@
-export { McCssBaseline as CssBaseline, McScopedCssBaseline as ScopedCssBaseline, } from './cssbaseline';
+export { McCssBaseline as CssBaseline, McScopedCssBaseline as ScopedCssBaseline, } from './cssbaseline';

package/dist/cssbaseline/index.js

@@ -1,6 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScopedCssBaseline = exports.CssBaseline = void 0;
-var cssbaseline_1 = require("./cssbaseline");
-Object.defineProperty(exports, "CssBaseline", { enumerable: true, get: function () { return cssbaseline_1.McCssBaseline; } });
-Object.defineProperty(exports, "ScopedCssBaseline", { enumerable: true, get: function () { return cssbaseline_1.McScopedCssBaseline; } });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScopedCssBaseline = exports.CssBaseline = void 0;
+var cssbaseline_1 = require("./cssbaseline");
+Object.defineProperty(exports, "CssBaseline", { enumerable: true, get: function () { return cssbaseline_1.McCssBaseline; } });
+Object.defineProperty(exports, "ScopedCssBaseline", { enumerable: true, get: function () { return cssbaseline_1.McScopedCssBaseline; } });

package/dist/date-picker/date-picker.css

@@ -1,9 +1,9 @@
-body[dir='rtl'] .drpContainer .MuiInputLabel-formControl {
-  right: 0px;
-  left: unset;
-}
-
-body[dir='rtl'] .drpContainer .MuiInputBase-input {
-  direction: ltr;
-  text-align: end;
-}
+body[dir='rtl'] .drpContainer .MuiInputLabel-formControl {
+  right: 0px;
+  left: unset;
+}
+
+body[dir='rtl'] .drpContainer .MuiInputBase-input {
+  direction: ltr;
+  text-align: end;
+}

package/dist/date-picker/date-picker.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import { KeyboardDatePickerProps } from '@material-ui/pickers';
-import { SupportedLocales } from '../models/enums';
-import '@map-colonies/react-core/dist/button/styles';
-import './date-picker.css';
-interface DatePickerProps extends KeyboardDatePickerProps {
-    local?: {
-        placeHolderText?: string;
-        calendarLocale?: SupportedLocales;
-    };
-    showTime?: boolean;
-}
-export declare const DateTimePicker: React.FC<DatePickerProps>;
-export {};
+import React from 'react';
+import { KeyboardDatePickerProps } from '@material-ui/pickers';
+import { SupportedLocales } from '../models/enums';
+import '@map-colonies/react-core/dist/button/styles';
+import './date-picker.css';
+interface DatePickerProps extends KeyboardDatePickerProps {
+    local?: {
+        placeHolderText?: string;
+        calendarLocale?: SupportedLocales;
+    };
+    showTime?: boolean;
+}
+export declare const DateTimePicker: React.FC<DatePickerProps>;
+export {};

package/dist/date-picker/date-picker.js

@@ -1,78 +1,78 @@
-"use strict";
-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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateTimePicker = void 0;
-var react_1 = __importStar(require("react"));
-var locale_1 = require("date-fns/locale");
-var pickers_1 = require("@material-ui/pickers");
-var date_fns_1 = __importDefault(require("@date-io/date-fns"));
-var core_1 = require("@material-ui/core");
-var react_core_1 = require("@map-colonies/react-core");
-var enums_1 = require("../models/enums");
-var defaults_1 = __importDefault(require("../models/defaults"));
-var theme_1 = require("../theme");
-require("@map-colonies/react-core/dist/button/styles");
-require("./date-picker.css");
-var DateTimePicker = function (props) {
-    var theme = react_core_1.useTheme();
-    var themeMui = theme_1.useMappedMuiTheme(theme);
-    var _a = react_1.useState(props.value), value = _a[0], setValue = _a[1];
-    var _b = props.format, format = _b === void 0 ? defaults_1.default.DATE_PICKER.dateFormat : _b, _c = props.variant, variant = _c === void 0 ? defaults_1.default.DATE_PICKER.variant : _c, _d = props.disableFuture, disableFuture = _d === void 0 ? defaults_1.default.DATE_PICKER.disableFuture : _d, local = props.local, onChange = props.onChange, _e = props.showTime, showTime = _e === void 0 ? defaults_1.default.DATE_PICKER.showTime : _e, propValue = props.value, resProps = __rest(props, ["format", "variant", "disableFuture", "local", "onChange", "showTime", "value"]);
-    var _f = local !== null && local !== void 0 ? local : {
-        placeHolderText: defaults_1.default.DATE_PICKER.local.placeHolderText,
-        calendarLocale: enums_1.SupportedLocales.EN,
-    }, _g = _f.placeHolderText, placeHolderText = _g === void 0 ? defaults_1.default.DATE_PICKER.local.placeHolderText : _g, calendarLocale = _f.calendarLocale;
-    var locale = calendarLocale === enums_1.SupportedLocales.HE ? locale_1.he : locale_1.enUS;
-    var handleOnChange = function (e) {
-        setValue(e);
-        onChange(e);
-    };
-    return (react_1.default.createElement(core_1.ThemeProvider, { theme: themeMui },
-        react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default, locale: locale },
-            showTime && (react_1.default.createElement(pickers_1.KeyboardDateTimePicker, __assign({ variant: variant, placeholder: placeHolderText, onChange: handleOnChange, value: value, disableFuture: disableFuture, format: format }, resProps))),
-            !showTime && (react_1.default.createElement(pickers_1.KeyboardDatePicker, __assign({ variant: variant, placeholder: placeHolderText, onChange: handleOnChange, value: value, disableFuture: disableFuture, format: format }, resProps))))));
-};
-exports.DateTimePicker = DateTimePicker;
+"use strict";
+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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePicker = void 0;
+var react_1 = __importStar(require("react"));
+var locale_1 = require("date-fns/locale");
+var pickers_1 = require("@material-ui/pickers");
+var date_fns_1 = __importDefault(require("@date-io/date-fns"));
+var core_1 = require("@material-ui/core");
+var react_core_1 = require("@map-colonies/react-core");
+var enums_1 = require("../models/enums");
+var defaults_1 = __importDefault(require("../models/defaults"));
+var theme_1 = require("../theme");
+require("@map-colonies/react-core/dist/button/styles");
+require("./date-picker.css");
+var DateTimePicker = function (props) {
+    var theme = react_core_1.useTheme();
+    var themeMui = theme_1.useMappedMuiTheme(theme);
+    var _a = react_1.useState(props.value), value = _a[0], setValue = _a[1];
+    var _b = props.format, format = _b === void 0 ? defaults_1.default.DATE_PICKER.dateFormat : _b, _c = props.variant, variant = _c === void 0 ? defaults_1.default.DATE_PICKER.variant : _c, _d = props.disableFuture, disableFuture = _d === void 0 ? defaults_1.default.DATE_PICKER.disableFuture : _d, local = props.local, onChange = props.onChange, _e = props.showTime, showTime = _e === void 0 ? defaults_1.default.DATE_PICKER.showTime : _e, propValue = props.value, resProps = __rest(props, ["format", "variant", "disableFuture", "local", "onChange", "showTime", "value"]);
+    var _f = local !== null && local !== void 0 ? local : {
+        placeHolderText: defaults_1.default.DATE_PICKER.local.placeHolderText,
+        calendarLocale: enums_1.SupportedLocales.EN,
+    }, _g = _f.placeHolderText, placeHolderText = _g === void 0 ? defaults_1.default.DATE_PICKER.local.placeHolderText : _g, calendarLocale = _f.calendarLocale;
+    var locale = calendarLocale === enums_1.SupportedLocales.HE ? locale_1.he : locale_1.enUS;
+    var handleOnChange = function (e) {
+        setValue(e);
+        onChange(e);
+    };
+    return (react_1.default.createElement(core_1.ThemeProvider, { theme: themeMui },
+        react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default, locale: locale },
+            showTime && (react_1.default.createElement(pickers_1.KeyboardDateTimePicker, __assign({ variant: variant, placeholder: placeHolderText, onChange: handleOnChange, value: value, disableFuture: disableFuture, format: format }, resProps))),
+            !showTime && (react_1.default.createElement(pickers_1.KeyboardDatePicker, __assign({ variant: variant, placeholder: placeHolderText, onChange: handleOnChange, value: value, disableFuture: disableFuture, format: format }, resProps))))));
+};
+exports.DateTimePicker = DateTimePicker;

package/dist/date-picker/index.d.ts

@@ -1 +1 @@
-export * from './date-picker';
+export * from './date-picker';

package/dist/date-picker/index.js

@@ -1,13 +1,13 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./date-picker"), exports);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./date-picker"), exports);

package/dist/date-range-picker/date-range-picker.css

@@ -1,9 +1,9 @@
-body[dir='rtl'] .drpContainer .MuiInputLabel-formControl {
-  right: 0px;
-  left: unset;
-}
-
-body[dir='rtl'] .drpContainer .MuiInputBase-input {
-  direction: ltr;
-  text-align: end;
-}
+body[dir='rtl'] .drpContainer .MuiInputLabel-formControl {
+  right: 0px;
+  left: unset;
+}
+
+body[dir='rtl'] .drpContainer .MuiInputBase-input {
+  direction: ltr;
+  text-align: end;
+}

package/dist/date-range-picker/date-range-picker.d.ts

@@ -1,26 +1,26 @@
-import React from 'react';
-import '@map-colonies/react-core/dist/button/styles';
-import { SupportedLocales } from '../models/enums';
-import './date-range-picker.css';
-interface DateRangePickerProps {
-    onChange: (dateRange: {
-        from?: Date;
-        to?: Date;
-    }) => void;
-    from?: Date;
-    to?: Date;
-    dateFormat?: string;
-    controlsLayout?: string;
-    contentWidth?: number;
-    disableFuture?: boolean;
-    maxDate?: string | number | Date | null | undefined;
-    minDate?: string | number | Date | null | undefined;
-    local?: {
-        setText?: string;
-        startPlaceHolderText?: string;
-        endPlaceHolderText?: string;
-        calendarLocale?: SupportedLocales;
-    };
-}
-export declare const DateTimeRangePicker: React.FC<DateRangePickerProps>;
-export {};
+import React from 'react';
+import '@map-colonies/react-core/dist/button/styles';
+import { SupportedLocales } from '../models/enums';
+import './date-range-picker.css';
+interface DateRangePickerProps {
+    onChange: (dateRange: {
+        from?: Date;
+        to?: Date;
+    }) => void;
+    from?: Date;
+    to?: Date;
+    dateFormat?: string;
+    controlsLayout?: string;
+    contentWidth?: number;
+    disableFuture?: boolean;
+    maxDate?: string | number | Date | null | undefined;
+    minDate?: string | number | Date | null | undefined;
+    local?: {
+        setText?: string;
+        startPlaceHolderText?: string;
+        endPlaceHolderText?: string;
+        calendarLocale?: SupportedLocales;
+    };
+}
+export declare const DateTimeRangePicker: React.FC<DateRangePickerProps>;
+export {};

package/dist/date-range-picker/date-range-picker.form-control.css

@@ -1,3 +1,3 @@
-body[dir='rtl'] .drpOpener .mdc-text-field {
-  direction: ltr;
-}
+body[dir='rtl'] .drpOpener .mdc-text-field {
+  direction: ltr;
+}

package/dist/date-range-picker/date-range-picker.form-control.d.ts

@@ -1,28 +1,28 @@
-import React from 'react';
-import '@map-colonies/react-core/dist/textfield/styles';
-import { SupportedLocales } from '../models/enums';
-import './date-range-picker.form-control.css';
-interface DateRangePickerProps {
-    onChange: (dateRange: {
-        from?: Date;
-        to?: Date;
-    }) => void;
-    from?: Date;
-    to?: Date;
-    dateFormat?: string;
-    renderAsButton?: boolean;
-    width?: string | number;
-    controlsLayout?: 'column' | 'row';
-    offset?: number;
-    disableFuture?: boolean;
-    maxDate?: string | number | Date | null | undefined;
-    minDate?: string | number | Date | null | undefined;
-    local?: {
-        setText?: string;
-        startPlaceHolderText?: string;
-        endPlaceHolderText?: string;
-        calendarLocale?: SupportedLocales;
-    };
-}
-export declare const DateTimeRangePickerFormControl: React.FC<DateRangePickerProps>;
-export {};
+import React from 'react';
+import '@map-colonies/react-core/dist/textfield/styles';
+import { SupportedLocales } from '../models/enums';
+import './date-range-picker.form-control.css';
+interface DateRangePickerProps {
+    onChange: (dateRange: {
+        from?: Date;
+        to?: Date;
+    }) => void;
+    from?: Date;
+    to?: Date;
+    dateFormat?: string;
+    renderAsButton?: boolean;
+    width?: string | number;
+    controlsLayout?: 'column' | 'row';
+    offset?: number;
+    disableFuture?: boolean;
+    maxDate?: string | number | Date | null | undefined;
+    minDate?: string | number | Date | null | undefined;
+    local?: {
+        setText?: string;
+        startPlaceHolderText?: string;
+        endPlaceHolderText?: string;
+        calendarLocale?: SupportedLocales;
+    };
+}
+export declare const DateTimeRangePickerFormControl: React.FC<DateRangePickerProps>;
+export {};

package/dist/date-range-picker/date-range-picker.form-control.js

@@ -1,95 +1,95 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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.DateTimeRangePickerFormControl = void 0;
-var react_1 = __importStar(require("react"));
-var date_fns_1 = require("date-fns");
-var react_core_1 = require("@map-colonies/react-core");
-require("@map-colonies/react-core/dist/textfield/styles");
-var defaults_1 = __importDefault(require("../models/defaults"));
-var popover_1 = require("../popover");
-var date_range_picker_1 = require("./date-range-picker");
-require("./date-range-picker.form-control.css");
-var DateTimeRangePickerFormControl = function (props) {
-    var _a, _b, _c, _d, _e, _f;
-    var _g = react_1.useState(null), from = _g[0], setFrom = _g[1];
-    var _h = react_1.useState(null), to = _h[0], setTo = _h[1];
-    var _j = react_1.useState(defaults_1.default.DATE_RANGE_PICKER.dateFormat), dateFormat = _j[0], setDateFormat = _j[1];
-    var _k = react_1.default.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
-    var handleClick = function (event) {
-        setAnchorEl(event.currentTarget);
-    };
-    var handleClickInput = function (event) {
-        if (event.currentTarget.tagName === 'I')
-            setAnchorEl(event.currentTarget.previousElementSibling);
-        else
-            setAnchorEl(event.currentTarget);
-    };
-    var handleClose = function () {
-        setAnchorEl(null);
-    };
-    var open = Boolean(anchorEl);
-    var controlsLayout = (_a = props.controlsLayout) !== null && _a !== void 0 ? _a : 'column';
-    react_1.useEffect(function () {
-        var _a;
-        setFrom((_a = props.from) !== null && _a !== void 0 ? _a : null);
-    }, [props.from]);
-    react_1.useEffect(function () {
-        var _a;
-        setTo((_a = props.to) !== null && _a !== void 0 ? _a : null);
-    }, [props.to]);
-    react_1.useEffect(function () {
-        var _a;
-        setDateFormat((_a = props.dateFormat) !== null && _a !== void 0 ? _a : defaults_1.default.DATE_RANGE_PICKER.dateFormat);
-    }, [props.dateFormat]);
-    var startPlaceHolderText = (_c = (_b = props.local) === null || _b === void 0 ? void 0 : _b.startPlaceHolderText) !== null && _c !== void 0 ? _c : defaults_1.default.DATE_RANGE_PICKER.local.startPlaceHolderText;
-    var endPlaceHolderText = (_e = (_d = props.local) === null || _d === void 0 ? void 0 : _d.endPlaceHolderText) !== null && _e !== void 0 ? _e : defaults_1.default.DATE_RANGE_PICKER.local.endPlaceHolderText;
-    var renderAsButton = props.renderAsButton === undefined
-        ? defaults_1.default.DATE_RANGE_PICKER.renderAsButton
-        : props.renderAsButton;
-    var offset = props.offset === undefined
-        ? defaults_1.default.DATE_RANGE_PICKER.offset
-        : props.offset;
-    var disableFuture = props.disableFuture === undefined
-        ? defaults_1.default.DATE_RANGE_PICKER.disableFuture
-        : props.disableFuture;
-    var controlText = react_1.useMemo(function () {
-        return (from ? date_fns_1.format(from, dateFormat) : startPlaceHolderText) + " - " + (to ? date_fns_1.format(to, dateFormat) : endPlaceHolderText);
-    }, [from, to, dateFormat, startPlaceHolderText, endPlaceHolderText]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        renderAsButton ? (react_1.default.createElement(react_core_1.Button, { style: { width: props.width }, raised: true, onClick: handleClick, className: "drpOpener" }, controlText)) : (react_1.default.createElement(react_core_1.TextField, { className: "drpOpener", readOnly: true, style: { width: props.width }, value: controlText, onClick: handleClickInput, trailingIcon: {
-                icon: 'date_range',
-                tabIndex: 0,
-                onClick: handleClickInput,
-            } })),
-        react_1.default.createElement(popover_1.Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, keepMounted: true },
-            react_1.default.createElement(date_range_picker_1.DateTimeRangePicker, { controlsLayout: controlsLayout, contentWidth: ((_f = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth) !== null && _f !== void 0 ? _f : 0) - offset, dateFormat: dateFormat, disableFuture: disableFuture, minDate: props.minDate, maxDate: props.maxDate, local: props.local, from: from !== null && from !== void 0 ? from : undefined, to: to !== null && to !== void 0 ? to : undefined, onChange: function (_a) {
-                    var from = _a.from, to = _a.to;
-                    setFrom(from !== null && from !== void 0 ? from : null);
-                    setTo(to !== null && to !== void 0 ? to : null);
-                    props.onChange({ from: from, to: to });
-                    handleClose();
-                } }))));
-};
-exports.DateTimeRangePickerFormControl = DateTimeRangePickerFormControl;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.DateTimeRangePickerFormControl = void 0;
+var react_1 = __importStar(require("react"));
+var date_fns_1 = require("date-fns");
+var react_core_1 = require("@map-colonies/react-core");
+require("@map-colonies/react-core/dist/textfield/styles");
+var defaults_1 = __importDefault(require("../models/defaults"));
+var popover_1 = require("../popover");
+var date_range_picker_1 = require("./date-range-picker");
+require("./date-range-picker.form-control.css");
+var DateTimeRangePickerFormControl = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var _g = react_1.useState(null), from = _g[0], setFrom = _g[1];
+    var _h = react_1.useState(null), to = _h[0], setTo = _h[1];
+    var _j = react_1.useState(defaults_1.default.DATE_RANGE_PICKER.dateFormat), dateFormat = _j[0], setDateFormat = _j[1];
+    var _k = react_1.default.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClickInput = function (event) {
+        if (event.currentTarget.tagName === 'I')
+            setAnchorEl(event.currentTarget.previousElementSibling);
+        else
+            setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var open = Boolean(anchorEl);
+    var controlsLayout = (_a = props.controlsLayout) !== null && _a !== void 0 ? _a : 'column';
+    react_1.useEffect(function () {
+        var _a;
+        setFrom((_a = props.from) !== null && _a !== void 0 ? _a : null);
+    }, [props.from]);
+    react_1.useEffect(function () {
+        var _a;
+        setTo((_a = props.to) !== null && _a !== void 0 ? _a : null);
+    }, [props.to]);
+    react_1.useEffect(function () {
+        var _a;
+        setDateFormat((_a = props.dateFormat) !== null && _a !== void 0 ? _a : defaults_1.default.DATE_RANGE_PICKER.dateFormat);
+    }, [props.dateFormat]);
+    var startPlaceHolderText = (_c = (_b = props.local) === null || _b === void 0 ? void 0 : _b.startPlaceHolderText) !== null && _c !== void 0 ? _c : defaults_1.default.DATE_RANGE_PICKER.local.startPlaceHolderText;
+    var endPlaceHolderText = (_e = (_d = props.local) === null || _d === void 0 ? void 0 : _d.endPlaceHolderText) !== null && _e !== void 0 ? _e : defaults_1.default.DATE_RANGE_PICKER.local.endPlaceHolderText;
+    var renderAsButton = props.renderAsButton === undefined
+        ? defaults_1.default.DATE_RANGE_PICKER.renderAsButton
+        : props.renderAsButton;
+    var offset = props.offset === undefined
+        ? defaults_1.default.DATE_RANGE_PICKER.offset
+        : props.offset;
+    var disableFuture = props.disableFuture === undefined
+        ? defaults_1.default.DATE_RANGE_PICKER.disableFuture
+        : props.disableFuture;
+    var controlText = react_1.useMemo(function () {
+        return (from ? date_fns_1.format(from, dateFormat) : startPlaceHolderText) + " - " + (to ? date_fns_1.format(to, dateFormat) : endPlaceHolderText);
+    }, [from, to, dateFormat, startPlaceHolderText, endPlaceHolderText]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        renderAsButton ? (react_1.default.createElement(react_core_1.Button, { style: { width: props.width }, raised: true, onClick: handleClick, className: "drpOpener" }, controlText)) : (react_1.default.createElement(react_core_1.TextField, { className: "drpOpener", readOnly: true, style: { width: props.width }, value: controlText, onClick: handleClickInput, trailingIcon: {
+                icon: 'date_range',
+                tabIndex: 0,
+                onClick: handleClickInput,
+            } })),
+        react_1.default.createElement(popover_1.Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, keepMounted: true },
+            react_1.default.createElement(date_range_picker_1.DateTimeRangePicker, { controlsLayout: controlsLayout, contentWidth: ((_f = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth) !== null && _f !== void 0 ? _f : 0) - offset, dateFormat: dateFormat, disableFuture: disableFuture, minDate: props.minDate, maxDate: props.maxDate, local: props.local, from: from !== null && from !== void 0 ? from : undefined, to: to !== null && to !== void 0 ? to : undefined, onChange: function (_a) {
+                    var from = _a.from, to = _a.to;
+                    setFrom(from !== null && from !== void 0 ? from : null);
+                    setTo(to !== null && to !== void 0 ? to : null);
+                    props.onChange({ from: from, to: to });
+                    handleClose();
+                } }))));
+};
+exports.DateTimeRangePickerFormControl = DateTimeRangePickerFormControl;