@majoo-ui/react 1.57.13 → 1.57.14

package/components/form/components/InputSelect/InputSelect.d.ts

@@ -198,6 +198,104 @@ export declare const SelectBox: import("@stitches/react/types/styled-component")
         backgroundColor: string;
     };
 }>>;
+export declare const Input: import("@stitches/react/types/styled-component").StyledComponent<"input", {
+    isReadOnly?: boolean | "true" | undefined;
+}, {
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, {
+    colors: unknown;
+    space: unknown;
+    shadows: unknown;
+    fontSizes: unknown;
+    fonts: unknown;
+    lineHeights: unknown;
+    letterSpacings: unknown;
+    radii: unknown;
+    sizes: unknown;
+    zIndices: unknown;
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    m: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+    subtleColor: (value: string) => {
+        color: string;
+        backgroundColor: string;
+    };
+}>>;
 export declare const IconContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     disabled?: boolean | "true" | undefined;
 }, {
@@ -587,7 +685,6 @@ export declare const SelectItem: import("@stitches/react/types/styled-component"
         backgroundColor: string;
     };
 }>>;
-export declare const SelectInputSearch: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type Option = {
     value: string;
     name: string;
@@ -713,5 +810,5 @@ interface InputSelectProps extends Omit<DownshiftProps<Option>, 'initialSelected
      */
     renderFooter?: () => React.ReactNode;
 }
-export declare function InputSelect({ option, onChange, value, placeholder, searchPlaceholder, embedSearch, size, disabled, search, iconColor, hideArrowicon, showLeadingIcon, placement, disabledOptions, textSelector, valueSelector, readOnly, isInvalid, noOptionIcon, fetchData, onSearch, isLoading, showTooltip, css, renderFooter, optionCss, ...props }: InputSelectProps): JSX.Element;
+export declare const InputSelect: React.ForwardRefExoticComponent<InputSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default InputSelect;

package/components/pieChart/PieChart.d.ts

@@ -68,9 +68,17 @@ interface PieChartProps {
      * Label config of chart.
      */
     label?: PieChartLabel;
+    /**
+     * Custom outer radius size.
+     */
+    outerRadius?: number;
+    /**
+     * Custom inner radius size.
+     */
+    innerRadius?: number;
 }
 declare const PieChartComponent: {
-    ({ data, css, avatarURL, avatarAcronym, validAvatar, legend, isMobile, tooltip, title, subtitle, label, }: PieChartProps): JSX.Element;
+    ({ data, css, avatarURL, avatarAcronym, validAvatar, legend, isMobile, tooltip, title, subtitle, label, outerRadius, innerRadius, }: PieChartProps): JSX.Element;
     defaultProps: {
         data: never[];
         avatarURL: undefined;
@@ -83,6 +91,8 @@ declare const PieChartComponent: {
             position: string;
         };
         isMobile: boolean;
+        outerRadius: number;
+        innerRadius: number;
     };
 };
 export default PieChartComponent;

package/index.esm.js

@@ -3,7 +3,7 @@ import React__default, { useState, useEffect, createContext, useContext, useRef,
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, ChevronUpOutline, ChevronDownOutline, CirclePlusOutline, SortingOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronLeftOutline, ChevronRightOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, CircleInfoOutline, SearchOutline, CloseFilled, CaretDownOutline, ChevronUpOutline, ChevronDownOutline, CirclePlusOutline, SortingOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronLeftOutline, ChevronRightOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -9039,7 +9039,7 @@ const StyledText$1 = {
   overflow: 'hidden',
   textOverflow: 'ellipsis'
 };
-const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+const SelectInputSearch$1 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
       showLeadingIcon = false,
       showClearIcon = true,
@@ -9073,12 +9073,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
       placeholder: placeholder,
       readOnly: readOnly,
       isReadOnly: readOnly,
-      ref: node => {
-        if (forwardedRef) {
-          if (typeof forwardedRef === 'function') forwardedRef(node);else forwardedRef.current = node;
-        }
-        inputRef.current = node;
-      },
+      ref: forwardedRef,
       disabled: disabled,
       css: {
         marginLeft: 0,
@@ -9100,7 +9095,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
     }, void 0)]
   }), void 0);
 });
-function InputSelect(_a) {
+const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       option,
       onChange,
@@ -9182,7 +9177,7 @@ function InputSelect(_a) {
     setItem(generatedOption);
     setOptions(generatedOption);
   }, [option, disabledOptions, valueSelector, textSelector]);
-  const debouncedSearch = React.useRef(debounce(query => __awaiter(this, void 0, void 0, function* () {
+  const debouncedSearch = React.useRef(debounce(query => __awaiter(void 0, void 0, void 0, function* () {
     setQuery(query);
     if (onSearch) onSearch(query);
   }), 1000)).current;
@@ -9267,7 +9262,8 @@ function InputSelect(_a) {
                     flex: 1
                   }
                 }, {
-                  children: jsx(SelectInputSearch, {
+                  children: jsx(SelectInputSearch$1, {
+                    ref: ref,
                     showLeadingIcon: showLeadingIcon,
                     showClearIcon: hideArrowicon,
                     disabled: disabled,
@@ -9289,7 +9285,9 @@ function InputSelect(_a) {
                       disabled: disabled || readOnly
                     }).onClick : undefined
                   }, void 0)
-                }), void 0) : jsx(Button$3, Object.assign({}, getToggleButtonProps({
+                }), void 0) : jsx(Button$3, Object.assign({
+                  ref: ref
+                }, getToggleButtonProps({
                   disabled: disabled || readOnly
                 }), {
                   disabled: disabled,
@@ -9450,7 +9448,7 @@ function InputSelect(_a) {
       }), void 0);
     }
   }), void 0);
-}
+});
 
 var tryToString$3 = tryToString$5;
 
@@ -12570,6 +12568,67 @@ $$8({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_RE
   }
 });
 
+const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      showLeadingIcon = false,
+      showClearIcon = true,
+      disabled,
+      placeholder,
+      readOnly,
+      inputProps,
+      handleInputValue,
+      noStyling,
+      onChange
+    } = _a,
+    props = __rest(_a, ["showLeadingIcon", "showClearIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"]);
+  const inputRef = React.useRef(null);
+  return jsxs(InputGroup, Object.assign({
+    css: !noStyling && {
+      height: '100%',
+      border: 'none',
+      '&:hover': {
+        border: 'none'
+      }
+    },
+    disabled: disabled
+  }, {
+    children: [jsx(InputLeftElement, {
+      children: showLeadingIcon && jsx(SearchOutline, {}, void 0),
+      css: !showLeadingIcon ? {
+        width: '$spacing-05',
+        padding: 0
+      } : undefined
+    }, void 0), jsx(Input$7, Object.assign({}, inputProps, props, {
+      placeholder: placeholder,
+      readOnly: readOnly,
+      isReadOnly: readOnly,
+      ref: node => {
+        if (forwardedRef) {
+          if (typeof forwardedRef === 'function') forwardedRef(node);else forwardedRef.current = node;
+        }
+        inputRef.current = node;
+      },
+      disabled: disabled,
+      css: {
+        marginLeft: 0,
+        height: 'fit-content'
+      }
+    }), void 0), jsx(InputRightElement, {
+      children: showClearIcon && (inputProps.value || '').length > 0 && !disabled ? jsx(CloseFilled, {}, void 0) : jsx("div", {}, void 0),
+      onClick: e => {
+        if (!disabled) {
+          inputProps.onChange(Object.assign(Object.assign({}, e), {
+            target: Object.assign(Object.assign({}, e.target), {
+              value: ''
+            })
+          }));
+          if (handleInputValue) handleInputValue('');
+          if (inputRef.current) inputRef.current.focus();
+        }
+      }
+    }, void 0)]
+  }), void 0);
+});
 const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
       options: items = [],
@@ -50728,7 +50787,9 @@ const PieChartComponent = ({
   tooltip,
   title,
   subtitle,
-  label
+  label,
+  outerRadius,
+  innerRadius
 }) => {
   var _a;
   const emptyData = [{
@@ -50814,8 +50875,8 @@ const PieChartComponent = ({
             data: formattedData,
             cx: "50%",
             cy: "50%",
-            innerRadius: 70,
-            outerRadius: 100,
+            innerRadius: innerRadius,
+            outerRadius: outerRadius,
             dataKey: "total",
             onMouseEnter: x => {
               setActiveIndex(formattedData.findIndex(y => y.name === x.name));
@@ -50868,7 +50929,9 @@ PieChartComponent.defaultProps = {
     data: [],
     position: 'right'
   },
-  isMobile: false
+  isMobile: false,
+  outerRadius: 100,
+  innerRadius: 70
 };
 
 var _jsxFileName = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/colors/Colors.js";
@@ -52367,4 +52430,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultFetchDataParams, pickerReducer, useListOption, useToggle };

package/index.umd.js

@@ -9121,7 +9121,7 @@
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   };
-  var SelectInputSearch = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+  var SelectInputSearch$1 = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var _b = _a.showLeadingIcon,
       showLeadingIcon = _b === void 0 ? false : _b,
       _c = _a.showClearIcon,
@@ -9155,12 +9155,7 @@
         placeholder: placeholder,
         readOnly: readOnly,
         isReadOnly: readOnly,
-        ref: function (node) {
-          if (forwardedRef) {
-            if (typeof forwardedRef === 'function') forwardedRef(node);else forwardedRef.current = node;
-          }
-          inputRef.current = node;
-        },
+        ref: forwardedRef,
         disabled: disabled,
         css: {
           marginLeft: 0,
@@ -9182,8 +9177,7 @@
       }, void 0)]
     }), void 0);
   });
-  function InputSelect(_a) {
-    var _this = this;
+  var InputSelect = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
     var option = _a.option,
       onChange = _a.onChange,
       value = _a.value,
@@ -9297,7 +9291,7 @@
       setOptions(generatedOption);
     }, [option, disabledOptions, valueSelector, textSelector]);
     var debouncedSearch = React__namespace.useRef(debounce__default["default"](function (query) {
-      return __awaiter(_this, void 0, void 0, function () {
+      return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
           setQuery(query);
           if (onSearch) onSearch(query);
@@ -9391,7 +9385,8 @@
                       flex: 1
                     }
                   }, {
-                    children: jsxRuntime.jsx(SelectInputSearch, {
+                    children: jsxRuntime.jsx(SelectInputSearch$1, {
+                      ref: ref,
                       showLeadingIcon: showLeadingIcon,
                       showClearIcon: hideArrowicon,
                       disabled: disabled,
@@ -9413,7 +9408,9 @@
                         disabled: disabled || readOnly
                       }).onClick : undefined
                     }, void 0)
-                  }), void 0) : jsxRuntime.jsx(Button$3, __assign({}, getToggleButtonProps({
+                  }), void 0) : jsxRuntime.jsx(Button$3, __assign({
+                    ref: ref
+                  }, getToggleButtonProps({
                     disabled: disabled || readOnly
                   }), {
                     disabled: disabled,
@@ -9578,7 +9575,7 @@
         }), void 0);
       }
     }), void 0);
-  }
+  });
 
   var tryToString$3 = tryToString$5;
 
@@ -12749,6 +12746,67 @@
     }
   });
 
+  var SelectInputSearch = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+    var _b = _a.showLeadingIcon,
+      showLeadingIcon = _b === void 0 ? false : _b,
+      _c = _a.showClearIcon,
+      showClearIcon = _c === void 0 ? true : _c,
+      disabled = _a.disabled,
+      placeholder = _a.placeholder,
+      readOnly = _a.readOnly,
+      inputProps = _a.inputProps,
+      handleInputValue = _a.handleInputValue,
+      noStyling = _a.noStyling;
+      _a.onChange;
+      var props = __rest(_a, ["showLeadingIcon", "showClearIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"]);
+    var inputRef = React__namespace.useRef(null);
+    return jsxRuntime.jsxs(InputGroup, __assign({
+      css: !noStyling && {
+        height: '100%',
+        border: 'none',
+        '&:hover': {
+          border: 'none'
+        }
+      },
+      disabled: disabled
+    }, {
+      children: [jsxRuntime.jsx(InputLeftElement, {
+        children: showLeadingIcon && jsxRuntime.jsx(icons.SearchOutline, {}, void 0),
+        css: !showLeadingIcon ? {
+          width: '$spacing-05',
+          padding: 0
+        } : undefined
+      }, void 0), jsxRuntime.jsx(Input$7, __assign({}, inputProps, props, {
+        placeholder: placeholder,
+        readOnly: readOnly,
+        isReadOnly: readOnly,
+        ref: function (node) {
+          if (forwardedRef) {
+            if (typeof forwardedRef === 'function') forwardedRef(node);else forwardedRef.current = node;
+          }
+          inputRef.current = node;
+        },
+        disabled: disabled,
+        css: {
+          marginLeft: 0,
+          height: 'fit-content'
+        }
+      }), void 0), jsxRuntime.jsx(InputRightElement, {
+        children: showClearIcon && (inputProps.value || '').length > 0 && !disabled ? jsxRuntime.jsx(icons.CloseFilled, {}, void 0) : jsxRuntime.jsx("div", {}, void 0),
+        onClick: function (e) {
+          if (!disabled) {
+            inputProps.onChange(__assign(__assign({}, e), {
+              target: __assign(__assign({}, e.target), {
+                value: ''
+              })
+            }));
+            if (handleInputValue) handleInputValue('');
+            if (inputRef.current) inputRef.current.focus();
+          }
+        }
+      }, void 0)]
+    }), void 0);
+  });
   var InputCombobox = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var _b = _a.options,
       items = _b === void 0 ? [] : _b,
@@ -51258,7 +51316,9 @@
       tooltip = _a.tooltip,
       title = _a.title,
       subtitle = _a.subtitle,
-      label = _a.label;
+      label = _a.label,
+      outerRadius = _a.outerRadius,
+      innerRadius = _a.innerRadius;
     var emptyData = [{
       id: '0',
       name: '',
@@ -51348,8 +51408,8 @@
               data: formattedData,
               cx: "50%",
               cy: "50%",
-              innerRadius: 70,
-              outerRadius: 100,
+              innerRadius: innerRadius,
+              outerRadius: outerRadius,
               dataKey: "total",
               onMouseEnter: function (x) {
                 setActiveIndex(formattedData.findIndex(function (y) {
@@ -51408,7 +51468,9 @@
       data: [],
       position: 'right'
     },
-    isMobile: false
+    isMobile: false,
+    outerRadius: 100,
+    innerRadius: 70
   };
 
   var _jsxFileName = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/colors/Colors.js";
@@ -53004,6 +53066,7 @@
   exports.IconContainer = IconContainer;
   exports.Image = Image;
   exports.ImageDevicePreview = ImageDevicePreview;
+  exports.Input = Input$7;
   exports.InputCheckbox = InputCheckbox;
   exports.InputColorPicker = InputColorPicker;
   exports.InputCombobox = InputCombobox;
@@ -53086,7 +53149,6 @@
   exports.SINGLE_PICKER = SINGLE_PICKER;
   exports.SelectBox = SelectBox;
   exports.SelectContainer = SelectContainer;
-  exports.SelectInputSearch = SelectInputSearch;
   exports.SelectItem = SelectItem;
   exports.SelectOption = SelectOption;
   exports.Separator = Separator$2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.57.13",
+  "version": "1.57.14",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",