@manuscripts/style-guide 2.1.8-LEAN-4344.0 → 2.1.9

package/dist/cjs/components/AlertMessage.js

@@ -1,4 +1,19 @@
 "use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,10 +37,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.AlertMessage = exports.AlertMessageType = exports.TextButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_sizeme_1 = require("react-sizeme");
 const styled_components_1 = __importStar(require("styled-components"));
 const Button_1 = require("./Button");
 const icons_1 = require("./icons");
@@ -46,6 +64,12 @@ const buttonStyles = (0, styled_components_1.css) `
 exports.TextButton = (0, styled_components_1.default)(Button_1.IconTextButton) `
   ${buttonStyles}
 `;
+const CloseIconButton = (0, styled_components_1.default)(Button_1.IconButton).attrs({
+    defaultColor: true,
+    size: 16,
+}) `
+  ${buttonStyles}
+`;
 const InformativeIcon = styled_components_1.default.div `
   height: 24px;
   margin-right: ${(props) => props.theme.grid.unit * 3}px;
@@ -117,16 +141,28 @@ const alertContainers = {
     info: InfoAlertContainer,
     warning: WarningAlertContainer,
 };
-const AlertMessage = ({ dismissButton, children, type, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(true);
-    const handleClose = (0, react_1.useCallback)(() => {
-        setIsOpen(false);
-    }, []);
-    if (!isOpen) {
-        return null;
+class AlertMessage extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isOpen: true,
+        };
+        this.handleClose = () => {
+            this.setState({ isOpen: false });
+        };
     }
-    const AlertContainer = alertContainers[type];
-    const AlertIcon = alertIcons[type];
-    return ((0, jsx_runtime_1.jsx)(AlertContainer, Object.assign({ className: 'alert-message' }, { children: (0, jsx_runtime_1.jsxs)(InnerContainer, { children: [(0, jsx_runtime_1.jsx)(InformativeIcon, { children: (0, jsx_runtime_1.jsx)(AlertIcon, {}) }), (0, jsx_runtime_1.jsx)(TextContainer, { children: children }), dismissButton && ((0, jsx_runtime_1.jsx)(exports.TextButton, Object.assign({ onClick: dismissButton.action ? dismissButton.action : handleClose }, { children: dismissButton.text })))] }) })));
-};
+    render() {
+        const { hideCloseButton, dismissButton, children, type } = this.props;
+        const { isOpen } = this.state;
+        const AlertContainer = alertContainers[type];
+        const AlertIcon = alertIcons[type];
+        return (isOpen && (react_1.default.createElement(react_sizeme_1.SizeMe, null, () => (react_1.default.createElement(AlertContainer, { className: 'alert-message' },
+            react_1.default.createElement(InnerContainer, null,
+                react_1.default.createElement(InformativeIcon, null, react_1.default.createElement(AlertIcon, null)),
+                react_1.default.createElement(TextContainer, null, children),
+                dismissButton && (react_1.default.createElement(exports.TextButton, { onClick: dismissButton.action
+                        ? dismissButton.action
+                        : this.handleClose }, dismissButton.text))))))));
+    }
+}
 exports.AlertMessage = AlertMessage;

package/dist/cjs/components/AutoSaveInput.js

@@ -1,36 +1,59 @@
 "use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoSaveInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const AutoSaveInput = ({ component: Component, field, form, placeholder, disabled, testId, isInvalid, saveOn, }) => {
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const handleSubmit = (0, react_1.useCallback)(() => {
-        window.setTimeout(form.submitForm, 10);
-    }, [form]);
-    const handleFocus = (0, react_1.useCallback)(() => {
-        setFocused(true);
-    }, []);
-    const handleBlur = (0, react_1.useCallback)((event) => {
-        setFocused(false);
-        field.onBlur(event);
-        if (saveOn === 'blur') {
-            handleSubmit();
-        }
-    }, [field, saveOn, handleSubmit]);
-    const handleChange = (0, react_1.useCallback)((event) => {
-        field.onChange(event);
-        if (saveOn === 'change') {
-            handleSubmit();
-        }
-    }, [field, saveOn, handleSubmit]);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            if (focused) {
-                handleSubmit();
+const react_1 = __importDefault(require("react"));
+class AutoSaveInput extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            focused: false,
+        };
+        this.handleSubmit = () => {
+            window.setTimeout(this.props.form.submitForm, 10);
+        };
+        this.handleFocus = () => {
+            this.setState({ focused: true });
+        };
+        this.handleBlur = (event) => {
+            this.setState({ focused: false });
+            this.props.field.onBlur(event);
+            if (this.props.saveOn === 'blur') {
+                this.handleSubmit();
             }
         };
-    }, [focused, handleSubmit]);
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, field, { placeholder: placeholder, disabled: disabled, checked: !!field.value, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, "data-testid": testId && `${testId}__input`, "aria-invalid": isInvalid || undefined })));
-};
+        this.handleChange = (event) => {
+            this.props.field.onChange(event);
+            if (this.props.saveOn === 'change') {
+                this.handleSubmit();
+            }
+        };
+    }
+    componentWillUnmount() {
+        if (this.state.focused) {
+            this.handleSubmit();
+        }
+    }
+    render() {
+        const { component: Component, field, placeholder, disabled, testId, } = this.props;
+        return (react_1.default.createElement(Component, Object.assign({}, field, { placeholder: placeholder, disabled: disabled, checked: !!field.value, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, "data-testid": testId && `${testId}__input`, "aria-invalid": this.props.isInvalid || undefined })));
+    }
+}
 exports.AutoSaveInput = AutoSaveInput;

package/dist/cjs/components/Avatar.js

@@ -1,11 +1,48 @@
 "use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+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.Avatar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("./icons");
 const AvatarContainer = styled_components_1.default.div `
@@ -36,6 +73,6 @@ const Avatar = (props) => {
     const handleSrcError = (0, react_1.useCallback)(() => {
         setSrcError(true);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(AvatarContainer, Object.assign({ opacity: props.opacity || 1 }, { children: props.src && !srcError ? ((0, jsx_runtime_1.jsx)(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : ((0, jsx_runtime_1.jsx)(StyledAvatar, { height: props.size, width: props.size, color: props.color })) })));
+    return (react_1.default.createElement(AvatarContainer, { opacity: props.opacity || 1 }, props.src && !srcError ? (react_1.default.createElement(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (react_1.default.createElement(StyledAvatar, { height: props.size, width: props.size, color: props.color }))));
 };
 exports.Avatar = Avatar;

package/dist/cjs/components/ContextMenu.js

@@ -1,4 +1,19 @@
 "use strict";
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -27,7 +42,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
 const Icons = __importStar(require("./icons"));
@@ -49,8 +64,10 @@ const icons = Object.entries(Icons).reduce((acc, [name, IconComponent]) => {
     acc[iconName] = IconComponent;
     return acc;
 }, {});
-const ContextMenu = ({ actions }) => ((0, jsx_runtime_1.jsx)(Button_1.IconButtonGroup, Object.assign({ size: 32 }, { children: actions.map((action) => {
-        const Icon = icons[action.icon];
-        return ((0, jsx_runtime_1.jsxs)(ContextMenuIconButton, Object.assign({ "data-tooltip-id": action.icon, onClick: action.action, className: action.selected ? 'selected' : '' }, { children: [(0, jsx_runtime_1.jsx)(Icon, { width: 18, height: 18 }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ id: action.icon, place: "bottom" }, { children: action.label }))] }), action.icon));
-    }) })));
+const ContextMenu = ({ actions }) => (react_1.default.createElement(Button_1.IconButtonGroup, { size: 32 }, actions.map((action) => {
+    const Icon = icons[action.icon];
+    return (react_1.default.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action, className: action.selected ? 'selected' : '' },
+        react_1.default.createElement(Icon, { width: 18, height: 18 }),
+        react_1.default.createElement(Tooltip_1.Tooltip, { id: action.icon, place: "bottom" }, action.label)));
+})));
 exports.ContextMenu = ContextMenu;

package/dist/cjs/components/DatePicker/CalendarDatePicker.js

@@ -1,112 +1,95 @@
 "use strict";
+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.CalendarDatePicker = exports.calendarDatePickerDefaultDateFormat = exports.calendarPotentialDueDate = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-require('react-day-picker/style.css');
-const react_1 = require("@headlessui/react");
+exports.CalendarDatePicker = exports.calendarDatePickerDefaultDateFormat = exports.calendarPotentialDueDate = exports.calendarGetDay = void 0;
+require("react-modern-calendar-datepicker/lib/DatePicker.css");
 const date_fns_1 = require("date-fns");
-const react_2 = require("react");
-const react_day_picker_1 = require("react-day-picker");
+const react_1 = __importStar(require("react"));
+const react_modern_calendar_datepicker_1 = __importDefault(require("react-modern-calendar-datepicker"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Dialog_1 = require("../Dialog");
-const calendarPotentialDueDate = (stepDueDate, selectedDate, submissionDueDate) => {
-    if (!selectedDate || !(0, date_fns_1.isValid)(selectedDate)) {
-        return null;
-    }
+const calendarGetDay = (date) => ({
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+});
+exports.calendarGetDay = calendarGetDay;
+const calendarPotentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
     const duration = (0, date_fns_1.intervalToDuration)({
         start: stepDueDate,
-        end: selectedDate,
+        end: new Date(`${dueDate.year}-${dueDate.month < 10 ? `0${dueDate.month}` : dueDate.month}-${dueDate.day < 10 ? `0${dueDate.day}` : dueDate.day}`),
     });
     return (0, date_fns_1.add)(submissionDueDate, duration);
 };
 exports.calendarPotentialDueDate = calendarPotentialDueDate;
 const calendarDatePickerDefaultDateFormat = 'd MMM, EEEE';
 exports.calendarDatePickerDefaultDateFormat = calendarDatePickerDefaultDateFormat;
-const CalendarDatePicker = ({ handleDateChange, originalDueDate, currentDueDate, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', buttonLabel = 'Change Date', }) => {
+const CalendarDatePicker = ({ Button, handleDateChange, originalDueDate, currentDueDate, datePickerConfigs, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', }) => {
+    datePickerConfigs = Object.assign({ position: 'bottom', color: '#f2fbfc', selectedDayClassName: 'selected-day', calendarClassName: 'responsive-calendar' }, datePickerConfigs);
     const dialog = Object.assign({}, dialogConfigs, {
         header: 'Change the task due date?',
     });
-    const [selectedDay, setSelectedDay] = (0, react_2.useState)(currentDueDate);
-    const [potentialNewDate, setPotentialNewDate] = (0, react_2.useState)(undefined);
-    const [toggleDialog, setToggleDialog] = (0, react_2.useState)(false);
-    const onConfirmClick = (0, react_2.useCallback)(() => {
-        if (potentialNewDate) {
-            handleDateChange(potentialNewDate);
-            setSelectedDay(potentialNewDate);
-        }
+    const [dueDate, setDueDate] = (0, react_1.useState)();
+    const [toggleDialog, setToggleDialog] = (0, react_1.useState)(false);
+    const onConfirmClick = (0, react_1.useCallback)(() => {
+        handleDateChange(dueDate);
         setToggleDialog(false);
-    }, [potentialNewDate, handleDateChange]);
-    const formattedPotentialDate = (0, react_2.useMemo)(() => potentialNewDate && (0, date_fns_1.isValid)(potentialNewDate)
-        ? (0, date_fns_1.format)(potentialNewDate, calendarDatePickerDefaultDateFormat)
-        : 'Invalid Date', [potentialNewDate]);
-    const formattedPotentialDueDate = (0, react_2.useMemo)(() => {
-        const potentialDate = calendarPotentialDueDate(currentDueDate, potentialNewDate, originalDueDate);
-        return potentialDate && (0, date_fns_1.isValid)(potentialDate)
-            ? (0, date_fns_1.format)(potentialDate, calendarDatePickerDefaultDateFormat)
-            : 'Calculation Error';
-    }, [originalDueDate, currentDueDate, potentialNewDate]);
-    const handleDaySelect = (date) => {
-        if (date) {
-            setPotentialNewDate(date);
-            setToggleDialog(true);
-        }
-    };
-    (0, react_2.useEffect)(() => {
-        setSelectedDay(currentDueDate);
-    }, [currentDueDate]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Popover, { children: [(0, jsx_runtime_1.jsx)(CalendarPopoverButton, { children: buttonLabel }), (0, jsx_runtime_1.jsx)(CalendarPopoverPanel, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { mode: "single", selected: selectedDay, onSelect: handleDaySelect, initialFocus: true }) })] }), (0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { isOpen: toggleDialog, category: Dialog_1.Category.confirmation, header: dialog.header, message: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UpdatedDueDate, { children: formattedPotentialDate }), dialog.dueDateMessage && ((0, jsx_runtime_1.jsx)(DueDateMessage, { children: dialog.dueDateMessage })), (0, jsx_runtime_1.jsxs)(Value, { children: [(0, jsx_runtime_1.jsx)(StrikeDueDate, Object.assign({ as: 'del' }, { children: (0, date_fns_1.isValid)(originalDueDate)
-                                        ? (0, date_fns_1.format)(originalDueDate, calendarDatePickerDefaultDateFormat)
-                                        : 'Invalid Original Date' })), formattedPotentialDueDate] })] }), actions: {
-                    primary: {
-                        action: onConfirmClick,
-                        title: primaryButtonTitle,
-                    },
-                    secondary: {
-                        action: () => setToggleDialog(false),
-                        title: secondaryButtonTitle,
-                    },
-                } })] }));
+    }, [dueDate, setToggleDialog, handleDateChange]);
+    const formattedDueDate = (0, react_1.useMemo)(() => dueDate &&
+        (0, date_fns_1.format)(new Date(dueDate.year, dueDate.month, dueDate.day), calendarDatePickerDefaultDateFormat), [dueDate]);
+    const formattedPotentialDueDate = (0, react_1.useMemo)(() => dueDate &&
+        (0, date_fns_1.format)(calendarPotentialDueDate(currentDueDate, dueDate, originalDueDate), calendarDatePickerDefaultDateFormat), [originalDueDate, currentDueDate, dueDate]);
+    const onDatePickerChange = (0, react_1.useCallback)((date) => {
+        setDueDate(date);
+        setToggleDialog(true);
+        const button = document.querySelector('.DatePicker button');
+        button.blur();
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Calendar, null,
+            react_1.default.createElement(react_modern_calendar_datepicker_1.default, { value: calendarGetDay(currentDueDate), onChange: onDatePickerChange, calendarPopperPosition: datePickerConfigs.position, colorPrimary: datePickerConfigs.color, calendarSelectedDayClassName: datePickerConfigs.selectedDayClassName, calendarClassName: datePickerConfigs.calendarClassName, renderInput: Button })),
+        react_1.default.createElement(Dialog_1.Dialog, { isOpen: toggleDialog, category: Dialog_1.Category.confirmation, header: dialog.header, message: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(UpdatedDueDate, null, formattedDueDate),
+                dialog.dueDateMessage && (react_1.default.createElement(DueDateMessage, null, dialog.dueDateMessage)),
+                react_1.default.createElement(Value, null,
+                    react_1.default.createElement(StrikeDueDate, { as: 'del' }, (0, date_fns_1.format)(originalDueDate, calendarDatePickerDefaultDateFormat)),
+                    formattedPotentialDueDate)), actions: {
+                primary: {
+                    action: onConfirmClick,
+                    title: primaryButtonTitle,
+                },
+                secondary: {
+                    action: () => setToggleDialog(false),
+                    title: secondaryButtonTitle,
+                },
+            } })));
 };
 exports.CalendarDatePicker = CalendarDatePicker;
-const CalendarPopoverButton = (0, styled_components_1.default)(react_1.PopoverButton) `
-  /* Add styles similar to your original PrimaryButton or specific needs */
-  border: 1px solid
-    ${(props) => props.theme.colors.button.default.border.default};
-  background: ${(props) => props.theme.colors.button.default.background.default};
-  color: ${(props) => props.theme.colors.button.default.color.default};
-  padding: 10px 15px;
-  border-radius: ${(props) => props.theme.grid.radius.small};
-  cursor: pointer;
-  font-family: ${(props) => props.theme.font.family.sans};
-  font-size: ${(props) => props.theme.font.size.medium};
-
-  &:hover {
-    background: ${(props) => props.theme.colors.button.default.background.hover};
-  }
-`;
-const CalendarPopoverPanel = (0, styled_components_1.default)(react_1.PopoverPanel) `
-  background: ${(props) => props.theme.colors.background.primary};
-  border: 1px solid ${(props) => props.theme.colors.border.secondary};
-  border-radius: ${(props) => props.theme.grid.radius.default};
-  box-shadow: ${(props) => props.theme.shadow.dropShadow};
-  z-index: 10; /* Ensure it's above other content */
-  margin-top: 4px;
-
-  /* Target react-day-picker internal classes for styling */
-  .rdp {
-    --rdp-cell-size: 36px; /* Adjust size */
-    --rdp-accent-color: ${(props) => props.theme.colors.brand.default};
-    --rdp-background-color: ${(props) => props.theme.colors.brand.xlight};
-    /* Add more overrides as needed */
-    margin: ${(props) => props.theme.grid.unit * 2}px; /* Add some padding */
-  }
-  .rdp-day_selected {
-    font-weight: bold;
-  }
-`;
 const StrikeDueDate = (0, styled_components_1.default)(Dialog_1.MessageContainer) `
   margin: 0;
   min-height: min-content;
@@ -119,6 +102,41 @@ const Value = styled_components_1.default.div `
   align-items: center;
   line-height: 1;
 `;
+const Calendar = styled_components_1.default.div `
+  flex: 1;
+
+  .DatePicker {
+    width: 100%;
+  }
+
+  .DatePicker__calendarContainer {
+    position: absolute;
+    top: unset;
+    left: unset !important;
+    right: 0 !important;
+    transform: unset !important;
+  }
+
+  .Calendar__weekDay {
+    color: #e6e6e6;
+    font-size: ${(props) => props.theme.font.size.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.large};
+    font-weight: ${(props) => props.theme.font.weight.medium};
+  }
+
+  .Calendar__day:not(.-blank):not(.-selected):hover {
+    background: #f2fbfc !important;
+  }
+
+  .Calendar__day.-today:hover::after {
+    opacity: 0.5 !important;
+  }
+
+  .selected-day {
+    color: ${(props) => props.theme.colors.text.primary} !important;
+    border: 1px solid ${(props) => props.theme.colors.border.primary} !important;
+  }
+`;
 const UpdatedDueDate = styled_components_1.default.div `
   background: ${(props) => props.theme.colors.background.secondary};
   color: ${(props) => props.theme.colors.text.primary};

package/dist/cjs/components/Dialog.js

@@ -1,4 +1,19 @@
 "use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -13,8 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = exports.Category = exports.MessageContainer = exports.DialogModalBody = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
 const icons_1 = require("./icons");
@@ -71,26 +85,56 @@ var Category;
     Category["confirmation"] = "confirmation";
     Category["warning"] = "warning";
 })(Category = exports.Category || (exports.Category = {}));
-const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, Object.assign({ disabled: props.disabled, form: "formDialog", type: "submit" }, { children: props.title }))) : ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, Object.assign({ disabled: props.disabled, onClick: props.action, autoFocus: true }, { children: props.title })))) : props.hasForm ? ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, Object.assign({ disabled: props.disabled, form: "formDialog", type: "submit" }, { children: props.title }))) : ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, Object.assign({ disabled: props.disabled, onClick: props.action, autoFocus: true }, { children: props.title })));
-const SecondaryAction = (props) => ((0, jsx_runtime_1.jsx)(Button_1.SecondaryButton, Object.assign({ disabled: props.disabled, onClick: props.action }, { children: props.title })));
-const Dialog = ({ actions, isOpen, header, message, category, children, confirmFieldText, className, }) => {
-    const [primaryActionDisabled, setPrimaryActionDisabled] = (0, react_1.useState)(true);
-    (0, react_1.useEffect)(() => {
-        setPrimaryActionDisabled(!!confirmFieldText);
-    }, [confirmFieldText]);
-    const checkInputValue = (0, react_1.useCallback)((event) => {
-        const testingVal = confirmFieldText && confirmFieldText.toUpperCase();
-        const target = event.target;
-        const newVal = target.value.toUpperCase();
-        setPrimaryActionDisabled(newVal !== testingVal);
-    }, [confirmFieldText]);
-    const handleSubmit = (0, react_1.useCallback)((e) => __awaiter(void 0, void 0, void 0, function* () {
-        e.preventDefault();
-        if (!primaryActionDisabled) {
-            actions.primary.action();
-        }
-    }), [primaryActionDisabled, actions.primary]);
-    const renderButtons = (0, react_1.useCallback)((disabled) => ((0, jsx_runtime_1.jsx)(ButtonsContainer, { children: actions.secondary ? (!actions.primary.isDestructive ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryAction, { action: actions.secondary.action, hasForm: !!confirmFieldText, title: actions.secondary.title }), (0, jsx_runtime_1.jsx)(PrimaryAction, { action: actions.primary.action, disabled: disabled, title: actions.primary.title || 'Dismiss' })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PrimaryAction, { action: actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!confirmFieldText, title: actions.primary.title || 'Dismiss' }), (0, jsx_runtime_1.jsx)(SecondaryAction, { action: actions.secondary.action, title: actions.secondary.title })] }))) : ((0, jsx_runtime_1.jsx)(PrimaryAction, { action: actions.primary.action, disabled: disabled, isDestructive: actions.primary.isDestructive, hasForm: !!confirmFieldText, title: actions.primary.title || 'Dismiss' })) })), [actions, confirmFieldText]);
-    return ((0, jsx_runtime_1.jsx)(StyledModal_1.StyledModal, Object.assign({ isOpen: isOpen, onRequestClose: actions.onClose, shouldCloseOnOverlayClick: true, className: className }, { children: (0, jsx_runtime_1.jsxs)(exports.DialogModalBody, { children: [(0, jsx_runtime_1.jsxs)(HeaderContainer, { children: [category === Category.error && ((0, jsx_runtime_1.jsx)(Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionRedIcon, {}) })), category === Category.warning && ((0, jsx_runtime_1.jsx)(Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionOrangeIcon, {}) })), header] }), (0, jsx_runtime_1.jsxs)(exports.MessageContainer, { children: [message, confirmFieldText && ((0, jsx_runtime_1.jsx)("form", Object.assign({ id: "formDialog", onSubmit: handleSubmit }, { children: (0, jsx_runtime_1.jsx)(ConfirmationTextField, { autoFocus: true, onChange: checkInputValue, placeholder: 'Please type: ' + confirmFieldText, required: true }) }))), children] }), renderButtons(primaryActionDisabled)] }) })));
-};
+const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (react_1.default.createElement(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (react_1.default.createElement(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title))) : props.hasForm ? (react_1.default.createElement(Button_1.PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (react_1.default.createElement(Button_1.PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title));
+const SecondaryAction = (props) => (react_1.default.createElement(Button_1.SecondaryButton, { disabled: props.disabled, onClick: props.action }, props.title));
+class Dialog extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            primaryActionDisabled: true,
+        };
+        this.renderButtons = (props, disabled) => (react_1.default.createElement(ButtonsContainer, null, props.actions.secondary ? (!props.actions.primary.isDestructive ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(SecondaryAction, { action: props.actions.secondary.action, hasForm: !!this.props.confirmFieldText, title: props.actions.secondary.title }),
+            react_1.default.createElement(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, title: props.actions.primary.title || 'Dismiss' }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }),
+            react_1.default.createElement(SecondaryAction, { action: props.actions.secondary.action, title: props.actions.secondary.title })))) : (react_1.default.createElement(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: props.actions.primary.isDestructive, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }))));
+        this.checkInputValue = (event) => {
+            const testingVal = this.props.confirmFieldText && this.props.confirmFieldText.toUpperCase();
+            const target = event.target;
+            const newVal = target.value.toUpperCase();
+            this.setDisabledBtnState(newVal !== testingVal);
+        };
+        this.setDisabledBtnState = (state) => {
+            this.setState({ primaryActionDisabled: state });
+        };
+        this.handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
+            const { primaryActionDisabled } = this.state;
+            e.preventDefault();
+            if (!primaryActionDisabled) {
+                this.props.actions.primary.action();
+            }
+        });
+    }
+    componentDidMount() {
+        this.setDisabledBtnState(!!this.props.confirmFieldText);
+    }
+    render() {
+        const { actions, isOpen, header, message, category, children, confirmFieldText, className, } = this.props;
+        const { primaryActionDisabled } = this.state;
+        return (react_1.default.createElement(StyledModal_1.StyledModal, { isOpen: isOpen, onRequestClose: actions.onClose, shouldCloseOnOverlayClick: true, className: className },
+            react_1.default.createElement(exports.DialogModalBody, null,
+                react_1.default.createElement(HeaderContainer, null,
+                    category === Category.error && (react_1.default.createElement(Icon, null,
+                        react_1.default.createElement(icons_1.AttentionRedIcon, null))),
+                    category === Category.warning && (react_1.default.createElement(Icon, null,
+                        react_1.default.createElement(icons_1.AttentionOrangeIcon, null))),
+                    header),
+                react_1.default.createElement(exports.MessageContainer, null,
+                    message,
+                    confirmFieldText && (react_1.default.createElement("form", { id: "formDialog", onSubmit: this.handleSubmit },
+                        react_1.default.createElement(ConfirmationTextField, { autoFocus: true, onChange: this.checkInputValue, placeholder: 'Please type: ' + confirmFieldText, required: true }))),
+                    children),
+                this.renderButtons(this.props, primaryActionDisabled))));
+    }
+}
 exports.Dialog = Dialog;