@ctlyst.id/internal-ui 3.3.5 → 3.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +148 -121
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +148 -121
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -893,39 +893,12 @@ var Field = (props) => {
|
|
|
893
893
|
};
|
|
894
894
|
const helperColor = getHelperColor();
|
|
895
895
|
const justifyHelper = getJustifyContentHelper();
|
|
896
|
-
const getProperties = () => {
|
|
897
|
-
let outlineColor2 = "neutral.400";
|
|
898
|
-
let focusColor2 = "primary.500";
|
|
899
|
-
if (isError || isDisabled || isSuccess) {
|
|
900
|
-
if (isError) outlineColor2 = "danger.500";
|
|
901
|
-
else if (isSuccess) outlineColor2 = "success.500";
|
|
902
|
-
focusColor2 = outlineColor2;
|
|
903
|
-
}
|
|
904
|
-
return {
|
|
905
|
-
outlineColor: outlineColor2,
|
|
906
|
-
focusColor: focusColor2
|
|
907
|
-
};
|
|
908
|
-
};
|
|
909
|
-
const { outlineColor, focusColor } = getProperties();
|
|
910
896
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormControl, { isInvalid: isError, ...boxProps, children: [
|
|
911
897
|
label && (typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
|
|
912
898
|
isRequired && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.Box, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
|
|
913
899
|
label
|
|
914
900
|
] }) : label),
|
|
915
|
-
|
|
916
|
-
import_react14.Box,
|
|
917
|
-
{
|
|
918
|
-
transition: "all 0.15s",
|
|
919
|
-
boxShadow: "none",
|
|
920
|
-
borderRadius: "sm",
|
|
921
|
-
border: "1px solid",
|
|
922
|
-
borderColor: outlineColor,
|
|
923
|
-
_focusWithin: {
|
|
924
|
-
borderColor: focusColor
|
|
925
|
-
},
|
|
926
|
-
children
|
|
927
|
-
}
|
|
928
|
-
),
|
|
901
|
+
children,
|
|
929
902
|
(isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.Box, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
|
|
930
903
|
!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,
|
|
931
904
|
rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
|
|
@@ -1051,6 +1024,19 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
|
|
|
1051
1024
|
isLoading,
|
|
1052
1025
|
...inputProps
|
|
1053
1026
|
} = props;
|
|
1027
|
+
const getProperties = () => {
|
|
1028
|
+
let outlineColor2 = "neutral.400";
|
|
1029
|
+
let focusColor2 = "primary.500";
|
|
1030
|
+
if (isError || isDisabled || isSuccess) {
|
|
1031
|
+
if (isError) outlineColor2 = "danger.500";
|
|
1032
|
+
else if (isSuccess) outlineColor2 = "success.500";
|
|
1033
|
+
focusColor2 = outlineColor2;
|
|
1034
|
+
}
|
|
1035
|
+
return {
|
|
1036
|
+
outlineColor: outlineColor2,
|
|
1037
|
+
focusColor: focusColor2
|
|
1038
|
+
};
|
|
1039
|
+
};
|
|
1054
1040
|
const [isShowPassword, setIsShowPassword] = (0, import_react22.useState)(false);
|
|
1055
1041
|
const inputType = (0, import_react22.useMemo)(() => {
|
|
1056
1042
|
return type === "password" && isShowPassword ? "text" : type;
|
|
@@ -1064,6 +1050,7 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
|
|
|
1064
1050
|
const iconColor = (0, import_react22.useMemo)(() => {
|
|
1065
1051
|
return isDisabled ? "black.low" : "black.medium";
|
|
1066
1052
|
}, [isDisabled]);
|
|
1053
|
+
const { outlineColor, focusColor } = getProperties();
|
|
1067
1054
|
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1068
1055
|
field_default,
|
|
1069
1056
|
{
|
|
@@ -1074,80 +1061,92 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
|
|
|
1074
1061
|
leftHelperText,
|
|
1075
1062
|
rightHelperText,
|
|
1076
1063
|
isRequired,
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
import_react21.InputGroup,
|
|
1064
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1065
|
+
import_react21.Box,
|
|
1080
1066
|
{
|
|
1081
|
-
|
|
1067
|
+
transition: "all 0.15s",
|
|
1068
|
+
boxShadow: "none",
|
|
1082
1069
|
borderRadius: "sm",
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1070
|
+
border: "1px solid",
|
|
1071
|
+
borderColor: outlineColor,
|
|
1072
|
+
_focusWithin: {
|
|
1073
|
+
borderColor: focusColor
|
|
1074
|
+
},
|
|
1075
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1076
|
+
import_react21.InputGroup,
|
|
1077
|
+
{
|
|
1078
|
+
size: size2,
|
|
1079
|
+
borderRadius: "sm",
|
|
1080
|
+
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
|
1081
|
+
cursor: isDisabled ? "not-allowed" : "default",
|
|
1082
|
+
children: [
|
|
1083
|
+
addOnLeft,
|
|
1084
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1085
|
+
import_react21.Input,
|
|
1086
|
+
{
|
|
1087
|
+
ref,
|
|
1088
|
+
type: inputType,
|
|
1089
|
+
value,
|
|
1090
|
+
isDisabled,
|
|
1091
|
+
isSuccess,
|
|
1092
|
+
...inputProps,
|
|
1093
|
+
fontSize
|
|
1094
|
+
}
|
|
1095
|
+
),
|
|
1096
|
+
(withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1097
|
+
import_react21.Box,
|
|
1098
|
+
{
|
|
1099
|
+
"data-test-id": "CT_Component_ClearInput",
|
|
1100
|
+
display: "flex",
|
|
1101
|
+
alignItems: "center",
|
|
1102
|
+
justifyContent: "center",
|
|
1103
|
+
width: "16px",
|
|
1104
|
+
mr: "10px",
|
|
1105
|
+
children: [
|
|
1106
|
+
withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1107
|
+
import_react21.Box,
|
|
1108
|
+
{
|
|
1109
|
+
display: "flex",
|
|
1110
|
+
justifyContent: "center",
|
|
1111
|
+
onClick: !isDisabled ? onClear : void 0,
|
|
1112
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
1113
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
|
|
1114
|
+
}
|
|
1115
|
+
),
|
|
1116
|
+
type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1117
|
+
import_react21.Box,
|
|
1118
|
+
{
|
|
1119
|
+
"data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
|
|
1120
|
+
onClick: () => {
|
|
1121
|
+
if (!isDisabled) setIsShowPassword(true);
|
|
1122
|
+
},
|
|
1123
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
1124
|
+
display: "flex",
|
|
1125
|
+
justifyContent: "center",
|
|
1126
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
|
|
1127
|
+
}
|
|
1128
|
+
),
|
|
1129
|
+
type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1130
|
+
import_react21.Box,
|
|
1131
|
+
{
|
|
1132
|
+
"data-test-id": "sfc2388bmeXBmdla45Ibk",
|
|
1133
|
+
onClick: () => {
|
|
1134
|
+
if (!isDisabled) setIsShowPassword(false);
|
|
1135
|
+
},
|
|
1136
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
1137
|
+
display: "flex",
|
|
1138
|
+
justifyContent: "center",
|
|
1139
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
|
|
1140
|
+
}
|
|
1141
|
+
),
|
|
1142
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
|
|
1143
|
+
]
|
|
1144
|
+
}
|
|
1145
|
+
),
|
|
1146
|
+
addOnRight
|
|
1147
|
+
]
|
|
1148
|
+
}
|
|
1149
|
+
)
|
|
1151
1150
|
}
|
|
1152
1151
|
)
|
|
1153
1152
|
}
|
|
@@ -4924,6 +4923,20 @@ var TimeInput2 = (0, import_react84.forwardRef)(
|
|
|
4924
4923
|
}));
|
|
4925
4924
|
const rootProps = getRootProps();
|
|
4926
4925
|
const hoursProps = getInputProps("hours");
|
|
4926
|
+
const getProperties = () => {
|
|
4927
|
+
let outlineColor2 = "neutral.400";
|
|
4928
|
+
let focusColor2 = "primary.500";
|
|
4929
|
+
if (isError || isDisabled || isSuccess) {
|
|
4930
|
+
if (isError) outlineColor2 = "danger.500";
|
|
4931
|
+
else if (isSuccess) outlineColor2 = "success.500";
|
|
4932
|
+
focusColor2 = outlineColor2;
|
|
4933
|
+
}
|
|
4934
|
+
return {
|
|
4935
|
+
outlineColor: outlineColor2,
|
|
4936
|
+
focusColor: focusColor2
|
|
4937
|
+
};
|
|
4938
|
+
};
|
|
4939
|
+
const { outlineColor, focusColor } = getProperties();
|
|
4927
4940
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Box, { ...boxProps, ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
4928
4941
|
field_default,
|
|
4929
4942
|
{
|
|
@@ -4933,28 +4946,41 @@ var TimeInput2 = (0, import_react84.forwardRef)(
|
|
|
4933
4946
|
errorMessage,
|
|
4934
4947
|
isDisabled,
|
|
4935
4948
|
isSuccess,
|
|
4936
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime63.
|
|
4937
|
-
import_react84.
|
|
4949
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
4950
|
+
import_react84.Box,
|
|
4938
4951
|
{
|
|
4952
|
+
transition: "all 0.15s",
|
|
4953
|
+
boxShadow: "none",
|
|
4939
4954
|
borderRadius: "sm",
|
|
4940
|
-
|
|
4941
|
-
|
|
4942
|
-
|
|
4943
|
-
|
|
4944
|
-
|
|
4945
|
-
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4953
|
-
|
|
4954
|
-
|
|
4955
|
-
|
|
4956
|
-
|
|
4957
|
-
|
|
4955
|
+
border: "1px solid",
|
|
4956
|
+
borderColor: outlineColor,
|
|
4957
|
+
_focusWithin: {
|
|
4958
|
+
borderColor: focusColor
|
|
4959
|
+
},
|
|
4960
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
4961
|
+
import_react84.InputGroup,
|
|
4962
|
+
{
|
|
4963
|
+
borderRadius: "sm",
|
|
4964
|
+
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
|
4965
|
+
cursor: isDisabled ? "not-allowed" : "default",
|
|
4966
|
+
alignItems: "center",
|
|
4967
|
+
gap: 3,
|
|
4968
|
+
children: [
|
|
4969
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react84.Flex, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
|
|
4970
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...hoursProps }),
|
|
4971
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
|
|
4972
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("minutes") }),
|
|
4973
|
+
seconds && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
|
|
4974
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
|
|
4975
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("seconds") })
|
|
4976
|
+
] }),
|
|
4977
|
+
options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Input, { p: 0, ...getInputProps("am/pm") })
|
|
4978
|
+
] }),
|
|
4979
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon10.Clock, { color: "neutral.400" }),
|
|
4980
|
+
addOnRight
|
|
4981
|
+
]
|
|
4982
|
+
}
|
|
4983
|
+
)
|
|
4958
4984
|
}
|
|
4959
4985
|
)
|
|
4960
4986
|
}
|
|
@@ -5268,6 +5294,7 @@ var Uploader = ({
|
|
|
5268
5294
|
const color = isDisabled ? "neutral.500" : "primary.500";
|
|
5269
5295
|
const containerHeight = !isSmall ? "160px" : "120px";
|
|
5270
5296
|
const cursorType = filePreview ? "initial" : "pointer";
|
|
5297
|
+
console.log(isDragActive);
|
|
5271
5298
|
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_react88.FormControl, { isRequired, children: [
|
|
5272
5299
|
label && typeof label === "string" ? (
|
|
5273
5300
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
@@ -5348,7 +5375,7 @@ var Uploader = ({
|
|
|
5348
5375
|
fontSize: size2 === "sm" ? "text.md" : "text.xl",
|
|
5349
5376
|
mb: size2 === "sm" ? "0" : "2",
|
|
5350
5377
|
textAlign: "center",
|
|
5351
|
-
children: uploadFileText && size2 === "lg" ?
|
|
5378
|
+
children: uploadFileText && size2 === "lg" ? uploadFileText : "Upload"
|
|
5352
5379
|
}
|
|
5353
5380
|
),
|
|
5354
5381
|
size2 === "lg" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react88.Text, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
|