@headless-adminapp/fluent 0.0.17-alpha.46 → 0.0.17-alpha.48

package/App/AppHeaderContianer.js

@@ -34,7 +34,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
             background: react_components_1.tokens.colorBrandBackground,
             paddingInline: 8,
             gap: 8,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { role: "button", style: {
                             cursor: 'pointer',
                         }, onClick: onNavToggle, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: { color: 'white' } }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',

package/DataGrid/CustomizeColumns/CustomizeColumns.d.ts

@@ -1,6 +1,6 @@
 interface CustomizeColumnsProps {
-    opened: boolean;
-    onClose: () => void;
+    readonly opened: boolean;
+    readonly onClose: () => void;
 }
 export declare function CustomizeColumns({ onClose, opened }: CustomizeColumnsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/form/controls/DateTimeControl.d.ts

@@ -3,4 +3,4 @@ export interface DateTimeControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: DateTimeControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: Readonly<DateTimeControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateTimeControl.js

@@ -7,23 +7,104 @@ exports.DateTimeControl = DateTimeControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
+const react_timepicker_compat_1 = require("@fluentui/react-timepicker-compat");
+const locale_1 = require("@headless-adminapp/app/locale");
 const icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const react_1 = require("react");
+dayjs_1.default.extend(customParseFormat_1.default);
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
 function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
-    // const { shortDate: dateFormat } = useLocale();
-    // return (
-    //   <TimePicker
-    // )
-    return ((0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD HH:mm:ss') : '', 
-        // size="sm"
-        // error={error}
-        // maxDate={maxDate}
-        // minDate={minDate}
-        disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? date.toISOString() : null), allowTextInput: true, contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginRight: -4,
-                color: react_components_1.tokens.colorNeutralForeground2,
-            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }) }));
+    const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
+    const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat) : '');
+    const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
+    internalTimeValueRef.current = internalTimeValue;
+    (0, react_1.useEffect)(() => {
+        const updatedValue = value
+            ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat)
+            : '';
+        if (internalTimeValueRef.current !== updatedValue) {
+            setInternalTimeValue(updatedValue);
+        }
+    }, [value, timezone, timeFormat]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: react_components_1.tokens.spacingHorizontalS,
+        }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormat) : '', disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
+                    if (!date) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                    }
+                    else if (!value) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date).tz(timezone, true).toISOString());
+                    }
+                    else {
+                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date)
+                            .tz(timezone, true)
+                            .set('hour', (0, dayjs_1.default)(value).tz(timezone).hour())
+                            .set('minute', (0, dayjs_1.default)(value).tz(timezone).minute())
+                            .toISOString());
+                    }
+                }, 
+                // allowTextInput={true}
+                contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginRight: -4,
+                        color: react_components_1.tokens.colorNeutralForeground2,
+                    }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }), style: { flex: 1 }, input: {
+                    style: { minWidth: 0, width: '100%' },
+                } }), (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: { flex: 1, minWidth: 0 }, input: {
+                    style: { minWidth: 0 },
+                }, readOnly: readOnly || disabled || !value, selectedTime: value ? new Date(value) : null, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
+                    const dateValue = value
+                        ? (0, dayjs_1.default)(value).tz(timezone)
+                        : (0, dayjs_1.default)().tz(timezone);
+                    if (data.selectedTime) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(dateValue
+                            .set('hour', data.selectedTime.getHours())
+                            .set('minute', data.selectedTime.getMinutes())
+                            .toISOString());
+                    }
+                    else if (data.selectedTimeText) {
+                        let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
+                        if (!resolvedTime) {
+                            setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
+                            return;
+                        }
+                        const newValue = dateValue
+                            .set('hour', resolvedTime.getHours())
+                            .set('minute', resolvedTime.getMinutes())
+                            .toISOString();
+                        if (newValue !== value) {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                        }
+                        setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).tz(timezone).format(timeFormat) : '');
+                    }
+                }, onInput: (e) => {
+                    setInternalTimeValue(e.currentTarget.value);
+                }, onBlur: () => {
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                }, expandIcon: (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginRight: -4,
+                        color: react_components_1.tokens.colorNeutralForeground2,
+                    }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) })] }));
+}
+function resolveTimeValue(value, timeFormat) {
+    if (!value) {
+        return;
+    }
+    const time = (0, dayjs_1.default)(value, timeFormat);
+    if (!time.isValid()) {
+        return;
+    }
+    return time.toDate();
 }

package/form/controls/DurationControl.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
 import { ControlProps } from './types';
-export type DurationControlProps = ControlProps<number> & {};
+export type DurationControlProps = ControlProps<number>;
 export declare const DurationControl: FC<DurationControlProps>;

package/form/controls/IntegerControl.js

@@ -5,8 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable unused-imports/no-unused-vars */
 const react_components_1 = require("@fluentui/react-components");
 function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
-    console.log('IntegerControl', value);
-    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value, onChange: (e, data) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value !== null && value !== void 0 ? value : null, onChange: (e, data) => {
             if (data.value !== undefined) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(data.value);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.46",
+  "version": "0.0.17-alpha.48",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -29,8 +29,9 @@
   "license": "ISC",
   "dependencies": {
     "@fluentui/react-components": "9.54.4",
-    "@fluentui/react-datepicker-compat": "^0.4.43",
-    "@fluentui/react-nav-preview": "^0.5.1",
+    "@fluentui/react-datepicker-compat": "0.4.43",
+    "@fluentui/react-nav-preview": "0.5.1",
+    "@fluentui/react-timepicker-compat": "0.2.46",
     "@hookform/resolvers": "^3.9.0",
     "@tanstack/react-query": "5.51.1",
     "@tanstack/react-table": "^8.20.1",
@@ -48,5 +49,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "965e72659b066c00c257b06e04368cd7004a9a71"
+  "gitHead": "e8887232802a525648c316b2b8526b2571bc8b8c"
 }

package/types/index.d.ts

@@ -6,6 +6,7 @@ declare module '@headless-adminapp/icons/types' {
         Eye: Icon;
         EyeOff: Icon;
         Calendar: Icon;
+        Clock: Icon;
         ArrowLeft: Icon;
         ArrowRight: Icon;
         ArrowDown: Icon;