@uxf/ui 11.30.1 → 11.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.30.1",
+  "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;