@ctlyst.id/internal-ui 3.2.2 → 3.3.0

package/dist/index.d.mts

@@ -170,6 +170,7 @@ interface Props {
     leftHelperText?: string | ReactNode;
     rightHelperText?: string | ReactNode;
     isRequired?: boolean;
+    isDisabled?: boolean;
     boxProps?: FormControlProps;
 }
 type FieldProps<T = unknown> = Props & T;
@@ -595,7 +596,7 @@ declare const CHECKBOX_STATE: {
     readonly INDETERMINATE: 1;
     readonly CHECKED: 2;
 };
-declare const getSelectAllCheckboxState: (totalSelected: number, totalOption: number) => 0 | 2 | 1;
+declare const getSelectAllCheckboxState: (totalSelected: number, totalOption: number) => 0 | 1 | 2;
 interface SelectWithCheckboxBaseProps<T = OptionGroup<never> | OptionMultiGroup<never>, IsMulti extends boolean = boolean> extends Props$1<T, IsMulti> {
     isError?: boolean;
 }

package/dist/index.d.ts

@@ -170,6 +170,7 @@ interface Props {
     leftHelperText?: string | ReactNode;
     rightHelperText?: string | ReactNode;
     isRequired?: boolean;
+    isDisabled?: boolean;
     boxProps?: FormControlProps;
 }
 type FieldProps<T = unknown> = Props & T;
@@ -595,7 +596,7 @@ declare const CHECKBOX_STATE: {
     readonly INDETERMINATE: 1;
     readonly CHECKED: 2;
 };
-declare const getSelectAllCheckboxState: (totalSelected: number, totalOption: number) => 0 | 2 | 1;
+declare const getSelectAllCheckboxState: (totalSelected: number, totalOption: number) => 0 | 1 | 2;
 interface SelectWithCheckboxBaseProps<T = OptionGroup<never> | OptionMultiGroup<never>, IsMulti extends boolean = boolean> extends Props$1<T, IsMulti> {
     isError?: boolean;
 }

package/dist/index.js

@@ -884,6 +884,7 @@ var Field = (props) => {
     isRequired,
     children,
     isSuccess,
+    isDisabled,
     boxProps = {}
   } = props;
   const getHelperColor = () => {
@@ -897,12 +898,39 @@ var Field = (props) => {
   };
   const helperColor = getHelperColor();
   const justifyHelper = getJustifyContentHelper();
+  const getProperties = () => {
+    let outlineColor2 = "neutral.400";
+    let focusColor2 = "primary.500";
+    if (isError || isDisabled || isSuccess) {
+      if (isError) outlineColor2 = "danger.500";
+      else if (isSuccess) outlineColor2 = "success.500";
+      focusColor2 = outlineColor2;
+    }
+    return {
+      outlineColor: outlineColor2,
+      focusColor: focusColor2
+    };
+  };
+  const { outlineColor, focusColor } = getProperties();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormControl, { isInvalid: isError, ...boxProps, children: [
     label && (typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
       isRequired && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.Box, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
       label
     ] }) : label),
-    children,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react14.Box,
+      {
+        transition: "all 0.15s",
+        boxShadow: "none",
+        borderRadius: "sm",
+        border: "1px solid",
+        borderColor: outlineColor,
+        _focusWithin: {
+          borderColor: focusColor
+        },
+        children
+      }
+    ),
     (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.Box, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
       !isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
       rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
@@ -1028,19 +1056,6 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
     isLoading,
     ...inputProps
   } = props;
-  const getProperties = () => {
-    let outlineColor2 = "neutral.400";
-    let focusColor2 = "primary.500";
-    if (isError || isDisabled || isSuccess) {
-      if (isError) outlineColor2 = "danger.500";
-      else if (isSuccess) outlineColor2 = "success.500";
-      focusColor2 = outlineColor2;
-    }
-    return {
-      outlineColor: outlineColor2,
-      focusColor: focusColor2
-    };
-  };
   const [isShowPassword, setIsShowPassword] = (0, import_react22.useState)(false);
   const inputType = (0, import_react22.useMemo)(() => {
     return type === "password" && isShowPassword ? "text" : type;
@@ -1054,7 +1069,6 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
   const iconColor = (0, import_react22.useMemo)(() => {
     return isDisabled ? "black.low" : "black.medium";
   }, [isDisabled]);
-  const { outlineColor, focusColor } = getProperties();
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     field_default,
     {
@@ -1065,92 +1079,80 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_react21.Box,
+      isDisabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        import_react21.InputGroup,
         {
-          transition: "all 0.15s",
-          boxShadow: "none",
+          size: size2,
           borderRadius: "sm",
-          border: "1px solid",
-          borderColor: outlineColor,
-          _focusWithin: {
-            borderColor: focusColor
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-            import_react21.InputGroup,
-            {
-              size: size2,
-              borderRadius: "sm",
-              backgroundColor: isDisabled ? "neutral.300" : "white.high",
-              cursor: isDisabled ? "not-allowed" : "default",
-              children: [
-                addOnLeft,
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  import_react21.Input,
-                  {
-                    ref,
-                    type: inputType,
-                    value,
-                    isDisabled,
-                    isSuccess,
-                    ...inputProps,
-                    fontSize
-                  }
-                ),
-                (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-                  import_react21.Box,
-                  {
-                    "data-test-id": "CT_Component_ClearInput",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "16px",
-                    mr: "10px",
-                    children: [
-                      withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                        import_react21.Box,
-                        {
-                          display: "flex",
-                          justifyContent: "center",
-                          onClick: !isDisabled ? onClear : void 0,
-                          cursor: isDisabled ? "not-allowed" : "pointer",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
-                        }
-                      ),
-                      type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                        import_react21.Box,
-                        {
-                          "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
-                          onClick: () => {
-                            if (!isDisabled) setIsShowPassword(true);
-                          },
-                          cursor: isDisabled ? "not-allowed" : "pointer",
-                          display: "flex",
-                          justifyContent: "center",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
-                        }
-                      ),
-                      type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                        import_react21.Box,
-                        {
-                          "data-test-id": "sfc2388bmeXBmdla45Ibk",
-                          onClick: () => {
-                            if (!isDisabled) setIsShowPassword(false);
-                          },
-                          cursor: isDisabled ? "not-allowed" : "pointer",
-                          display: "flex",
-                          justifyContent: "center",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
-                        }
-                      ),
-                      isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
-                    ]
-                  }
-                ),
-                addOnRight
-              ]
-            }
-          )
+          backgroundColor: isDisabled ? "neutral.300" : "white.high",
+          cursor: isDisabled ? "not-allowed" : "default",
+          children: [
+            addOnLeft,
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_react21.Input,
+              {
+                ref,
+                type: inputType,
+                value,
+                isDisabled,
+                isSuccess,
+                ...inputProps,
+                fontSize
+              }
+            ),
+            (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              import_react21.Box,
+              {
+                "data-test-id": "CT_Component_ClearInput",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "16px",
+                mr: "10px",
+                children: [
+                  withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    import_react21.Box,
+                    {
+                      display: "flex",
+                      justifyContent: "center",
+                      onClick: !isDisabled ? onClear : void 0,
+                      cursor: isDisabled ? "not-allowed" : "pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
+                    }
+                  ),
+                  type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    import_react21.Box,
+                    {
+                      "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
+                      onClick: () => {
+                        if (!isDisabled) setIsShowPassword(true);
+                      },
+                      cursor: isDisabled ? "not-allowed" : "pointer",
+                      display: "flex",
+                      justifyContent: "center",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
+                    }
+                  ),
+                  type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    import_react21.Box,
+                    {
+                      "data-test-id": "sfc2388bmeXBmdla45Ibk",
+                      onClick: () => {
+                        if (!isDisabled) setIsShowPassword(false);
+                      },
+                      cursor: isDisabled ? "not-allowed" : "pointer",
+                      display: "flex",
+                      justifyContent: "center",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
+                    }
+                  ),
+                  isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
+                ]
+              }
+            ),
+            addOnRight
+          ]
         }
       )
     }
@@ -2500,7 +2502,7 @@ var Datepicker = ({
         id,
         name,
         selected,
-        customInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(input_field_default, { autoComplete: "off" }),
+        customInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(input_field_default, { label, isRequired, autoComplete: "off", isError }),
         showPopperArrow: false,
         calendarClassName: (0, import_shared_utils8.cx)({ inline: props.inline }),
         dropdownMode: "select",
@@ -2517,8 +2519,7 @@ var Datepicker = ({
   if (props.inline) {
     return component;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.FormControl, { isRequired, "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react33.FormLabel, { fontSize: "text.sm", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.FormControl, { "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.InputGroup, { children: [
       component,
       /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.InputRightElement, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
@@ -5954,10 +5955,10 @@ var baseStyle5 = (0, import_styled_system5.defineStyle)({
   marginEnd: 1,
   mb: 1
 });
-var FormLabel5 = (0, import_styled_system5.defineStyleConfig)({
+var FormLabel4 = (0, import_styled_system5.defineStyleConfig)({
   baseStyle: baseStyle5
 });
-var form_label_default = FormLabel5;
+var form_label_default = FormLabel4;
 
 // src/config/theme/components/input.ts
 var import_anatomy5 = require("@chakra-ui/anatomy");