@ctlyst.id/internal-ui 3.2.1 → 3.3.0

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +105 -104
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +107 -107
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +7 -5
package/dist/index.d.mts CHANGED
@@ -170,6 +170,7 @@ interface Props {
170
170
  leftHelperText?: string | ReactNode;
171
171
  rightHelperText?: string | ReactNode;
172
172
  isRequired?: boolean;
173
+ isDisabled?: boolean;
173
174
  boxProps?: FormControlProps;
174
175
  }
175
176
  type FieldProps<T = unknown> = Props & T;
@@ -595,7 +596,7 @@ declare const CHECKBOX_STATE: {
595
596
  readonly INDETERMINATE: 1;
596
597
  readonly CHECKED: 2;
597
598
  };
598
- declare const getSelectAllCheckboxState: (totalSelected: number, totalOption: number) => 0 | 2 | 1;
599
+ declare const getSelectAllCheckboxState: (totalSelected: number, totalOption: number) => 0 | 1 | 2;
599
600
  interface SelectWithCheckboxBaseProps<T = OptionGroup<never> | OptionMultiGroup<never>, IsMulti extends boolean = boolean> extends Props$1<T, IsMulti> {
600
601
  isError?: boolean;
601
602
  }
package/dist/index.d.ts CHANGED
@@ -170,6 +170,7 @@ interface Props {
170
170
  leftHelperText?: string | ReactNode;
171
171
  rightHelperText?: string | ReactNode;
172
172
  isRequired?: boolean;
173
+ isDisabled?: boolean;
173
174
  boxProps?: FormControlProps;
174
175
  }
175
176
  type FieldProps<T = unknown> = Props & T;
@@ -595,7 +596,7 @@ declare const CHECKBOX_STATE: {
595
596
  readonly INDETERMINATE: 1;
596
597
  readonly CHECKED: 2;
597
598
  };
598
- declare const getSelectAllCheckboxState: (totalSelected: number, totalOption: number) => 0 | 2 | 1;
599
+ declare const getSelectAllCheckboxState: (totalSelected: number, totalOption: number) => 0 | 1 | 2;
599
600
  interface SelectWithCheckboxBaseProps<T = OptionGroup<never> | OptionMultiGroup<never>, IsMulti extends boolean = boolean> extends Props$1<T, IsMulti> {
600
601
  isError?: boolean;
601
602
  }
package/dist/index.js CHANGED
@@ -884,6 +884,7 @@ var Field = (props) => {
884
884
  isRequired,
885
885
  children,
886
886
  isSuccess,
887
+ isDisabled,
887
888
  boxProps = {}
888
889
  } = props;
889
890
  const getHelperColor = () => {
@@ -897,12 +898,39 @@ var Field = (props) => {
897
898
  };
898
899
  const helperColor = getHelperColor();
899
900
  const justifyHelper = getJustifyContentHelper();
901
+ const getProperties = () => {
902
+ let outlineColor2 = "neutral.400";
903
+ let focusColor2 = "primary.500";
904
+ if (isError || isDisabled || isSuccess) {
905
+ if (isError) outlineColor2 = "danger.500";
906
+ else if (isSuccess) outlineColor2 = "success.500";
907
+ focusColor2 = outlineColor2;
908
+ }
909
+ return {
910
+ outlineColor: outlineColor2,
911
+ focusColor: focusColor2
912
+ };
913
+ };
914
+ const { outlineColor, focusColor } = getProperties();
900
915
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormControl, { isInvalid: isError, ...boxProps, children: [
901
916
  label && (typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
902
917
  isRequired && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.Box, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
903
918
  label
904
919
  ] }) : label),
905
- children,
920
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
921
+ import_react14.Box,
922
+ {
923
+ transition: "all 0.15s",
924
+ boxShadow: "none",
925
+ borderRadius: "sm",
926
+ border: "1px solid",
927
+ borderColor: outlineColor,
928
+ _focusWithin: {
929
+ borderColor: focusColor
930
+ },
931
+ children
932
+ }
933
+ ),
906
934
  (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.Box, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
907
935
  !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,
908
936
  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) => {
1028
1056
  isLoading,
1029
1057
  ...inputProps
1030
1058
  } = props;
1031
- const getProperties = () => {
1032
- let outlineColor2 = "neutral.400";
1033
- let focusColor2 = "primary.500";
1034
- if (isError || isDisabled || isSuccess) {
1035
- if (isError) outlineColor2 = "danger.500";
1036
- else if (isSuccess) outlineColor2 = "success.500";
1037
- focusColor2 = outlineColor2;
1038
- }
1039
- return {
1040
- outlineColor: outlineColor2,
1041
- focusColor: focusColor2
1042
- };
1043
- };
1044
1059
  const [isShowPassword, setIsShowPassword] = (0, import_react22.useState)(false);
1045
1060
  const inputType = (0, import_react22.useMemo)(() => {
1046
1061
  return type === "password" && isShowPassword ? "text" : type;
@@ -1054,7 +1069,6 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
1054
1069
  const iconColor = (0, import_react22.useMemo)(() => {
1055
1070
  return isDisabled ? "black.low" : "black.medium";
1056
1071
  }, [isDisabled]);
1057
- const { outlineColor, focusColor } = getProperties();
1058
1072
  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1059
1073
  field_default,
1060
1074
  {
@@ -1065,92 +1079,80 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
1065
1079
  leftHelperText,
1066
1080
  rightHelperText,
1067
1081
  isRequired,
1068
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1069
- import_react21.Box,
1082
+ isDisabled,
1083
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1084
+ import_react21.InputGroup,
1070
1085
  {
1071
- transition: "all 0.15s",
1072
- boxShadow: "none",
1086
+ size: size2,
1073
1087
  borderRadius: "sm",
1074
- border: "1px solid",
1075
- borderColor: outlineColor,
1076
- _focusWithin: {
1077
- borderColor: focusColor
1078
- },
1079
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1080
- import_react21.InputGroup,
1081
- {
1082
- size: size2,
1083
- borderRadius: "sm",
1084
- backgroundColor: isDisabled ? "neutral.300" : "white.high",
1085
- cursor: isDisabled ? "not-allowed" : "default",
1086
- children: [
1087
- addOnLeft,
1088
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1089
- import_react21.Input,
1090
- {
1091
- ref,
1092
- type: inputType,
1093
- value,
1094
- isDisabled,
1095
- isSuccess,
1096
- ...inputProps,
1097
- fontSize
1098
- }
1099
- ),
1100
- (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1101
- import_react21.Box,
1102
- {
1103
- "data-test-id": "CT_Component_ClearInput",
1104
- display: "flex",
1105
- alignItems: "center",
1106
- justifyContent: "center",
1107
- width: "16px",
1108
- mr: "10px",
1109
- children: [
1110
- withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1111
- import_react21.Box,
1112
- {
1113
- display: "flex",
1114
- justifyContent: "center",
1115
- onClick: !isDisabled ? onClear : void 0,
1116
- cursor: isDisabled ? "not-allowed" : "pointer",
1117
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
1118
- }
1119
- ),
1120
- type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1121
- import_react21.Box,
1122
- {
1123
- "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
1124
- onClick: () => {
1125
- if (!isDisabled) setIsShowPassword(true);
1126
- },
1127
- cursor: isDisabled ? "not-allowed" : "pointer",
1128
- display: "flex",
1129
- justifyContent: "center",
1130
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
1131
- }
1132
- ),
1133
- type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1134
- import_react21.Box,
1135
- {
1136
- "data-test-id": "sfc2388bmeXBmdla45Ibk",
1137
- onClick: () => {
1138
- if (!isDisabled) setIsShowPassword(false);
1139
- },
1140
- cursor: isDisabled ? "not-allowed" : "pointer",
1141
- display: "flex",
1142
- justifyContent: "center",
1143
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
1144
- }
1145
- ),
1146
- isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
1147
- ]
1148
- }
1149
- ),
1150
- addOnRight
1151
- ]
1152
- }
1153
- )
1088
+ backgroundColor: isDisabled ? "neutral.300" : "white.high",
1089
+ cursor: isDisabled ? "not-allowed" : "default",
1090
+ children: [
1091
+ addOnLeft,
1092
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1093
+ import_react21.Input,
1094
+ {
1095
+ ref,
1096
+ type: inputType,
1097
+ value,
1098
+ isDisabled,
1099
+ isSuccess,
1100
+ ...inputProps,
1101
+ fontSize
1102
+ }
1103
+ ),
1104
+ (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1105
+ import_react21.Box,
1106
+ {
1107
+ "data-test-id": "CT_Component_ClearInput",
1108
+ display: "flex",
1109
+ alignItems: "center",
1110
+ justifyContent: "center",
1111
+ width: "16px",
1112
+ mr: "10px",
1113
+ children: [
1114
+ withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1115
+ import_react21.Box,
1116
+ {
1117
+ display: "flex",
1118
+ justifyContent: "center",
1119
+ onClick: !isDisabled ? onClear : void 0,
1120
+ cursor: isDisabled ? "not-allowed" : "pointer",
1121
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
1122
+ }
1123
+ ),
1124
+ type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1125
+ import_react21.Box,
1126
+ {
1127
+ "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
1128
+ onClick: () => {
1129
+ if (!isDisabled) setIsShowPassword(true);
1130
+ },
1131
+ cursor: isDisabled ? "not-allowed" : "pointer",
1132
+ display: "flex",
1133
+ justifyContent: "center",
1134
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
1135
+ }
1136
+ ),
1137
+ type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1138
+ import_react21.Box,
1139
+ {
1140
+ "data-test-id": "sfc2388bmeXBmdla45Ibk",
1141
+ onClick: () => {
1142
+ if (!isDisabled) setIsShowPassword(false);
1143
+ },
1144
+ cursor: isDisabled ? "not-allowed" : "pointer",
1145
+ display: "flex",
1146
+ justifyContent: "center",
1147
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
1148
+ }
1149
+ ),
1150
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
1151
+ ]
1152
+ }
1153
+ ),
1154
+ addOnRight
1155
+ ]
1154
1156
  }
1155
1157
  )
1156
1158
  }
@@ -2500,7 +2502,7 @@ var Datepicker = ({
2500
2502
  id,
2501
2503
  name,
2502
2504
  selected,
2503
- customInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(input_field_default, { autoComplete: "off" }),
2505
+ customInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(input_field_default, { label, isRequired, autoComplete: "off", isError }),
2504
2506
  showPopperArrow: false,
2505
2507
  calendarClassName: (0, import_shared_utils8.cx)({ inline: props.inline }),
2506
2508
  dropdownMode: "select",
@@ -2517,8 +2519,7 @@ var Datepicker = ({
2517
2519
  if (props.inline) {
2518
2520
  return component;
2519
2521
  }
2520
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.FormControl, { isRequired, "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
2521
- label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react33.FormLabel, { fontSize: "text.sm", children: label }),
2522
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.FormControl, { "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
2522
2523
  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.InputGroup, { children: [
2523
2524
  component,
2524
2525
  /* @__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)({
5954
5955
  marginEnd: 1,
5955
5956
  mb: 1
5956
5957
  });
5957
- var FormLabel5 = (0, import_styled_system5.defineStyleConfig)({
5958
+ var FormLabel4 = (0, import_styled_system5.defineStyleConfig)({
5958
5959
  baseStyle: baseStyle5
5959
5960
  });
5960
- var form_label_default = FormLabel5;
5961
+ var form_label_default = FormLabel4;
5961
5962
 
5962
5963
  // src/config/theme/components/input.ts
5963
5964
  var import_anatomy5 = require("@chakra-ui/anatomy");