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

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/cjs/view/modals/navigation-prompt/index.js

@@ -26,11 +26,11 @@ var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_dialog = require("@elliemae/ds-dialog");
-var import_react2 = require("../../../data/react.js");
+var import_react_redux = require("../../../data/react-redux.js");
 var import_actions = require("../../../data/navigation-prompt/actions.js");
 const NavigationPrompt = (0, import_react.memo)(
   ({ open = false }) => {
-    const dispatch = (0, import_react2.useAppDispatch)();
+    const dispatch = (0, import_react_redux.useAppDispatch)();
     const cancelDialog = () => dispatch(import_actions.navigationPrompt.cancel());
     const confirmDialog = () => dispatch(import_actions.navigationPrompt.confirm());
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_dialog.DSDialog, { isOpen: open, onClickOutside: cancelDialog, centered: true, children: [

package/dist/cjs/view/modals/session-expiry/index.js

@@ -26,7 +26,7 @@ var import_react = require("react");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_dialog = require("@elliemae/ds-dialog");
-var import_react2 = require("../../../data/react.js");
+var import_react_redux = require("../../../data/react-redux.js");
 var import_actions = require("../../../data/logout/actions.js");
 var import_session = require("../../../utils/session.js");
 var import_customHooks = require("./customHooks.js");
@@ -34,7 +34,7 @@ const SessionExpiry = (0, import_react.memo)(
   ({ open, warningNotifiedAt = 0 }) => {
     const [isOpen, setIsOpen] = (0, import_react.useState)(open);
     const timeLeft = (0, import_customHooks.useTrackSessionExpiry)(warningNotifiedAt);
-    const dispatch = (0, import_react2.useAppDispatch)();
+    const dispatch = (0, import_react_redux.useAppDispatch)();
     (0, import_react.useEffect)(() => {
       setIsOpen(open);
     }, [open]);

package/dist/cjs/view/modals/wait-message/index.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(wait_message_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_loading_indicator = require("@elliemae/ds-loading-indicator");
-var import_react2 = require("../../../data/react.js");
+var import_react_redux = require("../../../data/react-redux.js");
 var import_use_html_wait_message = require("./use-html-wait-message.js");
 var import_user_wait_event = require("../../../analytics/user-wait-event.js");
 const WaitMessage = (0, import_react.memo)(
@@ -33,8 +33,8 @@ const WaitMessage = (0, import_react.memo)(
     style = { color: "white", fontSize: "1.25rem" },
     ...rest
   }) => {
-    const isOpen = (0, import_react2.useAppSelector)((state) => state.waitMessage?.isOpen);
-    const message = (0, import_react2.useAppSelector)((state) => state.waitMessage?.message);
+    const isOpen = (0, import_react_redux.useAppSelector)((state) => state.waitMessage?.isOpen);
+    const message = (0, import_react_redux.useAppSelector)((state) => state.waitMessage?.message);
     (0, import_react.useEffect)(() => {
       if (isOpen)
         (0, import_user_wait_event.waitStartEvent)();

package/dist/cjs/view/modals/wait-message/wait-message-launcher.js

@@ -22,10 +22,10 @@ __export(wait_message_launcher_exports, {
 });
 module.exports = __toCommonJS(wait_message_launcher_exports);
 var import_react = require("react");
-var import_react2 = require("../../../data/react.js");
+var import_react_redux = require("../../../data/react-redux.js");
 var import_actions = require("../../../data/wait-message/actions.js");
 const WaitMessageLauncher = () => {
-  const dispatch = (0, import_react2.useAppDispatch)();
+  const dispatch = (0, import_react_redux.useAppDispatch)();
   (0, import_react.useEffect)(() => {
     dispatch(import_actions.waitMessage.open());
     return () => {

package/dist/cjs/view/session-timeout/index.js

@@ -23,12 +23,12 @@ __export(session_timeout_exports, {
 module.exports = __toCommonJS(session_timeout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react2 = require("../../data/react.js");
+var import_react_redux = require("../../data/react-redux.js");
 var import_actions = require("../../data/logout/actions.js");
 var import_session = require("../../utils/session.js");
 var import_session_expiry = require("../modals/session-expiry/index.js");
 const SessionTimeout = () => {
-  const dispatch = (0, import_react2.useAppDispatch)();
+  const dispatch = (0, import_react_redux.useAppDispatch)();
   const [showSessionExpiryWarning, setSessionExpiryWarning] = (0, import_react.useState)(false);
   const [warningNotifiedAt, setwarningNotifiedAt] = (0, import_react.useState)();
   (0, import_react.useEffect)(() => {

package/dist/esm/data/index.js

@@ -3,7 +3,7 @@ import {
   useInjectSaga,
   createManager
 } from "redux-injectors";
-import { useAppDispatch, useAppSelector } from "./react.js";
+import { useAppDispatch, useAppSelector } from "./react-redux.js";
 import { createAppStore, getStore } from "./store.js";
 export {
   createAppStore as configureStore,

package/dist/esm/data/react-redux.js

@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from "react-redux";
+const useAppDispatch = () => useDispatch();
+const useAppSelector = useSelector;
+export {
+  useAppDispatch,
+  useAppSelector
+};

package/dist/esm/data/store.js

@@ -1,18 +1,17 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { setupListeners } from "@reduxjs/toolkit/query/react";
-import { createInjectorsEnhancer } from "redux-injectors";
+import {
+  createInjectorsEnhancer
+} from "redux-injectors";
 import createSagaMiddleware from "redux-saga";
 import { createReducer } from "./reducers.js";
 import { enableHotReloading } from "./webpack-hmr.js";
-import { queryMiddleware } from "./queryMiddleware.js";
-import { listenerMiddleware } from "./listenerMiddleware.js";
 const rootReducer = createReducer();
 let appStore = null;
 const setStore = (store) => {
   appStore = store;
 };
 const getStore = () => appStore;
-const createStore = (initialState, sagaMiddleware, history, middlewareConfig = {}) => {
+const createStore = (initialState, sagaMiddleware, history, middlewareConfig = { thunk: false }) => {
   const { run: runSaga } = sagaMiddleware;
   const enhancers = [
     createInjectorsEnhancer({
@@ -22,12 +21,11 @@ const createStore = (initialState, sagaMiddleware, history, middlewareConfig = {
   ];
   const baseStore = configureStore({
     reducer: rootReducer,
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware(middlewareConfig).prepend(listenerMiddleware).concat([sagaMiddleware, queryMiddleware]),
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware(middlewareConfig).concat(sagaMiddleware),
     devTools: true,
     preloadedState: initialState,
     enhancers
   });
-  setupListeners(baseStore.dispatch);
   enableHotReloading(baseStore);
   return baseStore;
 };

package/dist/esm/index.js

@@ -3,25 +3,17 @@ import {
   getHTTPClient,
   getAuthHTTPClient
 } from "./communication/http-client/index.js";
-import { sdkBaseQuery } from "./communication/http-client/baseQuery.js";
 import { onAuthorizationFailure } from "./communication/http-client/response-interceptor.js";
 import { auth } from "./data/auth/actions.js";
 import { RequireAuth } from "./view/require-auth.js";
 import { Page } from "./view/page.js";
 import { default as default2 } from "./utils/constants.js";
+import { useAppDispatch, useAppSelector } from "./data/react-redux.js";
 import {
   useInjectReducer,
   useInjectSaga,
   createManager
 } from "redux-injectors";
-import {
-  useInjectQuery,
-  useInjectListener,
-  useAppDispatch,
-  useAppSelector,
-  useAppMiddleware
-} from "./data/react.js";
-import { errorMiddleware } from "./data/errorMiddleware.js";
 import { getAuthorizationHeader } from "./utils/auth/helper.js";
 import { getRedirectUrl, removeDoubleSlash } from "./utils/url.js";
 import { createAppStore } from "./data/store.js";
@@ -79,15 +71,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 +86,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 +122,8 @@ export {
   ConnectForm,
   DateInput,
   DatePicker,
+  DateRangePicker,
+  DateTimePicker,
   ErrorBoundary,
   ErrorToast,
   Form,
@@ -133,6 +131,7 @@ export {
   FormLayoutBlockItem,
   FormSubmitButton,
   InputMask,
+  InputText,
   LargeTextBox,
   MASK_PIPES,
   MASK_TYPES,
@@ -149,6 +148,7 @@ export {
   SessionTimeout,
   TextBox,
   Themes,
+  Toggle,
   VisuallyHidden,
   WaitMessage,
   actions as ariaLive,
@@ -158,7 +158,6 @@ export {
   createManager,
   enableReactAppForHostIntegration,
   actions2 as error,
-  errorMiddleware,
   fetchHostAppData,
   getUser as fetchUserSettings,
   getApiActionCreator,
@@ -196,7 +195,6 @@ export {
   renderWithRouter,
   renderWithRouterRedux,
   resetUserIdleTime,
-  sdkBaseQuery,
   sendBAEvent,
   sendMessageToHost,
   setAppConfig,
@@ -209,10 +207,7 @@ export {
   trackActivity,
   updateBAEventParameters,
   useAppDispatch,
-  useAppMiddleware,
   useAppSelector,
-  useInjectListener,
-  useInjectQuery,
   useInjectReducer,
   useInjectSaga,
   useMediaQueryList,

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/breakpoint/use-breakpoint.js

@@ -1,7 +1,7 @@
 import { useEffect, useContext } from "react";
 import { ThemeContext } from "styled-components";
 import { publish } from "pubsub-js";
-import { useAppDispatch } from "../../data/react.js";
+import { useAppDispatch } from "../../data/react-redux.js";
 import { breakpoint } from "../../data/breakpoint/index.js";
 import { useMediaQueryList } from "./use-media-query-list.js";
 import { HOST_WINDOW_BREAKPOINT_CHANGED } from "../../utils/constants.js";

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/error-toast/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, memo } from "react";
 import { ToastPosition, ToastType, DSToast, toast } from "@elliemae/ds-toast";
-import { useAppSelector, useAppDispatch } from "../../data/react.js";
+import { useAppSelector, useAppDispatch } from "../../data/react-redux.js";
 import { actions as error } from "../../data/error/index.js";
 const ErrorToast = memo((props) => {
   const storeError = useAppSelector((state) => state?.error);

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
       }
     )
   }

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

@@ -3,10 +3,61 @@ import { DSControlledDateTimePicker } from "@elliemae/ds-controlled-form";
 import {
   Controller
 } from "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__ */ jsx(
   Controller,
@@ -14,14 +65,18 @@ const DateTimePicker = ({
     name,
     defaultValue,
     rules,
-    render: ({ field: { value, onChange, ...restProps } }) => /* @__PURE__ */ jsx(
-      DSControlledDateTimePicker,
-      {
-        ...restProps,
-        dateTime: value,
-        onDateTimeChange: onChange,
-        ...rest
-      }
+    render: ({ field: { value, onChange, ...restProps } }) => (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      /* @__PURE__ */ jsx(
+        DSControlledDateTimePicker,
+        {
+          ...restProps,
+          type,
+          ...getConfig(value, onChange)[type],
+          ...rest
+        }
+      )
     )
   }
 );

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

@@ -14,7 +14,7 @@ const InputText = ({
     name,
     defaultValue,
     rules,
-    render: ({ field }) => /* @__PURE__ */ jsx(DSInputText, { ...field, ...rest })
+    render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(DSInputText, { hasError: !!error, ...field, ...rest })
   }
 );
 export {

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

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { DSInputText } from "@elliemae/ds-controlled-form";
+import {
+  Controller,
+  useFormContext
+} from "react-hook-form";
+const MaskedInputText = ({
+  name,
+  defaultValue = "",
+  rules = {},
+  useMask,
+  maskOpts,
+  ...rest
+}) => {
+  const [, setVal] = React.useState(defaultValue);
+  const { setValue } = useFormContext();
+  const opts = React.useMemo(
+    () => ({
+      ...maskOpts,
+      onChange: (_, maskedValue) => setValue(name, maskedValue, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true
+      }),
+      valueSetter: setVal
+    }),
+    [maskOpts, name, setValue]
+  );
+  const inputProps = useMask(opts);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      defaultValue,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(DSInputText, { hasError: !!error, ...rest, ...field, ...inputProps })
+    }
+  );
+};
+export {
+  MaskedInputText
+};

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

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { DSControlledToggle } from "@elliemae/ds-controlled-form";
+import "@elliemae/ds-form-toggle";
 import {
   Controller
 } from "react-hook-form";

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

@@ -1,11 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import moment from "moment";
-import { TextBox } from "../fields/text-box/index.js";
-import { ComboBox } from "../fields/combo-box/index.js";
-import { DateInput } from "../fields/date-input/index.js";
+import { InputText } from "../fields/input-text/index.js";
+import { ComboBoxV3 } from "../fields/combo-box-v3/index.js";
+import { DateTimePicker } from "../fields/date-time-picker/index.js";
 import { FormLayoutBlockItem } from "../fields/form-layout-block-item/index.js";
 const FirstName = () => /* @__PURE__ */ jsx(FormLayoutBlockItem, { label: "First Name", inputID: "firstname", required: true, children: /* @__PURE__ */ jsx(
-  TextBox,
+  InputText,
   {
     id: "firstname",
     name: "firstname",
@@ -17,39 +16,43 @@ const FirstName = () => /* @__PURE__ */ jsx(FormLayoutBlockItem, { label: "First
   }
 ) });
 const DOB = () => /* @__PURE__ */ jsx(FormLayoutBlockItem, { label: "Date of Birth", inputID: "dob", required: true, children: /* @__PURE__ */ jsx(
-  DateInput,
+  DateTimePicker,
   {
     id: "dob",
     name: "dob",
+    type: "date-inputs",
     rules: {
       required: { value: true, message: "Date of Birth is required" },
-      validate: (value) => moment() > 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__ */ jsx(FormLayoutBlockItem, { label: "State", inputID: "state", required: true, children: /* @__PURE__ */ jsx(
-  ComboBox,
+  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__ */ jsx(FormLayoutBlockItem, { label: "Marital Status", inputID: "marital_status", required: true, children: /* @__PURE__ */ jsx(
-  ComboBox,
+  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/esm/view/live-message/index.js

@@ -1,11 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { LiveMessage as AriaLiveMessage } from "react-aria-live";
-import { useAppSelector } from "../../data/react.js";
+import { useAppSelector } from "../../data/react-redux.js";
 const LiveMessage = () => {
   const message = useAppSelector((state) => state.liveMessage?.message);
-  const id = useAppSelector((state) => state.liveMessage?.id);
   const ariaLive = useAppSelector((state) => state.liveMessage?.ariaLive);
-  return /* @__PURE__ */ jsx(AriaLiveMessage, { message, "aria-live": ariaLive, id });
+  return /* @__PURE__ */ jsx(AriaLiveMessage, { message, "aria-live": ariaLive });
 };
 export {
   LiveMessage