@headless-adminapp/fluent 1.0.3 → 1.1.0

package/components/ComponentErrorBoundary.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentErrorBoundary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const ComponentBroken_1 = require("./ComponentBroken");
+class ComponentErrorBoundary extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return ((0, jsx_runtime_1.jsx)(ComponentBroken_1.ComponentBroken, { Icon: icons_1.Icons.Block, message: "Component render failed" }));
+        }
+        return this.props.children;
+    }
+}
+exports.ComponentErrorBoundary = ComponentErrorBoundary;

package/form/controls/DateTimeControl.js

@@ -31,11 +31,21 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
             setInternalTimeValue(updatedValue);
         }
     }, [value, timezone, timeFormat]);
+    const isReadonly = readOnly || disabled;
+    const [isDatePickerOpen, setIsDatePickerOpen] = (0, react_1.useState)(false);
     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?.(), onBlur: () => 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) => {
+        }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, open: isDatePickerOpen, onOpenChange: (isOpen) => {
+                    if (isOpen && isReadonly) {
+                        return;
+                    }
+                    setIsDatePickerOpen(isOpen);
+                    if (!isOpen) {
+                        onBlur?.();
+                    }
+                }, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormat) : '', readOnly: isReadonly, value: value ? new Date(value) : null, onSelectDate: (date) => {
                     if (!date) {
                         onChange?.(null);
                     }
@@ -62,9 +72,13 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                         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: {
+                } }), (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: {
+                    flex: 1,
+                    minWidth: 0,
+                    pointerEvents: isReadonly ? 'none' : 'auto',
+                }, input: {
                     style: { minWidth: 0 },
-                }, readOnly: readOnly || disabled || !value, 
+                }, readOnly: isReadonly || !value, 
                 // selectedTime={value ? new Date(value) : null}
                 selectedTime: value
                     ? (0, dayjs_1.default)((0, dayjs_1.default)(value).tz(timezone).format('YYYY-MM-DD HH:mm:ss')).toDate()

package/form/controls/DurationControl.js

@@ -122,7 +122,6 @@ const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     }
                 }
                 if (newValue !== null) {
-                    console.log('onBlur', newValue);
                     onChange?.(newValue);
                 }
                 setSearchText(getDisplayValue(newValue));
@@ -132,7 +131,6 @@ const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placehold
                 setFilterEnabled(true);
                 setSearchText(e.target.value);
             }, onOptionSelect: (e, item) => {
-                console.log('onOptionSelect', e, item);
                 if (!item.optionValue) {
                     return;
                 }

package/form/controls/LookupControl.js

@@ -120,7 +120,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                 }, onOptionSelect: (e, item) => {
                     const _item = data?.records.find((x) => String(x[schema.idAttribute]) === String(item.optionValue));
                     handleChange(_item ?? null);
-                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view?.experience.card, record: item, schema: schema }) }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: view?.experience.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                             paddingInline: react_components_1.tokens.spacingHorizontalL,
                             paddingBlock: react_components_1.tokens.spacingVerticalS,
                         }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: loockupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
@@ -134,7 +134,10 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     alignItems: 'center',
                     paddingInline: 4,
                     display: 'flex',
-                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", children: (0, jsx_runtime_1.jsx)(react_components_1.Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: { paddingRight: !disabled && !readOnly ? 0 : 5 }, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", children: (0, jsx_runtime_1.jsx)(react_components_1.Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: {
+                            paddingRight: !disabled && !readOnly ? 0 : 5,
+                            background: react_components_1.tokens.colorNeutralBackground6,
+                        }, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
                                 onChange?.(null);
                             }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), primaryText: {
                             style: {
@@ -154,7 +157,7 @@ const LookupAvatar = ({ logicalName, schema, value, }) => {
     const { schemaMetadataDic } = (0, app_1.useAppContext)();
     if (!schema.avatarAttribute) {
         const experienceSchema = schemaMetadataDic[logicalName];
-        const Icon = experienceSchema.icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
+        const Icon = experienceSchema.Icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
         return ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
                 width: 20,
                 height: 20,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -24,7 +24,7 @@
     "@fluentui/react-calendar-compat": "^0.1.20",
     "@fluentui/react-components": "^9.54.4",
     "@fluentui/react-datepicker-compat": "^0.4.43",
-    "@fluentui/react-nav-preview": "^0.5.1",
+    "@fluentui/react-nav-preview": "^0.13.0",
     "@fluentui/react-timepicker-compat": "^0.2.46",
     "@tanstack/react-query": "^5.51.1"
   },
@@ -50,5 +50,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "45555f94b55424957cf6a0487c74d6a5f8856795"
+  "gitHead": "a244ac890d3abda779c8f41c3cd51031381c062c"
 }