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

package/dist/cjs/components/AlertMessage.js

@@ -1,19 +1,4 @@
 "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);
@@ -37,13 +22,10 @@ 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 react_1 = __importDefault(require("react"));
-const react_sizeme_1 = require("react-sizeme");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_components_1 = __importStar(require("styled-components"));
 const Button_1 = require("./Button");
 const icons_1 = require("./icons");
@@ -64,12 +46,6 @@ 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;
@@ -141,28 +117,16 @@ const alertContainers = {
     info: InfoAlertContainer,
     warning: WarningAlertContainer,
 };
-class AlertMessage extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            isOpen: true,
-        };
-        this.handleClose = () => {
-            this.setState({ isOpen: false });
-        };
+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;
     }
-    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))))))));
-    }
-}
+    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 })))] }) })));
+};
 exports.AlertMessage = AlertMessage;

package/dist/cjs/components/AutoSaveInput.js

@@ -1,59 +1,36 @@
 "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 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();
-            }
-        };
-        this.handleChange = (event) => {
-            this.props.field.onChange(event);
-            if (this.props.saveOn === 'change') {
-                this.handleSubmit();
+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();
             }
         };
-    }
-    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 })));
-    }
-}
+    }, [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 })));
+};
 exports.AutoSaveInput = AutoSaveInput;

package/dist/cjs/components/Avatar.js

@@ -1,48 +1,11 @@
 "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 react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("./icons");
 const AvatarContainer = styled_components_1.default.div `
@@ -73,6 +36,6 @@ const Avatar = (props) => {
     const handleSrcError = (0, react_1.useCallback)(() => {
         setSrcError(true);
     }, []);
-    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 }))));
+    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 })) })));
 };
 exports.Avatar = Avatar;

package/dist/cjs/components/ContextMenu.js

@@ -1,19 +1,4 @@
 "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);
@@ -42,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
 const Icons = __importStar(require("./icons"));
@@ -64,10 +49,8 @@ const icons = Object.entries(Icons).reduce((acc, [name, IconComponent]) => {
     acc[iconName] = IconComponent;
     return acc;
 }, {});
-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)));
-})));
+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));
+    }) })));
 exports.ContextMenu = ContextMenu;

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

@@ -1,95 +1,112 @@
 "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 = exports.calendarGetDay = void 0;
-require("react-modern-calendar-datepicker/lib/DatePicker.css");
+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");
 const date_fns_1 = require("date-fns");
-const react_1 = __importStar(require("react"));
-const react_modern_calendar_datepicker_1 = __importDefault(require("react-modern-calendar-datepicker"));
+const react_2 = require("react");
+const react_day_picker_1 = require("react-day-picker");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Dialog_1 = require("../Dialog");
-const calendarGetDay = (date) => ({
-    year: date.getFullYear(),
-    month: date.getMonth() + 1,
-    day: date.getDate(),
-});
-exports.calendarGetDay = calendarGetDay;
-const calendarPotentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
+const calendarPotentialDueDate = (stepDueDate, selectedDate, submissionDueDate) => {
+    if (!selectedDate || !(0, date_fns_1.isValid)(selectedDate)) {
+        return null;
+    }
     const duration = (0, date_fns_1.intervalToDuration)({
         start: stepDueDate,
-        end: new Date(`${dueDate.year}-${dueDate.month < 10 ? `0${dueDate.month}` : dueDate.month}-${dueDate.day < 10 ? `0${dueDate.day}` : dueDate.day}`),
+        end: selectedDate,
     });
     return (0, date_fns_1.add)(submissionDueDate, duration);
 };
 exports.calendarPotentialDueDate = calendarPotentialDueDate;
 const calendarDatePickerDefaultDateFormat = 'd MMM, EEEE';
 exports.calendarDatePickerDefaultDateFormat = calendarDatePickerDefaultDateFormat;
-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 CalendarDatePicker = ({ handleDateChange, originalDueDate, currentDueDate, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', buttonLabel = 'Change Date', }) => {
     const dialog = Object.assign({}, dialogConfigs, {
         header: 'Change the task due date?',
     });
-    const [dueDate, setDueDate] = (0, react_1.useState)();
-    const [toggleDialog, setToggleDialog] = (0, react_1.useState)(false);
-    const onConfirmClick = (0, react_1.useCallback)(() => {
-        handleDateChange(dueDate);
+    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);
+        }
         setToggleDialog(false);
-    }, [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,
-                },
-            } })));
+    }, [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,
+                    },
+                } })] }));
 };
 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;
@@ -102,41 +119,6 @@ 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,19 +1,4 @@
 "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) {
@@ -28,7 +13,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = exports.Category = exports.MessageContainer = exports.DialogModalBody = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
 const icons_1 = require("./icons");
@@ -85,56 +71,26 @@ var Category;
     Category["confirmation"] = "confirmation";
     Category["warning"] = "warning";
 })(Category = exports.Category || (exports.Category = {}));
-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))));
-    }
-}
+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)] }) })));
+};
 exports.Dialog = Dialog;