@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/form/components/InputResourceList/InputResourceList.esm.js

@@ -0,0 +1,429 @@
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.every.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.iterator.some.js';
+import 'core-js/modules/es.set.difference.v2.js';
+import 'core-js/modules/es.set.intersection.v2.js';
+import 'core-js/modules/es.set.is-disjoint-from.v2.js';
+import 'core-js/modules/es.set.is-subset-of.v2.js';
+import 'core-js/modules/es.set.is-superset-of.v2.js';
+import 'core-js/modules/es.set.symmetric-difference.v2.js';
+import 'core-js/modules/es.set.union.v2.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import Box from '../../../../layout/box/Box.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import Text from '../../../text/Text.esm.js';
+import InputSearchbox from '../InputSearchbox/InputSearchbox.esm.js';
+import Paragraph from '../../../paragraph/Paragraph.esm.js';
+import Heading from '../../../heading/Heading.esm.js';
+import InfiniteScroll from 'react-infinite-scroller';
+import { ConditionalWrapper } from '../../../../wrapper/ConditionalWrapper.esm.js';
+import debounce from 'lodash.debounce';
+import { styled, colors } from '../../../../config/stitches.config.esm.js';
+import { SortingOutline, ChevronUpOutline, ChevronDownOutline } from '@majoo-ui/icons';
+import { useTranslation } from 'react-i18next';
+import CheckOutline from '../InputSelectCheck/icon/CheckOutline.esm.js';
+import InputCheckbox from '../InputCheckbox/InputCheckbox.esm.js';
+import CheckboxGroup from '../InputCheckbox/CheckboxGroup.esm.js';
+import { Tag } from '../../../tag/Tag.esm.js';
+
+const SortingIcon = styled(Flex, {
+  cursor: 'pointer',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const IconBox = styled('div', {
+  height: 16,
+  width: 16,
+  cursor: 'pointer',
+  variants: {
+    border: {
+      true: {
+        borderRadius: 3,
+        border: '1.5px solid $bgOutline'
+      }
+    }
+  }
+});
+const IndeterminateFilled = styled('div', {
+  width: 16,
+  height: 16,
+  background: '$primary500',
+  color: '$textWhite',
+  borderRadius: 3,
+  fontSize: 14,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+function InputResourceList({
+  data: dataProp,
+  disabled = false,
+  onChange,
+  searchPlaceholder,
+  counterFooter = true,
+  counterFooterText,
+  isLoading = false,
+  disabledItems,
+  emptyDataMessage,
+  value,
+  fetchData,
+  onQueryChange,
+  css,
+  wrapperCss,
+  defaultSort,
+  title,
+  hideSelectAll,
+  renderSelectAll,
+  customHeader,
+  expandable,
+  searchable
+}) {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputResourceList', 'translation']);
+  const [query, setQuery] = useState('');
+  const [sortType, setSortType] = useState('asc');
+  const [data, setData] = useState([]);
+  const [expand, setExpand] = useState(false);
+  const isValueString = typeof (value === null || value === void 0 ? void 0 : value[0]) === 'string';
+  const checkedItems = useMemo(() => {
+    if (!value) return [];
+    if (isValueString) {
+      return data.filter(item => value.includes(item.value));
+    }
+    return value;
+  }, [value, data, isValueString]);
+  const scrollerRef = useRef(null);
+  useEffect(() => {
+    function filterUnique(params) {
+      if (!params) return;
+      const unique = params.filter((obj, index) => params.findIndex(item => (item === null || item === void 0 ? void 0 : item.value) === (obj === null || obj === void 0 ? void 0 : obj.value)) === index);
+      setData(unique);
+    }
+    filterUnique(dataProp);
+  }, [dataProp]);
+  useEffect(() => {
+    var _a;
+    (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+      top: 0
+    });
+  }, [query]);
+  useEffect(() => {
+    if (defaultSort) {
+      setSortType(defaultSort);
+    }
+  }, [defaultSort]);
+  const availableData = useMemo(() => {
+    if (!data) return [];
+    const filteredData = data.filter(item => !!onQueryChange || item.label.toLowerCase().match((query === null || query === void 0 ? void 0 : query.toLowerCase()) || ''));
+    const checkedValues = new Set(checkedItems.map(item => item.value));
+    return [...filteredData].sort((a, b) => {
+      const aIsChecked = checkedValues.has(a.value);
+      const bIsChecked = checkedValues.has(b.value);
+      if (aIsChecked && !bIsChecked) {
+        return -1;
+      }
+      if (!aIsChecked && bIsChecked) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [data, query, checkedItems]);
+  const isItemDisabled = item => !!((item === null || item === void 0 ? void 0 : item.disabled) || disabledItems && disabledItems.includes(item.value));
+  const selectableAvailableData = useMemo(() => {
+    return availableData.filter(item => !isItemDisabled(item));
+  }, [availableData, disabledItems]);
+  const renderCheckbox = (resource, index) => {
+    var _a, _b;
+    const isDisabled = resource.disabled || disabledItems && disabledItems.includes(resource.value);
+    return jsxs(Flex, {
+      align: "center",
+      justify: "between",
+      children: [jsxs(Flex, {
+        direction: "column",
+        gap: 1,
+        children: [jsxs(Flex, {
+          align: "center",
+          children: [jsx(InputCheckbox, {
+            label: jsxs(Flex, {
+              gap: 3,
+              align: "center",
+              children: [jsx(Paragraph, {
+                css: {
+                  overflowX: 'hidden',
+                  textOverflow: 'ellipsis',
+                  '@sm': {
+                    maxWidth: resource.variants ? 150 : 200
+                  },
+                  '@md': {
+                    maxWidth: 'unset'
+                  }
+                },
+                paragraph: "longContentRegular",
+                children: resource.label
+              }), (_a = resource.variants) === null || _a === void 0 ? void 0 : _a.map((variant, index) => jsx(Tag, Object.assign({
+                type: "varian",
+                size: "lg",
+                css: {
+                  color: disabled || isDisabled ? '$textDisable' : '$textBrand'
+                }
+              }, {}, {
+                children: variant
+              }), index))]
+            }),
+            index: index,
+            value: resource.value,
+            disabled: isDisabled
+          }), (resource === null || resource === void 0 ? void 0 : resource.icon) && jsx(Box, {
+            css: {
+              marginLeft: '$spacing-03'
+            },
+            children: (_b = resource === null || resource === void 0 ? void 0 : resource.icon) === null || _b === void 0 ? void 0 : _b.call(resource)
+          })]
+        }), (resource === null || resource === void 0 ? void 0 : resource.description) && jsx(Paragraph, {
+          css: {
+            fontSize: 12,
+            paddingLeft: 30
+          },
+          color: "secondary",
+          children: resource === null || resource === void 0 ? void 0 : resource.description
+        })]
+      }, `${resource.value}`), !!resource.subLabel && jsx(Paragraph, {
+        color: isDisabled ? 'disable' : 'primary',
+        css: {
+          overflowX: 'hidden',
+          textOverflow: 'ellipsis',
+          '@sm': {
+            maxWidth: resource.variants ? 150 : 200
+          },
+          '@md': {
+            maxWidth: 'unset'
+          }
+        },
+        paragraph: "longContentRegular",
+        children: resource.subLabel
+      })]
+    });
+  };
+  function sorting(data, type) {
+    function ascending(a, b) {
+      if (a.label < b.label) {
+        return -1;
+      }
+      if (a.label > b.label) {
+        return 1;
+      }
+      return 0;
+    }
+    function descending(a, b) {
+      if (a.label > b.label) {
+        return -1;
+      }
+      if (a.label < b.label) {
+        return 1;
+      }
+      return 0;
+    }
+    switch (type) {
+      case 'asc':
+        return [...data].sort(ascending);
+      case 'desc':
+        return [...data].sort(descending);
+      default:
+        return data;
+    }
+  }
+  function toggleSort() {
+    setSortType(sortType === 'asc' ? 'desc' : 'asc');
+  }
+  function toggleCheckAll() {
+    const selectable = selectableAvailableData;
+    const allSelectableItemsSelected = selectable.length > 0 && selectable.every(item => checkedItems.some(checkedItem => checkedItem.value === item.value));
+    if (allSelectableItemsSelected) {
+      const newCheckedItems = checkedItems.filter(checkedItem => !selectable.some(item => item.value === checkedItem.value));
+      onChange === null || onChange === void 0 ? void 0 : onChange(isValueString ? newCheckedItems.map(item => item.value) : newCheckedItems);
+    } else {
+      const itemsToAdd = selectable.filter(item => !checkedItems.some(checkedItem => checkedItem.value === item.value));
+      const newCheckedItems = [...checkedItems, ...itemsToAdd];
+      onChange === null || onChange === void 0 ? void 0 : onChange(isValueString ? newCheckedItems.map(item => item.value) : newCheckedItems);
+    }
+  }
+  function handleCheckedAllExpandable() {
+    const allItems = data || [];
+    const selectableAllItems = allItems.filter(item => !isItemDisabled(item));
+    const allItemValues = selectableAllItems.map(i => i.value);
+    const currentValues = checkedItems.map(i => i.value);
+    const areAllSelected = selectableAllItems.length > 0 && selectableAllItems.every(item => currentValues.includes(item.value));
+    let newCheckedItems;
+    if (areAllSelected) {
+      newCheckedItems = checkedItems.filter(item => !allItemValues.includes(item.value));
+    } else {
+      const itemsToAdd = selectableAllItems.filter(item => !currentValues.includes(item.value));
+      newCheckedItems = [...checkedItems, ...itemsToAdd];
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(isValueString ? newCheckedItems.map(item => item.value) : newCheckedItems);
+  }
+  const listContent = jsxs(Box, {
+    css: Object.assign({
+      position: 'relative'
+    }, css),
+    children: [customHeader, (searchable || !!onQueryChange) && jsx(InputSearchbox, Object.assign({
+      size: "lg",
+      placeholder: searchPlaceholder || t('placeholder.search', 'Cari ...'),
+      onChange: debounce(query => {
+        setQuery(query);
+        if (onQueryChange) onQueryChange(query);
+      }, 1000),
+      disabled: disabled
+    }, {})), defaultSort && jsxs(Flex, {
+      align: "center",
+      gap: 3,
+      css: {
+        paddingLeft: !hideSelectAll ? 16 : 0,
+        marginTop: '$spacing-05'
+      },
+      children: [!hideSelectAll && jsx(InputCheckbox, {
+        checked: selectableAvailableData.length > 0 && selectableAvailableData.every(item => checkedItems.some(checkedItem => checkedItem.value === item.value)),
+        indeterminate: selectableAvailableData.some(item => checkedItems.some(checkedItem => checkedItem.value === item.value)) && !(selectableAvailableData.length > 0 && selectableAvailableData.every(item => checkedItems.some(checkedItem => checkedItem.value === item.value))),
+        onCheckedChange: toggleCheckAll,
+        css: {
+          marginRight: '$spacing-02'
+        }
+      }), jsx(Heading, {
+        heading: "headerTable",
+        children: title || t('defaultTitle', 'Urutkan')
+      }), jsx(SortingIcon, {
+        onClick: toggleSort,
+        children: jsx(SortingOutline, {
+          size: 16,
+          color: colors.iconSecondary
+        })
+      })]
+    }), isLoading && jsx(Flex, {
+      justify: "center",
+      align: "center",
+      css: Object.assign({
+        position: 'absolute',
+        inset: 0,
+        top: onQueryChange || searchable ? 48 : 0,
+        width: '100%',
+        height: 285,
+        backgroundColor: '$bgWhite',
+        opacity: 0.8
+      }, wrapperCss && wrapperCss.maxHeight && {
+        height: wrapperCss.maxHeight
+      }),
+      children: jsx(Text, {
+        variant: "caption",
+        children: "Loading .... "
+      })
+    }), jsxs(Box, {
+      css: Object.assign({
+        border: '1px solid $bgOutline',
+        padding: '$spacing-05',
+        borderRadius: '$lg',
+        maxHeight: 285,
+        height: isLoading ? wrapperCss && wrapperCss.maxHeight ? wrapperCss.maxHeight : 285 : 'unset',
+        overflow: 'auto',
+        marginTop: '$spacing-03'
+      }, wrapperCss && wrapperCss),
+      ref: scrollerRef,
+      children: [data.length <= 0 && checkedItems.length <= 0 && !isLoading || defaultSort && data.length < 1 ? jsx(Flex, {
+        justify: "center",
+        align: "center",
+        css: {
+          width: '100%'
+        },
+        children: jsx(Paragraph, {
+          paragraph: "shortContentRegular",
+          align: "center",
+          color: "secondary",
+          children: emptyDataMessage || t('label.noData', 'Tidak ada data', {
+            ns: 'translation'
+          })
+        })
+      }) : null, jsx(ConditionalWrapper, {
+        condition: !!fetchData && data.length > 0,
+        wrapper: children => jsx(InfiniteScroll, {
+          loadMore: _ => {
+            if (!isLoading && fetchData) {
+              fetchData({
+                query
+              });
+            }
+          },
+          hasMore: true,
+          threshold: 5,
+          useWindow: false,
+          children: children
+        }),
+        children: jsx(Flex, {
+          direction: "column",
+          gap: 3,
+          children: jsx(CheckboxGroup, {
+            onChange: (_, index) => {
+              const datasets = defaultSort ? sorting(availableData, sortType) : availableData;
+              const newCheckedItems = (checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.some(val => {
+                var _a;
+                return (val === null || val === void 0 ? void 0 : val.value) === ((_a = datasets[index]) === null || _a === void 0 ? void 0 : _a.value);
+              })) ? checkedItems.filter(val => val.value !== datasets[index].value) : [...(checkedItems || []), datasets[index]];
+              onChange === null || onChange === void 0 ? void 0 : onChange(isValueString ? newCheckedItems.map(item => item.value) : newCheckedItems);
+            },
+            value: checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.map(item => item === null || item === void 0 ? void 0 : item.value),
+            disabled: disabled,
+            children: (defaultSort ? sorting(availableData, sortType) : availableData).map(renderCheckbox)
+          })
+        })
+      })]
+    }), counterFooter && checkedItems.length > 0 && jsx(Box, {
+      css: {
+        marginTop: '$spacing-04'
+      },
+      children: jsx(Text, {
+        variant: "helper",
+        color: disabled ? 'disable' : 'brand',
+        children: `${checkedItems.length} ${counterFooterText || t('counterFooterText', 'kategori dipilih')}`
+      })
+    })]
+  });
+  if (expandable) {
+    const allItems = data || [];
+    const selectableAllItems = allItems.filter(item => !isItemDisabled(item));
+    const checkedValues = checkedItems.map(i => i.value);
+    const isAllSelected = selectableAllItems.length > 0 && selectableAllItems.every(item => checkedValues.includes(item.value));
+    const isIndeterminate = !isAllSelected && selectableAllItems.some(item => checkedValues.includes(item.value));
+    return jsxs(Box, {
+      children: [jsxs(Flex, {
+        justify: "between",
+        align: "start",
+        children: [jsxs(Flex, {
+          gap: 5,
+          children: [jsx(IconBox, {
+            onClick: handleCheckedAllExpandable,
+            border: !isAllSelected && !isIndeterminate,
+            children: isAllSelected ? jsx(CheckOutline, {
+              color: colors.iconBrand
+            }) : isIndeterminate ? jsx(IndeterminateFilled, {
+              children: "-"
+            }) : ''
+          }), renderSelectAll]
+        }), jsx(Box, {
+          css: {
+            cursor: 'pointer'
+          },
+          onClick: () => setExpand(!expand),
+          children: expand ? jsx(ChevronUpOutline, {}) : jsx(ChevronDownOutline, {})
+        })]
+      }), jsx(Box, {
+        children: expand && listContent
+      })]
+    });
+  }
+  return listContent;
+}
+
+export { InputResourceList as default };

package/components/form/components/InputSearchbox/CloseFilled.esm.js

@@ -0,0 +1,34 @@
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const SvgCloseFilled = props => /*#__PURE__*/jsxs("svg", {
+  width: props.size,
+  height: props.size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props,
+  children: [/*#__PURE__*/jsx("mask", {
+    id: "path-1-inside-1_2883_7918",
+    fill: "white",
+    children: /*#__PURE__*/jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.54289 8.54289C8.93342 8.15237 9.56658 8.15237 9.95711 8.54289L12 10.5858L14.0429 8.54289C14.4334 8.15237 15.0666 8.15237 15.4571 8.54289C15.8476 8.93342 15.8476 9.56658 15.4571 9.95711L13.4142 12L15.4571 14.0429C15.8476 14.4334 15.8476 15.0666 15.4571 15.4571C15.0666 15.8476 14.4334 15.8476 14.0429 15.4571L12 13.4142L9.95711 15.4571C9.56658 15.8476 8.93342 15.8476 8.54289 15.4571C8.15237 15.0666 8.15237 14.4334 8.54289 14.0429L10.5858 12L8.54289 9.95711C8.15237 9.56658 8.15237 8.93342 8.54289 8.54289Z"
+    })
+  }), /*#__PURE__*/jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.54289 8.54289C8.93342 8.15237 9.56658 8.15237 9.95711 8.54289L12 10.5858L14.0429 8.54289C14.4334 8.15237 15.0666 8.15237 15.4571 8.54289C15.8476 8.93342 15.8476 9.56658 15.4571 9.95711L13.4142 12L15.4571 14.0429C15.8476 14.4334 15.8476 15.0666 15.4571 15.4571C15.0666 15.8476 14.4334 15.8476 14.0429 15.4571L12 13.4142L9.95711 15.4571C9.56658 15.8476 8.93342 15.8476 8.54289 15.4571C8.15237 15.0666 8.15237 14.4334 8.54289 14.0429L10.5858 12L8.54289 9.95711C8.15237 9.56658 8.15237 8.93342 8.54289 8.54289Z",
+    fill: props.color
+  }), /*#__PURE__*/jsx("path", {
+    d: "M9.95711 8.54289L8.54289 9.95711L8.54289 9.95711L9.95711 8.54289ZM8.54289 8.54289L9.95711 9.95711L9.95711 9.95711L8.54289 8.54289ZM12 10.5858L10.5858 12L12 13.4142L13.4142 12L12 10.5858ZM14.0429 8.54289L15.4571 9.95711L15.4571 9.95711L14.0429 8.54289ZM15.4571 8.54289L14.0429 9.95711L14.0429 9.95711L15.4571 8.54289ZM15.4571 9.95711L14.0429 8.54289L14.0429 8.54289L15.4571 9.95711ZM13.4142 12L12 10.5858L10.5858 12L12 13.4142L13.4142 12ZM15.4571 14.0429L16.8713 12.6287L16.8713 12.6287L15.4571 14.0429ZM15.4571 15.4571L16.8713 16.8713L16.8713 16.8713L15.4571 15.4571ZM14.0429 15.4571L12.6287 16.8713L12.6287 16.8713L14.0429 15.4571ZM12 13.4142L13.4142 12L12 10.5858L10.5858 12L12 13.4142ZM9.95711 15.4571L11.3713 16.8713L11.3713 16.8713L9.95711 15.4571ZM8.54289 15.4571L7.12868 16.8713L7.12868 16.8713L8.54289 15.4571ZM8.54289 14.0429L7.12868 12.6287L7.12868 12.6287L8.54289 14.0429ZM10.5858 12L12 13.4142L13.4142 12L12 10.5858L10.5858 12ZM8.54289 9.95711L9.95711 8.54289L9.95711 8.54289L8.54289 9.95711ZM19 12C19 15.866 15.866 19 12 19V23C18.0751 23 23 18.0751 23 12H19ZM12 5C15.866 5 19 8.13401 19 12H23C23 5.92487 18.0751 1 12 1V5ZM5 12C5 8.13401 8.13401 5 12 5V1C5.92487 1 1 5.92487 1 12H5ZM12 19C8.13401 19 5 15.866 5 12H1C1 18.0751 5.92487 23 12 23V19ZM11.3713 7.12868C10.1997 5.95711 8.30025 5.95711 7.12868 7.12868L9.95711 9.95711C9.56658 10.3476 8.93342 10.3476 8.54289 9.95711L11.3713 7.12868ZM13.4142 9.17157L11.3713 7.12868L8.54289 9.95711L10.5858 12L13.4142 9.17157ZM12.6287 7.12868L10.5858 9.17157L13.4142 12L15.4571 9.95711L12.6287 7.12868ZM16.8713 7.12868C15.6997 5.95711 13.8003 5.95711 12.6287 7.12868L15.4571 9.95711C15.0666 10.3476 14.4334 10.3476 14.0429 9.95711L16.8713 7.12868ZM16.8713 11.3713C18.0429 10.1997 18.0429 8.30025 16.8713 7.12868L14.0429 9.95711C13.6524 9.56658 13.6524 8.93342 14.0429 8.54289L16.8713 11.3713ZM14.8284 13.4142L16.8713 11.3713L14.0429 8.54289L12 10.5858L14.8284 13.4142ZM16.8713 12.6287L14.8284 10.5858L12 13.4142L14.0429 15.4571L16.8713 12.6287ZM16.8713 16.8713C18.0429 15.6997 18.0429 13.8003 16.8713 12.6287L14.0429 15.4571C13.6524 15.0666 13.6524 14.4334 14.0429 14.0429L16.8713 16.8713ZM12.6287 16.8713C13.8003 18.0429 15.6997 18.0429 16.8713 16.8713L14.0429 14.0429C14.4334 13.6524 15.0666 13.6524 15.4571 14.0429L12.6287 16.8713ZM10.5858 14.8284L12.6287 16.8713L15.4571 14.0429L13.4142 12L10.5858 14.8284ZM11.3713 16.8713L13.4142 14.8284L10.5858 12L8.54289 14.0429L11.3713 16.8713ZM7.12868 16.8713C8.30025 18.0429 10.1997 18.0429 11.3713 16.8713L8.54289 14.0429C8.93342 13.6524 9.56658 13.6524 9.95711 14.0429L7.12868 16.8713ZM7.12868 12.6287C5.95711 13.8003 5.95711 15.6997 7.12868 16.8713L9.95711 14.0429C10.3476 14.4334 10.3476 15.0666 9.95711 15.4571L7.12868 12.6287ZM9.17157 10.5858L7.12868 12.6287L9.95711 15.4571L12 13.4142L9.17157 10.5858ZM7.12868 11.3713L9.17157 13.4142L12 10.5858L9.95711 8.54289L7.12868 11.3713ZM7.12868 7.12868C5.95711 8.30025 5.95711 10.1997 7.12868 11.3713L9.95711 8.54289C10.3476 8.93342 10.3476 9.56658 9.95711 9.95711L7.12868 7.12868Z",
+    fill: props.color,
+    mask: "url(#path-1-inside-1_2883_7918)"
+  })]
+});
+SvgCloseFilled.defaultProps = {
+  color: '#404545',
+  size: 24
+};
+
+export { SvgCloseFilled as default };

package/components/form/components/InputSearchbox/InputSearchbox.esm.js

@@ -0,0 +1,90 @@
+import { useState, useCallback } from 'react';
+import { InputGroup } from '../InputGroup/InputGroup.esm.js';
+import { InputText } from '../InputText/InputText.esm.js';
+import { InputLeftElement, InputRightElement } from '../InputElement/InputElement.esm.js';
+import SvgCloseFilled from './CloseFilled.esm.js';
+import SvgSearchOutline from './SearchOutline.esm.js';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import { useTranslation } from 'react-i18next';
+import { foundations } from '@majoo-ui/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const {
+  colors
+} = foundations;
+const InputSearchbox = ({
+  size,
+  onChange,
+  css,
+  disabled,
+  withDebounce,
+  defaultValue,
+  mobileOnly,
+  desktopOnly,
+  ...props
+}) => {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputSearchbox', 'translation']);
+  const [value, setValue] = useState(defaultValue);
+  const inputValue = props?.value ?? value;
+  const debounceChange = useCallback(debounce(e => onChange?.(e), 1000), [onChange]);
+  const handleChange = useCallback(e => {
+    setValue(e.target.value);
+    if (withDebounce) {
+      debounceChange(e.target.value);
+    } else {
+      onChange?.(e.target.value);
+    }
+  }, [onChange, debounceChange, withDebounce]);
+  const handleClearButtonClick = e => {
+    e.preventDefault();
+    if (!disabled) {
+      setValue('');
+      if (onChange) onChange('');
+    }
+  };
+  return /*#__PURE__*/jsxs(InputGroup, {
+    size: size,
+    css: css,
+    disabled: disabled,
+    mobileOnly: mobileOnly,
+    desktopOnly: desktopOnly,
+    children: [/*#__PURE__*/jsx(InputLeftElement, {
+      children: /*#__PURE__*/jsx(SvgSearchOutline, {})
+    }), /*#__PURE__*/jsx(InputText, {
+      placeholder: t('placeholder', 'Cari ...'),
+      onChange: handleChange,
+      value: value,
+      disabled: disabled,
+      css: {
+        height: 'fit-content'
+      },
+      ...props
+    }), /*#__PURE__*/jsx(InputRightElement, {
+      children: inputValue?.length > 0 ? /*#__PURE__*/jsx(SvgCloseFilled, {
+        color: colors.iconSecondary
+      }) : /*#__PURE__*/jsx("div", {}),
+      onClick: handleClearButtonClick
+    })]
+  });
+};
+InputSearchbox.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  isInvalid: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  withDebounce: PropTypes.bool,
+  mobileOnly: PropTypes.bool,
+  desktopOnly: PropTypes.bool
+};
+InputSearchbox.defaultProps = {
+  size: 'sm'
+};
+InputSearchbox.displayName = 'InputSearchbox';
+
+export { InputSearchbox as default };

package/components/form/components/InputSearchbox/SearchOutline.esm.js

@@ -0,0 +1,26 @@
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const SvgSearchOutline = props => /*#__PURE__*/jsxs("svg", {
+  width: props.size,
+  height: props.size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props,
+  children: [/*#__PURE__*/jsx("circle", {
+    cx: 11.3091,
+    cy: 11.3091,
+    r: 6.30911,
+    stroke: props.color,
+    strokeWidth: 2
+  }), /*#__PURE__*/jsx("path", {
+    d: "M16.5249 15.1049C16.1345 14.7142 15.5014 14.7139 15.1106 15.1042C14.7199 15.4945 14.7196 16.1277 15.1099 16.5184L16.5249 15.1049ZM19.2939 20.7067C19.6842 21.0974 20.3173 21.0977 20.7081 20.7074C21.0988 20.3171 21.0991 19.6839 20.7088 19.2932L19.2939 20.7067ZM15.1099 16.5184L19.2939 20.7067L20.7088 19.2932L16.5249 15.1049L15.1099 16.5184Z",
+    fill: props.color
+  })]
+});
+SvgSearchOutline.defaultProps = {
+  color: '#404545',
+  size: 24
+};
+
+export { SvgSearchOutline as default };