@campxdev/react-blueprint 0.1.22 → 0.1.24

package/src/components/Icons/IconComponents/NavigationIcon.tsx

@@ -4,31 +4,27 @@ export const NavigationIcon = () => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="21"
-        height="21"
-        viewBox="0 0 30 30"
-        style={{
-          stroke: color,
-        }}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="21"
+      viewBox="0 0 30 30"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="Mask_Group_125"
+        data-name="Mask Group 125"
+        transform="translate(-847 -594)"
+        clipPath="url(#clip-path)"
       >
-        <g
-          id="Mask_Group_125"
-          data-name="Mask Group 125"
-          transform="translate(-847 -594)"
-          clipPath="url(#clip-path)"
-        >
-          <path
-            id="share-square"
-            d="M17.555,19.621a5.165,5.165,0,0,1-5.163,5.163H5.163A5.165,5.165,0,0,1,0,19.621V12.392A5.165,5.165,0,0,1,5.163,7.229H6.2a1.033,1.033,0,0,1,0,2.065H5.163a3.107,3.107,0,0,0-3.1,3.1v7.229a3.107,3.107,0,0,0,3.1,3.1h7.229a3.107,3.107,0,0,0,3.1-3.1,1.033,1.033,0,1,1,2.065,0Zm6.33-13.538L18.3.31A1.019,1.019,0,0,0,16.843.289a1.029,1.029,0,0,0-.021,1.456L22.13,7.219H13.425a5.165,5.165,0,0,0-5.163,5.163v5.163a1.033,1.033,0,0,0,2.065,0V12.382a3.107,3.107,0,0,1,3.1-3.1h8.7l-5.308,5.473a1.027,1.027,0,0,0,.744,1.745,1.066,1.066,0,0,0,.744-.31l5.576-5.752a3.1,3.1,0,0,0,.01-4.368Z"
-            transform="translate(849.609 596.406)"
-            fill={color}
-            strokeWidth="0.3"
-          />
-        </g>
-      </svg>
-    </>
+        <path
+          id="share-square"
+          d="M17.555,19.621a5.165,5.165,0,0,1-5.163,5.163H5.163A5.165,5.165,0,0,1,0,19.621V12.392A5.165,5.165,0,0,1,5.163,7.229H6.2a1.033,1.033,0,0,1,0,2.065H5.163a3.107,3.107,0,0,0-3.1,3.1v7.229a3.107,3.107,0,0,0,3.1,3.1h7.229a3.107,3.107,0,0,0,3.1-3.1,1.033,1.033,0,1,1,2.065,0Zm6.33-13.538L18.3.31A1.019,1.019,0,0,0,16.843.289a1.029,1.029,0,0,0-.021,1.456L22.13,7.219H13.425a5.165,5.165,0,0,0-5.163,5.163v5.163a1.033,1.033,0,0,0,2.065,0V12.382a3.107,3.107,0,0,1,3.1-3.1h8.7l-5.308,5.473a1.027,1.027,0,0,0,.744,1.745,1.066,1.066,0,0,0,.744-.31l5.576-5.752a3.1,3.1,0,0,0,.01-4.368Z"
+          transform="translate(849.609 596.406)"
+        />
+      </g>
+    </svg>
   );
 };

package/src/components/Icons/IconComponents/ProfileIcon.tsx

@@ -14,7 +14,6 @@ export const ProfileIcon = () => {
         height="16"
         viewBox="0 0 16 16"
         style={{
-          stroke: color,
           fill: color, // Set fill color to use the theme's primary text color
         }}
       >
@@ -23,21 +22,18 @@ export const ProfileIcon = () => {
             id="Vector"
             d="M6.56,14.337a2.585,2.585,0,0,1-1.3-.347L1.3,11.7A2.618,2.618,0,0,1,0,9.45V4.89A2.618,2.618,0,0,1,1.3,2.637L5.26.35a2.589,2.589,0,0,1,2.6,0l3.96,2.287a2.618,2.618,0,0,1,1.3,2.253V9.45a2.618,2.618,0,0,1-1.3,2.253L7.86,13.99A2.585,2.585,0,0,1,6.56,14.337ZM6.56,1a1.634,1.634,0,0,0-.8.213L1.8,3.5A1.6,1.6,0,0,0,1,4.89V9.45a1.612,1.612,0,0,0,.8,1.387l3.96,2.287a1.6,1.6,0,0,0,1.6,0l3.96-2.287a1.6,1.6,0,0,0,.8-1.387V4.89a1.612,1.612,0,0,0-.8-1.387L7.36,1.217A1.634,1.634,0,0,0,6.56,1Z"
             transform="translate(1.44 0.83)"
-            strokeWidth="0.5"
           />
           <path
             id="Vector-2"
             data-name="Vector"
             d="M2.053,4.107A2.053,2.053,0,1,1,4.107,2.053,2.054,2.054,0,0,1,2.053,4.107ZM2.053,1A1.053,1.053,0,1,0,3.107,2.053,1.056,1.056,0,0,0,2.053,1Z"
             transform="translate(5.947 3.727)"
-            strokeWidth="0.5"
           />
           <path
             id="Vector-3"
             data-name="Vector"
             d="M5.833,3.173a.5.5,0,0,1-.5-.5A1.974,1.974,0,0,0,3.167,1,1.974,1.974,0,0,0,1,2.673a.5.5,0,0,1-.5.5.5.5,0,0,1-.5-.5A2.955,2.955,0,0,1,3.167,0,2.955,2.955,0,0,1,6.333,2.673.5.5,0,0,1,5.833,3.173Z"
             transform="translate(4.833 8.433)"
-            strokeWidth="0.5"
           />
           <path
             id="Vector-4"

package/src/components/Icons/IconComponents/TooltipIcon.tsx

@@ -0,0 +1,26 @@
+import { useTheme } from "@mui/material";
+
+export const TooltipIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20.182"
+      height="21.03"
+      viewBox="0 0 20.182 21.03"
+      style={{
+        fill: color,
+      }}
+    >
+      <g id="light-bulb" transform="translate(-9.8)" opacity="0.7">
+        <path
+          id="XMLID_49_"
+          d="M22.288,18.377v.614a.975.975,0,0,1-.826.965l-.151.558a.7.7,0,0,1-.671.515h-1.5a.7.7,0,0,1-.671-.515l-.147-.558a.979.979,0,0,1-.831-.969v-.614a.591.591,0,0,1,.593-.593H21.7A.6.6,0,0,1,22.288,18.377ZM25.071,10.1a5.155,5.155,0,0,1-1.454,3.6,4.751,4.751,0,0,0-1.272,2.579.857.857,0,0,1-.848.723H18.281a.848.848,0,0,1-.844-.718,4.8,4.8,0,0,0-1.281-2.588A5.18,5.18,0,1,1,25.071,10.1Zm-4.6-3.137a.584.584,0,0,0-.584-.584,3.742,3.742,0,0,0-3.739,3.739.584.584,0,1,0,1.168,0,2.573,2.573,0,0,1,2.57-2.57A.582.582,0,0,0,20.475,6.958Zm-.584-3.743a.584.584,0,0,0,.584-.584V.584a.584.584,0,1,0-1.168,0V2.631A.584.584,0,0,0,19.891,3.215Zm-6.876,6.876a.584.584,0,0,0-.584-.584H10.384a.584.584,0,1,0,0,1.168h2.047A.582.582,0,0,0,13.015,10.091ZM29.4,9.507H27.351a.584.584,0,1,0,0,1.168H29.4a.584.584,0,1,0,0-1.168ZM14.205,14.955l-1.45,1.45a.583.583,0,0,0,.822.826l1.45-1.45a.583.583,0,0,0-.822-.826ZM25.166,5.4a.583.583,0,0,0,.411-.169l1.45-1.45a.584.584,0,1,0-.826-.826l-1.45,1.45a.582.582,0,0,0,0,.826A.593.593,0,0,0,25.166,5.4ZM14.205,5.227a.583.583,0,0,0,.822-.826l-1.45-1.45a.584.584,0,0,0-.826.826Zm11.372,9.727a.584.584,0,0,0-.826.826l1.45,1.45a.583.583,0,1,0,.822-.826Z"
+          transform="translate(0)"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/UncheckCheckBoxIcon.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from "@mui/material";
+
+export const UnCheckedCheckboxIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.secondary.main;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="Rectangle_23614"
+        data-name="Rectangle 23614"
+        fill="#f8f8f8"
+        stroke="rgba(18,18,18,0.1)"
+        stroke-width="1"
+      >
+        <rect width="20" height="20" rx="3" stroke="none" />
+        <rect x="0.5" y="0.5" width="19" height="19" rx="2.5" fill="none" />
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/UncheckedRadioIcon.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from "@mui/material";
+
+export const UnCheckedRadioIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="Rectangle_23803"
+        data-name="Rectangle 23803"
+        fill="#f8f8f8"
+        stroke="rgba(18,18,18,0.1)"
+        stroke-width="1"
+      >
+        <rect width="20" height="20" rx="10" stroke="none" />
+        <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="none" />
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/export.ts

@@ -1,38 +1,55 @@
 import { ActiveDevicesIcon } from "./IconComponents/ActiveDevicesIcon";
 import { AppsIcon } from "./IconComponents/AppsIcon";
 import { CareerIcon } from "./IconComponents/CareerIcon";
+import { CheckedCheckboxIcon } from "./IconComponents/CheckedCheckBoxIcon";
+import { CheckedRadioIcon } from "./IconComponents/CheckedRadioIcon";
 import { ClogWheelIcon } from "./IconComponents/ClogWheelIcon";
 import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
+import { DeviceIcon } from "./IconComponents/DeviceIcon";
 import { ExamResultIcon } from "./IconComponents/ExamResultIcon";
 import { ExportIcon } from "./IconComponents/ExportIcon";
 import { FilterIcon } from "./IconComponents/FilterIcon";
 import { HelpIcon } from "./IconComponents/HelpIcon";
 import { HomeIcon } from "./IconComponents/HomeIcon";
+import { InfoIcon } from "./IconComponents/InfoIcon";
+
 import { InstitutionsIcon } from "./IconComponents/InstitutionsIcon";
 import { LeftIcon } from "./IconComponents/LeftIcon";
+import { LocationIcon } from "./IconComponents/LocationIcon";
 import { LogoutIcon } from "./IconComponents/LogoutIcon";
 import { NavigationIcon } from "./IconComponents/NavigationIcon";
 import { NotificationIcon } from "./IconComponents/NotificationIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
+import { TooltipIcon } from "./IconComponents/TooltipIcon";
+import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
+import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
 export const Icons = {
-  AppsIcon: AppsIcon,
-  CareerIcon: CareerIcon,
-  ClogWheelIcon: ClogWheelIcon,
-  DashBoardIcon: DashBoardIcon,
-  HelpIcon: HelpIcon,
-  HomeIcon: HomeIcon,
-  LeftIcon: LeftIcon,
-  ExamResultIcon: ExamResultIcon,
-  NotificationIcon: NotificationIcon,
-  RightIcon: RightIcon,
-  LogoutIcon: LogoutIcon,
-  TicketsIcon: TicketsIcon,
-  FilterIcon: FilterIcon,
-  ExportIcon: ExportIcon,
-  ProfileIcon: ProfileIcon,
-  InstitutionsIcon: InstitutionsIcon,
-  ActiveDevicesIcon: ActiveDevicesIcon,
-  NavigationIcon: NavigationIcon,
+  AppsIcon,
+  CareerIcon,
+  ClogWheelIcon,
+  DashBoardIcon,
+  HelpIcon,
+  HomeIcon,
+  LeftIcon,
+  ExamResultIcon,
+  NotificationIcon,
+  RightIcon,
+  LogoutIcon,
+  TicketsIcon,
+  FilterIcon,
+  ExportIcon,
+  ProfileIcon,
+  InstitutionsIcon,
+  ActiveDevicesIcon,
+  NavigationIcon,
+  UnCheckedCheckboxIcon,
+  CheckedCheckboxIcon,
+  UnCheckedRadioIcon,
+  CheckedRadioIcon,
+  TooltipIcon,
+  InfoIcon,
+  LocationIcon,
+  DeviceIcon,
 };

package/src/components/Input/Button/Button.tsx

@@ -4,7 +4,7 @@ import {
 } from "@mui/material";
 import "./ButtonLoader.css";
 
-export type ButtonProps = { loading: boolean } & MuiButtonProps;
+export type ButtonProps = { loading?: boolean } & MuiButtonProps;
 
 export const Button = ({ loading = false, ...props }: ButtonProps) => {
   return (

package/src/components/Input/{CheckBox/CheckBox.stories.tsx → MultiCheckBox/MultiCheckBox.stories.tsx}

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { MultiCheckBox, MultiCheckboxProps } from "./MultiCheckBox";
 
 export default {
-  title: "Input/CheckBox",
+  title: "Input/MultiCheckBox",
   component: MultiCheckBox,
   tags: ["autodocs"],
   argTypes: {},

package/src/components/Input/{CheckBox → MultiCheckBox}/MultiCheckBox.tsx

@@ -2,7 +2,7 @@ import { Stack, StackProps } from "@mui/material";
 import { ResponsiveStyleValue } from "@mui/system";
 import { ReactNode } from "react";
 import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
-import { CheckBox } from "./CheckBox";
+import { SingleCheckBox } from "../SingleCheckBox/SIngleCheckBox";
 
 export type MultiCheckboxProps = {
   containerProps?: StackProps;
@@ -38,7 +38,7 @@ export const MultiCheckBox = ({
       <Stack direction={direction}>
         {options?.length != 0 &&
           options?.map((item, index) => (
-            <CheckBox
+            <SingleCheckBox
               key={index}
               name={name}
               checked={values?.includes(item.value)}

package/src/components/Input/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,43 @@
+// Import React and other necessary elements
+
+import { Meta } from "@storybook/react";
+import { RadioGroup, RadioGroupProps } from "./RadioGroup";
+
+// Define the default export with Meta type including the component type
+export default {
+  title: "Input/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof RadioGroup>;
+
+// Define stories directly as objects with render function
+export const Default = {
+  render: (args: RadioGroupProps) => <RadioGroup {...args} />,
+  args: {
+    label: "Radio",
+    options: [
+      {
+        label: "Option 1",
+        value: "1",
+      },
+      {
+        label: "Option 2",
+        value: "2",
+      },
+      {
+        label: "Option 3",
+        value: "3",
+      },
+      {
+        label: "Option 4",
+        value: "4",
+      },
+    ],
+    onChange: (event: any, value: any) => {
+      console.log(event.target.checked, value);
+    },
+    row: true,
+    defaultValue: "3",
+  },
+};

package/src/components/Input/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,56 @@
+import {
+  FormControlLabel,
+  RadioGroup as MuiRadioGroup,
+  RadioGroupProps as MuiRadioGroupProps,
+  Radio,
+  StackProps,
+} from "@mui/material";
+import { ReactNode } from "react";
+import { Icons } from "../../export";
+import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
+
+export type RadioGroupProps = {
+  containerProps?: StackProps;
+  options: Array<{ label: ReactNode; value: any; disabled?: boolean }>;
+  label: string;
+  required: boolean;
+  name: string;
+  disabled: boolean;
+} & MuiRadioGroupProps;
+
+export const RadioGroup = ({
+  label,
+  required,
+  options,
+  name,
+  containerProps,
+  disabled,
+  onChange,
+  ...rest
+}: RadioGroupProps) => {
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
+      <MuiRadioGroup onChange={onChange} name={name} {...rest}>
+        {options?.map((item, index) => (
+          <FormControlLabel
+            key={index}
+            value={item.value}
+            control={
+              <Radio
+                checkedIcon={<Icons.CheckedRadioIcon />}
+                icon={<Icons.UnCheckedRadioIcon />}
+                disabled={disabled || item.disabled}
+              />
+            }
+            label={item.label}
+          />
+        ))}
+      </MuiRadioGroup>
+    </LabelWrapper>
+  );
+};

package/src/components/Input/SingleCheckBox/SIngleCheckBox.tsx

@@ -0,0 +1,33 @@
+import {
+  FormControlLabel,
+  Checkbox as MuiCheckbox,
+  CheckboxProps as MuiCheckboxProps,
+} from "@mui/material";
+import { ReactNode } from "react";
+import { Icons } from "../../export";
+
+export type CheckboxProps = {
+  label: ReactNode;
+} & MuiCheckboxProps;
+
+export const SingleCheckBox = ({
+  checked,
+  label,
+  onChange,
+  ...rest
+}: CheckboxProps) => {
+  return (
+    <FormControlLabel
+      control={
+        <MuiCheckbox
+          checked={checked}
+          checkedIcon={<Icons.CheckedCheckboxIcon />}
+          icon={<Icons.UnCheckedCheckboxIcon />}
+          onChange={onChange}
+          {...rest}
+        />
+      }
+      label={label}
+    />
+  );
+};

package/src/components/Input/SingleCheckBox/SingleCheckBox.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { useState } from "react";
+
+import { CheckboxProps, SingleCheckBox } from "./SIngleCheckBox";
+
+export default {
+  title: "Input/SingleCheckBox",
+  component: SingleCheckBox,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof SingleCheckBox>;
+
+const SingleCheckBoxStory: StoryFn<CheckboxProps> = (args) => {
+  const [value, setValue] = useState(args.value);
+  return (
+    <SingleCheckBox
+      {...args}
+      value={value}
+      onChange={(event: any) => {
+        console.log(value, "ll");
+        setValue(event.target.value);
+      }}
+    />
+  );
+};
+
+export const Default = SingleCheckBoxStory.bind({});
+Default.args = {
+  label: "First Name",
+  required: true,
+  value: "ok",
+  onChange: (event: any) => {},
+};

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -6,9 +6,9 @@ import {
   TextField,
 } from "@mui/material";
 import axios from "axios";
-import { useReducer, useRef } from "react";
+import { useReducer } from "react";
 import { campxAxios } from "../../../utils/campxAxios";
-import { Typography } from "../../Typography/Typography";
+import { Typography } from "../../DataDisplay/Typography/Typography";
 import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
 import { FetchingOptionsLoader } from "../components/FetchingOptionsLoader";
 import { OptionContainer } from "../styles";
@@ -29,6 +29,13 @@ export interface SingleSelectProps {
   label?: string;
 }
 
+const CustomPaper = (props: PaperProps) => (
+  <Paper {...props}>
+    {props.children}
+    <FetchingOptionsLoader loading={!!props.square} />
+  </Paper>
+);
+
 enum SingleSelectActionsTypes {
   OPEN = "open",
   CLOSE = "close",
@@ -37,6 +44,7 @@ enum SingleSelectActionsTypes {
   SET_NETWORK_ERROR = "set_network_error",
   SET_INTERNAL_OPTIONS = "set_internal_options",
   APPEND_INTERNAL_OPTIONS = "append_internal_options",
+  CHANGE_HAS_MORE_FLAG = "change_has_more_flag",
 }
 const singleSelectReducer = (
   state: any,
@@ -73,6 +81,14 @@ const singleSelectReducer = (
         ...state,
         internalOptions: [...state.internalOptions, ...stateChanges.newOptions],
         loadingInternalOptions: false,
+        limit: state.limit,
+        offset: state.offset + 10,
+      };
+    }
+    case SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG: {
+      return {
+        ...state,
+        hasMore: !state.hasMore,
       };
     }
     default:
@@ -80,13 +96,6 @@ const singleSelectReducer = (
   }
 };
 
-const PaperComponent = (props: PaperProps, loadingInternalOptions: boolean) => (
-  <Paper {...props}>
-    {props.children}
-    <FetchingOptionsLoader loading={loadingInternalOptions} />
-  </Paper>
-);
-
 export const SingleSelect = ({
   options,
   optionsApiEndPoint,
@@ -98,9 +107,18 @@ export const SingleSelect = ({
     open: false,
     loadingInternalOptions: false,
     internalOptions: options ?? [],
+    limit: 10,
+    offset: 0,
+    hasMore: true,
   });
-  const { open, loadingInternalOptions, internalOptions } = state;
-  const listboxRef = useRef(null);
+  const {
+    open,
+    loadingInternalOptions,
+    internalOptions,
+    limit,
+    offset,
+    hasMore,
+  } = state;
 
   const internalAxios = useCampxAxios ? campxAxios : axios;
 
@@ -108,7 +126,7 @@ export const SingleSelect = ({
     dispatch({
       actionType: SingleSelectActionsTypes.OPEN,
     });
-    if (optionsApiEndPoint) {
+    if (optionsApiEndPoint && !internalOptions.length) {
       try {
         dispatch({
           actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
@@ -116,11 +134,12 @@ export const SingleSelect = ({
         const options = await internalAxios
           .get(optionsApiEndPoint, {
             params: {
-              limit: 100,
-              offset: 0,
+              limit,
+              offset,
             },
           })
           .then((res) => res.data);
+        await sleep(700);
         dispatch({
           actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
           stateChanges: {
@@ -143,20 +162,32 @@ export const SingleSelect = ({
 
   const handleScroll = async (event: any) => {
     const listboxNode = event.currentTarget;
-
-    console.log(
-      listboxNode.scrollTop + listboxNode.clientHeight,
-      listboxNode.scrollHeight
-    );
     if (
       listboxNode.scrollTop + listboxNode.clientHeight >=
-      listboxNode.scrollHeight - 100
+        listboxNode.scrollHeight - 1 &&
+      hasMore
     ) {
-      console.log("dispatched");
+      dispatch({
+        actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
+      });
+      const newOptions = await internalAxios
+        .get(optionsApiEndPoint ?? "", {
+          params: {
+            limit: limit,
+            offset: offset + 10,
+          },
+        })
+        .then((res) => res.data);
+      if (newOptions.length < 10) {
+        dispatch({
+          actionType: SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG,
+        });
+      }
+      await sleep(700);
       dispatch({
         actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
         stateChanges: {
-          newOptions: internalOptions,
+          newOptions: newOptions,
         },
       });
     }
@@ -171,7 +202,7 @@ export const SingleSelect = ({
           <TextField {...params} />
         </LabelWrapper>
       )}
-      PaperComponent={(props) => PaperComponent(props, loadingInternalOptions)}
+      PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {
         return (
           <Box component="li" {...props}>
@@ -184,7 +215,11 @@ export const SingleSelect = ({
       }}
       ListboxProps={{
         onScroll: handleScroll,
-        ref: listboxRef,
+      }}
+      slotProps={{
+        paper: {
+          square: loadingInternalOptions,
+        },
       }}
       onOpen={handleOpen}
       onClose={() => {

package/src/components/Input/components/FetchingOptionsLoader.tsx

@@ -1,22 +1,14 @@
-import { motion } from "framer-motion";
-import { Spinner } from "../../Layout/Spinner/Spinner";
-import { Typography } from "../../Typography/Typography";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Spinner } from "../../FeedBack/Spinner/Spinner";
 import { FetchingOptionsLoaderContainer } from "../styles";
 
 export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
   return (
-    <motion.div
-      initial={{ display: loading ? "visible" : "none" }}
-      animate={{
-        display: loading ? "visible" : "none",
-        opacity: loading ? 1 : 0,
-      }}
-      transition={{ delay: loading ? 1 : 0 }}
-    >
+    loading && (
       <FetchingOptionsLoaderContainer direction="row" alignItems="center">
         <Spinner />
         <Typography variant="caption">Fetching Options</Typography>
       </FetchingOptionsLoaderContainer>
-    </motion.div>
+    )
   );
-};
+};

package/src/components/Layout/Header/AppHeader.stories.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { DropdownMenuItem } from "../../DropDownMenu/DropdownMenuItem";
+import { DropdownMenuItem } from "../../Navigation/DropDownMenu/DropdownMenuItem";
 import { Icons } from "../../export";
 import { AppHeader, AppHeaderProps } from "./AppHeader";
 import { AppsMenu } from "./AppsMenu";

package/src/components/Layout/Header/HeaderActions/CogWheelMenu.tsx

@@ -1,6 +1,6 @@
 import { Divider, IconButton } from "@mui/material";
 import { ReactNode } from "react";
-import { DropdownMenu } from "../../../DropDownMenu/DropDownMenu";
+import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
 import { Icons } from "../../../export";
 // import { clogWheel } from "../../../../assets/images";
 // import DropDownButton from "../../../DropDownButton/DropDownButton";