@uxf/ui 1.0.0-beta.83 → 1.0.0-beta.85

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 (9) hide show
  1. package/css/date-picker-input.css +1 -1
  2. package/css/time-picker-input.css +4 -1
  3. package/date-picker-input/date-picker-input.js +27 -2
  4. package/date-picker-input/date-picker-input.stories.d.ts +7 -0
  5. package/date-picker-input/date-picker-input.stories.js +9 -0
  6. package/date-picker-input/date-picker-year.js +1 -1
  7. package/package.json +1 -1
  8. package/time-picker-input/time-picker-input.js +27 -2
  9. package/time-picker-input/time-picker.js +2 -2
package/css/date-picker-input.css CHANGED
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  &__popover {
37
- @apply absolute left-0 z-dropdown mt-3 max-w-md rounded-lg border p-2 shadow-xl;
37
+ @apply absolute left-0 z-dropdown max-w-md rounded-lg border p-2 shadow-xl overflow-y-auto;
38
38
 
39
39
  :root .light & {
40
40
  @apply bg-white border-gray-500;
package/css/time-picker-input.css CHANGED
@@ -1,6 +1,9 @@
1
1
  .uxf-time-picker-input {
2
2
  @apply w-full rounded-lg text-base;
3
3
 
4
+ -webkit-user-select: none;
5
+ user-select: none;
6
+
4
7
  &__element {
5
8
  @apply w-full bg-transparent outline-none;
6
9
 
@@ -34,7 +37,7 @@
34
37
  }
35
38
 
36
39
  &__popover {
37
- @apply absolute left-0 z-dropdown mt-3 max-w-md rounded-lg border p-2 shadow-xl;
40
+ @apply absolute left-0 z-dropdown max-w-md rounded-lg border p-2 shadow-xl overflow-y-auto;
38
41
 
39
42
  :root .light & {
40
43
  @apply bg-white border-gray-500;
package/date-picker-input/date-picker-input.js CHANGED
@@ -32,6 +32,8 @@ const forwardRef_1 = require("@uxf/core/utils/forwardRef");
32
32
  const react_2 = require("@headlessui/react");
33
33
  const date_picker_provider_1 = require("./date-picker-provider");
34
34
  const localized_dayjs_1 = require("../utils/localized-dayjs");
35
+ const composeRefs_1 = require("@uxf/core/utils/composeRefs");
36
+ const react_dom_1 = require("@floating-ui/react-dom");
35
37
  exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props, ref) => {
36
38
  var _a;
37
39
  const [isFocused, setIsFocused] = (0, react_1.useState)(false);
@@ -49,12 +51,35 @@ exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props
49
51
  setIsFocused(false);
50
52
  (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
51
53
  };
54
+ const floatingDatePicker = (0, react_dom_1.useFloating)({
55
+ placement: "bottom",
56
+ middleware: [
57
+ (0, react_dom_1.offset)(8),
58
+ (0, react_dom_1.flip)(),
59
+ (0, react_dom_1.shift)(),
60
+ (0, react_dom_1.size)({
61
+ apply({ availableHeight, availableWidth, elements, strategy, x, y }) {
62
+ Object.assign(elements.floating.style, {
63
+ left: x + "px",
64
+ maxHeight: Math.max(50, availableHeight) + "px",
65
+ maxWidth: availableWidth,
66
+ position: strategy,
67
+ top: y + "px",
68
+ });
69
+ },
70
+ }),
71
+ ],
72
+ whileElementsMounted: (reference, floating, update) => (0, react_dom_1.autoUpdate)(reference, floating, update, {
73
+ elementResize: typeof ResizeObserver !== "undefined",
74
+ }),
75
+ });
76
+ const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, floatingDatePicker.reference), [ref, floatingDatePicker.reference]);
52
77
  return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
53
78
  react_1.default.createElement(react_2.Popover, { className: "relative" },
54
- react_1.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-date-picker-input__wrapper" },
79
+ react_1.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-date-picker-input__wrapper", ref: stableRef },
55
80
  react_1.default.createElement("span", { className: "uxf-date-picker-input__left-element" }, props.leftElement),
56
81
  react_1.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-date-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "none", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte datum...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value ? (0, localized_dayjs_1.localizedDayjs)(props.value).format("l") : "" }),
57
82
  react_1.default.createElement("span", { className: "uxf-date-picker-input__right-element" }, props.rightElement)),
58
83
  !props.isDisabled && !props.isReadOnly && (react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
59
- react_1.default.createElement(react_2.Popover.Panel, { className: "uxf-date-picker-input__popover", static: true }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value }))))))));
84
+ react_1.default.createElement(react_2.Popover.Panel, { className: "uxf-date-picker-input__popover", ref: floatingDatePicker.floating, static: true }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value }))))))));
60
85
  });
package/date-picker-input/date-picker-input.stories.d.ts CHANGED
@@ -1,7 +1,14 @@
1
+ /// <reference types="mdx" />
1
2
  import React from "react";
3
+ import Docs from "./date-picker.docs.mdx";
2
4
  declare const _default: {
3
5
  title: string;
4
6
  component: React.ForwardRefExoticComponent<import("./date-picker-input").DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;
7
+ parameters: {
8
+ docs: {
9
+ page: typeof Docs;
10
+ };
11
+ };
5
12
  };
6
13
  export default _default;
7
14
  export declare function Default(): JSX.Element;
package/date-picker-input/date-picker-input.stories.js CHANGED
@@ -22,14 +22,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
25
28
  Object.defineProperty(exports, "__esModule", { value: true });
26
29
  exports.Default = void 0;
27
30
  const react_1 = __importStar(require("react"));
28
31
  const date_picker_input_1 = require("./date-picker-input");
29
32
  const icon_1 = require("../icon");
33
+ const date_picker_docs_mdx_1 = __importDefault(require("./date-picker.docs.mdx"));
30
34
  exports.default = {
31
35
  title: "UI/DatePickerInput",
32
36
  component: date_picker_input_1.DatePickerInput,
37
+ parameters: {
38
+ docs: {
39
+ page: date_picker_docs_mdx_1.default,
40
+ },
41
+ },
33
42
  };
34
43
  function Default() {
35
44
  const [date, setDate] = (0, react_1.useState)(null);
package/date-picker-input/date-picker-year.js CHANGED
@@ -64,7 +64,7 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
64
64
  react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevYear, isIconButton: true, onClick: canGoToPrevYear ? handleGoToPrevYear : undefined, title: "P\u0159edchoz\u00ED rok", variant: "text" },
65
65
  react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
66
66
  react_1.default.createElement(button_1.Button, { variant: "text", onClick: handleYearClick }, yearLabel),
67
- react_1.default.createElement(button_1.Button, { disabled: !canGoToNextYear, isIconButton: true, onClick: canGoToNextYear ? handleGoToNextYear : undefined, title: "Dal\u0161\u00ED rok", variant: "text" },
67
+ react_1.default.createElement(button_1.Button, { disabled: !canGoToNextYear, isIconButton: true, onClick: canGoToNextYear ? handleGoToNextYear : undefined, title: "Nadch\u00E1zej\u00EDc\u00ED rok", variant: "text" },
68
68
  react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
69
69
  react_1.default.createElement("div", { className: "uxf-date-picker__year-calendar" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(month.date).month() === currentMonth &&
70
70
  "uxf-date-picker__cell__month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date) }, month.monthLabel))))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.83",
3
+ "version": "1.0.0-beta.85",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/time-picker-input/time-picker-input.js CHANGED
@@ -31,6 +31,8 @@ const form_control_1 = require("../form-control");
31
31
  const forwardRef_1 = require("@uxf/core/utils/forwardRef");
32
32
  const react_2 = require("@headlessui/react");
33
33
  const time_picker_1 = require("./time-picker");
34
+ const react_dom_1 = require("@floating-ui/react-dom");
35
+ const composeRefs_1 = require("@uxf/core/utils/composeRefs");
34
36
  exports.TimePickerInput = (0, forwardRef_1.forwardRef)("TimePickerInput", (props, ref) => {
35
37
  var _a;
36
38
  const [isFocused, setIsFocused] = (0, react_1.useState)(false);
@@ -48,16 +50,39 @@ exports.TimePickerInput = (0, forwardRef_1.forwardRef)("TimePickerInput", (props
48
50
  setIsFocused(false);
49
51
  (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
50
52
  };
53
+ const floatingTimePicker = (0, react_dom_1.useFloating)({
54
+ placement: "bottom",
55
+ middleware: [
56
+ (0, react_dom_1.offset)(8),
57
+ (0, react_dom_1.flip)(),
58
+ (0, react_dom_1.shift)(),
59
+ (0, react_dom_1.size)({
60
+ apply({ availableHeight, availableWidth, elements, strategy, x, y }) {
61
+ Object.assign(elements.floating.style, {
62
+ left: x + "px",
63
+ maxHeight: Math.max(50, availableHeight) + "px",
64
+ maxWidth: availableWidth,
65
+ position: strategy,
66
+ top: y + "px",
67
+ });
68
+ },
69
+ }),
70
+ ],
71
+ whileElementsMounted: (reference, floating, update) => (0, react_dom_1.autoUpdate)(reference, floating, update, {
72
+ elementResize: typeof ResizeObserver !== "undefined",
73
+ }),
74
+ });
75
+ const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, floatingTimePicker.reference), [ref, floatingTimePicker.reference]);
51
76
  return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
52
77
  react_1.default.createElement(react_2.Popover, { className: "relative" },
53
- react_1.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-time-picker-input__wrapper" },
78
+ react_1.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-time-picker-input__wrapper", ref: stableRef },
54
79
  react_1.default.createElement("span", { className: "uxf-time-picker-input__left-element" }, props.leftElement),
55
80
  react_1.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-time-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "text", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte \u010Das...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value
56
81
  ? `${props.value.hour}:${props.value.minute < 10 ? "0" + props.value.minute : props.value.minute}`
57
82
  : "" }),
58
83
  react_1.default.createElement("span", { className: "uxf-time-picker-input__right-element" }, props.rightElement)),
59
84
  !props.isDisabled && !props.isReadOnly && (react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
60
- react_1.default.createElement(react_2.Popover.Panel, { className: "uxf-time-picker-input__popover", static: true }, ({ close }) => {
85
+ react_1.default.createElement(react_2.Popover.Panel, { className: "uxf-time-picker-input__popover", ref: floatingTimePicker.floating, static: true }, ({ close }) => {
61
86
  var _a;
62
87
  return props.onChange ? (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: props.onChange, selectedTime: (_a = props.value) !== null && _a !== void 0 ? _a : null })) : (react_1.default.createElement(react_1.default.Fragment, null));
63
88
  }))))));
package/time-picker-input/time-picker.js CHANGED
@@ -43,14 +43,14 @@ const TimePicker = (props) => {
43
43
  return ({
44
44
  global: (react_1.default.createElement("div", { className: "uxf-time-picker__global" },
45
45
  react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
46
- react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: "Dal\u0161\u00ED", variant: "text" },
46
+ react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
47
47
  react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
48
48
  react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour) !== null && _b !== void 0 ? _b : "0"),
49
49
  react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
50
50
  react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))),
51
51
  react_1.default.createElement("div", null, ":"),
52
52
  react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
53
- react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextMinute, title: "Dal\u0161\u00ED", variant: "text" },
53
+ react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextMinute, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
54
54
  react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
55
55
  react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("minute") }, props.selectedTime
56
56
  ? props.selectedTime.minute < 10