@headless-adminapp/fluent 0.0.17-alpha.8 → 1.0.1

package/form/controls/MultiSelectLookupControl.js

@@ -13,7 +13,7 @@ const RecordCard_1 = require("../../PageEntityForm/RecordCard");
 const useLookupData_1 = require("./useLookupData");
 function MultiSelectLookupControl(props) {
     const Control = LookupControlMd;
-    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, props));
+    return (0, jsx_runtime_1.jsx)(Control, { ...props });
 }
 const useStyles = (0, react_components_1.makeStyles)({
     option: {
@@ -44,7 +44,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const { isLoading: isViewLoading, view } = (0, useLookupData_1.useGetLookupView)(schema.logicalName, viewId);
     const { data, isLoading } = (0, useLookupData_1.useLookupData)({
         schema,
-        view: view === null || view === void 0 ? void 0 : view.experience,
+        view: view?.experience,
         searchText: debouncedSearchText,
         dataService,
         enabled: lookupEnabled && !isViewLoading && !readOnly && !disabled,
@@ -54,19 +54,18 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const [containerHeight, setContainerHeight] = (0, react_1.useState)(32);
     (0, react_1.useEffect)(() => {
         const timer = setInterval(() => {
-            var _a, _b, _c;
             if (!tagGroupContainerRef.current) {
                 return;
             }
-            const lastElementChild = (_b = (_a = tagGroupContainerRef.current) === null || _a === void 0 ? void 0 : _a.lastElementChild) === null || _b === void 0 ? void 0 : _b.querySelector('.fui-Tag:last-of-type');
+            const lastElementChild = tagGroupContainerRef.current?.lastElementChild?.querySelector('.fui-Tag:last-of-type');
             if (!lastElementChild) {
                 setContainerHeight(32);
                 setInputLeft(0);
                 return;
             }
             const containerBoundingRect = tagGroupContainerRef.current.getBoundingClientRect();
-            const lastElementBoundingRect = lastElementChild === null || lastElementChild === void 0 ? void 0 : lastElementChild.getBoundingClientRect();
-            const remainingWidth = containerBoundingRect.right - ((_c = lastElementBoundingRect === null || lastElementBoundingRect === void 0 ? void 0 : lastElementBoundingRect.right) !== null && _c !== void 0 ? _c : 0);
+            const lastElementBoundingRect = lastElementChild?.getBoundingClientRect();
+            const remainingWidth = containerBoundingRect.right - (lastElementBoundingRect?.right ?? 0);
             let newHeight = containerBoundingRect.height + 8;
             if (remainingWidth > 100) {
                 setInputLeft(containerBoundingRect.width - remainingWidth);
@@ -91,7 +90,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const handleAdd = (selectedValue) => {
         setSearchText('');
         if (!value) {
-            return onChange === null || onChange === void 0 ? void 0 : onChange([
+            return onChange?.([
                 {
                     id: selectedValue[schema.idAttribute],
                     name: selectedValue[schema.primaryAttribute],
@@ -103,7 +102,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             if (value.find((x) => x.id === selectedValue[schema.idAttribute])) {
                 return;
             }
-            return onChange === null || onChange === void 0 ? void 0 : onChange([
+            return onChange?.([
                 ...value,
                 {
                     id: selectedValue[schema.idAttribute],
@@ -114,12 +113,12 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
         }
     };
     const handleRemove = (id) => {
-        const newValue = value === null || value === void 0 ? void 0 : value.filter((x) => x.id !== id);
-        if (!(newValue === null || newValue === void 0 ? void 0 : newValue.length)) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        const newValue = value?.filter((x) => x.id !== id);
+        if (!newValue?.length) {
+            onChange?.(null);
         }
         else {
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            onChange?.(newValue);
         }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%', height: containerHeight }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', right: 4, bottom: 8 }, children: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })) }), input: {
@@ -135,11 +134,11 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                 }, onChange: (e) => {
                     setSearchText(e.target.value);
                 }, onOptionSelect: (e, item) => {
-                    const _item = data === null || data === void 0 ? void 0 : data.records.find((x) => String(x[schema.idAttribute]) === item.optionValue);
+                    const _item = data?.records.find((x) => String(x[schema.idAttribute]) === String(item.optionValue));
                     if (!_item)
                         return;
                     handleAdd(_item);
-                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data === null || data === void 0 ? void 0 : 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 === null || view === void 0 ? void 0 : view.experience.card, record: item, schema: schema }) }, item[schema.idAttribute]))), !isLoading && !(data === null || data === void 0 ? void 0 : 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: (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: {
                             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, {}), children: loockupStrings.newRecord }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { ref: tagGroupContainerRef, style: {
@@ -151,7 +150,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     paddingInline: 4,
                     display: 'flex',
                     pointerEvents: 'none',
-                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", style: { flexWrap: 'wrap', rowGap: 8 }, children: value === null || value === void 0 ? void 0 : value.map((item, index) => ((0, jsx_runtime_1.jsx)(TagItem, { disabled: disabled, readOnly: readOnly, value: item, onRemove: handleRemove, allowNavigation: allowNavigation }, `${item.id}-${index}`))) }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", style: { flexWrap: 'wrap', rowGap: 8 }, children: value?.map((item, index) => ((0, jsx_runtime_1.jsx)(TagItem, { disabled: disabled, readOnly: readOnly, value: item, onRemove: handleRemove, allowNavigation: allowNavigation }, `${item.id}-${index}`))) }) })] }));
 };
 function TagItem({ disabled, readOnly, value, onRemove, allowNavigation, }) {
     const routeResolver = (0, hooks_2.useRouteResolver)();
@@ -181,6 +180,6 @@ function TagItem({ disabled, readOnly, value, onRemove, allowNavigation, }) {
             paddingRight: !disabled && !readOnly ? 0 : 5,
             pointerEvents: 'auto',
         }, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
-                onRemove === null || onRemove === void 0 ? void 0 : onRemove(value.id);
-            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), children: allowNavigation && !!path ? ((0, jsx_runtime_1.jsx)(react_components_1.Link, { onClick: handleOpenRecord, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value === null || value === void 0 ? void 0 : value.name }) })) : ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value === null || value === void 0 ? void 0 : value.name })) }));
+                onRemove?.(value.id);
+            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), children: allowNavigation && !!path ? ((0, jsx_runtime_1.jsx)(react_components_1.Link, { onClick: handleOpenRecord, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value?.name }) })) : ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value?.name })) }));
 }

package/form/controls/PasswordControl.js

@@ -7,7 +7,7 @@ const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance = 'filled-darker', }) {
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, appearance: appearance, type: showPassword ? 'text' : 'password', autoFocus: autoFocus, value: value || '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, appearance: appearance, type: showPassword ? 'text' : 'password', autoFocus: autoFocus, value: value || '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         disabled: disabled, contentAfter: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => setShowPassword(!showPassword), icon: showPassword ? (0, jsx_runtime_1.jsx)(icons_1.Icons.EyeOff, { size: 18 }) : (0, jsx_runtime_1.jsx)(icons_1.Icons.Eye, { size: 18 }) }) }));
 }

package/form/controls/RichTextControl.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface RichTextControlProps extends ControlProps<string> {
+}
+export declare const RichTextControl: FC<RichTextControlProps>;

package/form/controls/RichTextControl.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ReactQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-quill'))));
+const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
+    return ((0, jsx_runtime_1.jsx)(ReactQuill, { value: value ?? '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }));
+};
+exports.RichTextControl = RichTextControl;

package/form/controls/SelectControl.js

@@ -5,25 +5,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
 function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
-    var _a;
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {
         const option = options.find((x) => String(x.value) === value);
         if (option) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+            onChange?.(option.value);
         }
         else {
-            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            onChange?.(null);
         }
     };
     const selectedOption = (0, react_1.useMemo)(() => options.find((x) => x.value === value), [options, value]);
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { placeholder: placeholder, id: id, name: name, appearance: "filled-darker", 
         // data={transformedOptions}
-        value: (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '', 
+        value: selectedOption?.label ?? '', 
         // onChange={(e, v) => handleChange(v as string)}
         selectedOptions: value ? [String(value)] : [], onOptionSelect: (event, data) => {
             handleChange(data.optionValue);
-        }, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // error={error}
         disabled: disabled, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }

package/form/controls/SwitchControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface SwitchControlProps extends ControlProps<boolean> {
 }
-export declare function SwitchControl({}: SwitchControlProps): null;
+export declare function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }: SwitchControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/SwitchControl.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchControl = SwitchControl;
-function SwitchControl({}) {
-    return null;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Switch, { checked: value ?? false, onChange: (e) => onChange?.(e.currentTarget.checked), id: id, name: name, disabled: disabled, readOnly: readOnly, onBlur: onBlur, onFocus: onFocus }));
 }

package/form/controls/TelephoneControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface TelephoneControlProps extends ControlProps<string> {
     autoComplete?: string;
 }
-export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }: Readonly<TelephoneControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/TelephoneControl.js

@@ -3,14 +3,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TelephoneControl = TelephoneControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const phone_1 = require("@headless-adminapp/app/utils/phone");
 const icons_1 = require("@headless-adminapp/icons");
-function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, }) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+const react_1 = require("react");
+function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }) {
+    const [internalValue, setInternalValue] = (0, react_1.useState)('');
+    const { region } = (0, locale_1.useLocale)();
+    const number = (0, react_1.useMemo)(() => {
+        if (!value) {
+            return null;
+        }
+        return (0, phone_1.parsePhoneNumber)(value, region);
+    }, [value, region]);
+    (0, react_1.useEffect)(() => {
+        setInternalValue(number?.formattedInternationalValue ?? '');
+    }, [number]);
+    const handleChange = () => {
+        const parsedPhoneNumber = (0, phone_1.parsePhoneNumber)(internalValue, region);
+        setInternalValue(parsedPhoneNumber.formattedInternationalValue);
+        onChange?.(parsedPhoneNumber.rawValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: (e) => setInternalValue?.(e.target.value), onBlur: () => {
+            handleChange();
+            onBlur?.();
+        }, onFocus: () => onFocus?.(), 
         // invalid={error}
-        disabled: disabled, autoComplete: autoComplete, style: {
+        readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             width: '100%',
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 
         // size="sm"
-        contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(`tel:${value}`, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
+        contentAfter: !!number?.uri ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(number.uri, '_blank'), title: number.uri, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
 }

package/form/controls/TextAreaControl.d.ts

@@ -3,4 +3,4 @@ export interface TextAreaControlProps extends ControlProps<string> {
     rows?: number;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
 }
-export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, rows, textTransform, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextAreaControl.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAreaControl = TextAreaControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, rows = 5, textTransform, }) {
+function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows = 5, textTransform, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
-                ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toUpperCase())
+                ? onChange?.(e.target.value.toUpperCase())
                 : textTransform === 'lowercase'
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toLowerCase())
-                    : onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
-        }, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+                    ? onChange?.(e.target.value.toLowerCase())
+                    : onChange?.(e.target.value);
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // error={error}
-        disabled: disabled, rows: rows }));
+        readOnly: disabled || readOnly, rows: rows }));
 }

package/form/controls/TextControl.js

@@ -11,11 +11,11 @@ readOnly, appearance = 'filled-darker', }) {
     const readonly = disabled || readOnly;
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, autoFocus: autoFocus, appearance: appearance, value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
-                ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toUpperCase())
+                ? onChange?.(e.target.value.toUpperCase())
                 : textTransform === 'lowercase'
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toLowerCase())
-                    : onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
-        }, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+                    ? onChange?.(e.target.value.toLowerCase())
+                    : onChange?.(e.target.value);
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         // readOnly={readOnly || disabled}
         readOnly: readonly, autoComplete: autoComplete, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, className: (0, react_components_1.mergeClasses)(readonly && 'TextControl_readonly'), style: {

package/form/controls/UrlControl.d.ts

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

package/form/controls/UrlControl.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UrlControl = UrlControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const icons_1 = require("@headless-adminapp/icons");
+function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "url", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+        // invalid={error}
+        readOnly: disabled || readOnly, autoComplete: "off", style: {
+            width: '100%',
+            paddingRight: react_components_1.tokens.spacingHorizontalXS,
+        }, 
+        // size="sm"
+        contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(value, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.OpenInNew, {}) })) : undefined }));
+}

package/form/controls/useLookupData.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLookupData = useLookupData;
 exports.useGetLookupView = useGetLookupView;
@@ -16,42 +7,37 @@ const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 function useLookupData({ schema, view, searchText, dataService, enabled, }) {
-    var _a;
     const [search] = (0, hooks_1.useDebouncedValue)(searchText, 500);
     const columns = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!(view === null || view === void 0 ? void 0 : view.card)) {
+        if (!view?.card) {
             return [schema.primaryAttribute];
         }
         return Array.from(new Set([
             view.card.primaryColumn,
             view.card.avatarColumn,
-            ...((_a = view.card.secondaryColumns) !== null && _a !== void 0 ? _a : [])
+            ...(view.card.secondaryColumns ?? [])
                 .filter((x) => !x.expandedKey)
                 .map((x) => x.name),
         ])).filter(Boolean);
-    }, [schema.primaryAttribute, view === null || view === void 0 ? void 0 : view.card]);
-    const expand = (0, react_1.useMemo)(() => {
-        var _a;
-        return (((_a = view === null || view === void 0 ? void 0 : view.card) === null || _a === void 0 ? void 0 : _a.secondaryColumns) || [])
-            .filter((x) => x.expandedKey)
-            .reduce((acc, x) => {
-            if (!acc[x.name]) {
-                acc[x.name] = [];
-            }
-            if (!acc[x.name].includes(x.expandedKey)) {
-                acc[x.name].push(x.expandedKey);
-            }
-            return acc;
-        }, {});
-    }, [(_a = view === null || view === void 0 ? void 0 : view.card) === null || _a === void 0 ? void 0 : _a.secondaryColumns]);
+    }, [schema.primaryAttribute, view?.card]);
+    const expand = (0, react_1.useMemo)(() => (view?.card?.secondaryColumns || [])
+        .filter((x) => x.expandedKey)
+        .reduce((acc, x) => {
+        if (!acc[x.name]) {
+            acc[x.name] = [];
+        }
+        if (!acc[x.name].includes(x.expandedKey)) {
+            acc[x.name].push(x.expandedKey);
+        }
+        return acc;
+    }, {}), [view?.card?.secondaryColumns]);
     const queryKey = (0, react_1.useMemo)(() => [
         'data',
         'retriveLookupRecords',
         schema.logicalName,
         search,
-        view === null || view === void 0 ? void 0 : view.filter,
-        view === null || view === void 0 ? void 0 : view.defaultSorting,
+        view?.filter,
+        view?.defaultSorting,
         columns,
         expand,
     ], [
@@ -59,27 +45,26 @@ function useLookupData({ schema, view, searchText, dataService, enabled, }) {
         expand,
         schema.logicalName,
         search,
-        view === null || view === void 0 ? void 0 : view.filter,
-        view === null || view === void 0 ? void 0 : view.defaultSorting,
+        view?.filter,
+        view?.defaultSorting,
     ]);
     const { data, isFetching } = (0, react_query_1.useQuery)({
         queryKey: queryKey,
-        queryFn: () => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            const result = yield dataService.retriveRecords({
+        queryFn: async () => {
+            const result = await dataService.retriveRecords({
                 logicalName: schema.logicalName,
                 search,
                 columns: columns,
                 expand,
-                filter: (_a = view === null || view === void 0 ? void 0 : view.filter) !== null && _a !== void 0 ? _a : null,
+                filter: view?.filter ?? null,
                 skip: 0,
                 limit: 5,
-                sort: view === null || view === void 0 ? void 0 : view.defaultSorting,
+                sort: view?.defaultSorting,
             });
             return result;
-        }),
+        },
         placeholderData: react_query_1.keepPreviousData,
-        enabled: enabled !== null && enabled !== void 0 ? enabled : false,
+        enabled: enabled ?? false,
     });
     return {
         data,
@@ -90,9 +75,9 @@ function useGetLookupView(logicalName, viewId) {
     const { experienceStore } = (0, hooks_2.useMetadata)();
     const { isPending, data, error } = (0, react_query_1.useQuery)({
         queryKey: ['data', 'getLookupView', logicalName, viewId],
-        queryFn: () => __awaiter(this, void 0, void 0, function* () {
+        queryFn: async () => {
             return experienceStore.getViewLookupV2(logicalName, viewId);
-        }),
+        },
     });
     if (error) {
         console.error(error);

package/form/layout/FormSection/FormSection.js

@@ -38,8 +38,8 @@ const FormSection = ({ title, children, columnCount, labelPosition, noPadding, h
         .map(() => '1fr')
         .join(' ');
     const template2 = '';
-    const minWidthRequired = minControlWidth * (columnCount !== null && columnCount !== void 0 ? columnCount : 1) +
-        gap * ((columnCount !== null && columnCount !== void 0 ? columnCount : 1) - 1) +
+    const minWidthRequired = minControlWidth * (columnCount ?? 1) +
+        gap * ((columnCount ?? 1) - 1) +
         padding * 2;
     const template = divSize.width >= minWidthRequired ? template1 : template2;
     const spanTemplates = {
@@ -75,7 +75,14 @@ const FormSection = ({ title, children, columnCount, labelPosition, noPadding, h
                         display: 'flex',
                         flexDirection: 'column',
                         padding,
-                    }, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign({ flex: 1, display: 'grid', gridTemplateColumns: template, rowGap: gap, columnGap: gap }, spanTemplates), children: children }) })] }) }));
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            flex: 1,
+                            display: 'grid',
+                            gridTemplateColumns: template,
+                            rowGap: gap,
+                            columnGap: gap,
+                            ...spanTemplates,
+                        }, children: children }) })] }) }));
 };
 exports.FormSection = FormSection;
 exports.FormSection.Column = FormSectionColumn_1.FormSectionColumn;

package/form/layout/FormTab/FormTab.js

@@ -21,13 +21,13 @@ const FormTab = (props) => {
     if (props.noWrapper) {
         return props.children;
     }
-    return (0, jsx_runtime_1.jsx)(FormTabInternal, Object.assign({}, props));
+    return (0, jsx_runtime_1.jsx)(FormTabInternal, { ...props });
 };
 exports.FormTab = FormTab;
 /** @todo: unfinished component */
 const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidths, }) => {
     const divRef = (0, react_1.useRef)(null);
-    const divSize = (0, hooks_1.useElementSize)(divRef);
+    const divSize = (0, hooks_1.useElementSize)(divRef, 100);
     const padding = 0;
     // const columnCount = 2;
     const minSectionWidth = 392;
@@ -38,7 +38,7 @@ const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidth
     //   gap,
     //   padding
     // );
-    columnCount = columnCount !== null && columnCount !== void 0 ? columnCount : 1;
+    columnCount = columnCount ?? 1;
     // if (itemCount > columnCount) {
     //   itemCount = columnCount;
     // }
@@ -66,7 +66,7 @@ const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidth
             flexDirection: 'column',
             flex: 1,
             // marginTop: 12,
-            padding: 12,
+            // padding: 12,
         }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 // display: 'flex',
                 // flexWrap: 'wrap',

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.8",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -16,20 +16,21 @@
   "bugs": {
     "url": "https://github.com/headless-adminapp/adminapp/issues"
   },
-  "scripts": {
-    "build": "tsc",
-    "ts-check": "tsc --noEmit",
-    "copy-files": "cp package.json dist",
-    "prepublishOnly": "pnpm run build && pnpm run copy-files",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "scripts": {},
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@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-datepicker-compat": "0.4.43",
+    "@fluentui/react-nav-preview": "0.5.1",
+    "@fluentui/react-timepicker-compat": "0.2.46",
+    "@fullcalendar/core": "6.1.15",
+    "@fullcalendar/daygrid": "6.1.15",
+    "@fullcalendar/interaction": "6.1.15",
+    "@fullcalendar/react": "6.1.15",
+    "@fullcalendar/timegrid": "6.1.15",
     "@hookform/resolvers": "^3.9.0",
     "@tanstack/react-query": "5.51.1",
     "@tanstack/react-table": "^8.20.1",
@@ -41,7 +42,11 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "7.52.2",
+    "react-quill": "^2.0.0",
+    "recharts": "^2.13.3",
+    "sass": "1.81.0",
+    "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "0c369830a0ba4aa5744cc307f8947ae9660980c4"
-}
+  "gitHead": "61978f1e2f0eac79069afa52511a5c8dde8b8ebc"
+}