@ctlyst.id/internal-ui 3.2.1 → 3.3.0

Sign up to get free protection for your applications and to get access to all the features.
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");