@mailstep/design-system 0.13.8 → 0.13.9-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.13.8",
+  "version": "0.13.9-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -56,7 +56,7 @@
     "@tsdown/css": "^0.22.3",
     "@types/faker": "^4.1.11",
     "@types/lodash": "^4.17.13",
-    "@types/luxon": "^3.4.2",
+    "@types/luxon": "^3.4.4",
     "@types/node": "^20.1.7",
     "@types/react": "^19.2.2",
     "@types/react-beautiful-dnd": "^13.1.2",
@@ -88,7 +88,6 @@
     "lint-staged": "^16.4.0",
     "lodash": "^4.18.0",
     "luxon": "^3.4.4",
-    "moment": "^2.30.1",
     "prettier": "2.8.8",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -139,7 +138,6 @@
     "immer": "^9.0.19",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
-    "moment": "^2.30.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-grid-layout": "^1.2.5",

package/ui/Blocks/SideMenu/MenuItem.js

@@ -1,6 +1,6 @@
 import Icon from "../../Elements/Icon/Icon.js";
 import { Paragraph3, Paragraph5 } from "../../Elements/Typography/Typography.js";
-import { ItemCount, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, SubItemsWrap } from "./styles.js";
+import { ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, SubItemsWrap } from "./styles.js";
 import SubitemTooltip from "./components/SubitemTooltip.js";
 import { useLeftMenuContext } from "./context/useLeftMenuContext.js";
 import useOutSideHover from "./hooks/useOutsideHover.js";
@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { matchPath } from "react-router";
 //#region packages/ui/Blocks/SideMenu/MenuItem.tsx
 const removeOptionalEnd = /\?$/;
-const MenuItem = ({ icon, title, link = "", items, id, count, isSubitem, isCompact, lightMode = false, separator = false, isLeftMenuOpen, onCloseLeftMenu, onClick }) => {
+const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lightMode = false, separator = false, isLeftMenuOpen, onCloseLeftMenu, onClick }) => {
 	const hasChildren = items && items?.length > 0;
 	const { expandedItem, expandItem } = useLeftMenuContext();
 	const isExpanded = expandedItem === id;
@@ -61,8 +61,6 @@ const MenuItem = ({ icon, title, link = "", items, id, count, isSubitem, isCompa
 				$isCompact: isCompact,
 				className: itemLinkWrapClassName,
 				$lightMode: lightMode,
-				$isHovering: isHovering,
-				"data-testid": id ? `menu-item-${id}` : void 0,
 				as: link ? void 0 : "a",
 				...link ? {
 					exact: true,
@@ -72,27 +70,20 @@ const MenuItem = ({ icon, title, link = "", items, id, count, isSubitem, isCompa
 				children: [/* @__PURE__ */ jsxs(ItemLabel, {
 					$isCompact: isCompact,
 					isSubitem,
-					children: [
-						!isSubitem && icon && /* @__PURE__ */ jsx(ItemIcon, {
-							className: "mainIcon",
-							$isCompact: isCompact,
-							children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
-								icon,
-								fill: "none"
-							}) : icon
-						}),
-						/* @__PURE__ */ jsx(Title, {
-							variant: "semiBold",
-							mt: 0,
-							mb: 0,
-							textAlign: isCompact ? "center" : "left",
-							children: /* @__PURE__ */ jsx(OverflowWithEllipsis, { children: title })
-						}),
-						!!count && /* @__PURE__ */ jsx(ItemCount, {
-							$isCompact: isCompact,
-							children: count
-						})
-					]
+					children: [!isSubitem && icon && /* @__PURE__ */ jsx(ItemIcon, {
+						className: "mainIcon",
+						$isCompact: isCompact,
+						children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+							icon,
+							fill: "none"
+						}) : icon
+					}), /* @__PURE__ */ jsx(Title, {
+						variant: "semiBold",
+						mt: 0,
+						mb: 0,
+						textAlign: isCompact ? "center" : "left",
+						children: /* @__PURE__ */ jsx(OverflowWithEllipsis, { children: title })
+					})]
 				}), !isCompact && hasChildren && /* @__PURE__ */ jsx(ItemDropdownArrow, {
 					icon: "goDown",
 					$lightMode: lightMode

package/ui/Blocks/SideMenu/SideMenu.js

@@ -1,5 +1,4 @@
 import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
-import { HamburgerMenuButton } from "./components/HamburgerMenu.js";
 import MenuFooter from "./components/Footer.js";
 import { LeftMenuProvider } from "./context/LeftMenuContext.js";
 import { BodyWrap, Container, Overlay, ScrollWrap, TopLevelWrap } from "./styles.js";
@@ -7,7 +6,7 @@ import MenuItem_default from "./MenuItem.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/SideMenu/SideMenu.tsx
-const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlwaysVisible, onCloseLeftMenu, showHamburgerMenu = false, variant = "dark", children }) => {
+const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlwaysVisible, onCloseLeftMenu, variant = "dark", children }) => {
 	const lightMode = variant === "light";
 	return /* @__PURE__ */ jsx(LeftMenuProvider, { children: /* @__PURE__ */ jsxs(Container, {
 		isLeftMenuOpen,
@@ -17,28 +16,21 @@ const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlways
 			isLeftMenuOpen,
 			ref: useClickOutside({ onClose: onCloseLeftMenu }),
 			lightMode,
-			children: [
-				showHamburgerMenu && /* @__PURE__ */ jsx(HamburgerMenuButton, {
-					isLeftMenuOpen,
-					onClick: onCloseLeftMenu
-				}),
-				/* @__PURE__ */ jsx(ScrollWrap, { children: /* @__PURE__ */ jsxs(BodyWrap, {
-					isCompact,
-					children: [menuItems.map((item, index) => /* @__PURE__ */ jsx(MenuItem_default, {
-						isCompact,
-						isLeftMenuOpen,
-						onCloseLeftMenu,
-						lightMode,
-						separator: !!item.separator,
-						...item
-					}, `${item.id ?? item.title}-${index}`)), children]
-				}) }),
-				/* @__PURE__ */ jsx(MenuFooter, {
+			children: [/* @__PURE__ */ jsx(ScrollWrap, { children: /* @__PURE__ */ jsxs(BodyWrap, {
+				isCompact,
+				children: [menuItems.map((item, index) => /* @__PURE__ */ jsx(MenuItem_default, {
 					isCompact,
-					setIsCompact,
-					lightMode
-				})
-			]
+					isLeftMenuOpen,
+					onCloseLeftMenu,
+					lightMode,
+					separator: !!item.separator,
+					...item
+				}, `${item.id ?? item.title}-${index}`)), children]
+			}) }), /* @__PURE__ */ jsx(MenuFooter, {
+				isCompact,
+				setIsCompact,
+				lightMode
+			})]
 		}), /* @__PURE__ */ jsx(Overlay, {})]
 	}) });
 };

package/ui/Blocks/SideMenu/components/HamburgerMenu.d.ts

@@ -1,8 +1,6 @@
-import React from 'react';
 type Props = {
     isLeftMenuOpen?: boolean;
     onClick?: () => void;
-    mr?: string;
 };
-export declare const HamburgerMenuButton: ({ isLeftMenuOpen, onClick, mr }: Props) => React.ReactElement;
+export declare const HamburgerMenuButton: ({ isLeftMenuOpen, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -35,11 +35,11 @@ const HamburgerMenuWrapper = styled$2(x.div)`
     display: none;
   }
 `;
-const HamburgerMenuButton = ({ isLeftMenuOpen, onClick, mr = "8px" }) => {
+const HamburgerMenuButton = ({ isLeftMenuOpen, onClick }) => {
 	const theme = useTheme();
-	const neutralColor = th$1.color("bgLightGray2")({ theme });
+	const neutralColor = th$1.color("neutral20")({ theme });
 	return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
-		mr,
+		mr: "8px",
 		onClick,
 		isLeftMenuOpen: !!isLeftMenuOpen,
 		children: isLeftMenuOpen ? /* @__PURE__ */ jsx(MobileCancel, { fill: neutralColor }) : /* @__PURE__ */ jsx(HamburgerMenu, {

package/ui/Blocks/SideMenu/components/SubitemTooltip.js

@@ -1,12 +1,12 @@
 import { H6 } from "../../../Elements/Typography/Typography.js";
 import { Portal } from "../../../Elements/Portal/index.js";
-import { ItemCount, ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
+import { ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Popper } from "react-popper";
 //#region packages/ui/Blocks/SideMenu/components/SubitemTooltip.tsx
-const TooltipItem = ({ title, link = "", lightMode, count }) => {
+const TooltipItem = ({ title, link = "", lightMode }) => {
 	return /* @__PURE__ */ jsx(ItemLinkWrap, {
 		...useMemo(() => {
 			return link.startsWith("https://") ? {
@@ -16,14 +16,14 @@ const TooltipItem = ({ title, link = "", lightMode, count }) => {
 		}, [link]),
 		exact: true,
 		$lightMode: lightMode,
-		children: /* @__PURE__ */ jsxs(TooltipItemLabel, { children: [/* @__PURE__ */ jsx(H6, {
+		children: /* @__PURE__ */ jsx(TooltipItemLabel, { children: /* @__PURE__ */ jsx(H6, {
 			variant: "medium",
 			children: title
-		}), !!count && /* @__PURE__ */ jsx(ItemCount, { children: count })] })
+		}) })
 	});
 };
 const PopoverWrapper = styled.div`
-  z-index: 31;
+  z-index: 5;
   display: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "block" : "none"};
   @media (min-width: 1024px) {
     display: block;

package/ui/Blocks/SideMenu/stories/menuItems.d.ts

@@ -4,7 +4,6 @@ export declare const menuItems: ({
     link: string;
     id: string;
     items?: undefined;
-    count?: undefined;
 } | {
     title: string;
     icon: import("react/jsx-runtime").JSX.Element;
@@ -15,22 +14,4 @@ export declare const menuItems: ({
         link: string;
         id: string;
     }[];
-    count?: undefined;
-} | {
-    title: string;
-    icon: import("react/jsx-runtime").JSX.Element;
-    link: string;
-    id: string;
-    count: number;
-    items: ({
-        title: string;
-        link: string;
-        id: string;
-        count?: undefined;
-    } | {
-        title: string;
-        link: string;
-        id: string;
-        count: number;
-    })[];
 })[];

package/ui/Blocks/SideMenu/stories/menuItems.js

@@ -53,7 +53,6 @@ const menuItems = [
 		icon: /* @__PURE__ */ jsx(Expeditions, {}),
 		link: "/expeditions",
 		id: "expeditions",
-		count: 3,
 		items: [
 			{
 				title: "Expeditions",
@@ -63,8 +62,7 @@ const menuItems = [
 			{
 				title: "Outbound receipts",
 				link: "/expeditions/outbound-receipts",
-				id: "outboundReceipts",
-				count: 3
+				id: "outboundReceipts"
 			},
 			{
 				title: "Missing goods",

package/ui/Blocks/SideMenu/styles.d.ts

@@ -16,7 +16,6 @@ export declare const TooltipItemLabel: import("styled-components").StyledCompone
 export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/styled-components").Theme, {
     $isCompact?: boolean;
     $lightMode?: boolean;
-    $isHovering?: boolean;
     appearance?: "gray" | "default";
 }, never>;
 export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
@@ -42,6 +41,3 @@ export declare const BodyWrap: import("styled-components").StyledComponent<"div"
     isCompact: boolean;
 }, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
-export declare const ItemCount: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
-    $isCompact?: boolean;
-}, never>;

package/ui/Blocks/SideMenu/styles.js

@@ -67,8 +67,6 @@ const ItemDropdownArrow = styled$1(Icon)`
 const TooltipItemLabel = styled$1.div`
   line-height: 1.5;
   letter-spacing: 0.4px;
-  display: flex;
-  align-items: center;
 `;
 const ItemLinkWrap = styled$1(NavLink)`
   display: flex;
@@ -80,17 +78,14 @@ const ItemLinkWrap = styled$1(NavLink)`
   font-weight: 600;
   letter-spacing: 0.4px;
   position: relative;
-  color: ${({ $lightMode, $isHovering }) => {
-	if ($lightMode) return th$1.color("typoPrimary");
-	if ($isHovering) return "white";
-	return th$1.color("lightGray5");
-}};
+  color: ${({ $lightMode }) => $lightMode ? th$1.color("typoPrimary") : th$1.color("lightGray5")};
   transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
   transition-property: transform;
 
   &.toplevel {
     margin: ${({ $isCompact }) => $isCompact ? "0 0 12px 0" : "16px 0"};
     padding: ${({ $isCompact }) => $isCompact ? "10px 14px 6px 13px" : "9px 10px"};
+    gap: ${({ $isCompact }) => $isCompact ? "none" : "30px"};
     justify-content: ${({ $isCompact }) => $isCompact ? "center" : "space-between"};
     &.active {
       color: ${({ $lightMode }) => $lightMode ? th$1("colors.red1") : "white"};
@@ -135,7 +130,7 @@ const MenuItemContainer = styled$1.div`
    z-index: 1;
    stroke: ${({ $lightMode }) => $lightMode ? th$1.color("blue2") : void 0};
    .selected > ${ItemLabel}, .active > ${ItemLabel} {
-     color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("sideMenuSelectedText")};
+     color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("white")};
      stroke: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("blue2")};
    }
 
@@ -264,10 +259,9 @@ const OverflowWithEllipsis = styled$1.span`
   max-width: 140px;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
 `;
 const TopLevelWrap = styled$1.div`
-  background-color: ${({ lightMode }) => lightMode ? "white" : th$1("colors.sideMenuBackground")};
+  background-color: ${({ lightMode }) => lightMode ? "white" : th$1("colors.blue3")};
   border-right: 1px solid ${th$1("colors.lightGray6")};
   height: -webkit-fill-available;
   transition: width 0.5s ease;
@@ -312,28 +306,5 @@ const Overlay = styled$1.div`
     display: none;
   }
 `;
-const ItemCount = styled$1.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  min-width: 20px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 9px;
-  background-color: #ffffff;
-  color: ${th$1.color("red1")};
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 600;
-  margin-left: 8px;
-
-  ${({ $isCompact }) => $isCompact && css`
-      position: absolute;
-      top: 0;
-      right: 2px;
-      margin-left: 0;
-    `}
-`;
 //#endregion
-export { BodyWrap, Container, ItemCount, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, Overlay, ScrollWrap, SubItemsWrap, TooltipItemLabel, TooltipWrap, TopLevelWrap };
+export { BodyWrap, Container, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, Overlay, ScrollWrap, SubItemsWrap, TooltipItemLabel, TooltipWrap, TopLevelWrap };

package/ui/Blocks/SideMenu/types.d.ts

@@ -10,7 +10,6 @@ export type MenuItemType = {
     lightMode?: boolean;
     separator?: boolean;
     appearance?: 'gray' | 'default';
-    count?: number;
 };
 export type SideMenuProps = {
     menuItems: MenuItemType[];
@@ -19,7 +18,6 @@ export type SideMenuProps = {
     isLeftMenuOpen?: boolean;
     isAlwaysVisible?: boolean;
     onCloseLeftMenu?: () => void;
-    showHamburgerMenu?: boolean;
     variant?: 'dark' | 'light';
     children?: ReactNode;
 };

package/ui/Forms/DatePicker/DatePicker.d.ts

@@ -1,11 +1,6 @@
 import React from 'react';
 import type { SpaceAround } from '../../Elements/SpaceAround';
 import type { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
-import 'moment/dist/locale/cs';
-import 'moment/dist/locale/el';
-import 'moment/dist/locale/it';
-import 'moment/dist/locale/ru';
-import 'moment/dist/locale/sk';
 export type DatePickerType = DatetimepickerProps & {
     onChange: (value: string | Date) => void;
     disabled?: boolean;

package/ui/Forms/DatePicker/DatePicker.js

@@ -8,11 +8,6 @@ import { DatePickerBase } from "./styles.js";
 import React, { useCallback, useContext } from "react";
 import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import "moment/dist/locale/cs";
-import "moment/dist/locale/el";
-import "moment/dist/locale/it";
-import "moment/dist/locale/ru";
-import "moment/dist/locale/sk";
 //#region packages/ui/Forms/DatePicker/DatePicker.tsx
 const defaultDateFormat = "DD.MM.YYYY";
 const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat = defaultDateFormat, timeFormat = false, open, secondValue = null, input, icon = true, showInputLabel = false, showCalendarLabel = true, spaceAround = false, className, onClear, onInputChange, ...passProps }) => {
@@ -50,11 +45,11 @@ const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isVa
 		return renderCalendar();
 	}, [label, showInputLabel]);
 	const handleChange = useCallback((value) => {
-		const parsed = typeof value === "string" ? value : value?.toDate?.();
+		const parsed = typeof value === "string" ? value : value?.toJSDate?.();
 		onChange?.(parsed);
 	}, [onChange]);
 	const handleIsValid = useCallback((current, selected) => {
-		const parsed = [current?.toDate?.(), selected?.toDate?.()];
+		const parsed = [current?.toJSDate?.(), selected?.toJSDate?.()];
 		return isValidDate ? isValidDate(...parsed) : true;
 	}, [isValidDate]);
 	return /* @__PURE__ */ jsx(SpaceAround_default, {

package/ui/Forms/DatePicker/Datetime/DateTime.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import moment from 'moment';
 import type { DatetimepickerProps } from './types';
 export default class Datetime extends React.Component<DatetimepickerProps> {
     static defaultProps: {
@@ -20,13 +19,11 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
         inputProps: {};
         timeConstraints: {};
         isValidDate: () => boolean;
-        strictParsing: boolean;
         closeOnSelect: boolean;
         closeOnTab: boolean;
         closeOnClickOutside: boolean;
         renderView: (_: any, renderFunc: any) => any;
     };
-    static moment: typeof moment;
     constructor(props: any);
     render(): import("react/jsx-runtime").JSX.Element;
     renderInput(): import("react/jsx-runtime").JSX.Element | undefined;
@@ -46,13 +43,11 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     getClassName(): string;
     isOpen(): any;
     getUpdateOn(dateFormat: any): string;
-    getLocaleData(): any;
-    getDateFormat(): any;
-    getTimeFormat(): any;
-    getFormat(type: any): any;
+    getDateFormat(): string;
+    getTimeFormat(): string;
+    getFormat(type: any): string;
     _showView: (view: any, date: any) => void;
-    updateTime(op: any, amount: any, type: any, toSelected: any): void;
-    viewToMethod: {
+    viewToUnit: {
         days: string;
         months: string;
         years: string;
@@ -69,8 +64,9 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     _openCalendar: () => void;
     _closeCalendar: () => void;
     _handleClickOutside: () => void;
-    localMoment(date: any, format: any, props: any): any;
-    checkTZ(): void;
+    getZone(): string;
+    localize(date: any): any;
+    localDate(date: any, format: any): any;
     componentDidUpdate(prevProps: any): void;
     regenerateDates(): void;
     getSelectedDate(): any;

package/ui/Forms/DatePicker/Datetime/DateTime.js

@@ -1,9 +1,11 @@
+import "./utils/constants.js";
+import { toLuxonFormat } from "./utils/toLuxonFormat.js";
 import DaysView from "./views/DaysView.js";
 import MonthsView from "./views/MonthsView.js";
 import YearsView from "./views/YearsView.js";
 import React from "react";
+import { DateTime } from "luxon";
 import { jsx, jsxs } from "react/jsx-runtime";
-import moment from "moment";
 import onClickOutside from "react-onclickoutside";
 //#region packages/ui/Forms/DatePicker/Datetime/DateTime.tsx
 const viewModes = {
@@ -37,23 +39,19 @@ var Datetime = class extends React.Component {
 			isValidDate: function() {
 				return true;
 			},
-			strictParsing: true,
 			closeOnSelect: false,
 			closeOnTab: true,
 			closeOnClickOutside: true,
 			renderView: (_, renderFunc) => renderFunc()
 		};
 	}
-	static {
-		this.moment = moment;
-	}
 	constructor(props) {
 		super(props);
 		this._renderCalendar = () => {
 			const props = this.props;
 			const state = this.state;
 			let viewProps = {
-				viewDate: state.viewDate.clone(),
+				viewDate: state.viewDate,
 				label: props.label,
 				isSecondDatePicker: props.isSecondDatePicker,
 				secondValue: props.secondValue,
@@ -64,7 +62,6 @@ var Datetime = class extends React.Component {
 				onChangeOthers: props.onChangeOthers,
 				reset: this._reset,
 				navigate: this._viewNavigate,
-				moment,
 				showView: this._showView
 			};
 			switch (state.currentView) {
@@ -90,15 +87,15 @@ var Datetime = class extends React.Component {
 			}
 		};
 		this._showView = (view, date) => {
-			const d = (date || this.state.viewDate).clone();
+			const d = date || this.state.viewDate;
 			const nextView = this.props.onBeforeNavigate(view, this.state.currentView, d);
 			if (nextView && this.state.currentView !== nextView) {
 				this.props.onNavigate(nextView);
 				this.setState({ currentView: nextView });
 			}
 		};
-		this.viewToMethod = {
-			days: "date",
+		this.viewToUnit = {
+			days: "day",
 			months: "month",
 			years: "year"
 		};
@@ -110,35 +107,33 @@ var Datetime = class extends React.Component {
 		this._updateDate = (e) => {
 			let currentView = this.state.currentView;
 			let updateOnView = this.getUpdateOn(this.getFormat("date"));
-			let viewDate = this.state.viewDate.clone();
-			viewDate[this.viewToMethod[currentView]](parseInt(e.target.getAttribute("data-value"), 10));
+			const values = { [this.viewToUnit[currentView]]: parseInt(e.target.getAttribute("data-value"), 10) };
 			if (currentView === "days") {
-				viewDate.month(parseInt(e.target.getAttribute("data-month"), 10));
-				viewDate.year(parseInt(e.target.getAttribute("data-year"), 10));
+				values.month = parseInt(e.target.getAttribute("data-month"), 10);
+				values.year = parseInt(e.target.getAttribute("data-year"), 10);
 			}
+			const viewDate = this.state.viewDate.set(values);
 			let update = { viewDate };
 			if (currentView === updateOnView) {
-				update.selectedDate = viewDate.clone();
-				update.inputValue = viewDate.format(this.getFormat("datetime"));
+				update.selectedDate = viewDate;
+				update.inputValue = viewDate.toFormat(this.getFormat("datetime"));
 				if (this.props.open === void 0 && this.props.input && this.props.closeOnSelect) this._closeCalendar();
-				this.props.onChange(viewDate.clone());
+				this.props.onChange(viewDate);
 			} else this._showView(this.nextView[currentView], viewDate);
 			this.setState(update);
 		};
 		this._viewNavigate = (modifier, unit) => {
-			let viewDate = this.state.viewDate.clone();
-			viewDate.add(modifier, unit);
+			const viewDate = this.state.viewDate.plus({ [unit]: modifier });
 			if (modifier > 0) this.props.onNavigateForward(modifier, unit);
 			else this.props.onNavigateBack(-modifier, unit);
 			this.setState({ viewDate });
 		};
 		this._setTime = (type, value) => {
-			let date = (this.getSelectedDate() || this.state.viewDate).clone();
-			date[type](value);
+			const date = (this.getSelectedDate() || this.state.viewDate).set({ [type]: value });
 			if (!this.props.value) this.setState({
 				selectedDate: date,
-				viewDate: date.clone(),
-				inputValue: date.format(this.getFormat("datetime"))
+				viewDate: date,
+				inputValue: date.toFormat(this.getFormat("datetime"))
 			});
 			this.props.onChange(date);
 		};
@@ -166,14 +161,14 @@ var Datetime = class extends React.Component {
 		this._onInputChange = (e) => {
 			if (!this.callHandler(this.props.inputProps.onChange, e)) return;
 			const value = e.target ? e.target.value : e;
-			const localMoment = this.localMoment(value, this.getFormat("datetime"));
+			const parsedDate = this.localDate(value, this.getFormat("datetime"));
 			let update = { inputValue: value };
-			if (localMoment.isValid()) {
-				update.selectedDate = localMoment;
-				update.viewDate = localMoment.clone().startOf("month");
+			if (parsedDate.isValid) {
+				update.selectedDate = parsedDate;
+				update.viewDate = parsedDate.startOf("month");
 			} else update.selectedDate = null;
 			this.setState(update, () => {
-				this.props.onChange(localMoment.isValid() ? localMoment : this.state.inputValue);
+				this.props.onChange(parsedDate.isValid ? parsedDate : this.state.inputValue);
 			});
 		};
 		this._onInputKeyDown = (e) => {
@@ -218,12 +213,11 @@ var Datetime = class extends React.Component {
 		let props = this.props;
 		let inputFormat = this.getFormat("datetime");
 		let selectedDate = this.parseDate(props.value || props.initialValue, inputFormat);
-		this.checkTZ();
 		return {
 			open: !props.input,
 			currentView: props.initialViewMode || this.getInitialView(),
 			viewDate: this.getInitialViewDate(selectedDate),
-			selectedDate: selectedDate && selectedDate.isValid() ? selectedDate : void 0,
+			selectedDate: selectedDate && selectedDate.isValid ? selectedDate : void 0,
 			inputValue: this.getInitialInputValue(selectedDate)
 		};
 	}
@@ -232,15 +226,13 @@ var Datetime = class extends React.Component {
 		let viewDate;
 		if (propDate) {
 			viewDate = this.parseDate(propDate, this.getFormat("datetime"));
-			if (viewDate && viewDate.isValid()) return viewDate;
+			if (viewDate && viewDate.isValid) return viewDate;
 			else console.log("The initialViewDated given \"" + propDate + "\" is not valid. Using current date instead.");
-		} else if (selectedDate && selectedDate.isValid()) return selectedDate.clone();
+		} else if (selectedDate && selectedDate.isValid) return selectedDate;
 		return this.getInitialDate();
 	}
 	getInitialDate() {
-		let m = this.localMoment();
-		m.hour(0).minute(0).second(0).millisecond(0);
-		return m;
+		return this.localDate().startOf("day");
 	}
 	getInitialView() {
 		const dateFormat = this.getFormat("date");
@@ -248,9 +240,9 @@ var Datetime = class extends React.Component {
 	}
 	parseDate(date, dateFormat) {
 		let parsedDate;
-		if (date && typeof date === "string") parsedDate = this.localMoment(date, dateFormat);
-		else if (date) parsedDate = this.localMoment(date);
-		if (parsedDate && !parsedDate.isValid()) parsedDate = null;
+		if (date && typeof date === "string") parsedDate = this.localDate(date, dateFormat);
+		else if (date) parsedDate = this.localDate(date);
+		if (parsedDate && !parsedDate.isValid) parsedDate = null;
 		return parsedDate;
 	}
 	getClassName() {
@@ -268,27 +260,22 @@ var Datetime = class extends React.Component {
 	}
 	getUpdateOn(dateFormat) {
 		if (this.props.updateOnView) return this.props.updateOnView;
-		if (dateFormat.match(/[lLD]/)) return viewModes.DAYS;
-		if (dateFormat.indexOf("M") !== -1) return viewModes.MONTHS;
-		if (dateFormat.indexOf("Y") !== -1) return viewModes.YEARS;
+		const tokens = dateFormat.replace(/'[^']*'/g, "");
+		if (tokens.match(/[dD]/)) return viewModes.DAYS;
+		if (tokens.match(/[ML]/)) return viewModes.MONTHS;
+		if (tokens.indexOf("y") !== -1) return viewModes.YEARS;
 		return viewModes.DAYS;
 	}
-	getLocaleData() {
-		let p = this.props;
-		return this.localMoment(p.value || p.defaultValue || /* @__PURE__ */ new Date()).localeData();
-	}
 	getDateFormat() {
-		const locale = this.getLocaleData();
 		let format = this.props.dateFormat;
-		if (format === true) return locale.longDateFormat("L");
-		if (format) return format;
+		if (format === true) return "D";
+		if (format) return toLuxonFormat(format);
 		return "";
 	}
 	getTimeFormat() {
-		const locale = this.getLocaleData();
 		let format = this.props.timeFormat;
-		if (format === true) return locale.longDateFormat("LT");
-		return format || "";
+		if (format === true) return "t";
+		return format ? toLuxonFormat(format) : "";
 	}
 	getFormat(type) {
 		if (type === "date") return this.getDateFormat();
@@ -297,24 +284,23 @@ var Datetime = class extends React.Component {
 		let timeFormat = this.getTimeFormat();
 		return dateFormat && timeFormat ? dateFormat + " " + timeFormat : dateFormat || timeFormat;
 	}
-	updateTime(op, amount, type, toSelected) {
-		let update = {};
-		const date = toSelected ? "selectedDate" : "viewDate";
-		update[date] = this.state[date].clone()[op](amount, type);
-		this.setState(update);
+	getZone() {
+		if (this.props.utc) return "utc";
+		return this.props.displayTimeZone || "local";
 	}
-	localMoment(date, format, props) {
-		props = props || this.props;
-		let m = null;
-		if (props.utc) m = moment.utc(date, format, props.strictParsing);
-		else if (props.displayTimeZone) m = moment.tz(date, format, props.displayTimeZone);
-		else m = moment(date, format, props.strictParsing);
-		if (props.locale) m.locale(props.locale);
-		return m;
+	localize(date) {
+		const zoned = date.setZone(this.getZone());
+		return this.props.locale ? zoned.setLocale(this.props.locale) : zoned;
 	}
-	checkTZ() {
-		const { displayTimeZone } = this.props;
-		if (displayTimeZone && !this.tzWarning && !moment.tz) this.tzWarning = true;
+	localDate(date, format) {
+		const zone = this.getZone();
+		if (date === void 0) return this.localize(DateTime.now());
+		if (typeof date === "string") return this.localize(DateTime.fromFormat(date, format, {
+			zone,
+			locale: this.props.locale
+		}));
+		if (DateTime.isDateTime(date)) return this.localize(date);
+		return this.localize(DateTime.fromJSDate(date instanceof Date ? date : new Date(date)));
 	}
 	componentDidUpdate(prevProps) {
 		if (prevProps === this.props) return;
@@ -323,7 +309,7 @@ var Datetime = class extends React.Component {
 		[
 			"locale",
 			"utc",
-			"displayZone",
+			"displayTimeZone",
 			"dateFormat",
 			"timeFormat"
 		].forEach(function(p) {
@@ -331,49 +317,33 @@ var Datetime = class extends React.Component {
 		});
 		if (needsUpdate) this.regenerateDates();
 		if (thisProps.value && thisProps.value !== prevProps.value) this.setViewDate(thisProps.value);
-		this.checkTZ();
 	}
 	regenerateDates() {
-		const props = this.props;
-		let viewDate = this.state.viewDate.clone();
-		let selectedDate = this.state.selectedDate && this.state.selectedDate.clone();
-		if (props.locale) {
-			viewDate.locale(props.locale);
-			selectedDate && selectedDate.locale(props.locale);
-		}
-		if (props.utc) {
-			viewDate.utc();
-			selectedDate && selectedDate.utc();
-		} else if (props.displayTimeZone) {
-			viewDate.tz(props.displayTimeZone);
-			selectedDate && selectedDate.tz(props.displayTimeZone);
-		} else {
-			viewDate.locale();
-			selectedDate && selectedDate.locale();
-		}
+		const viewDate = this.localize(this.state.viewDate);
+		const selectedDate = this.state.selectedDate && this.localize(this.state.selectedDate);
 		let update = {
 			viewDate,
 			selectedDate
 		};
-		if (selectedDate && selectedDate.isValid()) update.inputValue = selectedDate.format(this.getFormat("datetime"));
+		if (selectedDate && selectedDate.isValid) update.inputValue = selectedDate.toFormat(this.getFormat("datetime"));
 		this.setState(update);
 	}
 	getSelectedDate() {
 		if (this.props.value === void 0) return this.state.selectedDate;
 		let selectedDate = this.parseDate(this.props.value, this.getFormat("datetime"));
-		return selectedDate && selectedDate.isValid() ? selectedDate : false;
+		return selectedDate && selectedDate.isValid ? selectedDate : false;
 	}
 	getInitialInputValue(selectedDate) {
 		const props = this.props;
 		if (props.inputProps.value) return props.inputProps.value;
-		if (selectedDate && selectedDate.isValid()) return selectedDate.format(this.getFormat("datetime"));
+		if (selectedDate && selectedDate.isValid) return selectedDate.toFormat(this.getFormat("datetime"));
 		if (props.value && typeof props.value === "string") return props.value;
 		if (props.initialValue && typeof props.initialValue === "string") return props.initialValue;
 		return "";
 	}
 	getInputValue() {
 		let selectedDate = this.getSelectedDate();
-		return selectedDate ? selectedDate.format(this.getFormat("datetime")) : this.state.inputValue;
+		return selectedDate ? selectedDate.toFormat(this.getFormat("datetime")) : this.state.inputValue;
 	}
 	/**
 	* Set the date that is currently shown in the calendar.
@@ -386,10 +356,8 @@ var Datetime = class extends React.Component {
 			return console.log("Invalid date passed to the `setViewDate` method: " + date);
 		};
 		if (!date) return logError();
-		let viewDate;
-		if (typeof date === "string") viewDate = this.localMoment(date, this.getFormat("datetime"));
-		else viewDate = this.localMoment(date);
-		if (!viewDate || !viewDate.isValid()) return logError();
+		const viewDate = this.localDate(date, this.getFormat("datetime"));
+		if (!viewDate || !viewDate.isValid) return logError();
 		this.setState({ viewDate });
 	}
 	/**

package/ui/Forms/DatePicker/Datetime/types.d.ts

@@ -1,5 +1,5 @@
 import type { FocusEvent, FocusEventHandler, ReactNode } from 'react';
-import type { Moment } from 'moment';
+import type { DateTime } from 'luxon';
 export type ViewMode = 'years' | 'months' | 'days' | 'time';
 export interface TimeConstraint {
     min: number;
@@ -12,11 +12,11 @@ export interface TimeConstraints {
     seconds?: TimeConstraint;
     milliseconds?: TimeConstraint;
 }
-type EventOrValueHandler<Event> = (event: Event | Moment | string) => void;
+type EventOrValueHandler<Event> = (event: Event | DateTime | string) => void;
 export interface DatetimepickerProps {
-    value?: Date | string | Moment;
-    initialValue?: Date | string | Moment;
-    initialViewDate?: Date | string | Moment;
+    value?: Date | string | DateTime;
+    initialValue?: Date | string | DateTime;
+    initialViewDate?: Date | string | DateTime;
     initialViewMode?: ViewMode;
     updateOnView?: string;
     dateFormat?: boolean | string;
@@ -26,11 +26,11 @@ export interface DatetimepickerProps {
     locale?: string;
     utc?: boolean;
     displayTimeZone?: string;
-    onChange?: (value: Moment | string) => void;
+    onChange?: (value: DateTime | string) => void;
     onOpen?: FocusEventHandler<any>;
     onClose?: EventOrValueHandler<FocusEvent<any>>;
     onNavigate?: (viewMode: string) => void;
-    onBeforeNavigate?: (nextView: string, currentView: string, viewDate: Moment) => string;
+    onBeforeNavigate?: (nextView: string, currentView: string, viewDate: DateTime) => string;
     onNavigateBack?: (amount: number, type: string) => void;
     onNavigateForward?: (amount: number, type: string) => void;
     className?: string;
@@ -41,7 +41,6 @@ export interface DatetimepickerProps {
     renderMonth?: (props: any, month: number, year: number, selectedDate: any) => ReactNode;
     renderYear?: (props: any, year: number, selectedDate: any) => ReactNode;
     renderInput?: (props: any, openCalendar: Function, closeCalendar: Function) => ReactNode;
-    strictParsing?: boolean;
     closeOnSelect?: boolean;
     timeConstraints?: TimeConstraints;
     closeOnClickOutside?: boolean;
@@ -52,8 +51,8 @@ export interface DatetimepickerProps {
 export interface DatetimepickerState {
     updateOn: string;
     inputFormat: string;
-    viewDate: Moment;
-    selectedDate: Moment;
+    viewDate: DateTime;
+    selectedDate: DateTime;
     inputValue: string;
     open: boolean;
     secondValue?: Date | null;

package/ui/Forms/DatePicker/Datetime/utils/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MOMENT_TOKEN_PATTERN: RegExp;
+export declare const LUXON_TOKENS: Record<string, string>;
+export declare const LOCALE_DATE_FORMAT = "D";
+export declare const LOCALE_TIME_FORMAT = "t";

package/ui/Forms/DatePicker/Datetime/utils/constants.js

@@ -0,0 +1,26 @@
+//#region packages/ui/Forms/DatePicker/Datetime/utils/constants.ts
+const MOMENT_TOKEN_PATTERN = /\[([^\]]*)]|YYYY|YY|MMMM|MMM|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g;
+const LUXON_TOKENS = {
+	YYYY: "yyyy",
+	YY: "yy",
+	MMMM: "MMMM",
+	MMM: "MMM",
+	MM: "MM",
+	M: "M",
+	DD: "dd",
+	D: "d",
+	HH: "HH",
+	H: "H",
+	hh: "hh",
+	h: "h",
+	mm: "mm",
+	m: "m",
+	ss: "ss",
+	s: "s",
+	A: "a",
+	a: "a"
+};
+const LOCALE_DATE_FORMAT = "D";
+const LOCALE_TIME_FORMAT = "t";
+//#endregion
+export { LOCALE_DATE_FORMAT, LOCALE_TIME_FORMAT, LUXON_TOKENS, MOMENT_TOKEN_PATTERN };

package/ui/Forms/DatePicker/Datetime/utils/toLuxonFormat.d.ts

@@ -0,0 +1,3 @@
+type ToLuxonFormatType = (format: string) => string;
+export declare const toLuxonFormat: ToLuxonFormatType;
+export {};

package/ui/Forms/DatePicker/Datetime/utils/toLuxonFormat.js

@@ -0,0 +1,8 @@
+import { LUXON_TOKENS, MOMENT_TOKEN_PATTERN } from "./constants.js";
+//#region packages/ui/Forms/DatePicker/Datetime/utils/toLuxonFormat.ts
+const toLuxonFormat = (format) => format.replace(MOMENT_TOKEN_PATTERN, (token, escaped) => {
+	if (escaped === void 0) return LUXON_TOKENS[token];
+	return escaped ? `'${escaped}'` : "";
+});
+//#endregion
+export { toLuxonFormat };

package/ui/Forms/DatePicker/Datetime/views/DaysView.js

@@ -3,6 +3,7 @@ import { Timepicker } from "../components/Timepicker/Timepicker.js";
 import "../components/Timepicker/index.js";
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
+import { DateTime, Info } from "luxon";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Forms/DatePicker/Datetime/views/DaysView.tsx
 var DaysView = class extends React.Component {
@@ -17,7 +18,7 @@ var DaysView = class extends React.Component {
 			isValidDate: () => true,
 			renderDay: (props, date) => /* @__PURE__ */ jsx("td", {
 				...props,
-				children: date.date()
+				children: date.day
 			})
 		};
 	}
@@ -33,28 +34,27 @@ var DaysView = class extends React.Component {
 	}
 	renderNavigation() {
 		const date = this.props.viewDate;
-		const locale = date.localeData();
 		const label = this.props.label;
 		return /* @__PURE__ */ jsx(ViewNavigation, {
 			onClickPrev: () => this.props.navigate(-1, "months"),
 			onClickSwitch: () => this.props.showView("months"),
 			onClickNext: () => this.props.navigate(1, "months"),
-			switchContent: locale.months(date, "DD[]MMMM") + " " + date.year(),
+			switchContent: date.toFormat("LLLL yyyy"),
 			switchColSpan: 3,
 			label,
-			switchProps: { "data-value": this.props.viewDate.month() }
+			switchProps: { "data-value": this.props.viewDate.month - 1 }
 		});
 	}
 	renderDayHeaders() {
-		return /* @__PURE__ */ jsx("tr", { children: getDaysOfWeek(this.props.viewDate.localeData()).map((day, index) => /* @__PURE__ */ jsx("th", {
+		return /* @__PURE__ */ jsx("tr", { children: getDaysOfWeek(this.props.viewDate.locale).map((day, index) => /* @__PURE__ */ jsx("th", {
 			className: "dow",
 			children: day
 		}, day + index)) });
 	}
 	renderDays() {
 		const date = this.props.viewDate;
-		const startOfMonth = date.clone().startOf("month");
-		const endOfMonth = date.clone().endOf("month");
+		const startOfMonth = date.startOf("month");
+		const endOfMonth = date.endOf("month");
 		let rows = [
 			[],
 			[],
@@ -63,38 +63,38 @@ var DaysView = class extends React.Component {
 			[],
 			[]
 		];
-		let startDate = date.clone().subtract(1, "months");
-		startDate.date(startDate.daysInMonth()).startOf("week");
-		let endDate = startDate.clone().add(42, "d");
+		let startDate = date.minus({ months: 1 }).endOf("month").startOf("week", { useLocaleWeeks: true });
+		let endDate = startDate.plus({ days: 42 });
 		let i = 0;
-		while (startDate.isBefore(endDate)) {
+		while (startDate < endDate) {
 			getRow(rows, i++).push(this.renderDay(startDate, startOfMonth, endOfMonth));
-			startDate.add(1, "d");
+			startDate = startDate.plus({ days: 1 });
 		}
-		return rows.map((r, i) => /* @__PURE__ */ jsx("tr", { children: r }, `${endDate.month()}_${i}`));
+		return rows.map((r, i) => /* @__PURE__ */ jsx("tr", { children: r }, `${endDate.month}_${i}`));
 	}
 	renderDay(date, startOfMonth, endOfMonth) {
 		let selectedDate = this.props.selectedDate;
 		let secondValue = this.props.secondValue;
 		let dayProps = {
-			key: date.format("M_D"),
-			"data-value": date.date(),
-			"data-month": date.month(),
-			"data-year": date.year()
+			key: date.toFormat("M_d"),
+			"data-value": date.day,
+			"data-month": date.month,
+			"data-year": date.year
 		};
+		const second = secondValue && DateTime.fromJSDate(secondValue).setZone(date.zone);
 		let className = "rdtDay";
-		if (date.isBefore(startOfMonth)) className += " rdtOld";
-		else if (date.isAfter(endOfMonth)) className += " rdtNew";
-		if (secondValue && date.isBefore(secondValue) && date.isAfter(selectedDate)) className += " rdtActiveRange";
-		if (secondValue && date.isAfter(secondValue) && date.isBefore(selectedDate)) className += " rdtActiveRange";
-		if (selectedDate && date.isSame(selectedDate, "day")) className += " rdtActive";
-		if (secondValue && date.isSame(secondValue, "day")) className += " rdtActiveSecond";
-		if (date.isSame(this.props.moment(), "day")) className += " rdtToday";
+		if (date < startOfMonth) className += " rdtOld";
+		else if (date > endOfMonth) className += " rdtNew";
+		if (second && selectedDate && date < second && date > selectedDate) className += " rdtActiveRange";
+		if (second && selectedDate && date > second && date < selectedDate) className += " rdtActiveRange";
+		if (selectedDate && date.hasSame(selectedDate, "day")) className += " rdtActive";
+		if (second && date.hasSame(second, "day")) className += " rdtActiveSecond";
+		if (date.hasSame(DateTime.now().setZone(date.zone), "day")) className += " rdtToday";
 		if (this.props.isValidDate(date) && !this.props.others?.dateTypeRepeater && !this.props.disabled) dayProps.onClick = this._setDate;
 		else className += " rdtDisabled";
 		if (this.props.others?.dateTypeRepeater || this.props.disabled) className += " rdtDisabled";
 		dayProps.className = className;
-		return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
+		return this.props.renderDay(dayProps, date, selectedDate);
 	}
 	renderFooter() {
 		const setTime = this.props.setTime;
@@ -123,19 +123,10 @@ var DaysView = class extends React.Component {
 function getRow(rows, day) {
 	return rows[Math.floor(day / 7)];
 }
-/**
-* Get a list of the days of the week
-* depending on the current locale
-* @return {array} A list with the shortname of the days
-*/
 function getDaysOfWeek(locale) {
-	const first = locale.firstDayOfWeek();
-	let dow = [];
-	let i = 0;
-	locale._weekdaysMin.forEach(function(day) {
-		dow[(7 + i++ - first) % 7] = day;
-	});
-	return dow;
+	const weekdays = Info.weekdays("short", { locale }).map((day) => day.slice(0, 2));
+	const firstDayIndex = Info.getStartOfWeek({ locale }) - 1;
+	return [...weekdays.slice(firstDayIndex), ...weekdays.slice(0, firstDayIndex)];
 }
 //#endregion
 export { DaysView as default };

package/ui/Forms/DatePicker/Datetime/views/MonthsView.js

@@ -1,5 +1,6 @@
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
+import { Info } from "luxon";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Forms/DatePicker/Datetime/views/MonthsView.tsx
 var MonthsView = class extends React.Component {
@@ -16,11 +17,12 @@ var MonthsView = class extends React.Component {
 		});
 	}
 	renderNavigation() {
+		let year = this.props.viewDate.year;
 		return /* @__PURE__ */ jsx(ViewNavigation, {
 			onClickPrev: () => this.props.navigate(-1, "years"),
 			onClickSwitch: () => this.props.showView("years"),
 			onClickNext: () => this.props.navigate(1, "years"),
-			switchContent: this.props.viewDate.year(),
+			switchContent: year,
 			switchColSpan: "2"
 		});
 	}
@@ -39,14 +41,14 @@ var MonthsView = class extends React.Component {
 		let onClick;
 		if (this.isDisabledMonth(month)) className += " rdtDisabled";
 		else onClick = this._updateSelectedMonth;
-		if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) className += " rdtActive";
+		if (selectedDate && selectedDate.year === this.props.viewDate.year && selectedDate.month === month + 1) className += " rdtActive";
 		let props = {
 			key: month,
 			className,
-			"data-value": month,
+			"data-value": month + 1,
 			onClick
 		};
-		if (this.props.renderMonth) return this.props.renderMonth(props, month, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone());
+		if (this.props.renderMonth) return this.props.renderMonth(props, month, this.props.viewDate.year, this.props.selectedDate);
 		return /* @__PURE__ */ jsx("td", {
 			...props,
 			children: this.getMonthText(month)
@@ -55,14 +57,14 @@ var MonthsView = class extends React.Component {
 	isDisabledMonth(month) {
 		let isValidDate = this.props.isValidDate;
 		if (!isValidDate) return false;
-		let date = this.props.viewDate.clone().set({ month });
-		let day = date.endOf("month").date() + 1;
-		while (day-- > 1) if (isValidDate(date.date(day))) return false;
+		let date = this.props.viewDate.set({ month: month + 1 });
+		let day = date.daysInMonth + 1;
+		while (day-- > 1) if (isValidDate(date.set({ day }))) return false;
 		return true;
 	}
 	getMonthText(month) {
-		const localMoment = this.props.viewDate;
-		return capitalize(localMoment.localeData().monthsShort(localMoment.month(month)).substring(0, 3));
+		const monthStr = Info.months("short", { locale: this.props.viewDate.locale })[month];
+		return capitalize(monthStr.substring(0, 3));
 	}
 };
 function getRow(rows, year) {

package/ui/Forms/DatePicker/Datetime/views/YearsView.js

@@ -54,22 +54,22 @@ var YearsView = class extends React.Component {
 			"data-value": year,
 			onClick
 		};
-		return this.props.renderYear(props, year, this.props.selectedDate && this.props.selectedDate.clone());
+		return this.props.renderYear(props, year, this.props.selectedDate);
 	}
 	getViewYear() {
-		return parseInt(this.props.viewDate.year() / 10, 10) * 10;
+		return parseInt(this.props.viewDate.year / 10, 10) * 10;
 	}
 	getSelectedYear() {
-		return this.props.selectedDate && this.props.selectedDate.year();
+		return this.props.selectedDate && this.props.selectedDate.year;
 	}
 	isDisabledYear(year) {
 		let cache = this.disabledYearsCache;
 		if (cache[year] !== void 0) return cache[year];
 		let isValidDate = this.props.isValidDate;
 		if (!isValidDate) return false;
-		let date = this.props.viewDate.clone().set({ year });
-		let day = date.endOf("year").dayOfYear() + 1;
-		while (day-- > 1) if (isValidDate(date.dayOfYear(day))) {
+		let date = this.props.viewDate.set({ year });
+		let day = date.daysInYear + 1;
+		while (day-- > 1) if (isValidDate(date.set({ ordinal: day }))) {
 			cache[year] = false;
 			return false;
 		}

package/ui/Forms/DatePicker/stories/hooks/useOnChange.d.ts

@@ -1,5 +1,4 @@
-import type { Moment } from 'moment';
 export declare const useOnChange: () => {
     value: string | Date;
-    handleChange: (next: string | Date | Moment) => void;
+    handleChange: (next: string | Date) => void;
 };