@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
@@ -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 index_1 = require("./index");
@@ -35,11 +35,9 @@ function Default() {
35
35
  const [value, setValue] = (0, react_1.useState)("test");
36
36
  const onChange = (0, action_1.action)("onChange", setValue);
37
37
  const storyTextAreas = (react_1.default.createElement("div", { className: "space-y-2" },
38
- react_1.default.createElement(index_1.Textarea, { id: "textarea", label: "Textarea", onChange: onChange, placeholder: "Placeholder text...", value: value, name: "text-area" }),
39
- react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", isReadOnly: true, onChange: onChange, value: value, name: "text-area-read-only" }),
40
- react_1.default.createElement(index_1.Textarea, { isDisabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: onChange, value: value, name: "text-area-diabled" }),
41
- react_1.default.createElement(index_1.Textarea, { id: "textarea-rows10", isInvalid: true, label: "Textarea rows = 10, invalid", placeholder: "Placeholder text....", rows: 10, onChange: onChange, value: value, name: "text-area-invalid" })));
42
- return (react_1.default.createElement(react_1.default.Fragment, null,
43
- react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyTextAreas)));
38
+ react_1.default.createElement(index_1.Textarea, { id: "textarea", label: "Textarea", name: "text-area", onChange: onChange, placeholder: "Placeholder text...", value: value }),
39
+ react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", isReadOnly: true, label: "Readonly", name: "text-area-read-only", onChange: onChange, value: value }),
40
+ react_1.default.createElement(index_1.Textarea, { id: "textarea-disabled", isDisabled: true, label: "Textarea disabled", name: "text-area-diabled", onChange: onChange, value: value }),
41
+ react_1.default.createElement(index_1.Textarea, { id: "textarea-rows10", isInvalid: true, label: "Textarea rows = 10, invalid", name: "text-area-invalid", onChange: onChange, placeholder: "Placeholder text....", rows: 10, value: value })));
42
+ return react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyTextAreas);
44
43
  }
45
- exports.Default = Default;
@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
9
9
  const time_picker_hour_1 = require("./time-picker-hour");
10
10
  const TimePickerHours = () => {
11
11
  const { hours } = (0, use_hours_1.useHours)({});
12
- return (react_1.default.createElement("div", { className: "uxf-time-picker__hours uxf-calendar__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
12
+ return (react_1.default.createElement("div", { className: "uxf-time-picker__hours uxf-calendar__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, key: hour.value, label: hour.label })))));
13
13
  };
14
14
  exports.TimePickerHours = TimePickerHours;
15
15
  exports.TimePickerHours.displayName = "UxfUiTimePickerHours";
@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
9
9
  const time_picker_minute_1 = require("./time-picker-minute");
10
10
  const TimePickerMinutes = () => {
11
11
  const { minutes } = (0, use_minutes_1.useMinutes)({});
12
- return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes uxf-calendar__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
12
+ return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes uxf-calendar__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { key: minute.value, label: minute.label, minute: minute.value })))));
13
13
  };
14
14
  exports.TimePickerMinutes = TimePickerMinutes;
15
15
  exports.TimePickerMinutes.displayName = "UxfUiTimePickerMinutes";
@@ -1,7 +1,7 @@
1
1
  import { OnTimeChangeType, TimeType } from "@uxf/datepicker/hooks/use-time-picker";
2
2
  import { FC } from "react";
3
3
  export interface TimePickerProps {
4
- closePopoverHandler?: () => void;
4
+ onClosePopover?: () => void;
5
5
  onChange: (data: OnTimeChangeType) => void;
6
6
  preventScroll?: boolean;
7
7
  selectedTime: TimeType | null;
@@ -46,14 +46,14 @@ const TimePicker = (props) => {
46
46
  react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
47
47
  react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
48
48
  react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
49
- react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour.toString()) !== null && _b !== void 0 ? _b : "0"),
49
+ react_1.default.createElement(button_1.Button, { onClick: () => setViewMode("hour"), variant: "text" }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour.toString()) !== null && _b !== void 0 ? _b : "0"),
50
50
  react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
51
51
  react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))),
52
52
  react_1.default.createElement("div", null, ":"),
53
53
  react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
54
54
  react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextMinute, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
55
55
  react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
56
- react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("minute") }, props.selectedTime
56
+ react_1.default.createElement(button_1.Button, { onClick: () => setViewMode("minute"), variant: "text" }, props.selectedTime
57
57
  ? props.selectedTime.minute < 10
58
58
  ? "0" + props.selectedTime.minute
59
59
  : props.selectedTime.minute.toString()
@@ -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 time_picker_1 = require("./time-picker");
@@ -34,10 +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 onClose = () => null;
38
- const testTimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
39
- react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: onClose, onChange: onChange, selectedTime: value })));
40
- return (react_1.default.createElement(react_1.default.Fragment, null,
41
- react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testTimePickers)));
38
+ const testTimePickers = react_1.default.createElement(time_picker_1.TimePicker, { onChange: onChange, onClosePopover: noop_1.noop, selectedTime: value });
39
+ return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testTimePickers);
42
40
  }
43
- exports.Default = Default;
@@ -77,6 +77,6 @@ exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
77
77
  }, [onChange]);
78
78
  const value = getValue(props.value);
79
79
  const selectedTime = getSelectedTime(props.value);
80
- 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_TIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }) }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomTimePicker) ? (react_1.default.createElement(props.CustomTimePicker, { value: (0, is_time_string_1.isTimeString)(props.value) ? props.value : null, onChange: props.onChange, onClose: close })) : (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, preventScroll: true, selectedTime: selectedTime }))));
80
+ 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_TIME_FORMAT), ref: ref, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomTimePicker) ? (react_1.default.createElement(props.CustomTimePicker, { onChange: props.onChange, onClose: close, value: (0, is_time_string_1.isTimeString)(props.value) ? props.value : null })) : (react_1.default.createElement(time_picker_1.TimePicker, { onChange: onTimePickerChange, onClosePopover: close, preventScroll: true, selectedTime: selectedTime }))));
81
81
  });
82
82
  exports.TimePickerInput.displayName = "UxfUiTimePickerInput";
@@ -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 icon_1 = require("@uxf/ui//icon");
28
28
  const react_1 = __importStar(require("react"));
29
29
  const button_1 = require("../button");
@@ -32,15 +32,14 @@ const time_picker_input_1 = require("./time-picker-input");
32
32
  function Default() {
33
33
  const [value, setValue] = (0, react_1.useState)(null);
34
34
  const onChange = (0, action_1.action)("onChange", setValue);
35
- return (react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" },
35
+ return (react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" },
36
36
  react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", label: "\u010Cas \u010Dehokoliv", name: "time", onChange: onChange, placeholder: "Zadejte \u010Das...", value: value }),
37
37
  react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", isClearable: true, label: "\u010Cas \u010Dehokoliv vlastn\u00ED ikona", name: "time", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: value }),
38
38
  react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-disabled", isDisabled: true, label: "\u010Cas disabled", name: "time-disabled", onChange: onChange, value: value }),
39
39
  react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-readonly", isReadOnly: true, label: "\u010Cas readonly", name: "time-readonly", onChange: onChange, value: value }),
40
40
  react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-invalid", isClearable: true, isInvalid: true, label: "\u010Cas invalid", name: "time-invalid", onChange: onChange, value: value }),
41
- react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "custom-picker", label: "Custom picker", name: "custom-picker", onChange: onChange, value: value, CustomTimePicker: (props) => (react_1.default.createElement(button_1.Button, { onClick: () => {
41
+ react_1.default.createElement(time_picker_input_1.TimePickerInput, { CustomTimePicker: (props) => (react_1.default.createElement(button_1.Button, { onClick: () => {
42
42
  props.onChange("15:00:00");
43
43
  props.onClose();
44
- } }, "15:00")) })));
44
+ } }, "15:00")), id: "custom-picker", label: "Custom picker", name: "custom-picker", onChange: onChange, value: value })));
45
45
  }
46
- exports.Default = Default;
package/toggle/toggle.js CHANGED
@@ -34,6 +34,6 @@ exports.Toggle = (0, react_2.forwardRef)((props, ref) => {
34
34
  react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, `uxf-toggle__wrapper--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
35
35
  react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, `uxf-toggle--size-${(_d = props.size) !== null && _d !== void 0 ? _d : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
36
36
  react_2.default.createElement("span", { className: "uxf-toggle__inner" })),
37
- react_2.default.createElement(react_1.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
37
+ react_2.default.createElement(react_1.Switch.Label, { className: "uxf-toggle__label", hidden: props.hiddenLabel }, props.label))));
38
38
  });
39
39
  exports.Toggle.displayName = "UxfUiToggle";
@@ -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 index_1 = require("./index");
@@ -35,12 +35,11 @@ function Default() {
35
35
  const [checked, setChecked] = (0, react_1.useState)(true);
36
36
  const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
37
37
  const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
38
- react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, name: "toggle" }),
39
- react_1.default.createElement(index_1.Toggle, { label: "Opravdu? - size sm", onChange: onChange, value: checked, name: "toggle", size: "sm" }),
40
- react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, isDisabled: true, name: "toggle-disabled" }),
41
- react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, hiddenLabel: true, name: "toggle-hidden-label" }),
42
- react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: onChange, value: checked, variant: "reversed", name: "toggle-reversed" })));
38
+ react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", name: "toggle", onChange: onChange, value: checked }),
39
+ react_1.default.createElement(index_1.Toggle, { label: "Opravdu? - size sm", name: "toggle", onChange: onChange, size: "sm", value: checked }),
40
+ react_1.default.createElement(index_1.Toggle, { isDisabled: true, label: "Opravdu?", name: "toggle-disabled", onChange: onChange, value: checked }),
41
+ react_1.default.createElement(index_1.Toggle, { hiddenLabel: true, label: "Opravdu?", name: "toggle-hidden-label", onChange: onChange, value: checked }),
42
+ react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", name: "toggle-reversed", onChange: onChange, value: checked, variant: "reversed" })));
43
43
  return (react_1.default.createElement("div", { className: "flex" },
44
44
  react_1.default.createElement("div", { className: "w-1/2 gap-4 p-20" }, storyToggles)));
45
45
  }
46
- exports.Default = Default;
@@ -36,12 +36,12 @@ const STATIC_SIDES = {
36
36
  left: "right",
37
37
  };
38
38
  exports.Tooltip = (0, react_2.forwardRef)(({ children, className, content, style, ...options }, ref) => {
39
- var _a, _b;
39
+ var _a, _b, _c;
40
40
  const arrowRef = (0, react_2.useRef)(null);
41
41
  const tooltip = (0, use_tooltip_1.useTooltip)({ arrowRef, ...options });
42
42
  const arrowX = (_a = tooltip.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x;
43
43
  const arrowY = (_b = tooltip.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y;
44
- const staticSide = STATIC_SIDES[tooltip.placement.split("-")[0]];
44
+ const staticSide = STATIC_SIDES[(_c = tooltip.placement.split("-").at(0)) !== null && _c !== void 0 ? _c : "top"];
45
45
  const stableRef = (0, react_2.useMemo)(() => (0, compose_refs_1.composeRefs)(ref, tooltip.refs.setReference, children.ref), [ref, tooltip.refs.setReference, children]);
46
46
  return (react_2.default.createElement(react_2.default.Fragment, null,
47
47
  (0, react_2.cloneElement)(children, tooltip.getReferenceProps({
@@ -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 chip_1 = require("../chip");
9
9
  const tooltip_1 = require("./tooltip");
@@ -16,4 +16,3 @@ function Default() {
16
16
  return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" }, sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", key: placement, placement: placement },
17
17
  react_1.default.createElement(chip_1.Chip, { color: "green" }, placement))))));
18
18
  }
19
- exports.Default = Default;
@@ -35,7 +35,7 @@ export declare function useTooltip(options: TooltipOptions): {
35
35
  update: () => void;
36
36
  floatingStyles: import("react").CSSProperties;
37
37
  open: boolean;
38
- onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
38
+ onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
39
39
  events: import("@floating-ui/react").FloatingEvents;
40
40
  dataRef: MutableRefObject<import("@floating-ui/react").ContextData>;
41
41
  nodeId: string | undefined;
@@ -43,12 +43,12 @@ export declare function useTooltip(options: TooltipOptions): {
43
43
  refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
44
44
  elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
45
45
  };
46
- getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
47
- getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
48
- getItemProps: (userProps?: (Omit<import("react").HTMLProps<HTMLElement>, "active" | "selected"> & {
49
- active?: boolean | undefined;
50
- selected?: boolean | undefined;
51
- }) | undefined) => Record<string, unknown>;
46
+ getReferenceProps: (userProps?: import("react").HTMLProps<Element>) => Record<string, unknown>;
47
+ getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement>) => Record<string, unknown>;
48
+ getItemProps: (userProps?: Omit<import("react").HTMLProps<HTMLElement>, "selected" | "active"> & {
49
+ active?: boolean;
50
+ selected?: boolean;
51
+ }) => Record<string, unknown>;
52
52
  open: boolean;
53
53
  setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
54
54
  };
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useTooltip = void 0;
3
+ exports.useTooltip = useTooltip;
4
4
  const react_1 = require("@floating-ui/react");
5
5
  const react_2 = require("react");
6
6
  function useTooltip(options) {
@@ -33,4 +33,3 @@ function useTooltip(options) {
33
33
  ...data,
34
34
  }), [open, setOpen, interactions, data]);
35
35
  }
36
- exports.useTooltip = useTooltip;
@@ -1,5 +1,5 @@
1
+ export type UploadProgressEvent = Pick<ProgressEvent, "lengthComputable" | "loaded" | "total">;
1
2
  export interface UploadOptions {
2
3
  abortController?: AbortController;
3
4
  onUploadProgress?: (progressEvent: UploadProgressEvent) => void;
4
5
  }
5
- export type UploadProgressEvent = Pick<ProgressEvent, "lengthComputable" | "loaded" | "total">;
@@ -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
  exports.default = {
9
9
  title: "UI/Typography",
@@ -25,4 +25,3 @@ function Default() {
25
25
  react_1.default.createElement("p", { className: "uxf-typo-medium2" }, ".uxf-typo-medium2"),
26
26
  react_1.default.createElement("p", { className: "uxf-typo-overline" }, ".uxf-typo-overline")));
27
27
  }
28
- exports.Default = Default;
package/utils/action.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.action = void 0;
3
+ exports.action = action;
4
4
  function action(name, handler) {
5
5
  return function (...args) {
6
6
  // eslint-disable-next-line no-console
@@ -8,4 +8,3 @@ function action(name, handler) {
8
8
  handler(...args);
9
9
  };
10
10
  }
11
- exports.action = action;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getIconNameFromFileExtension = void 0;
3
+ exports.getIconNameFromFileExtension = getIconNameFromFileExtension;
4
4
  function getIconNameFromFileExtension(extension) {
5
5
  switch (extension) {
6
6
  case "jpg":
@@ -16,4 +16,3 @@ function getIconNameFromFileExtension(extension) {
16
16
  return "file";
17
17
  }
18
18
  }
19
- exports.getIconNameFromFileExtension = getIconNameFromFileExtension;
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getFileUrl = void 0;
3
+ exports.getFileUrl = getFileUrl;
4
4
  function getFileUrl(domain, file) {
5
5
  return `${domain}/upload/${file.namespace || "default"}/${file.uuid[0]}/${file.uuid[1]}/${file.uuid}.${file.extension}`;
6
6
  }
7
- exports.getFileUrl = getFileUrl;
@@ -1,12 +1,13 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getDropzoneState = void 0;
3
+ exports.getDropzoneState = getDropzoneState;
4
+ const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
4
5
  function getDropzoneState(files) {
5
6
  const errors = files
6
7
  .filter((file) => file.error)
7
8
  .map((file) => file.error)
8
9
  .join("; ");
9
- const isUploading = Boolean(files.find((file) => file.id < 0));
10
+ const isUploading = (0, is_not_nil_1.isNotNil)(files.find((file) => file.id < 0));
10
11
  if (errors) {
11
12
  return {
12
13
  errorMessage: errors,
@@ -20,4 +21,3 @@ function getDropzoneState(files) {
20
21
  }
21
22
  return { status: "OK" };
22
23
  }
23
- exports.getDropzoneState = getDropzoneState;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.uploadFile = void 0;
3
+ exports.uploadFile = uploadFile;
4
4
  function getRandomUuid() {
5
5
  return "00000000-0000-0000-0000-000000000000"
6
6
  .split("-")
@@ -44,4 +44,3 @@ function uploadFile(file, uploadOptions) {
44
44
  }, time);
45
45
  });
46
46
  }
47
- exports.uploadFile = uploadFile;
@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.snapTest = void 0;
7
+ const react_1 = require("@testing-library/react");
7
8
  const dayjs_1 = __importDefault(require("dayjs"));
8
- const react_1 = __importDefault(require("react"));
9
- const react_test_renderer_1 = require("react-test-renderer");
9
+ const react_2 = __importDefault(require("react"));
10
10
  const get_provider_config_1 = require("../_private-utils/get-provider-config");
11
11
  const context_1 = require("../context");
12
12
  const snapTest = (name, component) => {
@@ -15,8 +15,8 @@ const snapTest = (name, component) => {
15
15
  jest.setSystemTime((0, dayjs_1.default)().year(2008).month(1).date(22).hour(22).minute(4).second(35).millisecond(0).toDate());
16
16
  });
17
17
  it(name, () => {
18
- const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() }, component)).toJSON();
19
- expect(tree).toMatchSnapshot();
18
+ const { container } = (0, react_1.render)(react_2.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() }, component));
19
+ expect(container).toMatchSnapshot();
20
20
  });
21
21
  };
22
22
  exports.snapTest = snapTest;
@@ -5,7 +5,6 @@ import { ChipColor } from "../chip";
5
5
  import { InputGroupSizes } from "../input/theme";
6
6
  import { LozengeColor, LozengeVariant } from "../lozenge";
7
7
  import { MessageColor, MessageVariant } from "../message/theme";
8
- export declare const defaultConfig: StorybookConfig;
9
8
  export interface StorybookConfig {
10
9
  AlertBubble: {
11
10
  colors: AlertBubbleColor[];
@@ -35,6 +34,7 @@ export interface StorybookConfig {
35
34
  };
36
35
  Select: any;
37
36
  }
37
+ export declare const defaultConfig: StorybookConfig;
38
38
  export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];
39
39
  interface StorybookContextProviderProps {
40
40
  config: StorybookConfig;
@@ -23,7 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.StorybookContextProvider = exports.useStorybookConfig = exports.defaultConfig = void 0;
26
+ exports.defaultConfig = void 0;
27
+ exports.useStorybookConfig = useStorybookConfig;
28
+ exports.StorybookContextProvider = StorybookContextProvider;
27
29
  const react_1 = __importStar(require("react"));
28
30
  exports.defaultConfig = {
29
31
  AlertBubble: {
@@ -60,8 +62,6 @@ const Context = (0, react_1.createContext)(exports.defaultConfig);
60
62
  function useStorybookConfig(key) {
61
63
  return (0, react_1.useContext)(Context)[key];
62
64
  }
63
- exports.useStorybookConfig = useStorybookConfig;
64
65
  function StorybookContextProvider(props) {
65
66
  return react_1.default.createElement(Context.Provider, { value: props.config }, props.children);
66
67
  }
67
- exports.StorybookContextProvider = StorybookContextProvider;