@majoo-ui/react 1.60.37 → 1.61.0-rc.2

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.
@@ -4,6 +4,7 @@ interface CalendarProps {
4
4
  disabled?: boolean;
5
5
  language?: string;
6
6
  onSetDateValue?: Dispatch<SetStateAction<Date[]>>;
7
+ isSingle?: boolean;
7
8
  }
8
- declare const CalendarTimePicker: ({ selected, disabled, language, onSetDateValue }: CalendarProps) => JSX.Element;
9
+ declare const CalendarTimePicker: ({ selected, disabled, language, onSetDateValue, isSingle }: CalendarProps) => JSX.Element;
9
10
  export default CalendarTimePicker;
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { CSS } from '@stitches/react';
3
+ interface InputSignatureProps {
4
+ onChange?: (value: string) => void;
5
+ title?: string;
6
+ defaultValue?: string;
7
+ disabled?: boolean;
8
+ css?: CSS;
9
+ isMobile?: boolean;
10
+ }
11
+ export declare function InputSignature({ title, onChange, defaultValue, disabled, css, isMobile, }: InputSignatureProps): JSX.Element;
12
+ export default InputSignature;
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ interface SignatureModalProps {
3
+ t: any;
4
+ open?: boolean;
5
+ onOpenChange?: (open: boolean) => void;
6
+ onSave?: (signature: string) => void;
7
+ title?: any;
8
+ isMobile?: boolean;
9
+ }
10
+ declare const SignatureModal: React.FC<SignatureModalProps>;
11
+ export default SignatureModal;
@@ -0,0 +1,2 @@
1
+ export { default as InputSignature } from './InputSignature';
2
+ export * from './InputSignature';
@@ -23,3 +23,5 @@ export * from './InputCombobox';
23
23
  export * from './InputOTP';
24
24
  export * from './InputCounter';
25
25
  export * from './InputDateRange';
26
+ export { default as InputSignature } from './InputSignature/InputSignature';
27
+ export * from './InputSignature';
package/index.esm.js CHANGED
@@ -30,7 +30,7 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
30
30
  import * as SliderPrimitive from '@radix-ui/react-slider';
31
31
  import * as TabsPrimitive from '@radix-ui/react-tabs';
32
32
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
33
- import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
33
+ import { useMountedLayoutEffect, useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder } from 'react-table';
34
34
  import ReactDOM, { createPortal } from 'react-dom';
35
35
  import * as ADialog from '@radix-ui/react-alert-dialog';
36
36
  import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -53,6 +53,7 @@ import ScrollSpy from 'react-ui-scrollspy';
53
53
  import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
54
54
  import imageCompressionComponent from 'browser-image-compression';
55
55
  import { useSticky } from 'react-table-sticky';
56
+ import SignaturePad from 'react-signature-pad-wrapper';
56
57
 
57
58
  var _jsxFileName$12 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
58
59
  function ThemeProvider({
@@ -8451,7 +8452,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
8451
8452
  }));
8452
8453
  });
8453
8454
  InputText.propTypes = {
8454
- placeholdren: PropTypes.string,
8455
+ placeholder: PropTypes.string,
8455
8456
  value: PropTypes.string,
8456
8457
  onChange: PropTypes.func,
8457
8458
  disabled: PropTypes.bool,
@@ -8525,7 +8526,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
8525
8526
  }));
8526
8527
  });
8527
8528
  InputTextArea.propTypes = {
8528
- placeholdren: PropTypes.string,
8529
+ placeholder: PropTypes.string,
8529
8530
  value: PropTypes.string,
8530
8531
  onChange: PropTypes.func,
8531
8532
  disabled: PropTypes.bool,
@@ -18023,14 +18024,18 @@ const CalendarTimePicker = ({
18023
18024
  selected,
18024
18025
  disabled,
18025
18026
  language,
18026
- onSetDateValue
18027
+ onSetDateValue,
18028
+ isSingle
18027
18029
  }) => {
18028
18030
  const {
18029
18031
  t
18030
18032
  } = useTranslation('MajooUI/datePicker');
18031
18033
  let startTime = moment('00:00', 'HH:mm').toDate();
18032
18034
  let endTime = moment('00:00', 'HH:mm').toDate();
18033
- if (selected && selected.length > 1) {
18035
+ if (isSingle && selected && selected.length) {
18036
+ startTime = selected[0];
18037
+ }
18038
+ if (!isSingle && selected && selected.length > 1) {
18034
18039
  startTime = selected[0];
18035
18040
  endTime = selected[1];
18036
18041
  }
@@ -18051,7 +18056,7 @@ const CalendarTimePicker = ({
18051
18056
  variant: "label",
18052
18057
  color: "primary"
18053
18058
  }, {
18054
- children: t('dateFromLabel', 'Dari Tanggal')
18059
+ children: isSingle ? t('label.date', 'Tanggal') : t('dateFromLabel', 'Dari Tanggal')
18055
18060
  }), void 0), jsx(Text$1, Object.assign({
18056
18061
  variant: "label",
18057
18062
  color: "disable"
@@ -18066,53 +18071,55 @@ const CalendarTimePicker = ({
18066
18071
  variant: "label",
18067
18072
  color: "primary"
18068
18073
  }, {
18069
- children: t('timeFromLabel', 'Dari Pukul')
18074
+ children: isSingle ? t('time', 'Waktu') : t('timeFromLabel', 'Dari Pukul')
18070
18075
  }), void 0), jsx(InputTimePicker, {
18071
18076
  onChange: val => {
18072
- if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
18077
+ if (isSingle && selected && selected.length && !!onSetDateValue) onSetDateValue(val.toDate());else if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
18073
18078
  },
18074
18079
  size: "sm",
18075
18080
  value: startTime,
18076
- disabled: !(selected && selected.length > 1)
18081
+ disabled: isSingle ? !(selected && selected.length) : !(selected && selected.length > 1)
18077
18082
  }, void 0)]
18078
- }), void 0), jsx(Separator$2, {
18079
- orientation: "horizontal"
18080
- }, void 0), jsxs(Flex$1, Object.assign({
18081
- direction: "column",
18082
- gap: 3
18083
- }, {
18084
- children: [jsx(Text$1, Object.assign({
18085
- variant: "label",
18086
- color: "primary"
18083
+ }), void 0), isSingle ? null : jsxs(React__default.Fragment, {
18084
+ children: [jsx(Separator$2, {
18085
+ orientation: "horizontal"
18086
+ }, void 0), jsxs(Flex$1, Object.assign({
18087
+ direction: "column",
18088
+ gap: 3
18087
18089
  }, {
18088
- children: t('dateUntilLabel', 'Hingga Tanggal')
18089
- }), void 0), jsx(Text$1, Object.assign({
18090
- variant: "label",
18091
- color: "disable"
18090
+ children: [jsx(Text$1, Object.assign({
18091
+ variant: "label",
18092
+ color: "primary"
18093
+ }, {
18094
+ children: t('dateUntilLabel', 'Hingga Tanggal')
18095
+ }), void 0), jsx(Text$1, Object.assign({
18096
+ variant: "label",
18097
+ color: "disable"
18098
+ }, {
18099
+ children: formattedEndDate
18100
+ }), void 0)]
18101
+ }), void 0), jsxs(Flex$1, Object.assign({
18102
+ direction: "column",
18103
+ gap: 3
18092
18104
  }, {
18093
- children: formattedEndDate
18105
+ children: [jsx(Text$1, Object.assign({
18106
+ variant: "label",
18107
+ color: "primary"
18108
+ }, {
18109
+ children: t('timeUntilLabel', 'Hingga Pukul')
18110
+ }), void 0), jsx(InputTimePicker, {
18111
+ onChange: val => {
18112
+ const endDate = moment(endTime).format('YYYY-MM-DD');
18113
+ const newTime = val.format('HH:mm');
18114
+ const newValue = moment(`${endDate} ${newTime}`, 'YYYY-MM-DD HH:mm').toDate();
18115
+ if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
18116
+ },
18117
+ size: "sm",
18118
+ value: endTime,
18119
+ disabled: !(selected && selected.length > 1)
18120
+ }, void 0)]
18094
18121
  }), void 0)]
18095
- }), void 0), jsxs(Flex$1, Object.assign({
18096
- direction: "column",
18097
- gap: 3
18098
- }, {
18099
- children: [jsx(Text$1, Object.assign({
18100
- variant: "label",
18101
- color: "primary"
18102
- }, {
18103
- children: t('timeUntilLabel', 'Hingga Pukul')
18104
- }), void 0), jsx(InputTimePicker, {
18105
- onChange: val => {
18106
- const endDate = moment(endTime).format('YYYY-MM-DD');
18107
- const newTime = val.format('HH:mm');
18108
- const newValue = moment(`${endDate} ${newTime}`, 'YYYY-MM-DD HH:mm').toDate();
18109
- if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
18110
- },
18111
- size: "sm",
18112
- value: endTime,
18113
- disabled: !(selected && selected.length > 1)
18114
- }, void 0)]
18115
- }), void 0)]
18122
+ }, void 0)]
18116
18123
  }), void 0);
18117
18124
  };
18118
18125
 
@@ -18175,17 +18182,22 @@ const WeekdayBox$1 = styled(Box, {
18175
18182
  });
18176
18183
  const CalendarsContainer$1 = styled(Box, {
18177
18184
  width: '100%',
18178
- padding: '$spacing-03',
18179
18185
  display: 'inline-flex',
18180
18186
  borderRadius: '$lg',
18181
- boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
18182
- backgroundColor: '$white',
18183
18187
  justifyContent: 'center',
18184
18188
  gap: '$spacing-03',
18185
18189
  '@md': {
18186
18190
  width: 'unset'
18187
18191
  }
18188
18192
  });
18193
+ const CalenderBoxContainer = styled(Box, {
18194
+ display: 'flex',
18195
+ flexDirection: 'column',
18196
+ boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
18197
+ borderRadius: '$lg',
18198
+ backgroundColor: '$white',
18199
+ padding: '$spacing-03'
18200
+ });
18189
18201
  const CalendarItemContainer$1 = styled(Flex$1, {});
18190
18202
  const DateContainer$1 = styled(Box, {
18191
18203
  width: '100%',
@@ -18258,7 +18270,7 @@ const MonthButton$1 = styled(Text$1, {
18258
18270
  }
18259
18271
  }
18260
18272
  });
18261
- const ButtonTime = styled('button', {
18273
+ styled('button', {
18262
18274
  fontWeight: 600,
18263
18275
  fontStyle: 'normal',
18264
18276
  fontSize: 14,
@@ -18654,84 +18666,110 @@ const CalendarBox = ({
18654
18666
  }, void 0);
18655
18667
  };
18656
18668
  const renderTime = () => {
18657
- return jsxs(Box, Object.assign({
18658
- css: {
18659
- padding: 4
18660
- }
18661
- }, {
18669
+ return jsxs(Fragment$1, {
18662
18670
  children: [jsx(Separator$2, {
18663
- css: {
18664
- my: '$spacing-02'
18665
- }
18666
- }, void 0), jsx(ButtonTime, Object.assign({
18667
- disabled: disabled,
18668
- onClick: () => setPickerState(current => Object.assign(Object.assign({}, current), {
18669
- type: TIME_PICKER
18670
- })),
18671
- type: "button"
18671
+ orientation: "vertical"
18672
+ }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
18673
+ selected,
18674
+ disabled,
18675
+ language,
18676
+ onSetDateValue
18672
18677
  }, {
18673
- children: selected && selected[0] ? moment(selected[0]).format('HH:mm') : moment().format('HH:mm')
18678
+ isSingle: !multiDatePicker
18674
18679
  }), void 0)]
18675
- }), void 0);
18680
+ }, void 0);
18676
18681
  };
18677
- const renderButtonTime = () => {
18682
+ const renderFooterSingleTimePicker = () => {
18678
18683
  return jsxs(Box, Object.assign({
18679
18684
  css: {
18680
- padding: 4
18685
+ width: '$full'
18681
18686
  }
18682
18687
  }, {
18683
18688
  children: [jsx(Separator$2, {
18684
18689
  css: {
18685
- my: '$spacing-02'
18690
+ my: '$spacing-03'
18691
+ }
18692
+ }, void 0), jsx(Flex$1, Object.assign({
18693
+ justify: "end",
18694
+ align: "center",
18695
+ css: {
18696
+ padding: 8
18686
18697
  }
18687
- }, void 0), jsx(ButtonTime, Object.assign({
18688
- disabled: disabled,
18689
- onClick: () => onCancel === null || onCancel === void 0 ? void 0 : onCancel(),
18690
- type: "button"
18691
18698
  }, {
18692
- children: "Done"
18699
+ children: jsxs(Flex$1, Object.assign({
18700
+ gap: 3
18701
+ }, {
18702
+ children: [jsx(Button$4, Object.assign({
18703
+ buttonType: "ghost",
18704
+ css: {
18705
+ fontWeight: 600
18706
+ },
18707
+ onClick: onCancel,
18708
+ disabled: disabled,
18709
+ size: "sm",
18710
+ type: "button"
18711
+ }, {
18712
+ children: t('label.cancel', 'Batal', {
18713
+ ns: 'translation'
18714
+ })
18715
+ }), void 0), jsx(Button$4, Object.assign({
18716
+ css: {
18717
+ fontWeight: 600
18718
+ },
18719
+ onClick: onUpdate,
18720
+ disabled: disabled || !(selected && selected.length),
18721
+ size: "sm",
18722
+ type: "button"
18723
+ }, {
18724
+ children: t('label.save', 'Simpan', {
18725
+ ns: 'translation'
18726
+ })
18727
+ }), void 0)]
18728
+ }), void 0)
18693
18729
  }), void 0)]
18694
18730
  }), void 0);
18695
18731
  };
18696
18732
  if (calendars.length) {
18697
- return jsxs(CalendarsContainer$1, Object.assign({
18698
- css: containerStyle
18699
- }, {
18700
- children: [advanceView, advanceView && jsx(Separator$2, {
18701
- orientation: "vertical"
18702
- }, void 0), jsxs(Box, {
18703
- children: [renderHeader(), jsx(CalendarItemContainer$1, Object.assign({
18704
- gap: 5
18705
- }, {
18706
- children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
18707
- children: [index > 0 && jsx(Separator$2, {
18708
- orientation: "vertical",
18709
- css: {
18710
- height: 'auto'
18711
- }
18712
- }, void 0), jsxs(DateContainer$1, {
18713
- children: [jsx(Separator$2, {
18733
+ return jsxs(CalenderBoxContainer, {
18734
+ children: [jsxs(CalendarsContainer$1, Object.assign({
18735
+ css: containerStyle
18736
+ }, {
18737
+ children: [advanceView, advanceView && jsx(Separator$2, {
18738
+ orientation: "vertical"
18739
+ }, void 0), jsxs(Box, {
18740
+ children: [renderHeader(), jsx(CalendarItemContainer$1, Object.assign({
18741
+ gap: 5
18742
+ }, {
18743
+ children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
18744
+ children: [index > 0 && jsx(Separator$2, {
18745
+ orientation: "vertical",
18714
18746
  css: {
18715
- mb: '$spacing-04',
18716
- mt: '$spacing-02'
18747
+ height: 'auto'
18717
18748
  }
18718
- }, void 0), pickerState.type === DATE_PICKER && jsxs(Fragment, {
18719
- children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
18720
- }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList(), pickerState.type === TIME_PICKER && renderTimePicker && renderTimePicker()]
18721
- }, void 0)]
18722
- }, `${calendar.month}${calendar.year}`))
18723
- }), void 0), multiDatePicker && renderFooter(), !advanceView && showTimePicker && (pickerState.type === TIME_PICKER ? renderButtonTime() : renderTime())]
18724
- }, void 0), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxs(Fragment$1, {
18725
- children: [jsx(Separator$2, {
18726
- orientation: "vertical"
18727
- }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
18728
- selected,
18729
- disabled,
18730
- language,
18731
- onSetDateValue
18732
- }), void 0)]
18733
- }, void 0)]
18734
- }), void 0);
18749
+ }, void 0), jsxs(DateContainer$1, {
18750
+ children: [jsx(Separator$2, {
18751
+ css: {
18752
+ mb: '$spacing-04',
18753
+ mt: '$spacing-02'
18754
+ }
18755
+ }, void 0), pickerState.type === DATE_PICKER && jsxs(Fragment, {
18756
+ children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
18757
+ }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
18758
+ }, void 0)]
18759
+ }, `${calendar.month}${calendar.year}`))
18760
+ }), void 0)]
18761
+ }, void 0), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxs(Fragment$1, {
18762
+ children: [jsx(Separator$2, {
18763
+ orientation: "vertical"
18764
+ }, void 0), jsx(CalendarTimePicker, Object.assign({}, {
18765
+ selected,
18766
+ disabled,
18767
+ language,
18768
+ onSetDateValue
18769
+ }), void 0)]
18770
+ }, void 0)]
18771
+ }), void 0), !multiDatePicker && showTimePicker && renderFooterSingleTimePicker(), multiDatePicker && renderFooter()]
18772
+ }, void 0);
18735
18773
  }
18736
18774
  return null;
18737
18775
  };
@@ -19299,6 +19337,7 @@ const CalendarPicker = _a => {
19299
19337
  if (dateValue && onChange) {
19300
19338
  onChange(dateValue);
19301
19339
  }
19340
+ onClose();
19302
19341
  };
19303
19342
  const dayzedData = useDayzed(Object.assign(Object.assign({}, props), {
19304
19343
  date: calendarDate,
@@ -19315,39 +19354,22 @@ const CalendarPicker = _a => {
19315
19354
  }
19316
19355
  }, [selected]);
19317
19356
  useEffect(() => {
19318
- if (dateValue && !isMultiDatePicker && onChange) {
19357
+ if (dateValue && !(isMultiDatePicker || showTimePicker) && onChange) {
19319
19358
  onChange(dateValue);
19320
19359
  }
19321
19360
  }, [dateValue]);
19322
- const renderTimePicker = props => {
19323
- return jsx(Box, Object.assign({
19324
- css: {
19325
- padding: '40px 60px'
19326
- }
19327
- }, {
19328
- children: jsx(NativeTimePicker, Object.assign({
19329
- size: "lg",
19330
- value: dateValue ? moment(dateValue) : moment(),
19331
- minDate: minDate,
19332
- maxDate: maxDate,
19333
- disabled: disabled,
19334
- onChange: date => {
19335
- setDateValue(new Date(date));
19336
- }
19337
- }, props), void 0)
19338
- }), void 0);
19339
- };
19340
19361
  return jsx(CalendarBox, Object.assign({
19341
- onUpdate: isMultiDatePicker ? updateHandler : undefined,
19362
+ onUpdate: isMultiDatePicker || showTimePicker ? updateHandler : undefined,
19342
19363
  onCancel: onClose,
19343
19364
  selected: dateValue ? [dateValue] : undefined,
19344
19365
  advanceView: advanceView,
19345
19366
  disabled: disabled,
19346
19367
  onCalendarDateChange: setCalendarDate,
19347
19368
  showTimePicker: showTimePicker,
19348
- renderTimePicker: () => renderTimePicker(timePickerProps),
19349
19369
  minDate: minDate,
19350
19370
  maxDate: maxDate
19371
+ }, showTimePicker && {
19372
+ onSetDateValue: setDateValue
19351
19373
  }, dayzedData), void 0);
19352
19374
  };
19353
19375
  const CalendarRangePicker = _a => {
@@ -20318,6 +20340,183 @@ const InputDateRange = /*#__PURE__*/React.forwardRef((_a, ref) => {
20318
20340
  }), void 0);
20319
20341
  });
20320
20342
 
20343
+ const SignatureModal = ({
20344
+ t,
20345
+ open,
20346
+ onOpenChange,
20347
+ onSave,
20348
+ title,
20349
+ isMobile
20350
+ }) => {
20351
+ const signaturePadRef = useRef(null);
20352
+ const handleSave = () => {
20353
+ if (signaturePadRef.current) {
20354
+ const signature = signaturePadRef.current.toDataURL();
20355
+ onSave === null || onSave === void 0 ? void 0 : onSave(signature);
20356
+ }
20357
+ onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
20358
+ };
20359
+ return jsxs(ModalDialog, Object.assign({
20360
+ open: open,
20361
+ onOpenChange: onOpenChange,
20362
+ isMobile: isMobile
20363
+ }, {
20364
+ children: [jsx(ModalDialogTitle, {
20365
+ children: title
20366
+ }, void 0), jsx(ModalDialogContent, {
20367
+ children: jsx(SignaturePad, {
20368
+ ref: signaturePadRef,
20369
+ height: 256,
20370
+ canvasProps: {
20371
+ style: {
20372
+ border: '2px dashed #C0C4C4',
20373
+ borderRadius: '8px'
20374
+ }
20375
+ },
20376
+ options: {
20377
+ penColor: 'black',
20378
+ backgroundColor: foundations.colors.bgGray
20379
+ }
20380
+ }, void 0)
20381
+ }, void 0), jsxs(ModalDialogFooter, Object.assign({
20382
+ css: {
20383
+ display: 'flex',
20384
+ gap: '$compact'
20385
+ }
20386
+ }, {
20387
+ children: [jsx(DialogClose, Object.assign({
20388
+ asChild: true
20389
+ }, {
20390
+ children: jsx(Button$4, Object.assign({
20391
+ buttonType: "ghost",
20392
+ size: "sm"
20393
+ }, {
20394
+ children: t('label.cancel', 'Batal')
20395
+ }), void 0)
20396
+ }), void 0), jsx(Button$4, Object.assign({
20397
+ size: "sm",
20398
+ onClick: handleSave
20399
+ }, {
20400
+ children: t('label.save', 'Simpan')
20401
+ }), void 0)]
20402
+ }), void 0)]
20403
+ }), void 0);
20404
+ };
20405
+
20406
+ const SignatureContainer = styled$1(Flex$1, {
20407
+ position: 'relative',
20408
+ border: '2px dashed $gray300',
20409
+ borderRadius: 8,
20410
+ height: '88px',
20411
+ width: '100%',
20412
+ cursor: 'pointer',
20413
+ transition: '0.2s',
20414
+ transitionDuration: '0.5s',
20415
+ justifyContent: 'center',
20416
+ alignItems: 'center',
20417
+ background: '$bgGray',
20418
+ '&:hover': {
20419
+ border: '2px dashed $primary400',
20420
+ background: '$bgSuccess'
20421
+ },
20422
+ variants: {
20423
+ hasContent: {
20424
+ true: {
20425
+ '&:hover': {
20426
+ background: '$bgGray'
20427
+ }
20428
+ }
20429
+ },
20430
+ showError: {
20431
+ true: {
20432
+ border: '2px dashed $red400',
20433
+ '&:hover': {
20434
+ border: '2px dashed $red300',
20435
+ background: '$bgFailed'
20436
+ }
20437
+ }
20438
+ },
20439
+ disabled: {
20440
+ true: {
20441
+ border: 'none',
20442
+ cursor: 'not-allowed',
20443
+ '&:hover': {
20444
+ border: 'none',
20445
+ background: '$bgGray'
20446
+ }
20447
+ }
20448
+ }
20449
+ }
20450
+ });
20451
+ function InputSignature({
20452
+ title,
20453
+ onChange,
20454
+ defaultValue = '',
20455
+ disabled = false,
20456
+ css,
20457
+ isMobile
20458
+ }) {
20459
+ const {
20460
+ t
20461
+ } = useTranslation(['MajooUI/inputSignature', 'translation']);
20462
+ const [signatureImage, setSignatureImage] = useState(defaultValue);
20463
+ const [open, setOpen] = useState(false);
20464
+ const handleSave = signature => {
20465
+ setSignatureImage(signature);
20466
+ };
20467
+ useMountedLayoutEffect(() => {
20468
+ onChange === null || onChange === void 0 ? void 0 : onChange(signatureImage);
20469
+ }, [signatureImage]);
20470
+ return jsxs(React__default.Fragment, {
20471
+ children: [jsx(SignatureContainer, Object.assign({
20472
+ hasContent: !!signatureImage,
20473
+ onClick: () => {
20474
+ if (!disabled) {
20475
+ setOpen(true);
20476
+ }
20477
+ },
20478
+ disabled: disabled,
20479
+ css: css
20480
+ }, {
20481
+ children: signatureImage ? jsxs(React__default.Fragment, {
20482
+ children: [!disabled ? jsx(Box, Object.assign({
20483
+ css: {
20484
+ position: 'absolute',
20485
+ top: '8px',
20486
+ right: '8px'
20487
+ },
20488
+ onClick: e => {
20489
+ e.stopPropagation();
20490
+ setSignatureImage('');
20491
+ }
20492
+ }, {
20493
+ children: jsx(CloseFilled, {
20494
+ color: foundations.colors.iconRed
20495
+ }, void 0)
20496
+ }), void 0) : null, jsx("img", {
20497
+ src: signatureImage,
20498
+ alt: "signature",
20499
+ style: {
20500
+ height: '100%'
20501
+ }
20502
+ }, void 0)]
20503
+ }, void 0) : jsx(Text$1, Object.assign({
20504
+ variant: "label",
20505
+ color: "disable"
20506
+ }, {
20507
+ children: t('placeholder', 'Tanda tangan disini')
20508
+ }), void 0)
20509
+ }), void 0), jsx(SignatureModal, {
20510
+ t: t,
20511
+ open: open,
20512
+ onOpenChange: setOpen,
20513
+ onSave: handleSave,
20514
+ isMobile: isMobile,
20515
+ title: title || t('modalTitle', 'Tambah Tanda Tangan')
20516
+ }, void 0)]
20517
+ }, void 0);
20518
+ }
20519
+
20321
20520
  const _excluded$9 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
20322
20521
  var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
20323
20522
  const StyledSlider = styled$1(SliderPrimitive.Root, {
@@ -56815,4 +57014,4 @@ const useToggle = initialValue => {
56815
57014
  return useReducer(toggleReducer, initialValue);
56816
57015
  };
56817
57016
 
56818
- export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
57017
+ export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSignature, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };