@ctlyst.id/internal-ui 3.3.5 → 3.3.7
Sign up to get free protection for your applications and to get access to all the features.
- 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 })
|