@uxf/ui 11.31.0 → 11.33.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 (183) hide show
  1. package/_file-input-base/file-input-base.js +4 -3
  2. package/_input-with-popover/input-with-popover.js +2 -2
  3. package/alert-bubble/alert-bubble.stories.js +3 -5
  4. package/avatar/avatar.js +1 -1
  5. package/avatar/avatar.stories.js +1 -2
  6. package/avatar-file-input/avatar-file-input.js +3 -2
  7. package/avatar-file-input/avatar-file-input.stories.js +4 -5
  8. package/badge/badge.js +1 -1
  9. package/badge/badge.stories.js +2 -4
  10. package/button/button.d.ts +1 -3
  11. package/button/button.js +2 -2
  12. package/button/button.stories.js +15 -11
  13. package/button/next-link.d.ts +0 -1
  14. package/button-group/button-group.stories.d.ts +1 -1
  15. package/button-group/button-group.stories.js +9 -10
  16. package/button-list/button-list.d.ts +1 -0
  17. package/button-list/button-list.js +10 -9
  18. package/button-list/button-list.stories.d.ts +1 -1
  19. package/button-list/button-list.stories.js +14 -14
  20. package/calendar/calendar-day-cell.js +1 -1
  21. package/calendar/calendar-navigation.js +1 -1
  22. package/calendar/calendar.js +5 -5
  23. package/calendar/calendar.stories.js +3 -6
  24. package/checkbox/checkbox.stories.js +5 -6
  25. package/checkbox-button/checkbox-button.stories.js +4 -5
  26. package/checkbox-input/checkbox-input.js +3 -3
  27. package/checkbox-input/checkbox-input.stories.js +6 -7
  28. package/chip/chip.js +5 -4
  29. package/chip/chip.stories.js +2 -3
  30. package/color-radio/color-radio.js +3 -3
  31. package/color-radio/color-radio.stories.js +8 -9
  32. package/color-radio-group/color-radio-group.js +1 -1
  33. package/color-radio-group/color-radio-group.stories.js +4 -4
  34. package/color-scheme/get-color-scheme-class-name.js +1 -2
  35. package/color-scheme/get-color-scheme.js +1 -2
  36. package/color-scheme/use-color-scheme.js +1 -2
  37. package/color-scheme/use-handle-color-scheme.js +1 -2
  38. package/color-scheme/use-toggle-color-scheme.js +1 -2
  39. package/combobox/combobox.js +7 -7
  40. package/combobox/combobox.stories.js +8 -9
  41. package/context/context.d.ts +0 -1
  42. package/context/use-component-context.d.ts +1 -1
  43. package/create-component-preview-page/create-component-preview-page.js +3 -3
  44. package/css/button-list.css +1 -1
  45. package/css/checkbox-button.css +2 -6
  46. package/css/checkbox.css +1 -3
  47. package/css/color-radio-group.css +1 -2
  48. package/css/colors.css +5 -0
  49. package/css/dialog.css +1 -0
  50. package/css/input.css +1 -1
  51. package/css/list-item.css +1 -3
  52. package/css/modal-header.css +4 -4
  53. package/css/pagination.css +1 -2
  54. package/css/radio-group.css +2 -4
  55. package/css/radio.css +1 -2
  56. package/date-picker/date-picker-decade.js +6 -5
  57. package/date-picker/date-picker-month.js +8 -7
  58. package/date-picker/date-picker-year.js +7 -6
  59. package/date-picker/date-picker.stories.js +6 -8
  60. package/date-picker-input/date-picker-input.js +1 -1
  61. package/date-picker-input/date-picker-input.stories.js +3 -5
  62. package/date-range-picker/date-range-picker-decade.js +6 -5
  63. package/date-range-picker/date-range-picker-month.js +6 -6
  64. package/date-range-picker/date-range-picker-year.js +8 -7
  65. package/date-range-picker/date-range-picker.d.ts +1 -1
  66. package/date-range-picker/date-range-picker.stories.js +4 -6
  67. package/date-range-picker-input/date-range-picker-input.js +2 -2
  68. package/date-range-picker-input/date-range-picker-input.stories.js +8 -10
  69. package/datetime-picker/datetime-picker.js +3 -3
  70. package/datetime-picker/datetime-picker.stories.js +5 -8
  71. package/datetime-picker-input/datetime-picker-input.js +1 -2
  72. package/datetime-picker-input/datetime-picker-input.stories.js +3 -5
  73. package/datetime-picker-input/get-datetime-string.js +1 -2
  74. package/dialog/dialog.js +1 -1
  75. package/dialog/dialog.stories.js +1 -2
  76. package/dropdown/dropdown.stories.js +4 -6
  77. package/dropzone/dropzone-list.js +2 -2
  78. package/dropzone/dropzone.stories.js +10 -11
  79. package/dropzone/index.d.ts +0 -1
  80. package/error-message/error-message.js +1 -1
  81. package/error-message/error-message.stories.js +1 -2
  82. package/file-input/file-input.js +3 -3
  83. package/file-input/file-input.stories.js +6 -8
  84. package/flash-messages/flash-messages-service.d.ts +0 -1
  85. package/flash-messages/flash-messages-service.js +2 -3
  86. package/flash-messages/flash-messages.js +4 -4
  87. package/flash-messages/flash-messages.stories.js +1 -2
  88. package/form-component/form-component.js +2 -2
  89. package/form-component/form-component.stories.js +5 -6
  90. package/hooks/use-async-loading.js +1 -2
  91. package/hooks/use-dropdown.d.ts +1 -2
  92. package/hooks/use-dropdown.js +1 -2
  93. package/hooks/use-input-submit.js +1 -2
  94. package/icon/icon.js +2 -2
  95. package/icon/icon.stories.js +10 -11
  96. package/image-gallery/components/gallery.js +3 -3
  97. package/image-gallery/context.d.ts +0 -1
  98. package/image-gallery/image-gallery.js +1 -1
  99. package/image-gallery/image-gallery.stories.js +3 -4
  100. package/image-gallery/image.js +1 -1
  101. package/image-gallery/index.d.ts +0 -1
  102. package/image-gallery/use-image.js +1 -2
  103. package/input/index.d.ts +0 -1
  104. package/input/input-arrow-icon.js +1 -2
  105. package/input/input-element.js +1 -1
  106. package/input/input.js +1 -1
  107. package/input/input.stories.js +13 -14
  108. package/label/label.stories.js +1 -2
  109. package/layout/layout.js +6 -6
  110. package/layout/layout.stories.js +1 -2
  111. package/layout/uxf-logo.js +3 -3
  112. package/list-item/list-item.stories.js +3 -4
  113. package/loader/loader.js +1 -1
  114. package/loader/loader.stories.js +1 -2
  115. package/lozenge/lozenge.js +1 -1
  116. package/lozenge/lozenge.stories.js +1 -2
  117. package/message/message-content.js +1 -1
  118. package/message/message-service.d.ts +0 -1
  119. package/message/message.js +1 -1
  120. package/message/message.stories.js +1 -2
  121. package/modal/modal-service.d.ts +0 -1
  122. package/modal/modal-service.js +3 -4
  123. package/modal/modal.js +1 -1
  124. package/modal/modal.stories.js +1 -2
  125. package/modal-dialog/modal-dialog.js +1 -2
  126. package/modal-dialog/modal-dialog.stories.js +11 -12
  127. package/modal-header/modal-header.js +3 -4
  128. package/modal-header/modal-header.stories.js +6 -6
  129. package/multi-combobox/multi-combobox.js +9 -8
  130. package/multi-combobox/multi-combobox.stories.js +8 -9
  131. package/multi-select/multi-select.js +6 -5
  132. package/multi-select/multi-select.stories.d.ts +1 -1
  133. package/multi-select/multi-select.stories.js +9 -10
  134. package/package.json +9 -9
  135. package/pagination/pagination.stories.js +6 -7
  136. package/paper/paper.js +1 -1
  137. package/paper/paper.stories.js +1 -2
  138. package/radio/radio.stories.js +9 -10
  139. package/radio-group/radio-group.js +1 -1
  140. package/radio-group/radio-group.stories.js +9 -10
  141. package/raster-image/empty-image.js +1 -2
  142. package/raster-image/img-sources.js +6 -7
  143. package/raster-image/raster-image.js +3 -4
  144. package/raster-image/raster-image.stories.js +2 -3
  145. package/raster-image/responsive-img-sources.js +1 -2
  146. package/readmes.d.ts +0 -1
  147. package/select/select.js +3 -4
  148. package/select/select.stories.js +15 -16
  149. package/tabs/components/tabs-button-list.js +3 -3
  150. package/tabs/components/tabs-button.js +3 -3
  151. package/tabs/components/tabs-panel.js +1 -2
  152. package/tabs/components/tabs-panels.js +1 -2
  153. package/tabs/components/tabs-root.js +1 -2
  154. package/tabs/panel.js +2 -2
  155. package/tabs/tabs.js +4 -2
  156. package/tabs/tabs.stories.js +20 -21
  157. package/text-input/text-input.stories.js +9 -10
  158. package/text-link/text-link.stories.js +1 -2
  159. package/textarea/textarea.js +1 -1
  160. package/textarea/textarea.stories.js +6 -8
  161. package/time-picker/time-picker-hours.js +1 -1
  162. package/time-picker/time-picker-minutes.js +1 -1
  163. package/time-picker/time-picker.d.ts +1 -1
  164. package/time-picker/time-picker.js +2 -2
  165. package/time-picker/time-picker.stories.js +4 -7
  166. package/time-picker-input/time-picker-input.js +1 -1
  167. package/time-picker-input/time-picker-input.stories.js +4 -5
  168. package/toggle/toggle.js +1 -1
  169. package/toggle/toggle.stories.js +6 -7
  170. package/tooltip/tooltip.js +2 -2
  171. package/tooltip/tooltip.stories.js +1 -2
  172. package/tooltip/use-tooltip.d.ts +7 -7
  173. package/tooltip/use-tooltip.js +1 -2
  174. package/types/file-response.d.ts +1 -1
  175. package/typography/typography.stories.js +1 -2
  176. package/utils/action.js +1 -2
  177. package/utils/files/get-file-icon.js +1 -2
  178. package/utils/files/get-file-url.js +1 -2
  179. package/utils/get-dropzone-state.js +3 -3
  180. package/utils/mocks/upload-file.mock.js +1 -2
  181. package/utils/snap-test.js +4 -4
  182. package/utils/storybook-config.d.ts +1 -1
  183. package/utils/storybook-config.js +3 -3
@@ -35,9 +35,10 @@ const dayjs_1 = __importDefault(require("dayjs"));
35
35
  const react_1 = __importStar(require("react"));
36
36
  const calendar_1 = require("../calendar");
37
37
  exports.DatePickerDecade = (0, react_1.memo)((props) => {
38
+ var _a, _b;
38
39
  const { onYearSelect } = props;
39
40
  const { canGoToYear, goToNextYear, goToPrevYear, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
40
- const currentYear = activeMonths[0].year;
41
+ const currentYear = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : new Date().getFullYear();
41
42
  const { decadeLabel, years } = (0, use_decade_1.useDecade)({
42
43
  year: currentYear,
43
44
  });
@@ -59,12 +60,12 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
59
60
  }
60
61
  }, [canGoToYear, onYearSelect]);
61
62
  return (react_1.default.createElement(react_1.default.Fragment, null,
62
- react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
63
- onClick: handleGoToPrevDecadeClick,
64
- title: "Zpět",
65
- }, nextButtonProps: {
63
+ react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
66
64
  onClick: handleGoToNextDecadeClick,
67
65
  title: "Vpřed",
66
+ }, prevButtonProps: {
67
+ onClick: handleGoToPrevDecadeClick,
68
+ title: "Zpět",
68
69
  }, selectButtonProps: {
69
70
  children: decadeLabel,
70
71
  } }),
@@ -33,12 +33,13 @@ const dayjs_1 = __importDefault(require("dayjs"));
33
33
  const react_1 = __importStar(require("react"));
34
34
  const calendar_1 = require("../calendar");
35
35
  exports.DatePickerMonth = (0, react_1.memo)((props) => {
36
+ var _a, _b, _c, _d;
36
37
  const { setViewMode } = props;
37
38
  const datePickerProps = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
38
39
  const onMonthChange = props.onMonthChange;
39
40
  const { activeMonths, canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth, } = datePickerProps;
40
- const currentMonth = activeMonths[0].month;
41
- const currentYear = activeMonths[0].year;
41
+ const currentMonth = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : new Date().getMonth();
42
+ const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
42
43
  const { monthLabel } = (0, use_month_1.useMonth)({
43
44
  dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
44
45
  firstDayOfWeek,
@@ -59,14 +60,14 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
59
60
  setViewMode("year");
60
61
  }, [setViewMode]);
61
62
  return (react_1.default.createElement(react_1.default.Fragment, null,
62
- react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
63
- isDisabled: !canGoToPrevMonth,
64
- onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
65
- title: "Předchozí měsíc",
66
- }, nextButtonProps: {
63
+ react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
67
64
  isDisabled: !canGoToNextMonth,
68
65
  onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
69
66
  title: "Nadcházející měsíc",
67
+ }, prevButtonProps: {
68
+ isDisabled: !canGoToPrevMonth,
69
+ onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
70
+ title: "Předchozí měsíc",
70
71
  }, selectButtonProps: {
71
72
  children: monthLabel,
72
73
  onClick: handleMonthClick,
@@ -35,8 +35,9 @@ const dayjs_1 = __importDefault(require("dayjs"));
35
35
  const react_1 = __importStar(require("react"));
36
36
  const calendar_1 = require("../calendar");
37
37
  exports.DatePickerYear = (0, react_1.memo)((props) => {
38
+ var _a, _b;
38
39
  const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
39
- const currentYear = activeMonths[0].year;
40
+ const currentYear = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : new Date().getFullYear();
40
41
  const { months, yearLabel } = (0, use_year_1.useYear)({
41
42
  year: currentYear,
42
43
  yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
@@ -61,14 +62,14 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
61
62
  }
62
63
  }, [canGoToMonth, props]);
63
64
  return (react_1.default.createElement(react_1.default.Fragment, null,
64
- react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
65
- isDisabled: !canGoToPrevYear,
66
- onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
67
- title: "Předchozí rok",
68
- }, nextButtonProps: {
65
+ react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
69
66
  isDisabled: !canGoToNextYear,
70
67
  onClick: canGoToNextYear ? handleGoToNextYear : undefined,
71
68
  title: "Nadcházející rok",
69
+ }, prevButtonProps: {
70
+ isDisabled: !canGoToPrevYear,
71
+ onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
72
+ title: "Předchozí rok",
72
73
  }, selectButtonProps: {
73
74
  children: yearLabel,
74
75
  onClick: handleYearClick,
@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.Default = void 0;
29
+ exports.Default = Default;
30
30
  const dayjs_1 = __importDefault(require("dayjs"));
31
31
  const react_1 = __importStar(require("react"));
32
32
  const action_1 = require("../utils/action");
@@ -73,14 +73,12 @@ function Default() {
73
73
  react_1.default.createElement("li", null, "now + 5 days & now + 6 days -> flag-1 className, not disabled"),
74
74
  react_1.default.createElement("li", null, "now + 3 days & now + 4 days -> flag-2 className, disabled"),
75
75
  react_1.default.createElement("li", null, "now + 8 days -> no custom className, disabled")),
76
- react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, datesConfig: datesConfig }),
76
+ react_1.default.createElement(date_picker_1.DatePicker, { datesConfig: datesConfig, onChange: onChange, selectedDate: value }),
77
77
  react_1.default.createElement("p", { className: "text-lg" }, "Date picker with bottom content"),
78
- react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, bottomContent: react_1.default.createElement("div", null,
78
+ react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: react_1.default.createElement("div", null,
79
79
  "Bottom content",
80
- react_1.default.createElement("p", null, "Here can goes anything")) }),
80
+ react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, selectedDate: value }),
81
81
  react_1.default.createElement("p", { className: "text-lg" }, "Date picker with onMonthChange callback"),
82
- react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, selectedDate: value, onMonthChange: (months) => alert(months[0].month) })));
83
- return (react_1.default.createElement(react_1.default.Fragment, null,
84
- react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
82
+ react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, onMonthChange: (months) => { var _a, _b; return alert((_b = (_a = months.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : "No month"); }, selectedDate: value })));
83
+ return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
85
84
  }
86
- exports.Default = Default;
@@ -82,6 +82,6 @@ exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
82
82
  const selectedDate = getSelectedDate(props.value);
83
83
  const parsedMinDate = getBoundaryDate(props.minDate);
84
84
  const parsedMaxDate = getBoundaryDate(props.maxDate);
85
- return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
85
+ return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
86
86
  });
87
87
  exports.DatePickerInput.displayName = "UxfUiDatePickerInput";
@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Default = void 0;
26
+ exports.Default = Default;
27
27
  const react_1 = __importStar(require("react"));
28
28
  const icon_1 = require("../icon");
29
29
  const action_1 = require("../utils/action");
@@ -41,12 +41,10 @@ function Default() {
41
41
  react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: date }),
42
42
  react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: date }),
43
43
  react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: date }),
44
- react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date }),
44
+ react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, label: "Min/max", maxDate: "2023-06-12", minDate: "2023-06-06", name: "date-invalid", onChange: onChange, placeholder: "", value: date }),
45
45
  react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], displayDateFormat: "MM/DD/YYYY", id: "date-custom-format", isClearable: true, label: "Datum s vlastn\u00EDm form\u00E1tem (US)", name: "date", onChange: onChange, value: date }),
46
46
  react_1.default.createElement(date_picker_input_1.DatePickerInput, { bottomContent: react_1.default.createElement("div", null,
47
47
  "Bottom content",
48
48
  react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
49
- return (react_1.default.createElement(react_1.default.Fragment, null,
50
- react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
49
+ return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
51
50
  }
52
- exports.Default = Default;
@@ -35,8 +35,9 @@ const dayjs_1 = __importDefault(require("dayjs"));
35
35
  const react_1 = __importStar(require("react"));
36
36
  const calendar_1 = require("../calendar");
37
37
  exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
38
+ var _a, _b;
38
39
  const { canGoToYear, goToNextYear, goToPrevYear, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
39
- const currentYear = activeMonths[0].year;
40
+ const currentYear = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : new Date().getFullYear();
40
41
  const { decadeLabel, years } = (0, use_decade_1.useDecade)({
41
42
  year: currentYear,
42
43
  });
@@ -58,12 +59,12 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
58
59
  }
59
60
  }, [canGoToYear, props]);
60
61
  return (react_1.default.createElement(react_1.default.Fragment, null,
61
- react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
62
- onClick: handleGoToPrevDecadeClick,
63
- title: "Zpět",
64
- }, nextButtonProps: {
62
+ react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
65
63
  onClick: handleGoToNextDecadeClick,
66
64
  title: "Vpřed",
65
+ }, prevButtonProps: {
66
+ onClick: handleGoToPrevDecadeClick,
67
+ title: "Zpět",
67
68
  }, selectButtonProps: {
68
69
  children: decadeLabel,
69
70
  } }),
@@ -51,19 +51,19 @@ exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
51
51
  props.setViewMode("year");
52
52
  }, [props]);
53
53
  return (react_1.default.createElement("div", { className: "uxf-date-range-picker__month" },
54
- react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
55
- isDisabled: !canGoToPrevMonth,
56
- onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
57
- title: "Předchozí měsíc",
58
- }, nextButtonProps: {
54
+ react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
59
55
  isDisabled: !canGoToNextMonth,
60
56
  onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
61
57
  title: "Nadcházející měsíc",
58
+ }, prevButtonProps: {
59
+ isDisabled: !canGoToPrevMonth,
60
+ onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
61
+ title: "Předchozí měsíc",
62
62
  }, selectButtonProps: {
63
63
  children: monthLabel,
64
64
  onClick: handleMonthClick,
65
65
  title: "Vybrat měsíc",
66
66
  } }),
67
- react_1.default.createElement(calendar_1.Calendar, { month: props.month, year: props.year, datePickerProps: dateRangePickerProps })));
67
+ react_1.default.createElement(calendar_1.Calendar, { datePickerProps: dateRangePickerProps, month: props.month, year: props.year })));
68
68
  });
69
69
  exports.DateRangePickerMonth.displayName = "UxfUiDateRangePickerMonth";
@@ -35,9 +35,10 @@ const dayjs_1 = __importDefault(require("dayjs"));
35
35
  const react_1 = __importStar(require("react"));
36
36
  const calendar_1 = require("../calendar");
37
37
  exports.DateRangePickerYear = (0, react_1.memo)((props) => {
38
+ var _a, _b, _c, _d;
38
39
  const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
39
- const currentMonth = activeMonths[0].month;
40
- const currentYear = activeMonths[0].year;
40
+ const currentMonth = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : new Date().getMonth();
41
+ const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
41
42
  const { months, yearLabel } = (0, use_year_1.useYear)({
42
43
  year: currentYear,
43
44
  yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
@@ -62,14 +63,14 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
62
63
  }
63
64
  }, [canGoToMonth, props]);
64
65
  return (react_1.default.createElement(react_1.default.Fragment, null,
65
- react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
66
- isDisabled: !canGoToPrevYear,
67
- onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
68
- title: "Předchozí rok",
69
- }, nextButtonProps: {
66
+ react_1.default.createElement(calendar_1.CalendarNavigation, { nextButtonProps: {
70
67
  isDisabled: !canGoToNextYear,
71
68
  onClick: canGoToNextYear ? handleGoToNextYear : undefined,
72
69
  title: "Nadcházející rok",
70
+ }, prevButtonProps: {
71
+ isDisabled: !canGoToPrevYear,
72
+ onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
73
+ title: "Předchozí rok",
73
74
  }, selectButtonProps: {
74
75
  children: yearLabel,
75
76
  onClick: handleYearClick,
@@ -3,10 +3,10 @@ import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
3
3
  import { DateRangePickerValueType } from "./types";
4
4
  export interface DateRangePickerProps {
5
5
  bottomContent?: ReactNode;
6
- closePopoverHandler: () => void;
7
6
  datesConfig?: DatesConfig[];
8
7
  numberOfMonths?: number;
9
8
  onChange: (data: DateRangePickerValueType) => void;
9
+ onClosePopover: () => void;
10
10
  selectedDates: DateRangePickerValueType;
11
11
  style?: CSSProperties;
12
12
  /** @deprecated */
@@ -23,7 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Default = void 0;
26
+ exports.Default = Default;
27
+ const noop_1 = require("@uxf/core/utils/noop");
27
28
  const react_1 = __importStar(require("react"));
28
29
  const action_1 = require("../utils/action");
29
30
  const date_range_picker_1 = require("./date-range-picker");
@@ -34,9 +35,6 @@ exports.default = {
34
35
  function Default() {
35
36
  const [value, setValue] = (0, react_1.useState)(null);
36
37
  const onChange = (0, action_1.action)("onChange", setValue);
37
- const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
38
- react_1.default.createElement(date_range_picker_1.DateRangePicker, { closePopoverHandler: close, onChange: onChange, selectedDates: value })));
39
- return (react_1.default.createElement(react_1.default.Fragment, null,
40
- react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
38
+ const testDatePickers = react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value });
39
+ return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
41
40
  }
42
- exports.Default = Default;
@@ -37,7 +37,7 @@ exports.DISPLAY_DATE_FORMAT = "D. M. YYYY";
37
37
  exports.SEPARATOR = " – ";
38
38
  const splitValueToRange = (value) => {
39
39
  const splitStr = value === null || value === void 0 ? void 0 : value.split(exports.SEPARATOR);
40
- return { from: splitStr ? splitStr[0] : undefined, to: splitStr && splitStr.length > 0 ? splitStr[1] : undefined };
40
+ return { from: splitStr === null || splitStr === void 0 ? void 0 : splitStr.at(0), to: splitStr === null || splitStr === void 0 ? void 0 : splitStr.at(1) };
41
41
  };
42
42
  exports.splitValueToRange = splitValueToRange;
43
43
  exports.DateRangePickerInput = (0, react_1.forwardRef)((props, ref) => {
@@ -57,6 +57,6 @@ exports.DateRangePickerInput = (0, react_1.forwardRef)((props, ref) => {
57
57
  const selectedDates = props.value
58
58
  ? { from: parsedFrom.isValid() ? parsedFrom.toDate() : null, to: parsedTo.isValid() ? parsedTo.toDate() : null }
59
59
  : null;
60
- return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder || "Vyberte datum...", ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, selectedDates: selectedDates, style: props.style, unavailableDates: props.unavailableDates }))));
60
+ return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder || "Vyberte datum...", ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, datesConfig: props.datesConfig, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, onClosePopover: close, selectedDates: selectedDates, style: props.style, unavailableDates: props.unavailableDates }))));
61
61
  });
62
62
  exports.DateRangePickerInput.displayName = "UxfUiDatePickerInput";
@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Default = void 0;
26
+ exports.Default = Default;
27
27
  const react_1 = __importStar(require("react"));
28
28
  const date_range_picker_input_1 = require("./date-range-picker-input");
29
29
  // import Docs from "./date-picker.docs.mdx";
@@ -41,15 +41,13 @@ function Default() {
41
41
  const [range, setRange] = (0, react_1.useState)(null);
42
42
  const onChange = (0, action_1.action)("onChange", setRange);
43
43
  const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
44
- react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", name: "date", label: "Datum \u010Dehokoliv", value: range, onChange: onChange, isClearable: true }),
45
- react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", name: "date", label: "Datum \u010Dehokoliv", value: range, onChange: onChange }),
46
- react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-disabled", name: "date-disabled", label: "Datum disabled", value: range, onChange: onChange, isDisabled: true }),
47
- react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-readonly", name: "date-readonly", label: "Datum readonly", value: range, onChange: onChange, isReadOnly: true }),
48
- react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-invalid", name: "date-invalid", label: "Datum invalid", value: range, onChange: onChange, isInvalid: true, isClearable: true }),
44
+ react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv", name: "date", onChange: onChange, value: range }),
45
+ react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", label: "Datum \u010Dehokoliv", name: "date", onChange: onChange, value: range }),
46
+ react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: range }),
47
+ react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: range }),
48
+ react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: range }),
49
49
  react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { bottomContent: react_1.default.createElement("div", null,
50
50
  "Bottom content",
51
- react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", name: "date", label: "With bottom content", value: range, onChange: onChange, isClearable: true })));
52
- return (react_1.default.createElement(react_1.default.Fragment, null,
53
- react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
51
+ react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, value: range })));
52
+ return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
54
53
  }
55
- exports.Default = Default;
@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.DatetimePicker = exports.getStrictParsedDatetime = exports.OUTPUT_DATETIME_FORMAT = void 0;
29
+ exports.DatetimePicker = exports.OUTPUT_DATETIME_FORMAT = void 0;
30
+ exports.getStrictParsedDatetime = getStrictParsedDatetime;
30
31
  const classes_1 = require("@uxf/core/constants/classes");
31
32
  const cx_1 = require("@uxf/core/utils/cx");
32
33
  const dayjs_1 = __importStar(require("dayjs"));
@@ -40,7 +41,6 @@ function getStrictParsedDatetime(date) {
40
41
  var _a;
41
42
  return (0, dayjs_1.default)((_a = date === null || date === void 0 ? void 0 : date.slice(0, 19)) !== null && _a !== void 0 ? _a : null, exports.OUTPUT_DATETIME_FORMAT.slice(0, 19), true);
42
43
  }
43
- exports.getStrictParsedDatetime = getStrictParsedDatetime;
44
44
  function getSelectedDate(value) {
45
45
  const parsedValue = getStrictParsedDatetime(value);
46
46
  if (value && parsedValue.isValid()) {
@@ -75,7 +75,7 @@ const DatetimePicker = (props) => {
75
75
  var _a;
76
76
  const parsedValue = value
77
77
  ? (tmpDate !== null && tmpDate !== void 0 ? tmpDate : (0, dayjs_1.default)()).hour(value.hour).minute(value.minute).second(0)
78
- : tmpDate !== null && tmpDate !== void 0 ? tmpDate : null;
78
+ : (tmpDate !== null && tmpDate !== void 0 ? tmpDate : null);
79
79
  onChange((_a = parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.toISOString()) !== null && _a !== void 0 ? _a : null);
80
80
  setTmpDate(parsedValue);
81
81
  }, [onChange, tmpDate]);
@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Default = void 0;
26
+ exports.Default = Default;
27
27
  const react_1 = __importStar(require("react"));
28
28
  const action_1 = require("../utils/action");
29
29
  const datetime_picker_1 = require("./datetime-picker");
@@ -34,11 +34,8 @@ exports.default = {
34
34
  function Default() {
35
35
  const [value, setValue] = (0, react_1.useState)(null);
36
36
  const onChange = (0, action_1.action)("onChange", setValue);
37
- const testDatetimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
38
- react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: react_1.default.createElement("div", null,
39
- "Bottom content",
40
- react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, value: value })));
41
- return (react_1.default.createElement(react_1.default.Fragment, null,
42
- react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatetimePickers)));
37
+ const testDatetimePickers = (react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: react_1.default.createElement("div", null,
38
+ "Bottom content",
39
+ react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, value: value }));
40
+ return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatetimePickers);
43
41
  }
44
- exports.Default = Default;
@@ -79,7 +79,6 @@ exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
79
79
  const value = getValue(props.value); // hodnota zobrazená v textinputu (human readable)
80
80
  const parsedMinDate = getBoundaryDate(props.minDate);
81
81
  const parsedMaxDate = getBoundaryDate(props.maxDate);
82
- return (react_1.default.createElement(react_1.default.Fragment, null,
83
- react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATETIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomDatetimePicker) ? (react_1.default.createElement(props.CustomDatetimePicker, { value: (0, get_datetime_string_1.getDatetimeString)(props.value), onChange: onChange, onClose: close })) : (react_1.default.createElement(datetime_picker_1.DatetimePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, bottomContent: props.bottomContent, closePopoverHandler: close, onChange: onChange, value: props.value, unavailableDates: props.unavailableDates })))));
82
+ return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATETIME_FORMAT), ref: ref, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomDatetimePicker) ? (react_1.default.createElement(props.CustomDatetimePicker, { onChange: onChange, onClose: close, value: (0, get_datetime_string_1.getDatetimeString)(props.value) })) : (react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onChange, unavailableDates: props.unavailableDates, value: props.value }))));
84
83
  });
85
84
  exports.DatetimePickerInput.displayName = "UxfUiDatePickerInput";
@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Default = void 0;
26
+ exports.Default = Default;
27
27
  const react_1 = __importStar(require("react"));
28
28
  const icon_1 = require("../icon");
29
29
  const action_1 = require("../utils/action");
@@ -41,11 +41,9 @@ function Default() {
41
41
  react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum a \u010Das disabled", name: "date-disabled", onChange: onChange, value: date }),
42
42
  react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum a \u010Das readonly", name: "date-readonly", onChange: onChange, value: date }),
43
43
  react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum a \u010Das invalid", name: "date-invalid", onChange: onChange, value: date }),
44
- react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-13", maxDate: "2023-06-26", label: "min/max-validate", name: "min/max", onChange: onChange, placeholder: "", value: date }),
44
+ react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, label: "min/max-validate", maxDate: "2023-06-26", minDate: "2023-06-13", name: "min/max", onChange: onChange, placeholder: "", value: date }),
45
45
  react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { bottomContent: react_1.default.createElement("div", null,
46
46
  "Bottom content",
47
47
  react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
48
- return (react_1.default.createElement(react_1.default.Fragment, null,
49
- react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testDatePickers)));
48
+ return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
50
49
  }
51
- exports.Default = Default;
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.getDatetimeString = void 0;
6
+ exports.getDatetimeString = getDatetimeString;
7
7
  const is_nil_1 = require("@uxf/core/utils/is-nil");
8
8
  const dayjs_1 = __importDefault(require("dayjs"));
9
9
  /**
@@ -16,4 +16,3 @@ function getDatetimeString(value) {
16
16
  const date = (0, dayjs_1.default)(value, ["YYYY-MM-DD[T]HH:mm:ssZ", "YYYY-MM-DD[T]HH:mm:ss.SSS[Z]"]);
17
17
  return date.isValid() ? date.format("YYYY-MM-DD[T]HH:mm:ssZ") : null;
18
18
  }
19
- exports.getDatetimeString = getDatetimeString;
package/dialog/dialog.js CHANGED
@@ -28,7 +28,7 @@ const react_1 = require("@headlessui/react");
28
28
  const react_2 = __importStar(require("react"));
29
29
  exports.Dialog = (0, react_2.memo)((props) => {
30
30
  var _a, _b;
31
- return (react_2.default.createElement(react_1.Dialog, { className: `uxf-dialog uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, open: props.open, onClose: props.disableBackdropClose ? () => null : props.onClose },
31
+ return (react_2.default.createElement(react_1.Dialog, { className: `uxf-dialog uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, onClose: props.disableBackdropClose ? () => null : props.onClose, open: props.open },
32
32
  react_2.default.createElement(react_1.Dialog.Overlay, { className: "uxf-dialog__backdrop" }),
33
33
  react_2.default.createElement("div", { className: "uxf-dialog__wrapper" },
34
34
  react_2.default.createElement("div", { className: "uxf-dialog__body" },
@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Default = void 0;
26
+ exports.Default = Default;
27
27
  const react_1 = __importStar(require("react"));
28
28
  const button_1 = require("../button");
29
29
  const dialog_1 = require("./dialog");
@@ -39,4 +39,3 @@ function Default() {
39
39
  react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Dialog"),
40
40
  react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => setOpen(false) }, "Close dialog"))))));
41
41
  }
42
- exports.Default = Default;
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
6
+ exports.Default = Default;
7
7
  const react_1 = require("@headlessui/react");
8
8
  const classes_1 = require("@uxf/core/constants/classes");
9
9
  const react_2 = __importDefault(require("react"));
@@ -19,11 +19,9 @@ const testDropdownItems = [
19
19
  { id: 3, title: "Test 3" },
20
20
  ];
21
21
  function Default() {
22
- const storyDropdown = (react_2.default.createElement(react_2.default.Fragment, null,
23
- react_2.default.createElement(react_1.Menu, { as: "div", className: "relative" },
24
- react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, color: "positive", title: "Test" }, "Click me"),
25
- react_2.default.createElement(react_1.Menu.Items, { as: index_1.Dropdown.Items }, testDropdownItems.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id }, ({ active }) => (react_2.default.createElement(index_1.Dropdown.Item, { className: `first-letter:uppercase ${active ? classes_1.CLASSES.IS_ACTIVE : ""}` }, item.title)))))))));
22
+ const storyDropdown = (react_2.default.createElement(react_1.Menu, { as: "div", className: "relative" },
23
+ react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, color: "positive", title: "Test" }, "Click me"),
24
+ react_2.default.createElement(react_1.Menu.Items, { as: index_1.Dropdown.Items }, testDropdownItems.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id }, ({ active }) => (react_2.default.createElement(index_1.Dropdown.Item, { className: `first-letter:uppercase ${active ? classes_1.CLASSES.IS_ACTIVE : ""}` }, item.title))))))));
26
25
  return (react_2.default.createElement("div", { className: "flex" },
27
26
  react_2.default.createElement("div", { className: "grow gap-4 p-4" }, storyDropdown)));
28
27
  }
29
- exports.Default = Default;
@@ -69,7 +69,7 @@ const DropzoneList = (props) => {
69
69
  var _a, _b, _c;
70
70
  const isUploading = file.id < 0 && !file.error;
71
71
  return ((_b = (_a = props.renderItem) === null || _a === void 0 ? void 0 : _a.call(props, file)) !== null && _b !== void 0 ? _b : (react_1.default.createElement("li", { className: "uxf-dropzone-list__item-wrapper", key: file.id },
72
- react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone-list__item", !!file.error && classes_1.CLASSES.IS_INVALID) },
72
+ react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone-list__item", Boolean(file.error) && classes_1.CLASSES.IS_INVALID) },
73
73
  react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
74
74
  react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__icon", name: (0, get_file_icon_1.getIconNameFromFileExtension)(file.extension.toLowerCase()) }),
75
75
  (context === null || context === void 0 ? void 0 : context.domain) && file.id > 0 ? (react_1.default.createElement("a", { className: "uxf-dropzone-list__item__block__file-name-link", download: props.isDownloadableOnClick ? file.name : undefined, href: (0, get_file_url_1.getFileUrl)(context.domain, file), rel: !props.isDownloadableOnClick ? "noreferrer noopenner" : undefined, target: !props.isDownloadableOnClick ? "_blank" : undefined }, file.name)) : (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name))),
@@ -78,7 +78,7 @@ const DropzoneList = (props) => {
78
78
  ((_c = file.originalFile) === null || _c === void 0 ? void 0 : _c.size) && (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-size" }, formatBytes(file.originalFile.size)))),
79
79
  react_1.default.createElement("button", { className: "uxf-dropzone-list__item__block__remove-button", onClick: onRemove(file, isUploading), type: "button" },
80
80
  react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__remove-button__icon", name: "xmarkLarge" })))),
81
- !!file.error && (react_1.default.createElement("span", { className: (0, cx_1.cx)("uxf-helper-text", classes_1.CLASSES.IS_INVALID) }, props.errorText || "File upload error")))));
81
+ Boolean(file.error) && (react_1.default.createElement("span", { className: (0, cx_1.cx)("uxf-helper-text", classes_1.CLASSES.IS_INVALID) }, props.errorText || "File upload error")))));
82
82
  })));
83
83
  };
84
84
  exports.DropzoneList = DropzoneList;
@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.ComponentStructure = exports.Default = void 0;
29
+ exports.Default = Default;
30
+ exports.ComponentStructure = ComponentStructure;
30
31
  const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
31
32
  const react_1 = __importStar(require("react"));
32
33
  const get_provider_config_1 = require("../_private-utils/get-provider-config");
@@ -59,18 +60,16 @@ function Default() {
59
60
  });
60
61
  };
61
62
  return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
62
- react_1.default.createElement(index_1.Dropzone, { isDisabled: status === "UPLOADING", helperText: "Disabled drag 'n' drop", label: "Use drag and drop or click to upload", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-drag-and-drop" }),
63
- react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-click" }),
64
- react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-only-images" }),
65
- react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-single-file" }),
66
- react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled" }),
67
- react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files, name: "dropzone-error-message" }),
68
- react_1.default.createElement(index_1.Dropzone.List, { onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
69
- react_1.default.createElement("pre", { className: "text-wrap" }, JSON.stringify(file, null, 4)))), value: files, name: "dropzone-list" })));
63
+ react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled drag 'n' drop", isDisabled: status === "UPLOADING", label: "Use drag and drop or click to upload", name: "dropzone-disabled-drag-and-drop", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
64
+ react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), name: "dropzone-disabled-click", noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
65
+ react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", name: "dropzone-only-images", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
66
+ react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, name: "dropzone-single-file", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
67
+ react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", name: "dropzone-disabled", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
68
+ react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", name: "dropzone-error-message", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
69
+ react_1.default.createElement(index_1.Dropzone.List, { name: "dropzone-list", onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
70
+ react_1.default.createElement("pre", { className: "text-wrap" }, JSON.stringify(file, null, 4)))), value: files })));
70
71
  }
71
- exports.Default = Default;
72
72
  function ComponentStructure() {
73
73
  return (react_1.default.createElement(component_structure_analyzer_1.default, null,
74
74
  react_1.default.createElement(index_1.Dropzone, null)));
75
75
  }
76
- exports.ComponentStructure = ComponentStructure;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export type { DropzoneInputProps } from "./dropzone-input";
3
2
  export type { DropzoneListProps } from "./dropzone-list";
4
3
  export declare const Dropzone: import("react").ForwardRefExoticComponent<import("./dropzone-input").DropzoneInputProps & import("react").RefAttributes<HTMLDivElement>> & {
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ErrorMessage = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const ErrorMessage = (props) => {
9
- return (react_1.default.createElement("p", { id: props.id, className: "uxf-error-message" }, props.children));
9
+ return (react_1.default.createElement("p", { className: "uxf-error-message", id: props.id }, props.children));
10
10
  };
11
11
  exports.ErrorMessage = ErrorMessage;
12
12
  exports.ErrorMessage.displayName = "UxfUiErrorMessage";
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
6
+ exports.Default = Default;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const index_1 = require("./index");
9
9
  exports.default = {
@@ -14,4 +14,3 @@ function Default() {
14
14
  return (react_1.default.createElement("div", { className: "space-y-2" },
15
15
  react_1.default.createElement(index_1.ErrorMessage, null, "This field is required.")));
16
16
  }
17
- exports.Default = Default;