@elliemae/pui-app-sdk 4.10.0-beta.7 → 4.11.0-beta.1

package/dist/cjs/index.js

@@ -39,6 +39,8 @@ __export(lib_exports, {
   ConnectForm: () => import_connect_form.ConnectForm,
   DateInput: () => import_date_input.DateInput,
   DatePicker: () => import_date_picker.DatePicker,
+  DateRangePicker: () => import_date_range_picker.DateRangePicker,
+  DateTimePicker: () => import_date_time_picker.DateTimePicker,
   ErrorBoundary: () => import_error_boundary.ErrorBoundary,
   ErrorToast: () => import_error_toast.ErrorToast,
   Form: () => import_form.Form,
@@ -46,6 +48,7 @@ __export(lib_exports, {
   FormLayoutBlockItem: () => import_form_layout_block_item.FormLayoutBlockItem,
   FormSubmitButton: () => import_submit_button.FormSubmitButton,
   InputMask: () => import_input_mask.InputMask,
+  InputText: () => import_input_text.InputText,
   LargeTextBox: () => import_large_text_box.LargeTextBox,
   MASK_PIPES: () => import_input_mask.MASK_PIPES,
   MASK_TYPES: () => import_input_mask.MASK_TYPES,
@@ -62,6 +65,7 @@ __export(lib_exports, {
   SessionTimeout: () => import_session_timeout.SessionTimeout,
   TextBox: () => import_text_box.TextBox,
   Themes: () => import_constants2.Themes,
+  Toggle: () => import_toggle.Toggle,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   WaitMessage: () => import_wait_message.WaitMessage,
   ariaLive: () => import_live_message.actions,
@@ -179,23 +183,27 @@ var import_render_with_state_addons = require("./utils/testing/render-with-state
 var import_helpers2 = require("./api/helpers.js");
 var import_users = require("./api/users/index.js");
 var import_decorator = require("./view/storybook/decorator.js");
-var import_autocomplete = require("./view/fields/autocomplete/index.js");
 var import_error_toast = require("./view/error-toast/index.js");
 var import_navigation_prompt = require("./view/modals/navigation-prompt/index.js");
 var import_form = require("./view/form/index.js");
-var import_combo_box_v3 = require("./view/fields/combo-box-v3/index.js");
 var import_connect_form = require("./view/fields/connect-form.js");
 var import_form_item_layout = require("./view/fields/form-item-layout/index.js");
 var import_form_layout_block_item = require("./view/fields/form-layout-block-item/index.js");
 var import_text_box = require("./view/fields/text-box/index.js");
+var import_input_text = require("./view/fields/input-text/index.js");
 var import_large_text_box = require("./view/fields/large-text-box/index.js");
 var import_input_mask = require("./view/fields/input-mask/index.js");
 var import_combo_box = require("./view/fields/combo-box/index.js");
+var import_combo_box_v3 = require("./view/fields/combo-box-v3/index.js");
 var import_check_box = require("./view/fields/check-box/index.js");
 var import_radio = require("./view/fields/radio/index.js");
 var import_radio_group = require("./view/fields/radio-group/index.js");
 var import_date_input = require("./view/fields/date-input/index.js");
 var import_date_picker = require("./view/fields/date-picker/index.js");
+var import_date_time_picker = require("./view/fields/date-time-picker/index.js");
+var import_date_range_picker = require("./view/fields/date-range-picker/index.js");
+var import_autocomplete = require("./view/fields/autocomplete/index.js");
+var import_toggle = require("./view/fields/toggle/index.js");
 var import_submit_button = require("./view/form/submit-button/index.js");
 var import_use_media_query_list = require("./view/breakpoint/use-media-query-list.js");
 var import_visually_hidden = require("./view/visually-hidden/index.js");

package/dist/cjs/view/app-root/index.js

@@ -43,12 +43,16 @@ const AppRoot = ({
   manageSession = false,
   WaitMessage,
   errorTemplate,
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error_boundary.ErrorBoundary, { errorTemplate, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_redux.Provider, { store, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_router.AppRouter, { history, basename, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  AppToRender,
-  {
-    manageSession,
-    WaitMessage,
-    children
-  }
-) }) }) }) }) });
+  children,
+  strictMode = true
+}) => {
+  const ParentEle = strictMode ? import_react.StrictMode : import_react.Fragment;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParentEle, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error_boundary.ErrorBoundary, { errorTemplate, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_redux.Provider, { store, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_router.AppRouter, { history, basename, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AppToRender,
+    {
+      manageSession,
+      WaitMessage,
+      children
+    }
+  ) }) }) }) }) });
+};

package/dist/cjs/view/error-boundary/index.js

@@ -50,7 +50,8 @@ class ErrorBoundary extends import_react.default.Component {
     if (logger)
       logger.error({
         ...import_log_records.logRecords.UNHANDLED_ERROR,
-        exception: error
+        exception: error,
+        message: error.message
       });
   }
   render() {

package/dist/cjs/view/fields/autocomplete/index.js

@@ -22,32 +22,40 @@ __export(autocomplete_exports, {
 });
 module.exports = __toCommonJS(autocomplete_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
 var import_react_hook_form = require("react-hook-form");
 const filterOptions = (allOptions, newFilter) => {
+  if (!newFilter)
+    return allOptions;
   const filtered = allOptions.filter(
-    (option) => option.type === "section" || option.label.toLowerCase().includes(newFilter?.toLowerCase())
+    (option) => option.type === "section" || option.type !== "separator" && option.label.toLowerCase().includes(newFilter?.toLowerCase())
   );
   return filtered.length === 1 && filtered[0].type === "section" ? [] : filtered;
 };
-const Autocomplete = ({
-  name,
-  children,
-  ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_react_hook_form.Controller,
-  {
-    name,
-    render: ({ field: { onChange, value, ...props } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ds_controlled_form.DSAutocomplete,
-      {
-        ...props,
-        filter: value ?? "",
-        onSelect: onChange,
-        ...rest,
-        options: filterOptions(rest.options, value),
-        children
-      }
-    )
-  }
-);
+const Autocomplete = ({ children, ...rest }) => {
+  const { watch, setValue } = (0, import_react_hook_form.useFormContext)();
+  const watchedFilter = watch(rest.name);
+  const onSelect = (0, import_react.useCallback)(
+    (newValue, ...otherArgs) => {
+      if (rest.onSelect)
+        rest.onSelect(newValue, ...otherArgs);
+      else
+        setValue(rest.name, newValue, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true
+        });
+    },
+    [rest, setValue]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_controlled_form.DSAutocomplete,
+    {
+      filter: watchedFilter ?? "",
+      onSelect,
+      options: filterOptions(rest.options, watchedFilter),
+      children
+    }
+  );
+};

package/dist/cjs/view/fields/combo-box-v3/index.js

@@ -28,6 +28,7 @@ const ComboBoxV3 = ({
   name,
   defaultValue = null,
   rules = {},
+  filteredOptions = null,
   ...rest
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_react_hook_form.Controller,
@@ -39,9 +40,10 @@ const ComboBoxV3 = ({
       import_ds_controlled_form.DSComboBox,
       {
         ...props,
+        ...rest,
+        filteredOptions,
         selectedValues: value,
-        onChange,
-        ...rest
+        onChange
       }
     )
   }

package/dist/cjs/view/fields/date-time-picker/index.js

@@ -21,13 +21,68 @@ __export(date_time_picker_exports, {
   DateTimePicker: () => DateTimePicker
 });
 module.exports = __toCommonJS(date_time_picker_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = (
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  require("react/jsx-runtime")
+);
 var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
 var import_react_hook_form = require("react-hook-form");
+const getConfig = (value, onChange) => ({
+  "full-date-time": {
+    dateTime: value,
+    onDateTimeChange: onChange
+  },
+  "date-time-inputs": {
+    dateTime: value,
+    onDateTimeChange: onChange
+  },
+  "date-time-picker": {
+    dateTime: value,
+    onDateTimeChange: onChange
+  },
+  "date-time-picker-controller-only": {
+    dateTime: value,
+    onDateTimeChange: onChange
+  },
+  "date-inputs": {
+    date: value,
+    onDateChange: onChange
+  },
+  "date-picker": {
+    date: value,
+    onDateChange: onChange
+  },
+  "date-picker-controller-only": {
+    date: value,
+    onDateChange: onChange
+  },
+  "full-date": {
+    date: value,
+    onDateChange: onChange
+  },
+  "full-time": {
+    time: value,
+    onTimeChange: onChange
+  },
+  "time-inputs": {
+    time: value,
+    onTimeChange: onChange
+  },
+  "time-picker-controller-only": {
+    time: value,
+    onTimeChange: onChange
+  },
+  "time-picker": {
+    time: value,
+    onTimeChange: onChange
+  }
+});
 const DateTimePicker = ({
   name,
   defaultValue = "",
   rules = {},
+  type = "full-date-time",
   ...rest
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_react_hook_form.Controller,
@@ -39,8 +94,8 @@ const DateTimePicker = ({
       import_ds_controlled_form.DSControlledDateTimePicker,
       {
         ...restProps,
-        dateTime: value,
-        onDateTimeChange: onChange,
+        type,
+        ...getConfig(value, onChange)[type],
         ...rest
       }
     )

package/dist/cjs/view/fields/input-text/index.js

@@ -35,6 +35,6 @@ const InputText = ({
     name,
     defaultValue,
     rules,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_controlled_form.DSInputText, { ...field, ...rest })
+    render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_controlled_form.DSInputText, { hasError: !!error, ...field, ...rest })
   }
 );

package/dist/cjs/view/fields/masked-input-text/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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);
+var masked_input_text_exports = {};
+__export(masked_input_text_exports, {
+  MaskedInputText: () => MaskedInputText
+});
+module.exports = __toCommonJS(masked_input_text_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_react_hook_form = require("react-hook-form");
+const MaskedInputText = ({
+  name,
+  defaultValue = "",
+  rules = {},
+  useMask,
+  maskOpts,
+  ...rest
+}) => {
+  const [, setVal] = import_react.default.useState(defaultValue);
+  const { setValue } = (0, import_react_hook_form.useFormContext)();
+  const opts = import_react.default.useMemo(
+    () => ({
+      ...maskOpts,
+      onChange: (_, maskedValue) => setValue(name, maskedValue, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true
+      }),
+      valueSetter: setVal
+    }),
+    [maskOpts, name, setValue]
+  );
+  const inputProps = useMask(opts);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_hook_form.Controller,
+    {
+      name,
+      defaultValue,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_controlled_form.DSInputText, { hasError: !!error, ...rest, ...field, ...inputProps })
+    }
+  );
+};

package/dist/cjs/view/fields/toggle/index.js

@@ -23,6 +23,7 @@ __export(toggle_exports, {
 module.exports = __toCommonJS(toggle_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_ds_form_toggle = require("@elliemae/ds-form-toggle");
 var import_react_hook_form = require("react-hook-form");
 const Toggle = ({
   name,

package/dist/cjs/view/form/personal-info-section.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ 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);
 var personal_info_section_exports = {};
 __export(personal_info_section_exports, {
@@ -35,13 +25,12 @@ __export(personal_info_section_exports, {
 });
 module.exports = __toCommonJS(personal_info_section_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_moment = __toESM(require("moment"));
-var import_text_box = require("../fields/text-box/index.js");
-var import_combo_box = require("../fields/combo-box/index.js");
-var import_date_input = require("../fields/date-input/index.js");
+var import_input_text = require("../fields/input-text/index.js");
+var import_combo_box_v3 = require("../fields/combo-box-v3/index.js");
+var import_date_time_picker = require("../fields/date-time-picker/index.js");
 var import_form_layout_block_item = require("../fields/form-layout-block-item/index.js");
 const FirstName = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_layout_block_item.FormLayoutBlockItem, { label: "First Name", inputID: "firstname", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_text_box.TextBox,
+  import_input_text.InputText,
   {
     id: "firstname",
     name: "firstname",
@@ -53,39 +42,43 @@ const FirstName = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_
   }
 ) });
 const DOB = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_layout_block_item.FormLayoutBlockItem, { label: "Date of Birth", inputID: "dob", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_date_input.DateInput,
+  import_date_time_picker.DateTimePicker,
   {
     id: "dob",
     name: "dob",
+    type: "date-inputs",
     rules: {
       required: { value: true, message: "Date of Birth is required" },
-      validate: (value) => (0, import_moment.default)() > value || "Date of Birth can not be greater than current date"
+      validate: (value) => value !== "12/25/1990" || "Date of Birth can not be 12/25/1990"
     }
   }
 ) });
 const State = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_layout_block_item.FormLayoutBlockItem, { label: "State", inputID: "state", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_combo_box.ComboBox,
+  import_combo_box_v3.ComboBoxV3,
   {
     id: "state",
     name: "state",
     rules: { required: { value: true, message: "State is required" } },
-    options: [
-      { value: "ca", label: "California" },
-      { value: "nj", label: "New Jersey" }
+    allOptions: [
+      { dsId: "1", type: "option", value: "--select--", label: "--Select--" },
+      { dsId: "2", type: "option", value: "ca", label: "California" },
+      { dsId: "3", type: "option", value: "nj", label: "New Jersey" }
     ]
   }
 ) });
 const MaritalStatus = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_layout_block_item.FormLayoutBlockItem, { label: "Marital Status", inputID: "marital_status", required: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_combo_box.ComboBox,
+  import_combo_box_v3.ComboBoxV3,
   {
     id: "marital_status",
     name: "marital_status",
     rules: {
       required: { value: true, message: "Marital Status is required" }
     },
-    options: [
-      { value: "married", label: "Married" },
-      { value: "single", label: "Single" }
+    allOptions: [
+      { dsId: "1", type: "option", value: "--select--", label: "--Select--" },
+      { dsId: "2", type: "option", value: "married", label: "Married" },
+      { dsId: "3", type: "option", value: "unmarried", label: "Unmarried" },
+      { dsId: "4", type: "option", value: "separated", label: "Separated" }
     ]
   }
 ) });

package/dist/cjs/view/live-message/index.js

@@ -26,7 +26,6 @@ var import_react_aria_live = require("react-aria-live");
 var import_react = require("../../data/react.js");
 const LiveMessage = () => {
   const message = (0, import_react.useAppSelector)((state) => state.liveMessage?.message);
-  const id = (0, import_react.useAppSelector)((state) => state.liveMessage?.id);
   const ariaLive = (0, import_react.useAppSelector)((state) => state.liveMessage?.ariaLive);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_live.LiveMessage, { message, "aria-live": ariaLive, id });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_live.LiveMessage, { message, "aria-live": ariaLive });
 };

package/dist/cjs/view/micro-app/resources/manifest.js

@@ -43,7 +43,7 @@ const getAppManifest = async ({
     (0, import_url.removeDoubleSlash)(url.href)
   );
   const { headers } = response;
-  if (headers["content-type"] && headers["content-type"].includes("application/json"))
+  if (headers["content-type"]?.includes?.("application/json"))
     return response.data;
   const unVersionedManifestPath = getUnVersionedManifestPath(manifestPath);
   if (manifestPath !== unVersionedManifestPath) {

package/dist/esm/index.js

@@ -79,15 +79,14 @@ import { RenderWithStateAddOns } from "./utils/testing/render-with-state-addons.
 import { getApiActionCreator, getSelectField } from "./api/helpers.js";
 import { getUser } from "./api/users/index.js";
 import { withAppDecorator } from "./view/storybook/decorator.js";
-import { Autocomplete } from "./view/fields/autocomplete/index.js";
 import { ErrorToast } from "./view/error-toast/index.js";
 import { NavigationPrompt } from "./view/modals/navigation-prompt/index.js";
 import { Form } from "./view/form/index.js";
-import { ComboBoxV3 } from "./view/fields/combo-box-v3/index.js";
 import { ConnectForm } from "./view/fields/connect-form.js";
 import { FormItemLayout } from "./view/fields/form-item-layout/index.js";
 import { FormLayoutBlockItem } from "./view/fields/form-layout-block-item/index.js";
 import { TextBox } from "./view/fields/text-box/index.js";
+import { InputText } from "./view/fields/input-text/index.js";
 import { LargeTextBox } from "./view/fields/large-text-box/index.js";
 import {
   InputMask,
@@ -95,11 +94,16 @@ import {
   MASK_PIPES
 } from "./view/fields/input-mask/index.js";
 import { ComboBox } from "./view/fields/combo-box/index.js";
+import { ComboBoxV3 } from "./view/fields/combo-box-v3/index.js";
 import { CheckBox } from "./view/fields/check-box/index.js";
 import { Radio } from "./view/fields/radio/index.js";
 import { RadioGroup } from "./view/fields/radio-group/index.js";
 import { DateInput } from "./view/fields/date-input/index.js";
 import { DatePicker } from "./view/fields/date-picker/index.js";
+import { DateTimePicker } from "./view/fields/date-time-picker/index.js";
+import { DateRangePicker } from "./view/fields/date-range-picker/index.js";
+import { Autocomplete } from "./view/fields/autocomplete/index.js";
+import { Toggle } from "./view/fields/toggle/index.js";
 import { FormSubmitButton } from "./view/form/submit-button/index.js";
 import { useMediaQueryList } from "./view/breakpoint/use-media-query-list.js";
 import { VisuallyHidden } from "./view/visually-hidden/index.js";
@@ -126,6 +130,8 @@ export {
   ConnectForm,
   DateInput,
   DatePicker,
+  DateRangePicker,
+  DateTimePicker,
   ErrorBoundary,
   ErrorToast,
   Form,
@@ -133,6 +139,7 @@ export {
   FormLayoutBlockItem,
   FormSubmitButton,
   InputMask,
+  InputText,
   LargeTextBox,
   MASK_PIPES,
   MASK_TYPES,
@@ -149,6 +156,7 @@ export {
   SessionTimeout,
   TextBox,
   Themes,
+  Toggle,
   VisuallyHidden,
   WaitMessage,
   actions as ariaLive,

package/dist/esm/view/app-root/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { StrictMode } from "react";
+import { StrictMode, Fragment } from "react";
 import { Provider } from "react-redux";
 import { ThemeProvider } from "styled-components";
 import { getDefaultTheme } from "@elliemae/pui-theme";
@@ -20,15 +20,19 @@ const AppRoot = ({
   manageSession = false,
   WaitMessage,
   errorTemplate,
-  children
-}) => /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(ErrorBoundary, { errorTemplate, children: /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(AppRouter, { history, basename, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(
-  AppToRender,
-  {
-    manageSession,
-    WaitMessage,
-    children
-  }
-) }) }) }) }) });
+  children,
+  strictMode = true
+}) => {
+  const ParentEle = strictMode ? StrictMode : Fragment;
+  return /* @__PURE__ */ jsx(ParentEle, { children: /* @__PURE__ */ jsx(ErrorBoundary, { errorTemplate, children: /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(AppRouter, { history, basename, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(
+    AppToRender,
+    {
+      manageSession,
+      WaitMessage,
+      children
+    }
+  ) }) }) }) }) });
+};
 export {
   AppRoot
 };

package/dist/esm/view/error-boundary/index.js

@@ -19,7 +19,8 @@ class ErrorBoundary extends React.Component {
     if (logger)
       logger.error({
         ...logRecords.UNHANDLED_ERROR,
-        exception: error
+        exception: error,
+        message: error.message
       });
   }
   render() {

package/dist/esm/view/fields/autocomplete/index.js

@@ -1,33 +1,41 @@
 import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { DSAutocomplete } from "@elliemae/ds-controlled-form";
-import { Controller } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 const filterOptions = (allOptions, newFilter) => {
+  if (!newFilter)
+    return allOptions;
   const filtered = allOptions.filter(
-    (option) => option.type === "section" || option.label.toLowerCase().includes(newFilter?.toLowerCase())
+    (option) => option.type === "section" || option.type !== "separator" && option.label.toLowerCase().includes(newFilter?.toLowerCase())
   );
   return filtered.length === 1 && filtered[0].type === "section" ? [] : filtered;
 };
-const Autocomplete = ({
-  name,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsx(
-  Controller,
-  {
-    name,
-    render: ({ field: { onChange, value, ...props } }) => /* @__PURE__ */ jsx(
-      DSAutocomplete,
-      {
-        ...props,
-        filter: value ?? "",
-        onSelect: onChange,
-        ...rest,
-        options: filterOptions(rest.options, value),
-        children
-      }
-    )
-  }
-);
+const Autocomplete = ({ children, ...rest }) => {
+  const { watch, setValue } = useFormContext();
+  const watchedFilter = watch(rest.name);
+  const onSelect = useCallback(
+    (newValue, ...otherArgs) => {
+      if (rest.onSelect)
+        rest.onSelect(newValue, ...otherArgs);
+      else
+        setValue(rest.name, newValue, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true
+        });
+    },
+    [rest, setValue]
+  );
+  return /* @__PURE__ */ jsx(
+    DSAutocomplete,
+    {
+      filter: watchedFilter ?? "",
+      onSelect,
+      options: filterOptions(rest.options, watchedFilter),
+      children
+    }
+  );
+};
 export {
   Autocomplete
 };

package/dist/esm/view/fields/combo-box-v3/index.js

@@ -7,6 +7,7 @@ const ComboBoxV3 = ({
   name,
   defaultValue = null,
   rules = {},
+  filteredOptions = null,
   ...rest
 }) => /* @__PURE__ */ jsx(
   Controller,
@@ -18,9 +19,10 @@ const ComboBoxV3 = ({
       DSComboBox,
       {
         ...props,
+        ...rest,
+        filteredOptions,
         selectedValues: value,
-        onChange,
-        ...rest
+        onChange
       }
     )
   }