npm - @integration-app/react - Versions diffs - 2.6.2 → 2.7.0 - Mend

@integration-app/react 2.6.2 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (641) hide show

package/dist/cjs/components/ComboBox/Dropdown/KeyboardNavigation/NavigationContext.cjs ADDED Viewed

@@ -0,0 +1,203 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.7.0
+ */
+'use client';
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var deepEqual = require('fast-deep-equal');
+var useDeepEffect = require('../../../../helpers/hooks/useDeepEffect.cjs');
+var comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
+const NavigationContext = React.createContext({
+  currentItem: null,
+  moveToNextItem: () => null,
+  moveToPreviousItem: () => null,
+  onOptionsListChange: () => null
+});
+function payloadReducer(state, action) {
+  const compactState = Object.entries(state).reduce(
+    (acc, [orderId, payload]) => {
+      if (!payload.options.length && !payload.fallbackOptions.length) {
+        return acc;
+      }
+      return {
+        ...acc,
+        [Number(orderId)]: payload
+      };
+    },
+    {}
+  );
+  return {
+    ...compactState,
+    [action.orderId]: {
+      options: action.options,
+      fallbackOptions: action.fallbackOptions
+    }
+  };
+}
+function NavigationContextProvider({
+  children
+}) {
+  const [currentItem, setCurrentItem] = React.useState(null);
+  const [payload, dispatch] = React.useReducer(payloadReducer, {});
+  const { isOptionSelected, drillDownStackTop } = comboboxDropdownContext.useComboBoxDropdownContext();
+  useDeepEffect.useDeepEffect(() => {
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (!itemOptions.length) {
+      return;
+    }
+    if (currentItem === "drill-up") {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    if (!currentItem || itemOptions.indexOf(currentItem) == -1) {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    if (getOptionIndex(currentItem, itemOptions) == -1) {
+      const selectedOption = itemOptions.find(isOptionSelected);
+      if (selectedOption) {
+        setCurrentItem(selectedOption);
+      } else {
+        const onlyOptions = getOnlyItemOptions(itemOptions);
+        setCurrentItem(onlyOptions[0]);
+      }
+    }
+  }, [payload]);
+  const moveToPreviousItem = () => {
+    if (currentItem === "drill-up") {
+      return;
+    }
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (!currentItem) {
+      setCurrentItem(itemOptions[itemOptions.length - 1]);
+      return;
+    }
+    const idx = getOptionIndex(currentItem, itemOptions);
+    if (idx === 0 && !!drillDownStackTop) {
+      setCurrentItem("drill-up");
+      return;
+    }
+    if (idx === 0) {
+      return;
+    }
+    if (idx > 0) {
+      const currentOption = itemOptions[idx - 1];
+      setCurrentItem(currentOption);
+      return;
+    }
+    setCurrentItem(itemOptions[itemOptions.length - 1]);
+  };
+  const moveToNextItem = () => {
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (itemOptions.length === 0) {
+      setCurrentItem(null);
+      return;
+    }
+    if (!currentItem || currentItem === "drill-up") {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    const idx = getOptionIndex(currentItem, itemOptions);
+    if (idx === itemOptions.length - 1) {
+      return;
+    }
+    if (idx === -1) {
+      setCurrentItem(itemOptions[0]);
+    }
+    if (idx < itemOptions.length - 1) {
+      const currentOption = itemOptions[idx + 1];
+      setCurrentItem(currentOption);
+    }
+  };
+  const onOptionsListChange = ({
+    orderId,
+    options,
+    fallbackOptions
+  }) => {
+    dispatch({
+      orderId,
+      options,
+      fallbackOptions
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationContext.Provider,
+    {
+      value: {
+        currentItem,
+        moveToNextItem,
+        moveToPreviousItem,
+        onOptionsListChange
+      },
+      children
+    }
+  );
+}
+function useNavigationContext(options = [], fallbackOptions = []) {
+  const orderId = React.useRef(Date.now());
+  const {
+    currentItem,
+    moveToNextItem,
+    moveToPreviousItem,
+    onOptionsListChange
+  } = React.useContext(NavigationContext);
+  useDeepEffect.useDeepEffect(() => {
+    onOptionsListChange({
+      orderId: orderId.current,
+      options,
+      fallbackOptions
+    });
+  }, [options, fallbackOptions]);
+  React.useEffect(() => {
+    return () => {
+      onOptionsListChange({
+        orderId: orderId.current,
+        options: [],
+        fallbackOptions: []
+      });
+    };
+  }, []);
+  return {
+    currentItem,
+    moveToNextItem,
+    moveToPreviousItem
+  };
+}
+const makeOptionComparable = (option) => {
+  return option && {
+    ...option,
+    label: option.searchLabel ?? option.label?.toString()
+  };
+};
+const getOnlyItemOptions = (options) => options.filter((o) => !o.isSection);
+function getOptionIndex(option, options) {
+  return options.findIndex(
+    (o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option))
+  );
+}
+const getUnifiedOptionsList = (payload) => {
+  const { options, fallbackOptions } = Object.entries(payload).sort(([orderId]) => Number(orderId)).reduce(
+    (acc, [_, { options: options2, fallbackOptions: fallbackOptions2 }]) => {
+      return {
+        options: [...acc.options, ...options2],
+        fallbackOptions: [...acc.fallbackOptions, ...fallbackOptions2]
+      };
+    },
+    {
+      options: [],
+      fallbackOptions: []
+    }
+  );
+  const itemOptions = getOnlyItemOptions(options);
+  return itemOptions.length ? itemOptions : getOnlyItemOptions(fallbackOptions);
+};
+exports.NavigationContextProvider = NavigationContextProvider;
+exports.useNavigationContext = useNavigationContext;

package/dist/cjs/components/ComboBox/Dropdown/KeyboardNavigation/useKeyboardBinding.cjs ADDED Viewed

@@ -0,0 +1,60 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.7.0
+ */
+'use client';
+'use strict';
+var comboboxContext = require('../../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../../context/combobox-dropdown-context.cjs');
+var keyboardEvents = require('../../../../helpers/hooks/keyboard-events.cjs');
+var NavigationContext = require('./NavigationContext.cjs');
+const useKeyboardBinding = ({
+  options,
+  fallbackOptions,
+  onEnter = () => {
+  }
+}) => {
+  const { scopedComboboxId } = comboboxContext.useComboBox();
+  const { drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const { currentItem, moveToNextItem, moveToPreviousItem } = NavigationContext.useNavigationContext(options, fallbackOptions);
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_DOWN,
+    callback: moveToPreviousItem
+  });
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_UP,
+    callback: moveToNextItem
+  });
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_LEFT,
+    callback: drillUp
+  });
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_RIGHT,
+    callback: () => {
+      if (currentItem) {
+        onEnter(currentItem);
+      }
+    }
+  });
+  keyboardEvents.useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: keyboardEvents.EVENT_TYPE.OPTION_SELECT,
+    callback: () => {
+      if (currentItem) {
+        onEnter(currentItem);
+      }
+    }
+  });
+};
+exports.useKeyboardBinding = useKeyboardBinding;

package/dist/cjs/components/ComboBox/Dropdown/Option.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';
@@ -42,6 +42,7 @@ function DropdownOption({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemIcon, { ...iconProps, framed: true }),
         /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemTitle, { children: option.label }),
+        option.hint && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemHint, { value: option.hint, prefix: option.hintPrefix }),
         hasChild && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemNestingIndicator, { count: option.childrenCount, children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemIcon, { type: svgIconType.SvgIconType.ChevronRight }) }),
         selected && /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.ItemIcon, { type: svgIconType.SvgIconType.Check })
       ]

package/dist/cjs/components/ComboBox/Dropdown/OptionsList.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';
@@ -11,66 +11,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var deepEqual = require('fast-deep-equal');
 var jsConvertCase = require('js-convert-case');
-var keyboardEvents = require('../../../helpers/hooks/keyboard-events.cjs');
-var useDeepEffect = require('../../../helpers/hooks/useDeepEffect.cjs');
 var css = require('../../../styled-system/css/css.cjs');
 require('../../../styled-system/helpers.cjs');
 var index = require('../../DropdownUI/index.cjs');
 var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
-var NavigationContext = require('./NavigationContext.cjs');
+var NavigationContext = require('./KeyboardNavigation/NavigationContext.cjs');
 var Option = require('./Option.cjs');
 var dataBuilderContext = require('../../DataBuilder/data-builder-context.cjs');
 var fieldContext = require('../../DataBuilder/field-context.cjs');
 var comboboxContext = require('../context/combobox-context.cjs');
+var useKeyboardBinding = require('./KeyboardNavigation/useKeyboardBinding.cjs');
-const useKeyboardBinding = ({
-  options,
-  fallbackOptions,
-  onEnter
-}) => {
-  const { scopedComboboxId } = comboboxContext.useComboBox();
-  const { drillUp } = comboboxDropdownContext.useComboBoxDropdownContext();
-  const { currentItem, moveToNextItem, moveToPreviousItem } = NavigationContext.useNavigationContext();
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_DOWN,
-    callback: () => {
-      moveToPreviousItem(options, fallbackOptions, currentItem);
-    }
-  });
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_UP,
-    callback: () => {
-      moveToNextItem(options, fallbackOptions, currentItem);
-    }
-  });
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_LEFT,
-    callback: () => {
-      drillUp();
-    }
-  });
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_RIGHT,
-    callback: () => {
-      if (currentItem) {
-        onEnter(currentItem);
-      }
-    }
-  });
-  keyboardEvents.useKeyboardEventSubscribe({
-    scopedComboboxId,
-    event: keyboardEvents.EVENT_TYPE.OPTION_SELECT,
-    callback: () => {
-      if (currentItem) {
-        onEnter(currentItem);
-      }
-    }
-  });
-};
 function OptionsList({
   onOptionSelect
 }) {
@@ -83,14 +34,10 @@ function OptionsList({
     optionsPayload,
     drillUp
   } = comboboxDropdownContext.useComboBoxDropdownContext();
-  const { currentItem, onOptionsListChange } = NavigationContext.useNavigationContext();
   const { value: parentInputValue } = comboboxContext.useComboBox();
   const [result, optionsError, optionsState] = optionsPayload;
   const { options = [], fallbackOptions = [] } = result || {};
-  useKeyboardBinding({ options, fallbackOptions, onEnter: handleOptionSelect });
-  useDeepEffect.useDeepEffect(() => {
-    onOptionsListChange(options, fallbackOptions);
-  }, [options, fallbackOptions]);
+  useKeyboardBinding.useKeyboardBinding({ options, fallbackOptions, onEnter: handleOptionSelect });
   function handleOptionSelect(option) {
     if (option === "drill-up") {
       drillUp();
@@ -109,7 +56,7 @@ function OptionsList({
       onOptionSelect(option.value);
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownList, { state: optionsState, error: optionsError, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownListState, { state: optionsState, error: optionsError, children: /* @__PURE__ */ jsxRuntime.jsx(
     DropdownListOptions,
     {
       searchTerm: canUseParentInputSearchValue ? parentInputValue : void 0,
@@ -120,27 +67,27 @@ function OptionsList({
     }
   ) });
 }
-function DropdownList({
+function DropdownListState({
   state,
   error,
   children
 }) {
   if (state === "rejected" || error) {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       index.DropdownUI.ErrorHeading,
       {
         text: error?.message || "Something went wrong"
       }
-    ) });
+    );
   }
   if (state === "pending") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(index.DropdownUI.List, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
       /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {}),
       /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.LoadingItem, {})
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children });
+  return children;
 }
 function DropdownListOptions({
   options,

package/dist/cjs/components/ComboBox/Dropdown/SearchInput.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/Dropdown/categoryContentMapping.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/DropdownPopover/DropdownPositioner.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/DropdownPopover/index.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/Edit/OptionSelector.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/Edit/OptionSelector.module.css.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/Edit/TextInput.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/Value/ComboBoxValue.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/Value/Formula.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/Value/Schema.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/Value/isDefinedValue.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/context/combobox-context.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/context/combobox-dropdown-context.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/context/combobox-dropdown-search.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/context/combobox-dropdown-stack.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/context/helpers.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/boolean.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/constant.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/custom-field.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/enum.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/formula.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/generate-schema-options.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/object-fields.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/reference-records.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/root.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';

package/dist/cjs/components/ComboBox/options-factories/utils.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.6.2
+ * v2.7.0
  */
 'use client';