@uxf/ui 10.5.0 → 10.6.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 (5) hide show
  1. package/date-picker-input/date-picker-input.d.ts +5 -3
  2. package/date-picker-input/date-picker-input.js +9 -7
  3. package/date-picker-input/date-picker-input.stories.js +2 -1
  4. package/multi-combobox/_multi-combobox-base.js +14 -1
  5. package/package.json +1 -1
package/date-picker-input/date-picker-input.d.ts CHANGED
@@ -4,11 +4,13 @@ export declare const ALLOWED_DATE_FORMAT: string[];
4
4
  export declare const DISPLAY_DATE_FORMAT = "D. M. YYYY";
5
5
  export declare const OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
6
6
  export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
7
+ allowedDateFormats?: string[];
8
+ bottomContent?: ReactNode;
9
+ displayDateFormat?: string;
10
+ maxDate?: string;
11
+ minDate?: string;
7
12
  placeholder?: string;
8
13
  triggerElement?: ReactNode;
9
- minDate?: string;
10
- maxDate?: string;
11
14
  unavailableDates?: Date[];
12
- bottomContent?: ReactNode;
13
15
  }
14
16
  export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;
package/date-picker-input/date-picker-input.js CHANGED
@@ -38,10 +38,10 @@ const icon_1 = require("../icon");
38
38
  exports.ALLOWED_DATE_FORMAT = ["D. M. YYYY", "DD. MM. YYYY", "D.M.YYYY", "DD.MM.YYYY"];
39
39
  exports.DISPLAY_DATE_FORMAT = "D. M. YYYY";
40
40
  exports.OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
41
- function getValue(value) {
41
+ function getValue(value, format) {
42
42
  const parsedValue = (0, dayjs_1.default)(value, exports.OUTPUT_DATE_FORMAT, true);
43
43
  if (value && parsedValue.isValid()) {
44
- return parsedValue.format(exports.DISPLAY_DATE_FORMAT);
44
+ return parsedValue.format(format);
45
45
  }
46
46
  return value !== null && value !== void 0 ? value : "";
47
47
  }
@@ -60,26 +60,28 @@ function getBoundaryDate(value) {
60
60
  return undefined;
61
61
  }
62
62
  exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
63
- var _a, _b;
63
+ var _a, _b, _c, _d;
64
64
  const onChange = props.onChange;
65
65
  const className = (0, cx_1.cx)("uxf-date-picker-input", props.className);
66
+ const displayDateFormat = (_a = props.displayDateFormat) !== null && _a !== void 0 ? _a : exports.DISPLAY_DATE_FORMAT;
67
+ const allowedDateFormats = (_b = props.allowedDateFormats) !== null && _b !== void 0 ? _b : exports.ALLOWED_DATE_FORMAT;
66
68
  const onInputChange = (0, react_1.useCallback)((value) => {
67
- const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_DATE_FORMAT, true);
69
+ const parsedValue = (0, dayjs_1.default)(value, allowedDateFormats, true);
68
70
  if (value !== "" && parsedValue.isValid()) {
69
71
  onChange(parsedValue.format(exports.OUTPUT_DATE_FORMAT));
70
72
  }
71
73
  else {
72
74
  onChange(value === "" ? null : value);
73
75
  }
74
- }, [onChange]);
76
+ }, [allowedDateFormats, onChange]);
75
77
  const onDatePickerChange = (0, react_1.useCallback)((value) => {
76
78
  const parsedValue = (0, dayjs_1.default)(value);
77
79
  onChange(value ? parsedValue.format(exports.OUTPUT_DATE_FORMAT) : null);
78
80
  }, [onChange]);
79
- const value = getValue(props.value);
81
+ const value = getValue(props.value, displayDateFormat);
80
82
  const selectedDate = getSelectedDate(props.value);
81
83
  const parsedMinDate = getBoundaryDate(props.minDate);
82
84
  const parsedMaxDate = getBoundaryDate(props.maxDate);
83
- 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_DATE_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 }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent }))));
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, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent }))));
84
86
  });
85
87
  exports.DatePickerInput.displayName = "UxfUiDatePickerInput";
package/date-picker-input/date-picker-input.stories.js CHANGED
@@ -41,7 +41,8 @@ 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, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date }),
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 })));
45
46
  return (react_1.default.createElement(react_1.default.Fragment, null,
46
47
  react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
47
48
  react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
package/multi-combobox/_multi-combobox-base.js CHANGED
@@ -30,6 +30,7 @@ const classes_1 = require("@uxf/core/constants/classes");
30
30
  const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
31
31
  const composeRefs_1 = require("@uxf/core/utils/composeRefs");
32
32
  const cx_1 = require("@uxf/core/utils/cx");
33
+ const last_1 = require("@uxf/core/utils/last");
33
34
  const slugify_1 = require("@uxf/core/utils/slugify");
34
35
  const chip_1 = require("@uxf/ui/chip");
35
36
  const use_async_loading_1 = require("@uxf/ui/hooks/use-async-loading");
@@ -39,6 +40,18 @@ const input_1 = require("@uxf/ui/input");
39
40
  const label_1 = require("@uxf/ui/label");
40
41
  const react_3 = __importStar(require("react"));
41
42
  const checkbox_input_1 = require("../checkbox-input");
43
+ function handleInputKeyDownRecursion(selectedOptions, onRemove) {
44
+ const lastSelectedOption = (0, last_1.last)(selectedOptions);
45
+ if (!lastSelectedOption) {
46
+ return;
47
+ }
48
+ if (lastSelectedOption.disabled) {
49
+ handleInputKeyDownRecursion(selectedOptions.slice(0, -1), onRemove);
50
+ }
51
+ else {
52
+ onRemove(lastSelectedOption.id);
53
+ }
54
+ }
42
55
  exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
43
56
  var _a, _b, _c, _d, _e, _f, _g;
44
57
  const isAsync = !!props.loadOptions;
@@ -77,7 +90,7 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
77
90
  };
78
91
  const handleInputKeyDown = (e) => {
79
92
  if (e.key === "Backspace" && query === "" && selectedOptions.length > 0) {
80
- onRemove(selectedOptions[selectedOptions.length - 1].id);
93
+ handleInputKeyDownRecursion(selectedOptions, onRemove);
81
94
  }
82
95
  };
83
96
  const handleInputChange = (e) => setQuery(e.target.value);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "10.5.0",
3
+ "version": "10.6.0",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"