pixel-react 1.6.8 → 1.6.9

package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts

@@ -1,60 +1,60 @@
-import { DrowdownPosition, Option } from '../../type';
-
-export interface NlpDropDownListProps {
-  /*
-   * Callback function triggered on blur event
-   */
-  onSelectBlur: () => void;
-
-  /*
-   * Callback function triggered when an option is selected
-   */
-  onSelectOptionSelector: (option: Option) => void;
-
-  /*
-   * Position of the dropdown relative to the input
-   */
-  dropdownPosition: DrowdownPosition;
-
-  /*
-   * List of options to display in the dropdown
-   */
-  options?: Option[];
-
-  /*
-   * Optional z-index for controlling the dropdown's stacking order
-   */
-  optionZIndex?: number;
-
-  /*
-   * Reference to the input element
-   */
-  inputRef?: React.RefObject<HTMLInputElement>;
-
-  /*
-   * Optional label for the dropdown
-   */
-  label?: string;
-
-  /*
-   * If true, shows an error message related to the dropdown
-   */
-  hasError?: boolean;
-
-  /*
-   * Error message to display when hasError is true
-   */
-  errorMessage?: string;
-
-  /*
-   * If true, disables the dropdown
-   */
-  disabled?: boolean;
-}
-
-export const nlpDropdownDefaultCSSData = {
-  margin: 6,
-  optionHeight: 32,
-  selectInputHeight: 38,
-  dropDownWrapperPadding: 0,
-};
+import { DrowdownPosition, Option } from '../../type';
+
+export interface NlpDropDownListProps {
+  /*
+   * Callback function triggered on blur event
+   */
+  onSelectBlur: () => void;
+
+  /*
+   * Callback function triggered when an option is selected
+   */
+  onSelectOptionSelector: (option: Option) => void;
+
+  /*
+   * Position of the dropdown relative to the input
+   */
+  dropdownPosition: DrowdownPosition;
+
+  /*
+   * List of options to display in the dropdown
+   */
+  options?: Option[];
+
+  /*
+   * Optional z-index for controlling the dropdown's stacking order
+   */
+  optionZIndex?: number;
+
+  /*
+   * Reference to the input element
+   */
+  inputRef?: React.RefObject<HTMLInputElement>;
+
+  /*
+   * Optional label for the dropdown
+   */
+  label?: string;
+
+  /*
+   * If true, shows an error message related to the dropdown
+   */
+  hasError?: boolean;
+
+  /*
+   * Error message to display when hasError is true
+   */
+  errorMessage?: string;
+
+  /*
+   * If true, disables the dropdown
+   */
+  disabled?: boolean;
+}
+
+export const nlpDropdownDefaultCSSData = {
+  margin: 6,
+  optionHeight: 32,
+  selectInputHeight: 38,
+  dropDownWrapperPadding: 0,
+};

package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss

@@ -1,83 +1,83 @@
-@use '../../../../assets/styles/fonts';
-
-@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
-  position: absolute;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
-}
-
-.ff-nlp-dropdown-wrapper {
-  .ff-nlp-options-wrapper {
-    max-height: 160px;
-    z-index: 100;
-    position: absolute;
-    min-width: 100px;
-    border: 1px solid var(--ff-select-option-border-color);
-    box-sizing: border-box;
-    margin-top: 4px;
-    border-radius: 4px;
-    background-color: var(--ff-select-background-color);
-    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
-    overflow: hidden auto;
-    display: flex;
-    justify-content: space-between;
-
-    .ff-nlp-options-wrapper1 {
-      max-height: 160px;
-      z-index: 100;
-      min-width: auto;
-      box-sizing: border-box;
-    }
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 12px;
-
-      &-thumb {
-        background-color: var(--ff-select-scroll-thumb-color);
-        border-radius: 4px;
-      }
-
-      &-track {
-        background-color: transparent;
-        border-radius: 4px;
-      }
-    }
-
-    .ff-nlp-option {
-      width: calc(100% - 18px);
-      border: 1px solid transparent;
-      border-radius: 4px;
-      padding: 0px 8px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      cursor: pointer;
-
-      &:hover {
-        border-color: var(--ff-select-background-color);
-        background-color: var(--ff-select-option-hover-color);
-      }
-    }
-
-    .ff-nlp-no-option {
-      width: calc(100% - 16px);
-      margin: 0;
-      overflow: hidden;
-      padding: 0px 8px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      cursor: not-allowed;
-    }
-  }
-  .ff-nlp-data {
-    width: 200px;
-    height: 134px;
-
-    border: 1px solid transparent;
-    border-radius: 5px;
-    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
-    overflow: scroll;
-  }
-}
+@use '../../../../assets/styles/fonts';
+
+@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+.ff-nlp-dropdown-wrapper {
+  .ff-nlp-options-wrapper {
+    max-height: 160px;
+    z-index: 100;
+    position: absolute;
+    min-width: 100px;
+    border: 1px solid var(--ff-select-option-border-color);
+    box-sizing: border-box;
+    margin-top: 4px;
+    border-radius: 4px;
+    background-color: var(--ff-select-background-color);
+    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+    overflow: hidden auto;
+    display: flex;
+    justify-content: space-between;
+
+    .ff-nlp-options-wrapper1 {
+      max-height: 160px;
+      z-index: 100;
+      min-width: auto;
+      box-sizing: border-box;
+    }
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 12px;
+
+      &-thumb {
+        background-color: var(--ff-select-scroll-thumb-color);
+        border-radius: 4px;
+      }
+
+      &-track {
+        background-color: transparent;
+        border-radius: 4px;
+      }
+    }
+
+    .ff-nlp-option {
+      width: calc(100% - 18px);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      padding: 0px 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--ff-select-background-color);
+        background-color: var(--ff-select-option-hover-color);
+      }
+    }
+
+    .ff-nlp-no-option {
+      width: calc(100% - 16px);
+      margin: 0;
+      overflow: hidden;
+      padding: 0px 8px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: not-allowed;
+    }
+  }
+  .ff-nlp-data {
+    width: 200px;
+    height: 134px;
+
+    border: 1px solid transparent;
+    border-radius: 5px;
+    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+    overflow: scroll;
+  }
+}

package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx

@@ -1,180 +1,180 @@
-import { ReactNode, useContext, useRef, useState } from 'react';
-import {
-  NlpDropDownListProps,
-  nlpDropdownDefaultCSSData,
-} from './NlpDropDownType';
-import useClickOutside from '../../../../hooks/useClickOutside';
-import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
-import './NlpDropdown.scss';
-import Typography from '../../../Typography';
-import { ffid } from '../../../../utils/ffID/ffid';
-import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-
-type OptionType = {
-  label: ReactNode;
-  value: string;
-  displayName?: string;
-  description?: string;
-  nlpType?: string;
-  path?: string;
-  stepInputs?: { type?: string; name?: string }[];
-  returnType?: string;
-};
-
-const NlpDropdown = ({
-  onSelectBlur,
-  onSelectOptionSelector,
-  dropdownPosition,
-  options = [],
-  optionZIndex = 100,
-  inputRef,
-}: NlpDropDownListProps) => {
-  //   const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
-  const [nlpData] = useState<OptionType | null>(null);
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-  const optionsWrapperRef = useRef<HTMLDivElement>(null);
-  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
-
-  const { positionX, positionY, width, fromBottom } = dropdownPosition;
-  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
-    nlpDropdownDefaultCSSData;
-
-  const updateDropdownPosition = () => {
-    let dropdownContainerHeight;
-
-    if (checkEmpty(options)) {
-      dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
-    } else if (options.length > 5) {
-      dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
-    } else {
-      dropdownContainerHeight =
-        options.length * optionHeight + 2 * dropDownWrapperPadding;
-    }
-
-    if (fromBottom > dropdownContainerHeight + margin) {
-      return {
-        left: positionX,
-        top: positionY,
-        width: width,
-        zIndex: optionZIndex,
-      };
-    }
-    return {
-      zIndex: optionZIndex,
-      left: positionX,
-      width: width,
-      top: positionY - selectInputHeight - dropdownContainerHeight - margin,
-    };
-  };
-
-  return (
-    <div className="ff-nlp-dropdown-wrapper">
-      <div
-        ref={optionsWrapperRef}
-        style={updateDropdownPosition()}
-        className={classNames('ff-nlp-options-wrapper', currentTheme)}
-      >
-        <div className="ff-nlp-options-wrapper1">
-          {!checkEmpty(options) ? (
-            options.map((option) => (
-              //   <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
-              <div key={ffid()}>
-                <Typography
-                  as="div"
-                  lineHeight="30px"
-                  className={classNames('ff-nlp-option', currentTheme)}
-                  color="var(--ff-nlp-text-color)"
-                  onClick={() => onSelectOptionSelector(option)}
-                >
-                  <span className="mr-2 fontPoppinsRegularMd">
-                    {option?.nlpType === 'NLP' ? (
-                      <b className="nlp-type-NLP">NLP</b>
-                    ) : option?.nlpType === 'STEP_GROUP' ? (
-                      <b className="nlp-type-step-group">SG</b>
-                    ) : option?.nlpType === 'PROGRAM_ELEMENTS' ? (
-                      <b className="nlp-type-program-elements">PE</b>
-                    ) : (
-                      '--'
-                    )}
-                  </span>
-                  <span className="mr-2 fontPoppinsRegularMd">
-                    {option?.platform === 'web' ? (
-                      <b className="platform-web">Web</b>
-                    ) : option?.platform === 'android' ? (
-                      <b className="platform-android">Android</b>
-                    ) : option?.platform === 'ios' ? (
-                      <b className="platform-ios">iOS</b>
-                    ) : option?.platform === 'Generic' ? (
-                      <b className="platform-ios">Generic</b>
-                    ) : (
-                      '--'
-                    )}
-                  </span>
-                  {option?.displayName}
-                </Typography>
-              </div>
-            ))
-          ) : (
-            <Typography
-              textAlign="center"
-              lineHeight="32px"
-              as="p"
-              color="var(--ff-nlp-text-color)"
-              className="ff-nlp-no-option"
-            >
-              No Results Found
-            </Typography>
-          )}
-          <button>+ Web Services</button>
-        </div>
-        <div className="ff-nlp-data">
-          <div>
-            <div className="nlp-details-header mt-4">Name:</div>
-            <div className="nlp-details nlpdiv-check">
-              {nlpData?.displayName || '--'}
-            </div>
-            <div className="nlp-details-header mt-4">Description:</div>
-            <div className="nlp-details nlpdiv-check">
-              {nlpData?.description || '--'}
-            </div>
-            {nlpData?.nlpType === 'STEP_GROUP' && (
-              <>
-                <div className="nlp-details-header mt-4">Path:</div>
-                <div className="nlp-details nlpdiv-check">
-                  {nlpData?.path ? nlpData?.path.slice(6) : '--'}
-                </div>
-              </>
-            )}
-            <div className="nlp-details-header mt-4">Inputs:</div>
-            {nlpData?.stepInputs?.length ? (
-              nlpData.stepInputs.map((stepInput, index) => {
-                const stepInputType = stepInput.type
-                  ? stepInput.type.split('.').pop()
-                  : '--';
-                return (
-                  <div key={index}>
-                    <div className="nlp-details-header">Input{index + 1}:</div>
-                    <div className="nlp-details">type: {stepInputType}</div>
-                    <div className="nlp-details mb-4">
-                      name: {stepInput.name || '--'}
-                    </div>
-                  </div>
-                );
-              })
-            ) : (
-              <div className="nlp-details mb-4">--</div>
-            )}
-            <div className="nlp-details-header">Output:</div>
-            <div className="nlp-details mb-4">
-              {nlpData?.returnType || '--'}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NlpDropdown;
+import { ReactNode, useContext, useRef, useState } from 'react';
+import {
+  NlpDropDownListProps,
+  nlpDropdownDefaultCSSData,
+} from './NlpDropDownType';
+import useClickOutside from '../../../../hooks/useClickOutside';
+import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
+import './NlpDropdown.scss';
+import Typography from '../../../Typography';
+import { ffid } from '../../../../utils/ffID/ffid';
+import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
+
+type OptionType = {
+  label: ReactNode;
+  value: string;
+  displayName?: string;
+  description?: string;
+  nlpType?: string;
+  path?: string;
+  stepInputs?: { type?: string; name?: string }[];
+  returnType?: string;
+};
+
+const NlpDropdown = ({
+  onSelectBlur,
+  onSelectOptionSelector,
+  dropdownPosition,
+  options = [],
+  optionZIndex = 100,
+  inputRef,
+}: NlpDropDownListProps) => {
+  //   const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
+  const [nlpData] = useState<OptionType | null>(null);
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  const optionsWrapperRef = useRef<HTMLDivElement>(null);
+  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
+
+  const { positionX, positionY, width, fromBottom } = dropdownPosition;
+  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
+    nlpDropdownDefaultCSSData;
+
+  const updateDropdownPosition = () => {
+    let dropdownContainerHeight;
+
+    if (checkEmpty(options)) {
+      dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
+    } else if (options.length > 5) {
+      dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
+    } else {
+      dropdownContainerHeight =
+        options.length * optionHeight + 2 * dropDownWrapperPadding;
+    }
+
+    if (fromBottom > dropdownContainerHeight + margin) {
+      return {
+        left: positionX,
+        top: positionY,
+        width: width,
+        zIndex: optionZIndex,
+      };
+    }
+    return {
+      zIndex: optionZIndex,
+      left: positionX,
+      width: width,
+      top: positionY - selectInputHeight - dropdownContainerHeight - margin,
+    };
+  };
+
+  return (
+    <div className="ff-nlp-dropdown-wrapper">
+      <div
+        ref={optionsWrapperRef}
+        style={updateDropdownPosition()}
+        className={classNames('ff-nlp-options-wrapper', currentTheme)}
+      >
+        <div className="ff-nlp-options-wrapper1">
+          {!checkEmpty(options) ? (
+            options.map((option) => (
+              //   <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
+              <div key={ffid()}>
+                <Typography
+                  as="div"
+                  lineHeight="30px"
+                  className={classNames('ff-nlp-option', currentTheme)}
+                  color="var(--ff-nlp-text-color)"
+                  onClick={() => onSelectOptionSelector(option)}
+                >
+                  <span className="mr-2 fontPoppinsRegularMd">
+                    {option?.nlpType === 'NLP' ? (
+                      <b className="nlp-type-NLP">NLP</b>
+                    ) : option?.nlpType === 'STEP_GROUP' ? (
+                      <b className="nlp-type-step-group">SG</b>
+                    ) : option?.nlpType === 'PROGRAM_ELEMENTS' ? (
+                      <b className="nlp-type-program-elements">PE</b>
+                    ) : (
+                      '--'
+                    )}
+                  </span>
+                  <span className="mr-2 fontPoppinsRegularMd">
+                    {option?.platform === 'web' ? (
+                      <b className="platform-web">Web</b>
+                    ) : option?.platform === 'android' ? (
+                      <b className="platform-android">Android</b>
+                    ) : option?.platform === 'ios' ? (
+                      <b className="platform-ios">iOS</b>
+                    ) : option?.platform === 'Generic' ? (
+                      <b className="platform-ios">Generic</b>
+                    ) : (
+                      '--'
+                    )}
+                  </span>
+                  {option?.displayName}
+                </Typography>
+              </div>
+            ))
+          ) : (
+            <Typography
+              textAlign="center"
+              lineHeight="32px"
+              as="p"
+              color="var(--ff-nlp-text-color)"
+              className="ff-nlp-no-option"
+            >
+              No Results Found
+            </Typography>
+          )}
+          <button>+ Web Services</button>
+        </div>
+        <div className="ff-nlp-data">
+          <div>
+            <div className="nlp-details-header mt-4">Name:</div>
+            <div className="nlp-details nlpdiv-check">
+              {nlpData?.displayName || '--'}
+            </div>
+            <div className="nlp-details-header mt-4">Description:</div>
+            <div className="nlp-details nlpdiv-check">
+              {nlpData?.description || '--'}
+            </div>
+            {nlpData?.nlpType === 'STEP_GROUP' && (
+              <>
+                <div className="nlp-details-header mt-4">Path:</div>
+                <div className="nlp-details nlpdiv-check">
+                  {nlpData?.path ? nlpData?.path.slice(6) : '--'}
+                </div>
+              </>
+            )}
+            <div className="nlp-details-header mt-4">Inputs:</div>
+            {nlpData?.stepInputs?.length ? (
+              nlpData.stepInputs.map((stepInput, index) => {
+                const stepInputType = stepInput.type
+                  ? stepInput.type.split('.').pop()
+                  : '--';
+                return (
+                  <div key={index}>
+                    <div className="nlp-details-header">Input{index + 1}:</div>
+                    <div className="nlp-details">type: {stepInputType}</div>
+                    <div className="nlp-details mb-4">
+                      name: {stepInput.name || '--'}
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="nlp-details mb-4">--</div>
+            )}
+            <div className="nlp-details-header">Output:</div>
+            <div className="nlp-details mb-4">
+              {nlpData?.returnType || '--'}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NlpDropdown;

package/src/components/NLPInput/index.ts

@@ -1 +1 @@
-export { default } from './NlpInput';
+export { default } from './NlpInput';