@uxf/ui 10.0.0-beta.54 → 10.0.0-beta.59

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 (16) hide show
  1. package/avatar-file-input/avatar-file-input.d.ts +1 -0
  2. package/avatar-file-input/avatar-file-input.js +3 -1
  3. package/css/avatar-file-input.css +1 -1
  4. package/date-picker/date-picker.d.ts +1 -0
  5. package/date-picker/date-picker.js +1 -0
  6. package/date-picker-input/date-picker-input.d.ts +1 -0
  7. package/date-picker-input/date-picker-input.js +1 -1
  8. package/date-range-picker/date-range-picker.d.ts +1 -0
  9. package/date-range-picker/date-range-picker.js +1 -0
  10. package/date-range-picker-input/date-range-picker-input.d.ts +1 -0
  11. package/date-range-picker-input/date-range-picker-input.js +1 -1
  12. package/datetime-picker/datetime-picker.d.ts +1 -0
  13. package/datetime-picker/datetime-picker.js +1 -1
  14. package/datetime-picker-input/datetime-picker-input.d.ts +1 -0
  15. package/datetime-picker-input/datetime-picker-input.js +1 -1
  16. package/package.json +1 -1
package/avatar-file-input/avatar-file-input.d.ts CHANGED
@@ -4,6 +4,7 @@ import { AvatarFileInputVariant } from "./theme";
4
4
  export interface AvatarFileInputProps extends FileInputBaseProps {
5
5
  helperText?: ReactNode;
6
6
  label?: ReactNode;
7
+ changeFileLabel?: ReactNode;
7
8
  variant?: AvatarFileInputVariant;
8
9
  }
9
10
  export declare const AvatarFileInput: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
package/avatar-file-input/avatar-file-input.js CHANGED
@@ -41,11 +41,13 @@ exports.AvatarFileInput = (0, forwardRef_1.forwardRef)("UxfUiAvatarFileInput", (
41
41
  const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
42
42
  const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
43
43
  const stateClassNames = (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID);
44
+ const label = props.value && props.changeFileLabel ? props.changeFileLabel : props.label;
44
45
  return (react_1.default.createElement("div", { className: `uxf-avatar-file-input uxf-avatar-file-input--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
45
46
  react_1.default.createElement("div", { className: "uxf-avatar-file-input__label-wrapper" },
46
47
  props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: (0, cx_1.cx)("uxf-avatar-file-input__image", stateClassNames), src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label", stateClassNames), htmlFor: id, tabIndex: 0 },
47
48
  react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-avatar-file-input__label-icon", stateClassNames), name: "cloud", size: 28 }))),
48
- props.label && typeof props.label === "string" ? (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label-text", stateClassNames), htmlFor: id, tabIndex: 0 }, props.label)) : (props.label)),
49
+ (props.label && typeof props.label === "string") ||
50
+ (props.value && props.changeFileLabel && typeof props.changeFileLabel === "string") ? (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label-text", stateClassNames), htmlFor: id, tabIndex: 0 }, label)) : (label)),
49
51
  react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, value: props.value }),
50
52
  props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", errorId && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))));
51
53
  });
package/css/avatar-file-input.css CHANGED
@@ -84,7 +84,7 @@
84
84
  }
85
85
 
86
86
  &__label-text {
87
- border: theme("borderWidth.DEFAULT") theme("colors.gray.300");
87
+ border: theme("borderWidth.DEFAULT") solid theme("colors.gray.300");
88
88
  padding: theme("spacing[1.5]") theme("spacing.3");
89
89
  text-align: center;
90
90
 
package/date-picker/date-picker.d.ts CHANGED
@@ -7,5 +7,6 @@ export interface DatePickerProps {
7
7
  minDate?: Date;
8
8
  maxDate?: Date;
9
9
  preventScroll?: boolean;
10
+ unavailableDates?: Date[];
10
11
  }
11
12
  export declare const DatePicker: FC<DatePickerProps>;
package/date-picker/date-picker.js CHANGED
@@ -20,6 +20,7 @@ const DatePicker = (props) => {
20
20
  minBookingDate: props.minDate,
21
21
  maxBookingDate: props.maxDate,
22
22
  preventScroll: props.preventScroll,
23
+ unavailableDates: props.unavailableDates,
23
24
  });
24
25
  return (react_1.default.createElement(date_picker_context_1.DatePickerContext.Provider, { value: datePickerProps },
25
26
  react_1.default.createElement(date_picker_content_1.DatePickerContent, null)));
package/date-picker-input/date-picker-input.d.ts CHANGED
@@ -8,5 +8,6 @@ export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string
8
8
  triggerElement?: ReactNode;
9
9
  minDate?: string;
10
10
  maxDate?: string;
11
+ unavailableDates?: Date[];
11
12
  }
12
13
  export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;
package/date-picker-input/date-picker-input.js CHANGED
@@ -80,6 +80,6 @@ exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
80
80
  const selectedDate = getSelectedDate(props.value);
81
81
  const parsedMinDate = getBoundaryDate(props.minDate);
82
82
  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 }))));
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 }))));
84
84
  });
85
85
  exports.DatePickerInput.displayName = "UxfUiDatePickerInput";
package/date-range-picker/date-range-picker.d.ts CHANGED
@@ -5,5 +5,6 @@ export interface DateRangePickerProps {
5
5
  numberOfMonths?: number;
6
6
  onChange: (data: DateRangePickerValueType) => void;
7
7
  selectedDates: DateRangePickerValueType;
8
+ unavailableDates?: Date[];
8
9
  }
9
10
  export declare const DateRangePicker: FC<PropsWithChildren<DateRangePickerProps>>;
package/date-range-picker/date-range-picker.js CHANGED
@@ -42,6 +42,7 @@ const DateRangePicker = (props) => {
42
42
  numberOfMonths: (_b = props.numberOfMonths) !== null && _b !== void 0 ? _b : 1,
43
43
  onDatesChange,
44
44
  startDate: ((_c = props.selectedDates) === null || _c === void 0 ? void 0 : _c.from) || null,
45
+ unavailableDates: props.unavailableDates,
45
46
  });
46
47
  return (react_1.default.createElement(date_range_picker_context_1.DateRangePickerContext.Provider, { value: dateRangePickerProps },
47
48
  react_1.default.createElement(date_range_picker_content_1.DateRangePickerContent, null)));
package/date-range-picker-input/date-range-picker-input.d.ts CHANGED
@@ -11,5 +11,6 @@ export interface DateRangePickerInputProps extends Omit<InputWithPopoverProps<st
11
11
  numberOfMonths?: number;
12
12
  placeholder?: string;
13
13
  triggerElement?: ReactNode;
14
+ unavailableDates?: Date[];
14
15
  }
15
16
  export declare const DateRangePickerInput: React.ForwardRefExoticComponent<DateRangePickerInputProps & React.RefAttributes<HTMLInputElement>>;
package/date-range-picker-input/date-range-picker-input.js CHANGED
@@ -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, { closePopoverHandler: close, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, selectedDates: selectedDates }))));
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, { closePopoverHandler: close, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, selectedDates: selectedDates, unavailableDates: props.unavailableDates }))));
61
61
  });
62
62
  exports.DateRangePickerInput.displayName = "UxfUiDatePickerInput";
package/datetime-picker/datetime-picker.d.ts CHANGED
@@ -9,5 +9,6 @@ export interface DatetimePickerProps {
9
9
  value: InputWithPopoverProps<string | null>["value"];
10
10
  minDate?: Date;
11
11
  maxDate?: Date;
12
+ unavailableDates?: Date[];
12
13
  }
13
14
  export declare const DatetimePicker: FC<DatetimePickerProps>;
package/datetime-picker/datetime-picker.js CHANGED
@@ -87,7 +87,7 @@ const DatetimePicker = (props) => {
87
87
  react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__tab uxf-tabs__tab--segmented uxf-datetime-picker__tab", selectedTab === "date" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("date") }, "Datum"),
88
88
  react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__tab uxf-tabs__tab--segmented uxf-datetime-picker__tab", selectedTab === "time" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("time") }, "\u010Cas"))),
89
89
  react_1.default.createElement("div", { className: "uxf-tabs__panels" },
90
- selectedTab === "date" && (react_1.default.createElement(date_picker_1.DatePicker, { maxDate: props.maxDate, minDate: props.minDate, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate })),
90
+ selectedTab === "date" && (react_1.default.createElement(date_picker_1.DatePicker, { maxDate: props.maxDate, minDate: props.minDate, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates })),
91
91
  selectedTab === "time" && react_1.default.createElement(time_picker_1.TimePicker, { onChange: onTimePickerChange, selectedTime: selectedTime }))));
92
92
  };
93
93
  exports.DatetimePicker = DatetimePicker;
package/datetime-picker-input/datetime-picker-input.d.ts CHANGED
@@ -8,5 +8,6 @@ export interface DatetimePickerInputProps extends Omit<InputWithPopoverProps<str
8
8
  triggerElement?: ReactNode;
9
9
  minDate?: string;
10
10
  maxDate?: string;
11
+ unavailableDates?: Date[];
11
12
  }
12
13
  export declare const DatetimePickerInput: React.ForwardRefExoticComponent<DatetimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
package/datetime-picker-input/datetime-picker-input.js CHANGED
@@ -78,6 +78,6 @@ exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
78
78
  const parsedMinDate = getBoundaryDate(props.minDate);
79
79
  const parsedMaxDate = getBoundaryDate(props.maxDate);
80
80
  return (react_1.default.createElement(react_1.default.Fragment, null,
81
- 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 }) => (react_1.default.createElement(datetime_picker_1.DatetimePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onChange, value: props.value })))));
81
+ 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 }) => (react_1.default.createElement(datetime_picker_1.DatetimePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onChange, value: props.value, unavailableDates: props.unavailableDates })))));
82
82
  });
83
83
  exports.DatetimePickerInput.displayName = "UxfUiDatePickerInput";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "10.0.0-beta.54",
3
+ "version": "10.0.0-beta.59",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"