@availity/mui-datepicker 1.2.2 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.0.0](https://github.com/Availity/element/compare/@availity/mui-datepicker@1.2.2...@availity/mui-datepicker@2.0.0) (2025-11-17)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `1.2.2`
+* `mui-textfield` updated to version `1.2.2`
+* `mui-layout` updated to version `1.2.2`
+* `mui-paper` updated to version `1.2.2`
+* `theme-provider` updated to version `1.2.2`
+* `mui-form-utils` updated to version `1.2.2`
+
+### ⚠ BREAKING CHANGES
+
+* @mui/material upgraded to v7
+* @mui/x-* upgraded to v8
+* react upgraded to v19
+
+### Features
+
+* upgrade material and react dependencies ([51602a4](https://github.com/Availity/element/commit/51602a48c5304db6f61e2c7e772c9a3a4aa3f65c))
+
 ## [1.2.2](https://github.com/Availity/element/compare/@availity/mui-datepicker@1.2.1...@availity/mui-datepicker@1.2.2) (2025-10-31)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -1,18 +1,20 @@
 import { TextFieldProps } from '@availity/mui-textfield';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { Dayjs } from 'dayjs';
+import { PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
 
+type AvTextFieldAdditionalProps = Pick<TextFieldProps, 'error' | 'helpTopicId' | 'helperText' | 'inputProps' | 'label' | 'required'>;
 type DatepickerProps = {
     value?: Dayjs | null | undefined;
-    /** Props applied to the `TextField` component */
-    FieldProps?: TextFieldProps;
+    /** Props applied to the `PickersTextField` component */
+    FieldProps?: PickerFieldUISlotProps['textField'] & AvTextFieldAdditionalProps;
     /** Determines where the Calendar will be placed when opened.
      * @default bottom-start
      */
     placement?: 'bottom-start' | 'bottom' | 'bottom-end';
     /** Determines if the clear button appears in the action bar */
     clearable?: boolean;
-} & Omit<DatePickerProps<Dayjs, false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'slots' | 'slotProps' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
-declare const Datepicker: ({ FieldProps, placement, clearable, ...props }: DatepickerProps) => JSX.Element;
+} & Omit<DatePickerProps<false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'slots' | 'slotProps' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
+declare const Datepicker: ({ FieldProps, placement, clearable, ...props }: DatepickerProps) => React.JSX.Element;
 
 export { Datepicker, type DatepickerProps };

package/dist/index.d.ts

@@ -1,18 +1,20 @@
 import { TextFieldProps } from '@availity/mui-textfield';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { Dayjs } from 'dayjs';
+import { PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
 
+type AvTextFieldAdditionalProps = Pick<TextFieldProps, 'error' | 'helpTopicId' | 'helperText' | 'inputProps' | 'label' | 'required'>;
 type DatepickerProps = {
     value?: Dayjs | null | undefined;
-    /** Props applied to the `TextField` component */
-    FieldProps?: TextFieldProps;
+    /** Props applied to the `PickersTextField` component */
+    FieldProps?: PickerFieldUISlotProps['textField'] & AvTextFieldAdditionalProps;
     /** Determines where the Calendar will be placed when opened.
      * @default bottom-start
      */
     placement?: 'bottom-start' | 'bottom' | 'bottom-end';
     /** Determines if the clear button appears in the action bar */
     clearable?: boolean;
-} & Omit<DatePickerProps<Dayjs, false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'slots' | 'slotProps' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
-declare const Datepicker: ({ FieldProps, placement, clearable, ...props }: DatepickerProps) => JSX.Element;
+} & Omit<DatePickerProps<false>, 'components' | 'componentsProps' | 'desktopModeMediaQuery' | 'DialogProps' | 'OpenPickerButtonProps' | 'openTo' | 'orientation' | 'PaperProps' | 'PopperProps' | 'reduceAnimations' | 'renderInput' | 'rifmFormatter' | 'showToolbar' | 'slots' | 'slotProps' | 'ToolbarComponent' | 'toolbarFormat' | 'toolbarPlaceholder' | 'toolbarTitle' | 'TransitionComponent' | 'value'>;
+declare const Datepicker: ({ FieldProps, placement, clearable, ...props }: DatepickerProps) => React.JSX.Element;
 
 export { Datepicker, type DatepickerProps };

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -54,12 +64,262 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lib/Datepicker.tsx
-var import_mui_textfield = require("@availity/mui-textfield");
-var import_mui_icon = require("@availity/mui-icon");
+var import_mui_icon3 = require("@availity/mui-icon");
 var import_DatePicker = require("@mui/x-date-pickers/DatePicker");
+var import_PickersTextField = require("@mui/x-date-pickers/PickersTextField");
+
+// ../../node_modules/@availity/message-core/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _lastId;
+var AvMessage = class {
+  constructor() {
+    __publicField(this, "subscribers", {});
+    __publicField(this, "getEventData", (event) => {
+      const isSameWindow = event.source === window;
+      if (!this.isEnabled || // do nothing if not enabled
+      !event || !event.data || !event.origin || !event.source || // check event exists and has necessary properties
+      !this.isDomain(event.origin)) {
+        return;
+      }
+      let { data } = event;
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch (e) {
+        }
+      }
+      if (typeof data === "string") {
+        event = data;
+        data = void 0;
+      } else {
+        event = data && data.event || this.DEFAULT_EVENT;
+      }
+      const metadata = { isSameWindow };
+      this.onMessage(event, data, metadata);
+    });
+    __privateAdd(this, _lastId, 0);
+    this.isEnabled = true;
+    this.DEFAULT_EVENT = "avMessage";
+    this.DOMAIN = /https?:\/\/([\w-]+\.)?availity\.(com|net)/;
+    window.addEventListener("message", this.getEventData);
+  }
+  enabled(value) {
+    if (arguments.length > 0) {
+      this.isEnabled = !!value;
+    }
+    return this.isEnabled;
+  }
+  subscribe(event, callback, options) {
+    var _a;
+    if (!this.subscribers[event]) {
+      this.subscribers[event] = [];
+    }
+    __privateSet(this, _lastId, __privateGet(this, _lastId) + 1);
+    const id = __privateGet(this, _lastId);
+    const ignoreSameWindow = (_a = options == null ? void 0 : options.ignoreSameWindow) != null ? _a : true;
+    const subscriber = { id, callback, options: { ignoreSameWindow } };
+    this.subscribers[event].push(subscriber);
+    return () => {
+      this.subscribers[event] = this.subscribers[event].filter((subscriber2) => subscriber2.id !== id);
+    };
+  }
+  // remove all subscribers for this event
+  unsubscribe(event) {
+    delete this.subscribers[event];
+  }
+  unsubscribeAll() {
+    this.subscribers = {};
+  }
+  onMessage(event, data, metadata) {
+    const { isSameWindow } = metadata;
+    if (this.subscribers[event]) {
+      for (const subscriber of this.subscribers[event]) {
+        const { ignoreSameWindow } = subscriber.options;
+        const skip = isSameWindow && ignoreSameWindow;
+        if (!skip) {
+          subscriber.callback(data);
+        }
+      }
+    }
+  }
+  // if current domain doesn't match regex DOMAIN, return true.
+  isDomain(url) {
+    return !this.DOMAIN.test(this.domain()) || this.DOMAIN.test(url);
+  }
+  /**
+   * Attempts to get origin from top window
+   * @private
+   * @returns {string|null}
+   */
+  getOriginFromTop() {
+    try {
+      return window.top.location.origin;
+    } catch (e) {
+      return null;
+    }
+  }
+  /**
+   * Swaps between 'apps' and 'essentials' in the domain
+   * @private
+   * @param {string} url
+   * @returns {string}
+   */
+  swapDomain(url) {
+    if (url.includes("essentials")) {
+      return url.replace("essentials", "apps");
+    }
+    return url.replace("apps", "essentials");
+  }
+  /**
+   * Gets the domain
+   * @private
+   * @returns {string}
+   */
+  domain() {
+    const topOrigin = this.getOriginFromTop();
+    if (topOrigin) {
+      return window.location.origin;
+    }
+    if (window.location.origin) {
+      const url = window.location.origin;
+      return this.swapDomain(url);
+    }
+    if (window.location.hostname) {
+      const url = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}`;
+      return this.swapDomain(url);
+    }
+    return "*";
+  }
+  send(payload, target = window.top) {
+    if (!this.isEnabled || !payload) {
+      return;
+    }
+    try {
+      const message = typeof payload === "string" ? payload : JSON.stringify(payload);
+      target.postMessage(message, this.domain());
+    } catch (error) {
+      console.warn("AvMessage.send()", error);
+    }
+  }
+};
+_lastId = /* @__PURE__ */ new WeakMap();
+var AvMessage_default = AvMessage;
+var index_default = new AvMessage_default();
+
+// ../form-utils/src/lib/FieldHelpIcon.tsx
+var import_mui_icon = require("@availity/mui-icon");
+
+// ../button/src/lib/IconButton.tsx
+var import_react = require("react");
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var outlinedStyles = {
+  borderRadius: ".25rem",
+  border: 1
+};
+var IconButton = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, { title, variant = "text", sx, size = "medium" } = _a, rest = __objRest(_a, ["title", "variant", "sx", "size"]);
+  const styles = __spreadValues(__spreadValues({}, sx), variant === "outlined" && outlinedStyles);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { title, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IconButton.default, __spreadProps(__spreadValues({ "aria-label": title, sx: __spreadValues({}, styles) }, rest), { ref, size })) });
+});
+
+// ../form-utils/src/lib/FieldHelpIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var triggerFieldHelp = (id) => {
+  index_default.send({
+    event: "nav:help:field",
+    id
+  });
+};
+var FieldHelpIcon = (_a) => {
+  var _b = _a, { helpTopicId, labelId, sx } = _b, rest = __objRest(_b, ["helpTopicId", "labelId", "sx"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    IconButton,
+    __spreadProps(__spreadValues({}, rest), {
+      color: "primary",
+      title: "Help",
+      role: "link",
+      onClick: () => triggerFieldHelp(helpTopicId),
+      "aria-describedby": labelId,
+      size: "small",
+      sx: __spreadProps(__spreadValues({}, sx), { fontSize: "inherit", marginTop: "-2px", opacity: 1 }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.HelpCircleIcon, { "aria-hidden": true, titleAccess: void 0 })
+    })
+  );
+};
+
+// ../form-utils/src/lib/FormHelperText.tsx
+var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"));
+var import_mui_icon2 = require("@availity/mui-icon");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormHelperText = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_FormHelperText.default, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_icon2.WarningTriangleIcon, { sx: { marginRight: "4px" }, titleAccess: "Error", "aria-hidden": false }),
+    children
+  ] }));
+};
+
+// ../form-utils/src/lib/FormLabel.tsx
+var import_react2 = require("react");
+var import_FormLabel = __toESM(require("@mui/material/FormLabel"));
+var import_styles = require("@mui/material/styles");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Wrapper = (0, import_styles.styled)("div", {
+  name: "MuiFormLabel",
+  slot: "AvWrapper",
+  overridesResolver: (props, styles) => styles.avWrapper
+})({});
+var StyleOverrides = {
+  position: "relative !important",
+  transform: "none !important",
+  transition: "none !important",
+  animation: "none !important"
+};
+var FormLabel = (0, import_react2.forwardRef)((props, ref) => {
+  const _a = props, { helpTopicId, id, sx } = _a, rest = __objRest(_a, ["helpTopicId", "id", "sx"]);
+  const labelId = id || (rest.htmlFor ? `${rest.htmlFor}-label` : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Wrapper, { className: "MuiFormLabel-avWrapper", sx, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_FormLabel.default, __spreadProps(__spreadValues({ id: labelId, sx: __spreadValues({}, StyleOverrides) }, rest), { ref })),
+    helpTopicId ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldHelpIcon, { helpTopicId, labelId, sx: { px: 0.5 } }) : null
+  ] });
+});
+
+// src/lib/Datepicker.tsx
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var paperProps = { elevation: 8, variant: "elevation", sx: { marginTop: "4px" } };
-var PickerTextField = (params) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, __spreadProps(__spreadValues({}, params), { placeholder: "MM/DD/YYYY" }));
+var PickersTextField = (0, import_react3.forwardRef)((props, ref) => {
+  const _a = props, { helperText = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {}), helpTopicId, InputLabelProps: InputLabelPropsIN, inputProps: inputPropsIN, FormHelperTextProps: FormHelperTextPropsIN, required } = _a, params = __objRest(_a, ["helperText", "helpTopicId", "InputLabelProps", "inputProps", "FormHelperTextProps", "required"]);
+  const PickersLabel = (props2) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormLabel, __spreadValues({ helpTopicId, required }, props2));
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_PickersTextField.PickersTextField,
+    __spreadProps(__spreadValues({}, params), {
+      helperText,
+      InputLabelProps: __spreadValues({
+        component: PickersLabel
+      }, InputLabelPropsIN),
+      inputProps: __spreadValues({
+        "aria-required": required
+      }, inputPropsIN),
+      FormHelperTextProps: __spreadValues({
+        component: FormHelperText,
+        error: params.error
+      }, FormHelperTextPropsIN),
+      ref
+    })
+  );
+});
 var Datepicker = (_a) => {
   var _b = _a, {
     FieldProps,
@@ -71,7 +331,7 @@ var Datepicker = (_a) => {
     "clearable"
   ]);
   var _a2, _b2, _c, _d, _e, _f;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_DatePicker.DatePicker,
     __spreadProps(__spreadValues({}, props), {
       dayOfWeekFormatter: (weekday) => weekday.format("dd"),
@@ -95,8 +355,8 @@ var Datepicker = (_a) => {
         }
       },
       slots: {
-        openPickerIcon: import_mui_icon.CalendarDaysIcon,
-        textField: PickerTextField
+        openPickerIcon: import_mui_icon3.CalendarDaysIcon,
+        textField: PickersTextField
       }
     })
   );

package/dist/index.mjs

@@ -31,12 +31,262 @@ var __objRest = (source, exclude) => {
 };
 
 // src/lib/Datepicker.tsx
-import { TextField } from "@availity/mui-textfield";
 import { CalendarDaysIcon } from "@availity/mui-icon";
 import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
+import { PickersTextField as MuiPickersTextField } from "@mui/x-date-pickers/PickersTextField";
+
+// ../../node_modules/@availity/message-core/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _lastId;
+var AvMessage = class {
+  constructor() {
+    __publicField(this, "subscribers", {});
+    __publicField(this, "getEventData", (event) => {
+      const isSameWindow = event.source === window;
+      if (!this.isEnabled || // do nothing if not enabled
+      !event || !event.data || !event.origin || !event.source || // check event exists and has necessary properties
+      !this.isDomain(event.origin)) {
+        return;
+      }
+      let { data } = event;
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch (e) {
+        }
+      }
+      if (typeof data === "string") {
+        event = data;
+        data = void 0;
+      } else {
+        event = data && data.event || this.DEFAULT_EVENT;
+      }
+      const metadata = { isSameWindow };
+      this.onMessage(event, data, metadata);
+    });
+    __privateAdd(this, _lastId, 0);
+    this.isEnabled = true;
+    this.DEFAULT_EVENT = "avMessage";
+    this.DOMAIN = /https?:\/\/([\w-]+\.)?availity\.(com|net)/;
+    window.addEventListener("message", this.getEventData);
+  }
+  enabled(value) {
+    if (arguments.length > 0) {
+      this.isEnabled = !!value;
+    }
+    return this.isEnabled;
+  }
+  subscribe(event, callback, options) {
+    var _a;
+    if (!this.subscribers[event]) {
+      this.subscribers[event] = [];
+    }
+    __privateSet(this, _lastId, __privateGet(this, _lastId) + 1);
+    const id = __privateGet(this, _lastId);
+    const ignoreSameWindow = (_a = options == null ? void 0 : options.ignoreSameWindow) != null ? _a : true;
+    const subscriber = { id, callback, options: { ignoreSameWindow } };
+    this.subscribers[event].push(subscriber);
+    return () => {
+      this.subscribers[event] = this.subscribers[event].filter((subscriber2) => subscriber2.id !== id);
+    };
+  }
+  // remove all subscribers for this event
+  unsubscribe(event) {
+    delete this.subscribers[event];
+  }
+  unsubscribeAll() {
+    this.subscribers = {};
+  }
+  onMessage(event, data, metadata) {
+    const { isSameWindow } = metadata;
+    if (this.subscribers[event]) {
+      for (const subscriber of this.subscribers[event]) {
+        const { ignoreSameWindow } = subscriber.options;
+        const skip = isSameWindow && ignoreSameWindow;
+        if (!skip) {
+          subscriber.callback(data);
+        }
+      }
+    }
+  }
+  // if current domain doesn't match regex DOMAIN, return true.
+  isDomain(url) {
+    return !this.DOMAIN.test(this.domain()) || this.DOMAIN.test(url);
+  }
+  /**
+   * Attempts to get origin from top window
+   * @private
+   * @returns {string|null}
+   */
+  getOriginFromTop() {
+    try {
+      return window.top.location.origin;
+    } catch (e) {
+      return null;
+    }
+  }
+  /**
+   * Swaps between 'apps' and 'essentials' in the domain
+   * @private
+   * @param {string} url
+   * @returns {string}
+   */
+  swapDomain(url) {
+    if (url.includes("essentials")) {
+      return url.replace("essentials", "apps");
+    }
+    return url.replace("apps", "essentials");
+  }
+  /**
+   * Gets the domain
+   * @private
+   * @returns {string}
+   */
+  domain() {
+    const topOrigin = this.getOriginFromTop();
+    if (topOrigin) {
+      return window.location.origin;
+    }
+    if (window.location.origin) {
+      const url = window.location.origin;
+      return this.swapDomain(url);
+    }
+    if (window.location.hostname) {
+      const url = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}`;
+      return this.swapDomain(url);
+    }
+    return "*";
+  }
+  send(payload, target = window.top) {
+    if (!this.isEnabled || !payload) {
+      return;
+    }
+    try {
+      const message = typeof payload === "string" ? payload : JSON.stringify(payload);
+      target.postMessage(message, this.domain());
+    } catch (error) {
+      console.warn("AvMessage.send()", error);
+    }
+  }
+};
+_lastId = /* @__PURE__ */ new WeakMap();
+var AvMessage_default = AvMessage;
+var index_default = new AvMessage_default();
+
+// ../form-utils/src/lib/FieldHelpIcon.tsx
+import { HelpCircleIcon } from "@availity/mui-icon";
+
+// ../button/src/lib/IconButton.tsx
+import { forwardRef } from "react";
+import { default as MuiIconButton } from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 import { jsx } from "react/jsx-runtime";
+var outlinedStyles = {
+  borderRadius: ".25rem",
+  border: 1
+};
+var IconButton = forwardRef((props, ref) => {
+  const _a = props, { title, variant = "text", sx, size = "medium" } = _a, rest = __objRest(_a, ["title", "variant", "sx", "size"]);
+  const styles = __spreadValues(__spreadValues({}, sx), variant === "outlined" && outlinedStyles);
+  return /* @__PURE__ */ jsx(Tooltip, { title, children: /* @__PURE__ */ jsx(MuiIconButton, __spreadProps(__spreadValues({ "aria-label": title, sx: __spreadValues({}, styles) }, rest), { ref, size })) });
+});
+
+// ../form-utils/src/lib/FieldHelpIcon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var triggerFieldHelp = (id) => {
+  index_default.send({
+    event: "nav:help:field",
+    id
+  });
+};
+var FieldHelpIcon = (_a) => {
+  var _b = _a, { helpTopicId, labelId, sx } = _b, rest = __objRest(_b, ["helpTopicId", "labelId", "sx"]);
+  return /* @__PURE__ */ jsx2(
+    IconButton,
+    __spreadProps(__spreadValues({}, rest), {
+      color: "primary",
+      title: "Help",
+      role: "link",
+      onClick: () => triggerFieldHelp(helpTopicId),
+      "aria-describedby": labelId,
+      size: "small",
+      sx: __spreadProps(__spreadValues({}, sx), { fontSize: "inherit", marginTop: "-2px", opacity: 1 }),
+      children: /* @__PURE__ */ jsx2(HelpCircleIcon, { "aria-hidden": true, titleAccess: void 0 })
+    })
+  );
+};
+
+// ../form-utils/src/lib/FormHelperText.tsx
+import MuiFormHelperText from "@mui/material/FormHelperText";
+import { WarningTriangleIcon } from "@availity/mui-icon";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var FormHelperText = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsxs(MuiFormHelperText, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx3(WarningTriangleIcon, { sx: { marginRight: "4px" }, titleAccess: "Error", "aria-hidden": false }),
+    children
+  ] }));
+};
+
+// ../form-utils/src/lib/FormLabel.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { default as MuiFormLabel } from "@mui/material/FormLabel";
+import { styled } from "@mui/material/styles";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Wrapper = styled("div", {
+  name: "MuiFormLabel",
+  slot: "AvWrapper",
+  overridesResolver: (props, styles) => styles.avWrapper
+})({});
+var StyleOverrides = {
+  position: "relative !important",
+  transform: "none !important",
+  transition: "none !important",
+  animation: "none !important"
+};
+var FormLabel = forwardRef2((props, ref) => {
+  const _a = props, { helpTopicId, id, sx } = _a, rest = __objRest(_a, ["helpTopicId", "id", "sx"]);
+  const labelId = id || (rest.htmlFor ? `${rest.htmlFor}-label` : void 0);
+  return /* @__PURE__ */ jsxs2(Wrapper, { className: "MuiFormLabel-avWrapper", sx, children: [
+    /* @__PURE__ */ jsx4(MuiFormLabel, __spreadProps(__spreadValues({ id: labelId, sx: __spreadValues({}, StyleOverrides) }, rest), { ref })),
+    helpTopicId ? /* @__PURE__ */ jsx4(FieldHelpIcon, { helpTopicId, labelId, sx: { px: 0.5 } }) : null
+  ] });
+});
+
+// src/lib/Datepicker.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 var paperProps = { elevation: 8, variant: "elevation", sx: { marginTop: "4px" } };
-var PickerTextField = (params) => /* @__PURE__ */ jsx(TextField, __spreadProps(__spreadValues({}, params), { placeholder: "MM/DD/YYYY" }));
+var PickersTextField = forwardRef3((props, ref) => {
+  const _a = props, { helperText = /* @__PURE__ */ jsx5(Fragment, {}), helpTopicId, InputLabelProps: InputLabelPropsIN, inputProps: inputPropsIN, FormHelperTextProps: FormHelperTextPropsIN, required } = _a, params = __objRest(_a, ["helperText", "helpTopicId", "InputLabelProps", "inputProps", "FormHelperTextProps", "required"]);
+  const PickersLabel = (props2) => /* @__PURE__ */ jsx5(FormLabel, __spreadValues({ helpTopicId, required }, props2));
+  return /* @__PURE__ */ jsx5(
+    MuiPickersTextField,
+    __spreadProps(__spreadValues({}, params), {
+      helperText,
+      InputLabelProps: __spreadValues({
+        component: PickersLabel
+      }, InputLabelPropsIN),
+      inputProps: __spreadValues({
+        "aria-required": required
+      }, inputPropsIN),
+      FormHelperTextProps: __spreadValues({
+        component: FormHelperText,
+        error: params.error
+      }, FormHelperTextPropsIN),
+      ref
+    })
+  );
+});
 var Datepicker = (_a) => {
   var _b = _a, {
     FieldProps,
@@ -48,7 +298,7 @@ var Datepicker = (_a) => {
     "clearable"
   ]);
   var _a2, _b2, _c, _d, _e, _f;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx5(
     MuiDatePicker,
     __spreadProps(__spreadValues({}, props), {
       dayOfWeekFormatter: (weekday) => weekday.format("dd"),
@@ -73,7 +323,7 @@ var Datepicker = (_a) => {
       },
       slots: {
         openPickerIcon: CalendarDaysIcon,
-        textField: PickerTextField
+        textField: PickersTextField
       }
     })
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-datepicker",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "Availity MUI Datepicker Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,21 +40,21 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-icon": "1.1.1",
-    "@availity/mui-textfield": "1.3.2",
-    "@mui/x-date-pickers": "^7.26.0",
+    "@availity/mui-icon": "2.0.0",
+    "@availity/mui-textfield": "2.0.0",
+    "@mui/x-date-pickers": "^8.16.0",
     "dayjs": "^1.11.13"
   },
   "devDependencies": {
-    "@mui/material": "^6.4.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "@mui/material": "^7.3.4",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tsup": "^8.4.0",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/material": "^6.4.5",
-    "react": ">=16.3.0"
+    "@mui/material": "^7.0.0",
+    "react": ">=17.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/lib/DateCalendar.tsx

@@ -2,7 +2,7 @@ import { DateCalendar as MuiDateCalendar, DateCalendarProps as MuiDateCalendarPr
 import type { Dayjs } from 'dayjs';
 import type {} from '@mui/x-date-pickers/AdapterDayjs';
 
-export type DateCalendarProps = Omit<MuiDateCalendarProps<Dayjs>,
+export type DateCalendarProps = Omit<MuiDateCalendarProps,
   | 'components'
   | 'componentsProps'
   | 'slots'
@@ -15,7 +15,7 @@ export type DateCalendarProps = Omit<MuiDateCalendarProps<Dayjs>,
 >;
 
 // just being used for stories atm, if ux finds a use for it we can add it to index.
-export const DateCalendar = (props: DateCalendarProps): JSX.Element => {
+export const DateCalendar = (props: DateCalendarProps): React.JSX.Element => {
   return (
     <MuiDateCalendar
       {...props}

package/src/lib/Datepicker.stories.tsx

@@ -37,7 +37,7 @@ export const _Datepicker: StoryObj<typeof Datepicker> = {
       fullWidth: false,
       helperText: 'Help text for the field',
       helpTopicId: '1234',
-      label: 'Date',
+      label: 'Date'
     },
   },
 };
@@ -84,7 +84,7 @@ type DateRangePickerProps = {
   };
 };
 
-type DateRangePicker = (props: DateRangePickerProps) => JSX.Element;
+type DateRangePicker = (props: DateRangePickerProps) => React.JSX.Element;
 
 export const _DateRangePicker: StoryObj<DateRangePicker> = {
   render: () => {

package/src/lib/Datepicker.test.tsx

@@ -11,13 +11,4 @@ describe('Datepicker', () => {
     );
     expect(getAllByText('Test')).toBeTruthy();
   });
-
-  test('should render placeholder successfully', () => {
-    const { container } = render(
-      <ThemeProvider>
-        <Datepicker FieldProps={{ InputProps: { placeholder: 'InputProps' } }} onChange={jest.fn()} value={null} />
-      </ThemeProvider>
-    );
-    expect(container.getElementsByClassName('MuiInputBase-input')[0].getAttribute('placeholder')).toBe('InputProps');
-  });
 });

package/src/lib/Datepicker.tsx

@@ -3,11 +3,17 @@ import { CalendarDaysIcon } from '@availity/mui-icon';
 import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import type { Dayjs } from 'dayjs';
 import type {} from '@mui/x-date-pickers/AdapterDayjs';
+import { PickersTextField as MuiPickersTextField, PickersTextFieldProps as MuiPickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
+import { FormHelperText, FormLabel, InputPropOverrides } from '@availity/mui-form-utils';
+import { forwardRef } from 'react';
+
+type AvTextFieldAdditionalProps = Pick<TextFieldProps, 'error' | 'helpTopicId' | 'helperText' | 'inputProps' | 'label' | 'required'>;
 
 export type DatepickerProps = {
   value?: Dayjs | null | undefined;
-  /** Props applied to the `TextField` component */
-  FieldProps?: TextFieldProps;
+  /** Props applied to the `PickersTextField` component */
+  FieldProps?: PickerFieldUISlotProps['textField'] & AvTextFieldAdditionalProps;
   /** Determines where the Calendar will be placed when opened.
    * @default bottom-start
    */
@@ -15,7 +21,7 @@ export type DatepickerProps = {
   /** Determines if the clear button appears in the action bar */
   clearable?: boolean;
 } & Omit<
-  MuiDatePickerProps<Dayjs, false>,
+  MuiDatePickerProps<false>,
   | 'components'
   | 'componentsProps'
   | 'desktopModeMediaQuery'
@@ -41,14 +47,37 @@ export type DatepickerProps = {
 
 const paperProps = { elevation: 8, variant: 'elevation', sx: { marginTop: '4px' } } as const;
 
-const PickerTextField = (params: TextFieldProps) => <TextField {...params} placeholder="MM/DD/YYYY" />;
+const PickersTextField = forwardRef((props: MuiPickersTextFieldProps & AvTextFieldAdditionalProps, ref: React.Ref<HTMLDivElement>) => {
+  const {helperText=<></>, helpTopicId, InputLabelProps: InputLabelPropsIN, inputProps: inputPropsIN, FormHelperTextProps: FormHelperTextPropsIN,  required, ...params} = props;
+  const PickersLabel = (props: MuiPickersTextFieldProps["InputLabelProps"] & Pick<TextFieldProps, 'helpTopicId'>) => <FormLabel helpTopicId={helpTopicId} required={required} {...props}/>;
+  return (
+    <MuiPickersTextField
+      {...params}
+      helperText={helperText}
+      InputLabelProps= {{
+        component: PickersLabel,
+        ...InputLabelPropsIN,
+      }}
+      inputProps= {{
+        'aria-required': required,
+        ...inputPropsIN
+      }}
+      FormHelperTextProps= {{
+        component: FormHelperText,
+        error: params.error,
+        ...FormHelperTextPropsIN,
+      }}
+      ref={ref}
+    />
+  )
+});
 
 export const Datepicker = ({
   FieldProps,
   placement = 'bottom-start',
   clearable,
   ...props
-}: DatepickerProps): JSX.Element => {
+}: DatepickerProps): React.JSX.Element => {
   return (
     <MuiDatePicker
       {...props}
@@ -75,7 +104,7 @@ export const Datepicker = ({
       }}
       slots={{
         openPickerIcon: CalendarDaysIcon,
-        textField: PickerTextField,
+        textField: PickersTextField
       }}
     />
   );