@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.mjs
CHANGED
|
@@ -520,39 +520,12 @@ var Field = (props) => {
|
|
|
520
520
|
};
|
|
521
521
|
const helperColor = getHelperColor();
|
|
522
522
|
const justifyHelper = getJustifyContentHelper();
|
|
523
|
-
const getProperties = () => {
|
|
524
|
-
let outlineColor2 = "neutral.400";
|
|
525
|
-
let focusColor2 = "primary.500";
|
|
526
|
-
if (isError || isDisabled || isSuccess) {
|
|
527
|
-
if (isError) outlineColor2 = "danger.500";
|
|
528
|
-
else if (isSuccess) outlineColor2 = "success.500";
|
|
529
|
-
focusColor2 = outlineColor2;
|
|
530
|
-
}
|
|
531
|
-
return {
|
|
532
|
-
outlineColor: outlineColor2,
|
|
533
|
-
focusColor: focusColor2
|
|
534
|
-
};
|
|
535
|
-
};
|
|
536
|
-
const { outlineColor, focusColor } = getProperties();
|
|
537
523
|
return /* @__PURE__ */ jsxs3(FormControl, { isInvalid: isError, ...boxProps, children: [
|
|
538
524
|
label && (typeof label === "string" ? /* @__PURE__ */ jsxs3(FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
|
|
539
525
|
isRequired && /* @__PURE__ */ jsx17(Box6, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
|
|
540
526
|
label
|
|
541
527
|
] }) : label),
|
|
542
|
-
|
|
543
|
-
Box6,
|
|
544
|
-
{
|
|
545
|
-
transition: "all 0.15s",
|
|
546
|
-
boxShadow: "none",
|
|
547
|
-
borderRadius: "sm",
|
|
548
|
-
border: "1px solid",
|
|
549
|
-
borderColor: outlineColor,
|
|
550
|
-
_focusWithin: {
|
|
551
|
-
borderColor: focusColor
|
|
552
|
-
},
|
|
553
|
-
children
|
|
554
|
-
}
|
|
555
|
-
),
|
|
528
|
+
children,
|
|
556
529
|
(isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ jsxs3(Box6, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
|
|
557
530
|
!isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ jsx17(FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
|
|
558
531
|
rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
|
|
@@ -690,6 +663,19 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
|
690
663
|
isLoading,
|
|
691
664
|
...inputProps
|
|
692
665
|
} = props;
|
|
666
|
+
const getProperties = () => {
|
|
667
|
+
let outlineColor2 = "neutral.400";
|
|
668
|
+
let focusColor2 = "primary.500";
|
|
669
|
+
if (isError || isDisabled || isSuccess) {
|
|
670
|
+
if (isError) outlineColor2 = "danger.500";
|
|
671
|
+
else if (isSuccess) outlineColor2 = "success.500";
|
|
672
|
+
focusColor2 = outlineColor2;
|
|
673
|
+
}
|
|
674
|
+
return {
|
|
675
|
+
outlineColor: outlineColor2,
|
|
676
|
+
focusColor: focusColor2
|
|
677
|
+
};
|
|
678
|
+
};
|
|
693
679
|
const [isShowPassword, setIsShowPassword] = useState(false);
|
|
694
680
|
const inputType = useMemo(() => {
|
|
695
681
|
return type === "password" && isShowPassword ? "text" : type;
|
|
@@ -703,6 +689,7 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
|
703
689
|
const iconColor = useMemo(() => {
|
|
704
690
|
return isDisabled ? "black.low" : "black.medium";
|
|
705
691
|
}, [isDisabled]);
|
|
692
|
+
const { outlineColor, focusColor } = getProperties();
|
|
706
693
|
return /* @__PURE__ */ jsx21(
|
|
707
694
|
field_default,
|
|
708
695
|
{
|
|
@@ -713,80 +700,92 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
|
713
700
|
leftHelperText,
|
|
714
701
|
rightHelperText,
|
|
715
702
|
isRequired,
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
InputGroup,
|
|
703
|
+
children: /* @__PURE__ */ jsx21(
|
|
704
|
+
Box8,
|
|
719
705
|
{
|
|
720
|
-
|
|
706
|
+
transition: "all 0.15s",
|
|
707
|
+
boxShadow: "none",
|
|
721
708
|
borderRadius: "sm",
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
709
|
+
border: "1px solid",
|
|
710
|
+
borderColor: outlineColor,
|
|
711
|
+
_focusWithin: {
|
|
712
|
+
borderColor: focusColor
|
|
713
|
+
},
|
|
714
|
+
children: /* @__PURE__ */ jsxs5(
|
|
715
|
+
InputGroup,
|
|
716
|
+
{
|
|
717
|
+
size: size2,
|
|
718
|
+
borderRadius: "sm",
|
|
719
|
+
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
|
720
|
+
cursor: isDisabled ? "not-allowed" : "default",
|
|
721
|
+
children: [
|
|
722
|
+
addOnLeft,
|
|
723
|
+
/* @__PURE__ */ jsx21(
|
|
724
|
+
ChakraInput,
|
|
725
|
+
{
|
|
726
|
+
ref,
|
|
727
|
+
type: inputType,
|
|
728
|
+
value,
|
|
729
|
+
isDisabled,
|
|
730
|
+
isSuccess,
|
|
731
|
+
...inputProps,
|
|
732
|
+
fontSize
|
|
733
|
+
}
|
|
734
|
+
),
|
|
735
|
+
(withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs5(
|
|
736
|
+
Box8,
|
|
737
|
+
{
|
|
738
|
+
"data-test-id": "CT_Component_ClearInput",
|
|
739
|
+
display: "flex",
|
|
740
|
+
alignItems: "center",
|
|
741
|
+
justifyContent: "center",
|
|
742
|
+
width: "16px",
|
|
743
|
+
mr: "10px",
|
|
744
|
+
children: [
|
|
745
|
+
withClear && !isLoading && /* @__PURE__ */ jsx21(
|
|
746
|
+
Box8,
|
|
747
|
+
{
|
|
748
|
+
display: "flex",
|
|
749
|
+
justifyContent: "center",
|
|
750
|
+
onClick: !isDisabled ? onClear : void 0,
|
|
751
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
752
|
+
children: /* @__PURE__ */ jsx21(Close2, { size: 4, color: iconColor })
|
|
753
|
+
}
|
|
754
|
+
),
|
|
755
|
+
type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
|
|
756
|
+
Box8,
|
|
757
|
+
{
|
|
758
|
+
"data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
|
|
759
|
+
onClick: () => {
|
|
760
|
+
if (!isDisabled) setIsShowPassword(true);
|
|
761
|
+
},
|
|
762
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
763
|
+
display: "flex",
|
|
764
|
+
justifyContent: "center",
|
|
765
|
+
children: /* @__PURE__ */ jsx21(EyeOff, { size: 4, color: iconColor })
|
|
766
|
+
}
|
|
767
|
+
),
|
|
768
|
+
type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
|
|
769
|
+
Box8,
|
|
770
|
+
{
|
|
771
|
+
"data-test-id": "sfc2388bmeXBmdla45Ibk",
|
|
772
|
+
onClick: () => {
|
|
773
|
+
if (!isDisabled) setIsShowPassword(false);
|
|
774
|
+
},
|
|
775
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
776
|
+
display: "flex",
|
|
777
|
+
justifyContent: "center",
|
|
778
|
+
children: /* @__PURE__ */ jsx21(Eye2, { size: 4, color: iconColor })
|
|
779
|
+
}
|
|
780
|
+
),
|
|
781
|
+
isLoading && /* @__PURE__ */ jsx21(loader_default, { size: "sm" })
|
|
782
|
+
]
|
|
783
|
+
}
|
|
784
|
+
),
|
|
785
|
+
addOnRight
|
|
786
|
+
]
|
|
787
|
+
}
|
|
788
|
+
)
|
|
790
789
|
}
|
|
791
790
|
)
|
|
792
791
|
}
|
|
@@ -4796,6 +4795,20 @@ var TimeInput2 = forwardRef12(
|
|
|
4796
4795
|
}));
|
|
4797
4796
|
const rootProps = getRootProps();
|
|
4798
4797
|
const hoursProps = getInputProps("hours");
|
|
4798
|
+
const getProperties = () => {
|
|
4799
|
+
let outlineColor2 = "neutral.400";
|
|
4800
|
+
let focusColor2 = "primary.500";
|
|
4801
|
+
if (isError || isDisabled || isSuccess) {
|
|
4802
|
+
if (isError) outlineColor2 = "danger.500";
|
|
4803
|
+
else if (isSuccess) outlineColor2 = "success.500";
|
|
4804
|
+
focusColor2 = outlineColor2;
|
|
4805
|
+
}
|
|
4806
|
+
return {
|
|
4807
|
+
outlineColor: outlineColor2,
|
|
4808
|
+
focusColor: focusColor2
|
|
4809
|
+
};
|
|
4810
|
+
};
|
|
4811
|
+
const { outlineColor, focusColor } = getProperties();
|
|
4799
4812
|
return /* @__PURE__ */ jsx63(Box29, { ...boxProps, ...rootProps, children: /* @__PURE__ */ jsx63(
|
|
4800
4813
|
field_default,
|
|
4801
4814
|
{
|
|
@@ -4805,28 +4818,41 @@ var TimeInput2 = forwardRef12(
|
|
|
4805
4818
|
errorMessage,
|
|
4806
4819
|
isDisabled,
|
|
4807
4820
|
isSuccess,
|
|
4808
|
-
children: /* @__PURE__ */
|
|
4809
|
-
|
|
4821
|
+
children: /* @__PURE__ */ jsx63(
|
|
4822
|
+
Box29,
|
|
4810
4823
|
{
|
|
4824
|
+
transition: "all 0.15s",
|
|
4825
|
+
boxShadow: "none",
|
|
4811
4826
|
borderRadius: "sm",
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4827
|
+
border: "1px solid",
|
|
4828
|
+
borderColor: outlineColor,
|
|
4829
|
+
_focusWithin: {
|
|
4830
|
+
borderColor: focusColor
|
|
4831
|
+
},
|
|
4832
|
+
children: /* @__PURE__ */ jsxs29(
|
|
4833
|
+
InputGroup5,
|
|
4834
|
+
{
|
|
4835
|
+
borderRadius: "sm",
|
|
4836
|
+
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
|
4837
|
+
cursor: isDisabled ? "not-allowed" : "default",
|
|
4838
|
+
alignItems: "center",
|
|
4839
|
+
gap: 3,
|
|
4840
|
+
children: [
|
|
4841
|
+
/* @__PURE__ */ jsxs29(Flex17, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
|
|
4842
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...hoursProps }),
|
|
4843
|
+
/* @__PURE__ */ jsx63("span", { children: ":" }),
|
|
4844
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("minutes") }),
|
|
4845
|
+
seconds && /* @__PURE__ */ jsxs29(Fragment10, { children: [
|
|
4846
|
+
/* @__PURE__ */ jsx63("span", { children: ":" }),
|
|
4847
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("seconds") })
|
|
4848
|
+
] }),
|
|
4849
|
+
options.hour12 && /* @__PURE__ */ jsx63(Input3, { p: 0, ...getInputProps("am/pm") })
|
|
4850
|
+
] }),
|
|
4851
|
+
/* @__PURE__ */ jsx63(Clock, { color: "neutral.400" }),
|
|
4852
|
+
addOnRight
|
|
4853
|
+
]
|
|
4854
|
+
}
|
|
4855
|
+
)
|
|
4830
4856
|
}
|
|
4831
4857
|
)
|
|
4832
4858
|
}
|
|
@@ -5152,6 +5178,7 @@ var Uploader = ({
|
|
|
5152
5178
|
const color = isDisabled ? "neutral.500" : "primary.500";
|
|
5153
5179
|
const containerHeight = !isSmall ? "160px" : "120px";
|
|
5154
5180
|
const cursorType = filePreview ? "initial" : "pointer";
|
|
5181
|
+
console.log(isDragActive);
|
|
5155
5182
|
return /* @__PURE__ */ jsxs31(FormControl4, { isRequired, children: [
|
|
5156
5183
|
label && typeof label === "string" ? (
|
|
5157
5184
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
@@ -5232,7 +5259,7 @@ var Uploader = ({
|
|
|
5232
5259
|
fontSize: size2 === "sm" ? "text.md" : "text.xl",
|
|
5233
5260
|
mb: size2 === "sm" ? "0" : "2",
|
|
5234
5261
|
textAlign: "center",
|
|
5235
|
-
children: uploadFileText && size2 === "lg" ?
|
|
5262
|
+
children: uploadFileText && size2 === "lg" ? uploadFileText : "Upload"
|
|
5236
5263
|
}
|
|
5237
5264
|
),
|
|
5238
5265
|
size2 === "lg" && /* @__PURE__ */ jsx66(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
|