@headless-adminapp/fluent 0.0.17-alpha.45 → 0.0.17-alpha.47

package/PageEntityForm/StandardControl.js

@@ -15,11 +15,13 @@ const CurrencyControl_1 = require("../form/controls/CurrencyControl");
 const DateControl_1 = require("../form/controls/DateControl");
 const DateRangeControl_1 = require("../form/controls/DateRangeControl");
 const DateTimeControl_1 = require("../form/controls/DateTimeControl");
+const DecimalControl_1 = require("../form/controls/DecimalControl");
+const DurationControl_1 = require("../form/controls/DurationControl");
 const EmailControl_1 = require("../form/controls/EmailControl");
+const IntegerControl_1 = require("../form/controls/IntegerControl");
 const LookupControl_1 = require("../form/controls/LookupControl");
 const MultiSelectControl_1 = __importDefault(require("../form/controls/MultiSelectControl"));
 const MultiSelectLookupControl_1 = require("../form/controls/MultiSelectLookupControl");
-const NumberControl_1 = require("../form/controls/NumberControl");
 const RichTextControl_1 = require("../form/controls/RichTextControl");
 const SelectControl_1 = __importDefault(require("../form/controls/SelectControl"));
 const SwitchControl_1 = require("../form/controls/SwitchControl");
@@ -28,7 +30,7 @@ const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
 const UrlControl_1 = require("../form/controls/UrlControl");
 const StandardControl = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     const { attribute, label: _label, isError, 
     // errorMessage,
     name, value, onBlur, onChange, 
@@ -90,8 +92,23 @@ const StandardControl = (props) => {
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
             }
         case 'number': {
-            const Control = (_h = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _h !== void 0 ? _h : NumberControl_1.NumberControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+            switch (attribute.format) {
+                case 'decimal': {
+                    const Control = (_h = componentStore_1.componentStore.getComponent('Form.DecimalControl')) !== null && _h !== void 0 ? _h : DecimalControl_1.DecimalControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, decimalPlaces: attribute.decimalPlaces }));
+                }
+                case 'integer': {
+                    const Control = (_j = componentStore_1.componentStore.getComponent('Form.IntegerControl')) !== null && _j !== void 0 ? _j : IntegerControl_1.IntegerControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                }
+                case 'duration': {
+                    const Control = (_k = componentStore_1.componentStore.getComponent('Form.DurationControl')) !== null && _k !== void 0 ? _k : DurationControl_1.DurationControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                }
+                default: {
+                    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+                }
+            }
         }
         case 'date': {
             const controlProps = {
@@ -105,11 +122,11 @@ const StandardControl = (props) => {
                 readOnly,
             };
             if (attribute.format === 'datetime') {
-                const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _j !== void 0 ? _j : DateTimeControl_1.DateTimeControl;
+                const Control = (_l = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _l !== void 0 ? _l : DateTimeControl_1.DateTimeControl;
                 return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
             else {
-                const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _k !== void 0 ? _k : DateControl_1.DateControl;
+                const Control = (_m = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _m !== void 0 ? _m : DateControl_1.DateControl;
                 return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
         }
@@ -124,39 +141,39 @@ const StandardControl = (props) => {
                 disabled: isDisabled,
                 readOnly,
             };
-            const Control = (_l = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _l !== void 0 ? _l : DateRangeControl_1.DateRangeControl;
+            const Control = (_o = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _o !== void 0 ? _o : DateRangeControl_1.DateRangeControl;
             return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
         }
         case 'money': {
-            const Control = (_m = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _m !== void 0 ? _m : CurrencyControl_1.CurrencyControl;
+            const Control = (_p = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _p !== void 0 ? _p : CurrencyControl_1.CurrencyControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'lookup': {
-            const Control = (_o = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _o !== void 0 ? _o : LookupControl_1.LookupControl;
+            const Control = (_q = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _q !== void 0 ? _q : LookupControl_1.LookupControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'lookups': {
-            const Control = (_p = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _p !== void 0 ? _p : MultiSelectLookupControl_1.MultiSelectLookupControl;
+            const Control = (_r = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _r !== void 0 ? _r : MultiSelectLookupControl_1.MultiSelectLookupControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'boolean': {
-            const Control = (_q = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _q !== void 0 ? _q : SwitchControl_1.SwitchControl;
+            const Control = (_s = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _s !== void 0 ? _s : SwitchControl_1.SwitchControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'choice': {
-            const Control = (_r = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _r !== void 0 ? _r : SelectControl_1.default;
+            const Control = (_t = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _t !== void 0 ? _t : SelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'choices': {
-            const Control = (_s = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _s !== void 0 ? _s : MultiSelectControl_1.default;
+            const Control = (_u = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _u !== void 0 ? _u : MultiSelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'attachment': {
-            const Control = (_t = componentStore_1.componentStore.getComponent('Form.AttachmentControl')) !== null && _t !== void 0 ? _t : AttachmentControl_1.AttachmentControl;
+            const Control = (_v = componentStore_1.componentStore.getComponent('Form.AttachmentControl')) !== null && _v !== void 0 ? _v : AttachmentControl_1.AttachmentControl;
             return ((0, jsx_runtime_1.jsx)(Control, { fileService: fileService, format: attribute.format, location: attribute.location, name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, fileServiceContext: props.fileServiceContext }));
         }
         case 'attachments': {
-            const Control = (_u = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _u !== void 0 ? _u : AttachmentsControl_1.AttachmentsControl;
+            const Control = (_w = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _w !== void 0 ? _w : AttachmentsControl_1.AttachmentsControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         // case 'attachment': {

package/form/FormControl.js

@@ -21,11 +21,11 @@ const react_1 = require("react");
 const CurrencyControl_1 = require("./controls/CurrencyControl");
 const DateControl_1 = require("./controls/DateControl");
 const DateTimeControl_1 = require("./controls/DateTimeControl");
+const DecimalControl_1 = require("./controls/DecimalControl");
 const EmailControl_1 = require("./controls/EmailControl");
 const LookupControl_1 = require("./controls/LookupControl");
 const MultiSelectControl_1 = __importDefault(require("./controls/MultiSelectControl"));
 const MultiSelectLookupControl_1 = require("./controls/MultiSelectLookupControl");
-const NumberControl_1 = require("./controls/NumberControl");
 const PasswordControl_1 = require("./controls/PasswordControl");
 const SelectControl_1 = __importDefault(require("./controls/SelectControl"));
 const SwitchControl_1 = require("./controls/SwitchControl");
@@ -53,7 +53,7 @@ function Control(props) {
         case 'password':
             return ((0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'number':
-            return ((0, jsx_runtime_1.jsx)(NumberControl_1.NumberControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return ((0, jsx_runtime_1.jsx)(DecimalControl_1.DecimalControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'currency':
             return ((0, jsx_runtime_1.jsx)(CurrencyControl_1.CurrencyControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'date':

package/form/controls/DateControl.js

@@ -5,8 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateControl = DateControl;
 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 locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
 const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
@@ -21,5 +23,11 @@ function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
         // error={error}
         // maxDate={maxDate}
         // minDate={minDate}
-        disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormats.short) : '', value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? (0, dayjs_1.default)(date).tz(timezone).startOf('day').toISOString() : null), strings: datePickerStrings }));
+        disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormats.short) : '', value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? (0, dayjs_1.default)(date).tz(timezone).startOf('day').toISOString() : null), strings: datePickerStrings, 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 }) }) }));
 }

package/form/controls/DateTimeControl.js

@@ -5,19 +5,97 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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 icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const react_1 = require("react");
+dayjs_1.default.extend(customParseFormat_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, 
-        // inputFormat={inputFormat}
-        value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? date.toISOString() : null) }));
+    const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).format('hh:mm A') : '');
+    const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
+    internalTimeValueRef.current = internalTimeValue;
+    (0, react_1.useEffect)(() => {
+        const updatedValue = value ? (0, dayjs_1.default)(value).format('hh:mm A') : '';
+        if (internalTimeValueRef.current !== updatedValue) {
+            setInternalTimeValue(updatedValue);
+        }
+    }, [value]);
+    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).format('YYYY-MM-DD') : ''), 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(date.toISOString());
+                    }
+                    else {
+                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date)
+                            .set('hour', (0, dayjs_1.default)(value).hour())
+                            .set('minute', (0, dayjs_1.default)(value).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 ? new Date(value) : new Date();
+                    if (data.selectedTime) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(dateValue)
+                            .set('hour', data.selectedTime.getHours())
+                            .set('minute', data.selectedTime.getMinutes())
+                            .toISOString());
+                    }
+                    else if (data.selectedTimeText) {
+                        let resolvedTime = resolveTimeValue(data.selectedTimeText);
+                        if (!resolvedTime) {
+                            setInternalTimeValue(value ? (0, dayjs_1.default)(value).format('hh:mm A') : '');
+                            return;
+                        }
+                        const newValue = (0, dayjs_1.default)(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).format('hh:mm A') : '');
+                    }
+                }, 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) {
+    if (!value) {
+        return;
+    }
+    const time = (0, dayjs_1.default)(value, 'hh:mm A');
+    console.log('resolveTimeValue', time);
+    if (!time.isValid()) {
+        return;
+    }
+    return time.toDate();
 }

package/form/controls/DecimalControl.d.ts

@@ -0,0 +1,5 @@
+import { ControlProps } from './types';
+export interface DecimalControlProps extends ControlProps<number> {
+    decimalPlaces?: number;
+}
+export declare function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, }: DecimalControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/DecimalControl.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DecimalControl = DecimalControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable unused-imports/no-unused-vars */
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, }) {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
+    const internalValueRef = (0, react_1.useRef)(internalValue);
+    internalValueRef.current = internalValue;
+    (0, react_1.useEffect)(() => {
+        let _value = '';
+        if (typeof value === 'number') {
+            _value = value.toString();
+        }
+        if (!_value && internalValueRef.current === '-') {
+            return;
+        }
+        if (internalValueRef.current !== _value) {
+            setInternalValue(_value);
+        }
+    }, [value]);
+    const handleChange = (e) => {
+        let value = e.target.value;
+        if (!value) {
+            setInternalValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        value = value.replace(',', '');
+        if (value === '-') {
+            setInternalValue('-');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        if (isNaN(Number(value))) {
+            return;
+        }
+        if (decimalPlaces) {
+            const parts = value.split('.');
+            if (parts.length > 1) {
+                value = `${parts[0]}.${parts[1].slice(0, decimalPlaces)}`;
+            }
+        }
+        setInternalValue(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), disabled: disabled, readOnly: readOnly, style: {
+            width: '100%',
+        } }));
+}

package/form/controls/DurationControl.d.ts

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

package/form/controls/DurationControl.js

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DurationControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const useStyles = (0, react_components_1.makeStyles)({
+    listbox: {
+        maxHeight: '300px !important',
+    },
+});
+const options = [
+    { text: '1 minute', value: '1' },
+    {
+        text: '5 minutes',
+        value: '5',
+    },
+    {
+        text: '15 minutes',
+        value: '15',
+    },
+    {
+        text: '30 minutes',
+        value: '30',
+    },
+    {
+        text: '45 minutes',
+        value: '45',
+    },
+    {
+        text: '1 hour',
+        value: '60',
+    },
+    {
+        text: '1.5 hours',
+        value: '90',
+    },
+    {
+        text: '2 hours',
+        value: '120',
+    },
+    {
+        text: '2.5 hours',
+        value: '150',
+    },
+    {
+        text: '3 hours',
+        value: '180',
+    },
+    {
+        text: '3.5 hours',
+        value: '210',
+    },
+    {
+        text: '4 hours',
+        value: '240',
+    },
+    {
+        text: '4.5 hours',
+        value: '270',
+    },
+    {
+        text: '5 hours',
+        value: '300',
+    },
+    {
+        text: '5.5 hours',
+        value: '330',
+    },
+    {
+        text: '6 hours',
+        value: '360',
+    },
+    {
+        text: '6.5 hours',
+        value: '390',
+    },
+    {
+        text: '7 hours',
+        value: '420',
+    },
+    {
+        text: '7.5 hours',
+        value: '450',
+    },
+    {
+        text: '8 hours',
+        value: '480',
+    },
+    {
+        text: '1 day',
+        value: '1440',
+    },
+    {
+        text: '2 days',
+        value: '2880',
+    },
+    {
+        text: '3 days',
+        value: '4320',
+    },
+];
+const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, }) => {
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [filterEnabled, setFilterEnabled] = (0, react_1.useState)(false);
+    const styles = useStyles();
+    (0, react_1.useEffect)(() => {
+        setSearchText(getDisplayValue(value));
+    }, [value]);
+    const filteredItems = (0, react_1.useMemo)(() => {
+        if (!filterEnabled) {
+            return options;
+        }
+        return options.filter((item) => item.text.toLowerCase().includes(searchText.toLowerCase()));
+    }, [searchText, filterEnabled]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: '100%' }, children: (0, jsx_runtime_1.jsx)(react_components_1.Combobox, { name: name, appearance: "filled-darker", placeholder: placeholder, inputMode: "search", style: { width: '100%', minWidth: 'unset' }, listbox: { className: styles.listbox }, autoComplete: "off", readOnly: readOnly || disabled, value: searchText, disableAutoFocus: true, selectedOptions: value ? [value.toString()] : [], onBlur: () => {
+                let newValue = null;
+                if (searchText) {
+                    newValue = resolveValue(searchText);
+                    if (newValue === undefined) {
+                        newValue = value;
+                    }
+                }
+                if (newValue !== null) {
+                    console.log('onBlur', newValue);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                }
+                setSearchText(getDisplayValue(newValue));
+                setFilterEnabled(false);
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+            }, onFocus: onFocus, id: id, autoFocus: autoFocus, onChange: (e) => {
+                setFilterEnabled(true);
+                setSearchText(e.target.value);
+            }, onOptionSelect: (e, item) => {
+                console.log('onOptionSelect', e, item);
+                if (!item.optionValue) {
+                    return;
+                }
+                else {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(item.optionValue));
+                }
+                setSearchText('');
+            }, children: filteredItems.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item.value, children: item.text }, item.value))) }) }));
+};
+exports.DurationControl = DurationControl;
+function getDisplayValue(value) {
+    if (!value) {
+        return '';
+    }
+    // No decimal, if value is decimal, round to nearest whole number
+    // 1 - 1 minute
+    // 2-59 minutes -> 2-59 minutes
+    // 90 minutes -> 1.5 hours
+    // more than a day -> 1 day, 1.5 days, 2 days, etc.
+    // check if value has decimal
+    if (value % 1 !== 0) {
+        // round to nearest whole number
+        value = Math.round(value);
+    }
+    if (!value) {
+        return '';
+    }
+    if (value === 1) {
+        return '1 minute';
+    }
+    if (value < 60) {
+        return `${value} minutes`;
+    }
+    if (value === 60) {
+        return '1 hour';
+    }
+    if (value < 1440) {
+        return `${Number((value / 60).toFixed(2))} hours`;
+    }
+    if (value === 1440) {
+        return '1 day';
+    }
+    return `${Number((value / 1440).toFixed(2))} days`;
+}
+function resolveValue(value) {
+    if (!value) {
+        return null;
+    }
+    const numberValue = Number(value);
+    if (!isNaN(numberValue)) {
+        return numberValue;
+    }
+    const timeFormat = /^(\d+):[0-5][0-9]$/;
+    if (timeFormat.test(value)) {
+        const [hours, minutes] = value.split(':').map(Number);
+        return hours * 60 + minutes;
+    }
+    const minutesFormat = /^(\d+(\.\d+)?) m/;
+    if (minutesFormat.test(value)) {
+        const [, minutes] = value.match(minutesFormat);
+        return Math.floor(Number(minutes));
+    }
+    const hoursFormat = /^(\d+(\.\d+)?) h/;
+    if (hoursFormat.test(value)) {
+        const [, hours] = value.match(hoursFormat);
+        return Math.floor(Number(hours) * 60);
+    }
+    const daysFormat = /^(\d+(\.\d+)?) d/;
+    if (daysFormat.test(value)) {
+        const [, days] = value.match(daysFormat);
+        return Math.floor(Number(days) * 1440);
+    }
+    return undefined;
+}

package/form/controls/IntegerControl.d.ts

@@ -0,0 +1,4 @@
+import { ControlProps } from './types';
+export interface IntegerControlProps extends ControlProps<number> {
+}
+export declare function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }: IntegerControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/IntegerControl.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntegerControl = IntegerControl;
+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, }) {
+    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);
+            }
+            else if (!data.displayValue) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            }
+            else if (data.displayValue !== undefined) {
+                const newValue = parseFloat(data.displayValue);
+                if (!Number.isNaN(newValue)) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                }
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            }
+        } }));
+}

package/form/types.d.ts

@@ -2,11 +2,11 @@ import { JSX } from 'react';
 import { CurrencyControlProps } from './controls/CurrencyControl';
 import { DateControlProps } from './controls/DateControl';
 import { DateTimeControlProps } from './controls/DateTimeControl';
+import { DecimalControlProps } from './controls/DecimalControl';
 import { EmailControlProps } from './controls/EmailControl';
 import { LookupControlProps } from './controls/LookupControl';
 import { MultiSelectControlProps } from './controls/MultiSelectControl';
 import { MultiSelectLookupControlProps } from './controls/MultiSelectLookupControl';
-import { NumberControlProps } from './controls/NumberControl';
 import { PasswordControlProps } from './controls/PasswordControl';
 import { SelectControlProps } from './controls/SelectControl';
 import { SwitchControlProps } from './controls/SwitchControl';
@@ -32,7 +32,7 @@ export type EmailFormControlProps = BaseFormControlProps & EmailControlProps & {
 export type PasswordFormControlProps = BaseFormControlProps & PasswordControlProps & {
     type: 'password';
 };
-export type NumberFormControlProps = BaseFormControlProps & NumberControlProps & {
+export type NumberFormControlProps = BaseFormControlProps & DecimalControlProps & {
     type: 'number';
 };
 export type CurrencyFormControlProps = BaseFormControlProps & CurrencyControlProps & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.45",
+  "version": "0.0.17-alpha.47",
   "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": "7538074665d8fa6f67ca2a91e62ea32d09570a31"
+  "gitHead": "749a69f512d51c82f33fe27f8bbe5046fdeab4c5"
 }

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;