@elliemae/pui-app-sdk 5.9.0 → 5.10.0

package/dist/cjs/index.js

@@ -67,6 +67,7 @@ __export(lib_exports, {
   TextBox: () => import_text_box.TextBox,
   Themes: () => import_constants2.Themes,
   Toggle: () => import_toggle.Toggle,
+  UseStateSelectorOptions: () => import_use_state_selector.UseStateSelectorOptions,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   WaitMessage: () => import_wait_message.WaitMessage,
   ariaLive: () => import_live_message.actions,
@@ -140,6 +141,8 @@ __export(lib_exports, {
   useInjectSaga: () => import_redux_injectors.useInjectSaga,
   useInjectSideEffect: () => import_react.useInjectSideEffect,
   useMediaQueryList: () => import_use_media_query_list.useMediaQueryList,
+  useStateSelector: () => import_use_state_selector.useStateSelector,
+  useStateSelectorShallow: () => import_use_state_selector.useStateSelectorShallow,
   waitMessageAction: () => import_actions3.waitMessage,
   withAppDecorator: () => import_decorator.withAppDecorator
 });
@@ -156,6 +159,7 @@ var import_page = require("./view/page.js");
 var import_constants = __toESM(require("./utils/constants.js"));
 var import_redux_injectors = require("redux-injectors");
 var import_react = require("./data/react.js");
+var import_use_state_selector = require("./utils/custom-hooks/use-state-selector.js");
 var import_errorMiddleware = require("./data/errorMiddleware.js");
 var import_listenerMiddleware = require("./data/listenerMiddleware.js");
 var import_helper = require("./utils/auth/helper.js");

package/dist/cjs/utils/custom-hooks/use-state-selector.js

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_state_selector_exports = {};
+__export(use_state_selector_exports, {
+  useStateSelector: () => useStateSelector,
+  useStateSelectorShallow: () => useStateSelectorShallow
+});
+module.exports = __toCommonJS(use_state_selector_exports);
+var import_react = require("react");
+var import_react_redux = require("react-redux");
+function useStateSelector(selectStateFieldFunc, fieldName = "", {
+  defaultValue = void 0,
+  equalityFn = void 0
+} = {}) {
+  const [finalDefaultValue] = (0, import_react.useState)(
+    defaultValue
+  );
+  return (0, import_react_redux.useSelector)(
+    selectStateFieldFunc(fieldName, finalDefaultValue),
+    equalityFn
+  );
+}
+function useStateSelectorShallow(selectStateFieldFunc, fieldName = "", {
+  defaultValue = void 0,
+  equalityFn = import_react_redux.shallowEqual
+} = {}) {
+  return useStateSelector(selectStateFieldFunc, fieldName, {
+    defaultValue,
+    equalityFn
+  });
+}

package/dist/esm/index.js

@@ -23,6 +23,11 @@ import {
   useAppSelector,
   useAppMiddleware
 } from "./data/react.js";
+import {
+  useStateSelector,
+  useStateSelectorShallow,
+  UseStateSelectorOptions
+} from "./utils/custom-hooks/use-state-selector.js";
 import { errorMiddleware } from "./data/errorMiddleware.js";
 import {
   startSideEffect,
@@ -167,6 +172,7 @@ export {
   TextBox,
   Themes,
   Toggle,
+  UseStateSelectorOptions,
   VisuallyHidden,
   WaitMessage,
   actions as ariaLive,
@@ -240,6 +246,8 @@ export {
   useInjectSaga,
   useInjectSideEffect,
   useMediaQueryList,
+  useStateSelector,
+  useStateSelectorShallow,
   waitMessage as waitMessageAction,
   withAppDecorator
 };

package/dist/esm/utils/custom-hooks/use-state-selector.js

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { useSelector, shallowEqual } from "react-redux";
+function useStateSelector(selectStateFieldFunc, fieldName = "", {
+  defaultValue = void 0,
+  equalityFn = void 0
+} = {}) {
+  const [finalDefaultValue] = useState(
+    defaultValue
+  );
+  return useSelector(
+    selectStateFieldFunc(fieldName, finalDefaultValue),
+    equalityFn
+  );
+}
+function useStateSelectorShallow(selectStateFieldFunc, fieldName = "", {
+  defaultValue = void 0,
+  equalityFn = shallowEqual
+} = {}) {
+  return useStateSelector(selectStateFieldFunc, fieldName, {
+    defaultValue,
+    equalityFn
+  });
+}
+export {
+  useStateSelector,
+  useStateSelectorShallow
+};

package/dist/types/lib/api/helpers.d.ts

@@ -52,7 +52,7 @@ export declare const getApiActionCreator: (api: string) => (operation: string) =
  *
  * export const useSelectSomeState = (fieldName, defaultValue) => {
  *  const finalDefaultValue = useMemo(() => defaultValue, []);
- *  useSelector(selectSomeState(fieldName, defaultValue), shallowEqual);
+ *  useSelector(selectSomeState(fieldName, finalDefaultValue), shallowEqual);
  * }
  *
  * // some-component.js

package/dist/types/lib/index.d.ts

@@ -10,6 +10,7 @@ export { Page } from './view/page.js';
 export { default as globalConstants } from './utils/constants.js';
 export { useInjectReducer, useInjectSaga, createManager, } from 'redux-injectors';
 export { useInjectQuery, useInjectSideEffect, useAppDispatch, useAppSelector, useAppMiddleware, } from './data/react.js';
+export { useStateSelector, useStateSelectorShallow, UseStateSelectorOptions, } from './utils/custom-hooks/use-state-selector.js';
 export { errorMiddleware } from './data/errorMiddleware.js';
 export { startSideEffect, createSideEffect, removeSideEffect, clearSideEffects, } from './data/listenerMiddleware.js';
 export { getAuthorizationHeader } from './utils/auth/helper.js';
@@ -90,3 +91,4 @@ export type { RootState, AppStore, AppDispatch } from './data/types.js';
 export type { AppConfig } from './utils/app-config/config.js';
 export type { OnInitCallback, OnMountCallback, OnUnMountCallback, } from './utils/micro-frontend/guest.js';
 export type { OnInitCallback as OnHostInitCallback } from './utils/micro-frontend/host.js';
+export type { SelectStateFieldFunction } from './utils/custom-hooks/use-state-selector.js';

package/dist/types/lib/utils/custom-hooks/use-state-selector.d.ts

@@ -0,0 +1,42 @@
+import { EqualityFn } from 'react-redux';
+export type SelectStateFieldFunction<TState = unknown, Selected = unknown> = (fieldName: string | Array<string>, defaultValue?: Selected | Selected[]) => (state: TState) => Selected;
+export interface UseStateSelectorOptions<Selected = unknown> {
+    defaultValue?: Selected | Array<Selected>;
+    equalityFn?: EqualityFn<Selected>;
+}
+/**
+ * Generic selector that receives a field selector function returned from getSelectField
+ *
+ * @see /lib/api/helpers.ts#getSelectField
+ * @param {SelectStateFieldFunction} selectStateFieldFunc the store state's field selector function
+ * ```javascript
+ *  // reducer.js
+ * import { getSelectField } from 'elliemae/pui-app-sdk';
+ *
+ * const name = 'someState';
+ * export selectStateFieldFunc = getSelectField(name);
+ * ```
+ * @param {string | Array<string>} fieldName the state's field you want to acccess, this accepts nested objects access, like so 'rootObj.childObj.field'
+ * @param {useStateSelectorOptions} opts options { defaultValue, equalityFn }
+ * @returns
+ */
+export declare function useStateSelector<TState = unknown, Selected = unknown>(selectStateFieldFunc: SelectStateFieldFunction<TState, Selected>, fieldName?: string | Array<string>, { defaultValue, equalityFn, }?: UseStateSelectorOptions<Selected>): Selected;
+/**
+ * Generic selector that receives a field selector function returned from getSelectField.
+ *
+ * @see /lib/api/helpers.ts#getSelectField
+ *
+ * This is the same as useStateSelector with shallowEqual as default for equalityFn option.
+ * @param {SelectStateFieldFunction} selectStateFieldFunc the store state's field selector function
+ * ```javascript
+ *  // reducer.js
+ * import { getSelectField } from 'elliemae/pui-app-sdk';
+ *
+ * const name = 'someState';
+ * export selectStateFieldFunc = getSelectField(name);
+ * ```
+ * @param {string | Array<string>} fieldName the state's field you want to acccess, this accepts nested objects access, like so 'rootObj.childObj.field'
+ * @param {useStateSelectorOptions} opts options { defaultValue, equalityFn = shallowEqual }
+ * @returns
+ */
+export declare function useStateSelectorShallow<TState = unknown, Selected = unknown>(selectStateFieldFunc: SelectStateFieldFunction<TState, Selected>, fieldName?: string | Array<string>, { defaultValue, equalityFn, }?: UseStateSelectorOptions<Selected>): Selected;

package/dist/types/lib/view/fields/toggle/index.stories.d.ts

@@ -5,6 +5,6 @@ export declare const Basic: Story<{
     name: string;
     defaultValue?: boolean | undefined;
     rules?: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "setValueAs" | "valueAsNumber" | "valueAsDate"> | undefined;
-} & Omit<import("@elliemae/ds-controlled-form").DSControlledToggleT.Props, "onChange" | "defaultValue" | "selectedValues"> & {
+} & Omit<import("@elliemae/ds-controlled-form").DSControlledToggleT.Props, "defaultValue" | "onChange" | "selectedValues"> & {
     label: string;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-app-sdk",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "description": "ICE MT UI Platform Application SDK ",
   "sideEffects": [
     "*.css",