@uxf/ui 11.30.0 → 11.31.0

package/css/dialog.css

@@ -50,7 +50,7 @@
         }
     }
 
-    &--variant-rightDrawer {
+    &--variant-drawer-right {
         .uxf-dialog__body {
             @screen sm {
                 align-items: stretch;

package/datetime-picker-input/datetime-picker-input.js

@@ -35,6 +35,7 @@ const react_1 = __importStar(require("react"));
 const _input_with_popover_1 = require("../_input-with-popover");
 const datetime_picker_1 = require("../datetime-picker");
 const icon_1 = require("../icon");
+const get_datetime_string_1 = require("./get-datetime-string");
 (0, dayjs_1.extend)(customParseFormat_1.default);
 exports.ALLOWED_DATETIME_FORMAT = [
     "D. M. YYYY H:mm",
@@ -75,12 +76,10 @@ exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
             onChange(value === "" ? null : value);
         }
     }, [onChange]);
-    const value = getValue(props.value);
+    const value = getValue(props.value); // hodnota zobrazená v textinputu (human readable)
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        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, is_not_nil_1.isNotNil)(value)
-                ? (0, dayjs_1.default)(value).format("YYYY-MM-DD[T]HH:mm:ssZ")
-                : null, 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 })))));
+        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 })))));
 });
 exports.DatetimePickerInput.displayName = "UxfUiDatePickerInput";

package/datetime-picker-input/get-datetime-string.d.ts

@@ -0,0 +1,6 @@
+import { DatetimeString } from "@uxf/core/date";
+import { Nullish } from "@uxf/core/types";
+/**
+ * @deprecated tuhle metodu nepoužívat - něco podobného se musí přenést do @uxf/core
+ */
+export declare function getDatetimeString(value: string | Nullish): DatetimeString | null;

package/datetime-picker-input/get-datetime-string.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDatetimeString = void 0;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const dayjs_1 = __importDefault(require("dayjs"));
+/**
+ * @deprecated tuhle metodu nepoužívat - něco podobného se musí přenést do @uxf/core
+ */
+function getDatetimeString(value) {
+    if ((0, is_nil_1.isNil)(value)) {
+        return null;
+    }
+    const date = (0, dayjs_1.default)(value, ["YYYY-MM-DD[T]HH:mm:ssZ", "YYYY-MM-DD[T]HH:mm:ss.SSS[Z]"]);
+    return date.isValid() ? date.format("YYYY-MM-DD[T]HH:mm:ssZ") : null;
+}
+exports.getDatetimeString = getDatetimeString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.30.0",
+  "version": "11.31.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,10 @@
   "dependencies": {
     "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.29.0",
-    "@uxf/core-react": "11.29.0",
+    "@uxf/core": "11.31.0",
+    "@uxf/core-react": "11.31.0",
     "@uxf/datepicker": "11.25.0",
-    "@uxf/styles": "11.29.0",
+    "@uxf/styles": "11.31.0",
     "color2k": "2.0.3",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",

package/time-picker-input/time-picker-input.d.ts

@@ -1,10 +1,17 @@
+import { TimeString } from "@uxf/core/date";
 import React, { ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
+import { ControlProps } from "../types";
 export declare const ALLOWED_TIME_FORMAT: string[];
 export declare const DISPLAY_TIME_FORMAT = "H:mm";
 export declare const OUTPUT_TIME_FORMAT = "HH:mm:ss";
+interface CustomTimePickerProps extends ControlProps<TimeString | null> {
+    onClose: () => void;
+}
 export interface TimePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
     placeholder?: string;
     triggerElement?: ReactNode;
+    CustomTimePicker?: (props: CustomTimePickerProps) => ReactNode;
 }
 export declare const TimePickerInput: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/time-picker-input/time-picker-input.js

@@ -27,7 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerInput = exports.OUTPUT_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = void 0;
+const is_time_string_1 = require("@uxf/core/date/is-time-string");
 const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const dayjs_1 = __importStar(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const react_1 = __importStar(require("react"));
@@ -75,6 +77,6 @@ exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     }, [onChange]);
     const value = getValue(props.value);
     const selectedTime = getSelectedTime(props.value);
-    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 }) => (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, preventScroll: true, selectedTime: selectedTime }))));
+    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 }))));
 });
 exports.TimePickerInput.displayName = "UxfUiTimePickerInput";

package/time-picker-input/time-picker-input.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./time-picker-input").TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/time-picker-input/time-picker-input.stories.js

@@ -26,22 +26,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const icon_1 = require("@uxf/ui//icon");
 const react_1 = __importStar(require("react"));
+const button_1 = require("../button");
 const action_1 = require("../utils/action");
 const time_picker_input_1 = require("./time-picker-input");
-exports.default = {
-    title: "UI/TimePickerInput",
-    component: time_picker_input_1.TimePickerInput,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
-    const testTimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" },
         react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", label: "\u010Cas \u010Dehokoliv", name: "time", onChange: onChange, placeholder: "Zadejte \u010Das...", value: value }),
         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 }),
         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 }),
         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 }),
-        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 })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testTimePickers)));
+        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 }),
+        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: () => {
+                    props.onChange("15:00:00");
+                    props.onClose();
+                } }, "15:00")) })));
 }
 exports.Default = Default;