@headless-adminapp/fluent 0.0.17-alpha.1

package/form/controls/MultiSelectLookupControl.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelectLookupControl = MultiSelectLookupControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const hooks_2 = require("@headless-adminapp/app/route/hooks");
+const app_1 = require("@headless-adminapp/core/experience/app");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const AppStringContext_1 = require("../../App/AppStringContext");
+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));
+}
+const useStyles = (0, react_components_1.makeStyles)({
+    option: {
+        padding: 0,
+        '& .fui-Option__checkIcon': {
+            display: 'none',
+        },
+        '&[data-activedescendant-focusvisible]': {
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
+            '&:after': {
+                border: 'none !important',
+                // background: tokens.colorNeutralBackground1Hover,
+            },
+        },
+    },
+});
+const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, schema, viewId, allowNavigation, allowNewRecord, }) => {
+    const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const { loockupStrings } = (0, AppStringContext_1.useAppStrings)();
+    (0, react_1.useEffect)(() => {
+        if (open)
+            setLookupEnabled(true);
+    }, [open]);
+    const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const styles = useStyles();
+    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,
+        searchText: debouncedSearchText,
+        dataService,
+        enabled: lookupEnabled && !isViewLoading && !readOnly && !disabled,
+    });
+    const tagGroupContainerRef = (0, react_1.useRef)(null);
+    const [inputLeft, setInputLeft] = (0, react_1.useState)(0);
+    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');
+            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);
+            let newHeight = containerBoundingRect.height + 8;
+            if (remainingWidth > 100) {
+                setInputLeft(containerBoundingRect.width - remainingWidth);
+            }
+            else {
+                setInputLeft(0);
+                newHeight = containerBoundingRect.height + 32 + 4;
+            }
+            setContainerHeight(newHeight);
+        }, 500);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+    // useEffect(() => {
+    //   if (value) {
+    //     // setSearchText(value.name); // TODO:
+    //   } else {
+    //     setSearchText('');
+    //   }
+    // }, [value]);
+    const handleAdd = (selectedValue) => {
+        setSearchText('');
+        if (!value) {
+            return onChange === null || onChange === void 0 ? void 0 : onChange([
+                {
+                    id: selectedValue[schema.idAttribute],
+                    name: selectedValue[schema.primaryAttribute],
+                    logicalName: schema.logicalName,
+                },
+            ]);
+        }
+        else {
+            if (value.find((x) => x.id === selectedValue[schema.idAttribute])) {
+                return;
+            }
+            return onChange === null || onChange === void 0 ? void 0 : onChange([
+                ...value,
+                {
+                    id: selectedValue[schema.idAttribute],
+                    name: selectedValue[schema.primaryAttribute],
+                    logicalName: schema.logicalName,
+                },
+            ]);
+        }
+    };
+    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);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : 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: {
+                    style: {
+                        position: 'absolute',
+                        bottom: 0,
+                        right: 0,
+                        left: inputLeft,
+                        height: 30,
+                    },
+                }, placeholder: placeholder, inputMode: "search", style: { width: '100%', height: '100%' }, autoComplete: "off", readOnly: readOnly || disabled, open: open && !readOnly && !disabled, value: searchText, onOpenChange: (e, data) => {
+                    setOpen(data.open);
+                }, onChange: (e) => {
+                    setSearchText(e.target.value);
+                }, onOptionSelect: (e, item) => {
+                    console.log('onOptionSelect', item);
+                    const _item = data === null || data === void 0 ? void 0 : data.records.find((x) => String(x[schema.idAttribute]) === 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: {
+                            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: {
+                    position: 'absolute',
+                    top: 4,
+                    left: 0,
+                    right: 0,
+                    alignItems: 'center',
+                    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}`))) }) })] }));
+};
+function TagItem({ disabled, readOnly, value, onRemove, allowNavigation, }) {
+    const routeResolver = (0, hooks_2.useRouteResolver)();
+    const router = (0, hooks_2.useRouter)();
+    const path = (0, react_1.useMemo)(() => {
+        if (!value) {
+            return '';
+        }
+        if (!allowNavigation) {
+            return '';
+        }
+        return routeResolver({
+            logicalName: value.logicalName,
+            type: app_1.PageType.EntityForm,
+            id: value.id,
+        });
+    }, [allowNavigation, routeResolver, value]);
+    const handleOpenRecord = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!path) {
+            return;
+        }
+        router.push(path);
+    }, [path, router]);
+    return ((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,
+            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 })) }));
+}

package/form/controls/NumberControl.d.ts

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

package/form/controls/NumberControl.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberControl = NumberControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function NumberControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "number", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
+        // value={value ?? ''}
+        onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+        // invalid={error}
+        // size="sm"
+        disabled: disabled, readOnly: readOnly, style: {
+            width: '100%',
+        } }));
+}

package/form/controls/PasswordControl.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from '@fluentui/react-components';
+import { ControlProps } from './types';
+export interface PasswordControlProps extends ControlProps<string> {
+    appearance?: InputProps['appearance'];
+}
+export declare function PasswordControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoFocus, appearance, }: PasswordControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/PasswordControl.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordControl = PasswordControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+function PasswordControl({ value, onChange, id, name, onBlur, onFocus, error, 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(), 
+        // 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/SelectControl.d.ts

@@ -0,0 +1,9 @@
+import { ControlProps } from './types';
+export interface Lookup<T = string> {
+    label: string;
+    value: T;
+}
+export interface SelectControlProps<T> extends ControlProps<T> {
+    options: Lookup<T>[];
+}
+export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, error, onBlur, onFocus, placeholder, readOnly, }: SelectControlProps<T>): import("react/jsx-runtime").JSX.Element;

package/form/controls/SelectControl.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SelectControl;
+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, error, onBlur, onFocus, placeholder, readOnly, }) {
+    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);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : 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 : '', 
+        // 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(), 
+        // 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

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

package/form/controls/SwitchControl.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchControl = SwitchControl;
+function SwitchControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, readOnly, }) {
+    return null;
+}

package/form/controls/TelephoneControl.d.ts

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

package/form/controls/TelephoneControl.js

@@ -0,0 +1,16 @@
+"use strict";
+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 icons_1 = require("@headless-adminapp/icons");
+function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, error, 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(), 
+        // invalid={error}
+        disabled: disabled, 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 }));
+}

package/form/controls/TextAreaControl.d.ts

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

package/form/controls/TextAreaControl.js

@@ -0,0 +1,16 @@
+"use strict";
+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, error, disabled, 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())
+                : 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(), 
+        // error={error}
+        disabled: disabled, rows: rows }));
+}

package/form/controls/TextControl.d.ts

@@ -0,0 +1,10 @@
+import { InputProps } from '@fluentui/react-components';
+import { ControlProps } from './types';
+export interface TextControlProps extends ControlProps<string> {
+    autoComplete?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
+    appearance?: InputProps['appearance'];
+}
+export declare function TextControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, readOnly, appearance, }: TextControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextControl.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextControl = TextControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function TextControl({ value, onChange, id, name, onBlur, onFocus, 
+// error,
+placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, 
+// borderOnFocusOnly,
+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())
+                : 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(), 
+        // invalid={error}
+        // readOnly={readOnly || disabled}
+        readOnly: readonly, autoComplete: autoComplete, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, className: (0, react_components_1.mergeClasses)(readonly && 'TextControl_readonly'), style: {
+            width: '100%',
+        } }));
+}

package/form/controls/types.d.ts

@@ -0,0 +1,14 @@
+export interface ControlProps<T> {
+    id?: string;
+    name?: string;
+    value: T | null;
+    onChange?: (value: T | null) => void;
+    disabled?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    error?: boolean;
+    placeholder?: string;
+    autoFocus?: boolean;
+    borderOnFocusOnly?: boolean;
+    readOnly?: boolean;
+}

package/form/controls/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/form/controls/useLookupData.d.ts

@@ -0,0 +1,19 @@
+import { ViewExperience } from '@headless-adminapp/core/experience/view';
+import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { IDataService } from '@headless-adminapp/core/transport';
+interface UseLookupDataOptions {
+    dataService: IDataService;
+    searchText?: string;
+    schema: Schema;
+    view: ViewExperience | null | undefined;
+    enabled?: boolean;
+}
+export declare function useLookupData<S extends SchemaAttributes = SchemaAttributes>({ schema, view, searchText, dataService, enabled, }: UseLookupDataOptions): {
+    data: import("@headless-adminapp/core/transport").RetriveRecordsResult<InferredSchemaType<S>> | undefined;
+    isLoading: boolean;
+};
+export declare function useGetLookupView(logicalName: string, viewId?: string): {
+    isLoading: boolean;
+    view: import("@headless-adminapp/core/experience/view").View<SchemaAttributes> | undefined;
+};
+export {};

package/form/controls/useLookupData.js

@@ -0,0 +1,104 @@
+"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;
+const hooks_1 = require("@headless-adminapp/app/hooks");
+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)) {
+            return [schema.primaryAttribute];
+        }
+        return Array.from(new Set([
+            view.card.primaryColumn,
+            view.card.avatarColumn,
+            ...((_a = view.card.secondaryColumns) !== null && _a !== void 0 ? _a : [])
+                .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]);
+    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,
+        columns,
+        expand,
+    ], [
+        columns,
+        expand,
+        schema.logicalName,
+        search,
+        view === null || view === void 0 ? void 0 : view.filter,
+        view === null || view === void 0 ? void 0 : 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({
+                logicalName: schema.logicalName,
+                search,
+                columns: columns,
+                expand,
+                filter: (_a = view === null || view === void 0 ? void 0 : view.filter) !== null && _a !== void 0 ? _a : null,
+                skip: 0,
+                limit: 5,
+                sort: view === null || view === void 0 ? void 0 : view.defaultSorting,
+            });
+            return result;
+        }),
+        placeholderData: react_query_1.keepPreviousData,
+        enabled: enabled !== null && enabled !== void 0 ? enabled : false,
+    });
+    return {
+        data,
+        isLoading: isFetching,
+    };
+}
+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* () {
+            return experienceStore.getViewLookupV2(logicalName, viewId);
+        }),
+    });
+    if (error) {
+        console.error(error);
+    }
+    return {
+        isLoading: isPending,
+        view: data,
+    };
+}

package/form/layout/FormBody/FormBody.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const FormBody: FC<PropsWithChildren>;

package/form/layout/FormBody/FormBody.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBody = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
+const locale_1 = require("@headless-adminapp/app/locale");
+const FormBody = ({ children }) => {
+    const { direction } = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, className: "FormBody_scrollview", rtl: direction === 'rtl', children: children }) }));
+};
+exports.FormBody = FormBody;

package/form/layout/FormBody/index.d.ts

@@ -0,0 +1 @@
+export * from './FormBody';

package/form/layout/FormBody/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FormBody"), exports);

package/form/layout/FormSection/FormSection.d.ts

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+import { FormSectionColumn } from './FormSectionColumn';
+import { FormSectionLoading } from './FormSectionLoading';
+interface FormSectionProps {
+    title?: string;
+    fullHeight?: boolean;
+    columnCount?: number;
+    labelPosition?: 'top' | 'left';
+    noPadding?: boolean;
+    hideLabel?: boolean;
+}
+export declare const FormSection: FC<PropsWithChildren<FormSectionProps>> & {
+    Column: typeof FormSectionColumn;
+    Loading: typeof FormSectionLoading;
+};
+export {};