@ctlyst.id/internal-ui 2.1.20 → 2.2.0

package/dist/index.mjs

@@ -3478,13 +3478,13 @@ var selectStyle = {
 };
 function selectStyles(colorMode, _isError) {
   return {
-    control: (base, { isDisabled, isFocused }) => {
+    control: (base, { isFocused }) => {
       const style = {
         ...base,
         flexWrap: "nowrap",
         borderColor: isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-400)",
         boxShadow: "none",
-        color: isDisabled ? "var(--chakra-colors-black-low)" : "var(--chakra-colors-black-high)",
+        color: "var(--chakra-colors-black-low)",
         "&:hover": {
           borderColor: _isError ? "" : isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-500)"
         }
@@ -3502,23 +3502,47 @@ function selectStyles(colorMode, _isError) {
       ...selectStyle,
       color: "var(--chakra-colors-neutral-900)"
     }),
-    menu: (base) => colorMode === "dark" ? {
-      ...base,
-      ...selectStyle,
-      background: "dark.800",
-      zIndex: 5
-    } : {
-      ...base,
-      ...selectStyle,
-      zIndex: 5
+    menu: (base) => {
+      return {
+        ...base,
+        ...selectStyle,
+        zIndex: 5
+      };
+    },
+    singleValue: (base) => {
+      return { ...base, ...selectStyle };
+    },
+    input: (base) => {
+      return { ...base, ...selectStyle };
+    },
+    dropdownIndicator: (base) => {
+      return { ...base, ...selectStyle };
+    },
+    indicatorSeparator: (base) => {
+      return { ...base, ...selectStyle };
     },
-    singleValue: (base) => colorMode === "dark" ? { ...base, ...selectStyle, color: "white" } : { ...base, ...selectStyle },
-    input: (base) => colorMode === "dark" ? { ...base, ...selectStyle, color: "white" } : { ...base, ...selectStyle },
-    dropdownIndicator: (base) => colorMode === "dark" ? { ...base, ...selectStyle, color: "secondary.500" } : { ...base, ...selectStyle },
-    indicatorSeparator: (base) => colorMode === "dark" ? { ...base, ...selectStyle, backgroundColor: "secondary.500" } : { ...base, ...selectStyle },
     placeholder: (base) => {
-      return { ...base, ...selectStyle, color: "black.low" };
-    }
+      return { ...base, ...selectStyle, color: "var(--chakra-colors-black-low)" };
+    },
+    multiValue: (base) => {
+      return {
+        ...base,
+        borderRadius: 4,
+        backgroundColor: "var(--chakra-colors-neutral-200)"
+      };
+    },
+    multiValueLabel: (base) => ({
+      ...base,
+      borderRadius: 4,
+      fontWeight: "bold"
+    }),
+    multiValueRemove: (base) => ({
+      ...base,
+      color: "var(--chakra-colors-neutral-900)",
+      ":hover": {
+        backgroundColor: "var(--chakra-colors-neutral-300)"
+      }
+    })
   };
 }
 var themeSelect = (theme6) => {
@@ -3610,12 +3634,149 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
   );
 }
 
+// src/components/select/components/select-with-checkbox.tsx
+import { Checkbox as Checkbox3, Flex as Flex8, Text as Text14 } from "@chakra-ui/react";
+import { useColorMode as useColorMode7 } from "@chakra-ui/system";
+import ReactSelect2, { components as ComponentRS } from "react-select";
+import { Fragment as Fragment6, jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+var CHECKBOX_STATE = {
+  UNCHECKED: 0,
+  INDETERMINATE: 1,
+  CHECKED: 2
+};
+var getSelectAllCheckboxState = (totalSelected, totalOption) => {
+  if (totalSelected < 0 || totalOption < 0) {
+    throw new Error("value less than 0");
+  }
+  if (totalSelected > totalOption) {
+    throw new Error("totalSelected couldn't be more than totalOption");
+  }
+  if (totalSelected === 0) {
+    return CHECKBOX_STATE.UNCHECKED;
+  }
+  if (totalSelected < totalOption) {
+    return CHECKBOX_STATE.INDETERMINATE;
+  }
+  if (totalSelected === totalOption) {
+    return CHECKBOX_STATE.CHECKED;
+  }
+  return CHECKBOX_STATE.UNCHECKED;
+};
+var InputOption = ({
+  getStyles,
+  isDisabled,
+  isFocused,
+  isSelected,
+  children,
+  innerProps,
+  data,
+  checkedState,
+  isMulti,
+  ...rest
+}) => {
+  const style = {
+    alignItems: "center",
+    color: "inherit",
+    display: "flex "
+  };
+  const props = {
+    ...innerProps,
+    "aria-disabled": isDisabled,
+    onClick: isDisabled ? void 0 : innerProps.onClick,
+    style
+  };
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
+    /* @__PURE__ */ jsx55(
+      ComponentRS.Option,
+      {
+        isMulti: true,
+        data,
+        isDisabled,
+        isFocused,
+        isSelected,
+        getStyles,
+        innerProps: props,
+        ...rest,
+        children: /* @__PURE__ */ jsxs23(
+          Flex8,
+          {
+            alignItems: "center",
+            width: "100%",
+            mb: "3px",
+            gap: 2,
+            "data-test-id": "CT_component_select-checkbox_options",
+            cursor: isDisabled ? "not-allowed" : "default",
+            children: [
+              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx55(
+                Checkbox3,
+                {
+                  isChecked: checkedState === CHECKBOX_STATE.CHECKED,
+                  isIndeterminate: checkedState === CHECKBOX_STATE.INDETERMINATE,
+                  isDisabled,
+                  "data-test-id": "CT_component_select-checkbox_select-all-option"
+                }
+              ) : /* @__PURE__ */ jsx55(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
+              /* @__PURE__ */ jsx55(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+            ]
+          }
+        )
+      }
+    ),
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx55("hr", {}) : null
+  ] });
+};
+var SelectWithCheckboxBase = ({
+  isError = false,
+  components,
+  options,
+  ...rest
+}) => {
+  const { colorMode } = useColorMode7();
+  return /* @__PURE__ */ jsx55(
+    ReactSelect2,
+    {
+      classNamePrefix: "react-select",
+      options,
+      styles: { ...selectStyles(colorMode, !!isError) },
+      theme: themeSelect,
+      closeMenuOnSelect: false,
+      hideSelectedOptions: false,
+      components: {
+        ...components
+      },
+      ...rest
+    }
+  );
+};
+var SelectCheckbox = (props) => {
+  const { isMulti, options, value, ...rest } = props;
+  const selectValue = value || [];
+  return /* @__PURE__ */ jsx55(
+    SelectWithCheckboxBase,
+    {
+      isMulti,
+      options,
+      components: {
+        Option: (optionProps) => {
+          const { isSelected, data } = optionProps;
+          const optionLength = (options == null ? void 0 : options.length) ? options.length - 1 : 0;
+          const selectedValue = isSelected ? CHECKBOX_STATE.CHECKED : CHECKBOX_STATE.UNCHECKED;
+          const checkedState = data.selectAllCheckbox ? getSelectAllCheckboxState(selectValue == null ? void 0 : selectValue.length, optionLength) : selectedValue;
+          return /* @__PURE__ */ jsx55(InputOption, { ...optionProps, checkedState });
+        }
+      },
+      ...rest
+    }
+  );
+};
+var select_with_checkbox_default = SelectCheckbox;
+
 // src/components/switch/components/switch.tsx
-import { chakra as chakra6, Flex as Flex8, forwardRef as forwardRef13, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox2, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
+import { chakra as chakra6, Flex as Flex9, forwardRef as forwardRef13, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox2, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
 import { cx as cx9, dataAttr } from "@chakra-ui/shared-utils";
 import { Check, Close as Close4 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var Switch = forwardRef13(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
@@ -3658,7 +3819,7 @@ var Switch = forwardRef13(function Switch2(props, ref) {
     };
     return iconSize[value];
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     chakra6.label,
     {
       ...getRootProps(),
@@ -3667,13 +3828,13 @@ var Switch = forwardRef13(function Switch2(props, ref) {
       className: cx9("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx55("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
-        /* @__PURE__ */ jsxs23(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
-          /* @__PURE__ */ jsxs23(Flex8, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx55(Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx55(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+        /* @__PURE__ */ jsx56("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ jsxs24(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
+          /* @__PURE__ */ jsxs24(Flex9, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
+            /* @__PURE__ */ jsx56(Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx56(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -3683,7 +3844,7 @@ var Switch = forwardRef13(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx55(
+        children && /* @__PURE__ */ jsx56(
           chakra6.span,
           {
             className: "chakra-switch__label",
@@ -3719,14 +3880,14 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/tabs/components/tab.tsx
-import { Button as Button5, Flex as Flex9, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Button as Button5, Flex as Flex10, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
+import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
 var Tab = forwardRef14((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Button5,
     {
       "data-test-id": props["data-test-id"],
@@ -3752,7 +3913,7 @@ var Tab = forwardRef14((props, ref) => {
       },
       __css: styles.tab,
       ...tabProps,
-      children: /* @__PURE__ */ jsxs24(Flex9, { alignItems: "center", children: [
+      children: /* @__PURE__ */ jsxs25(Flex10, { alignItems: "center", children: [
         (_a = props.leftAddon) == null ? void 0 : _a.call(props, { isSelected }),
         tabProps.children,
         (_b = props.rightAddon) == null ? void 0 : _b.call(props, { isSelected })
@@ -3798,13 +3959,13 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/text/index.ts
-import { Code, CodeProps, Heading, HeadingProps, Link as Link4, LinkProps, Text as Text14, TextProps } from "@chakra-ui/react";
+import { Code, CodeProps, Heading, HeadingProps, Link as Link4, LinkProps, Text as Text15, TextProps } from "@chakra-ui/react";
 
 // src/components/tooltip/index.ts
 import { Tooltip, TooltipProps } from "@chakra-ui/react";
 
 // src/components/uploader/components/uploader.tsx
-import { Flex as Flex10, Heading as Heading2, Stack as Stack4, Text as Text15 } from "@chakra-ui/react";
+import { Flex as Flex11, Heading as Heading2, Stack as Stack4, Text as Text16 } from "@chakra-ui/react";
 import * as React15 from "react";
 import { useDropzone } from "react-dropzone";
 
@@ -3818,7 +3979,7 @@ var messages = {
 };
 
 // src/components/uploader/components/uploader.tsx
-import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -3866,9 +4027,9 @@ var Uploader = ({
   React15.useEffect(() => {
     setIsSelected(selected != null ? selected : false);
   }, [selected]);
-  return /* @__PURE__ */ jsxs25(Stack4, { direction: "column", children: [
-    /* @__PURE__ */ jsxs25(
-      Flex10,
+  return /* @__PURE__ */ jsxs26(Stack4, { direction: "column", children: [
+    /* @__PURE__ */ jsxs26(
+      Flex11,
       {
         minH: 200,
         border: "1px dashed",
@@ -3879,11 +4040,11 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          /* @__PURE__ */ jsx57("input", { ...getInputProps() }),
-          isDragActive ? /* @__PURE__ */ jsx57(Text15, { children: messages.dragActive }) : /* @__PURE__ */ jsxs25(Flex10, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
-            !multiple && isSelected && /* @__PURE__ */ jsx57(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
-            !isSelected && /* @__PURE__ */ jsx57(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
-            isSelected ? /* @__PURE__ */ jsx57(Text15, { children: messages.dragReplace }) : /* @__PURE__ */ jsx57(Text15, { children: messages.dragInActive })
+          /* @__PURE__ */ jsx58("input", { ...getInputProps() }),
+          isDragActive ? /* @__PURE__ */ jsx58(Text16, { children: messages.dragActive }) : /* @__PURE__ */ jsxs26(Flex11, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
+            !multiple && isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
+            !isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
+            isSelected ? /* @__PURE__ */ jsx58(Text16, { children: messages.dragReplace }) : /* @__PURE__ */ jsx58(Text16, { children: messages.dragInActive })
           ] })
         ]
       }
@@ -4581,14 +4742,14 @@ var variants2 = {
   errors,
   unstyled
 };
-var Checkbox3 = defineMultiStyleConfig3({
+var Checkbox4 = defineMultiStyleConfig3({
   baseStyle: baseStyle3,
   variants: variants2,
   defaultProps: {
     variant: "unstyled"
   }
 });
-var checkbox_default2 = Checkbox3;
+var checkbox_default2 = Checkbox4;
 
 // src/config/theme/components/chips.ts
 import { defineStyleConfig as defineStyleConfig3 } from "@chakra-ui/styled-system";
@@ -5490,7 +5651,7 @@ import { useMemo as useMemo7 } from "react";
 import axios from "axios";
 import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef2 } from "react";
 import { ToastContainer } from "react-toastify";
-import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -5509,8 +5670,8 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
     });
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo6(() => ({ instance: instanceRef.current }), []);
-  return /* @__PURE__ */ jsxs26(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx58(ToastContainer, {}),
+  return /* @__PURE__ */ jsxs27(ProviderContext.Provider, { value: provider, children: [
+    /* @__PURE__ */ jsx59(ToastContainer, {}),
     children
   ] });
 };
@@ -5552,7 +5713,7 @@ function useFetcher() {
 import {
   useBoolean,
   useClipboard,
-  useColorMode as useColorMode7,
+  useColorMode as useColorMode8,
   useColorModeValue as useColorModeValue12,
   useConst,
   useControllableProp,
@@ -5610,6 +5771,7 @@ export {
   button_default as Button,
   ButtonGroup,
   ButtonGroupProps,
+  CHECKBOX_STATE,
   card_default as Card,
   Center,
   ChakraProvider,
@@ -5756,6 +5918,7 @@ export {
   select_default as Select,
   select_async_default as SelectAsync,
   SelectAsyncCreatable,
+  select_with_checkbox_default as SelectCheckBox,
   SelectCreatable,
   Show,
   ShowProps,
@@ -5800,7 +5963,7 @@ export {
   TabsProvider,
   Tbody2 as Tbody,
   Td2 as Td,
-  Text14 as Text,
+  Text15 as Text,
   TextProps,
   textarea_default as TextareaField,
   Th2 as Th,
@@ -5846,6 +6009,7 @@ export {
   WrapProps,
   extendTheme2 as extendTheme,
   forwardRef15 as forwardRef,
+  getSelectAllCheckboxState,
   getTheme,
   theme5 as theme,
   useAccordion,
@@ -5859,7 +6023,7 @@ export {
   useCheckbox,
   useCheckboxGroup,
   useClipboard,
-  useColorMode7 as useColorMode,
+  useColorMode8 as useColorMode,
   useColorModePreference,
   useColorModeValue12 as useColorModeValue,
   useConst,