@headless-adminapp/fluent 0.0.17-alpha.37 → 0.0.17-alpha.39

package/DataGrid/GridHeaderMobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface GridHeaderMobileProps {
+}
+export declare const GridHeaderMobile: FC<GridHeaderMobileProps>;
+export {};

package/DataGrid/GridHeaderMobile.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridHeaderMobile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
+const AppStringContext_1 = require("../App/AppStringContext");
+const GridHeaderMobile = () => {
+    const viewLookup = (0, hooks_1.useGridViewLookupData)();
+    const selectedView = (0, hooks_1.useSelectedView)();
+    const changeView = (0, hooks_1.useChangeView)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    const { language } = (0, locale_1.useLocale)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignItems: 'center',
+            paddingInline: 8,
+            gap: 8,
+            display: 'flex',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), style: { flex: 1 } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    alignItems: 'center',
+                    gap: 16,
+                    justifyContent: 'space-between',
+                    display: 'flex',
+                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), iconPosition: "after" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
+                                    var _a, _b;
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
+                                }) }) })] }) })] }));
+};
+exports.GridHeaderMobile = GridHeaderMobile;

package/DataGrid/GridListContainer.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+interface GridListContainerProps {
+    disableSelection?: boolean;
+    disableContextMenu?: boolean;
+    disableColumnResize?: boolean;
+    disableColumnSort?: boolean;
+    disableColumnReorder?: boolean;
+    disableColumnFilter?: boolean;
+    noPadding?: boolean;
+}
+export declare const GridListContainer: FC<GridListContainerProps>;
+export {};

package/DataGrid/GridListContainer.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridListContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const navigation_1 = require("@headless-adminapp/app/navigation");
+const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const uuid_1 = require("uuid");
+const RecordCard_1 = require("../PageEntityForm/RecordCard");
+const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
+const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        '&:hover': {
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
+        },
+    },
+});
+const fallbackData = [];
+const GridListContainer = ({}) => {
+    const styles = useStyles();
+    const data = (0, hooks_1.useGridData)();
+    const dataState = (0, hooks_1.useGridDataState)();
+    const fetchNextPage = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.fetchNextPage);
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const view = (0, hooks_1.useSelectedView)();
+    const tableWrapperRef = (0, react_1.useRef)(null);
+    const { direction } = (0, locale_1.useLocale)();
+    const dataRef = (0, react_1.useRef)(data);
+    dataRef.current = data;
+    const uniqueRecords = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = data === null || data === void 0 ? void 0 : data.records.map((record) => (Object.assign(Object.assign({}, record), { __uuid: (0, uuid_1.v4)() })))) !== null && _a !== void 0 ? _a : fallbackData);
+    }, [data === null || data === void 0 ? void 0 : data.records]);
+    const rows = uniqueRecords;
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: () => { var _a, _b; return (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement; },
+        estimateSize: () => 40,
+        overscan: 5,
+        enabled: true,
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    const virtualSize = virtualizer.getTotalSize();
+    const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
+    const openFormInternal = (0, navigation_1.useOpenForm)();
+    const openRecord = (0, react_1.useCallback)((id) => {
+        var _a, _b;
+        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+        openFormInternal({
+            logicalName: schema.logicalName,
+            id,
+        });
+    }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
+                fetchNextPage();
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'relative',
+                }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        width: '100%',
+                        height: virtualizer.getTotalSize(),
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: virtualItems.map((virtualRow) => {
+                                const row = rows[virtualRow.index];
+                                return ((0, jsx_runtime_1.jsx)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, className: (0, react_components_1.mergeClasses)(styles.root), style: {
+                                        width: '100%',
+                                        position: 'absolute',
+                                        transform: `translateY(${virtualRow.start}px)`,
+                                    }, onClick: () => {
+                                        const id = row[schema.idAttribute];
+                                        openRecord(id);
+                                    }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: row, schema: schema, selected: false }) }, virtualRow.key));
+                            }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                position: 'absolute',
+                                transform: `translateY(${virtualSize}px)`,
+                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card, schema: schema }, index))) }))] }) }) }) }));
+};
+exports.GridListContainer = GridListContainer;

package/DataGrid/TableCell/TableCellLink.d.ts

@@ -4,5 +4,6 @@ export interface TableCellLinkProps {
     href?: string;
     onClick?: () => void;
     width: number;
+    target?: string;
 }
 export declare const TableCellLink: FC<TableCellLinkProps>;

package/DataGrid/TableCell/TableCellLink.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/route/hooks");
 const react_1 = require("react");
-exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width }) => {
+exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target }) => {
     const router = (0, hooks_1.useRouter)();
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
             textOverflow: 'ellipsis',
@@ -16,7 +16,10 @@ exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width }) => {
             maxWidth: width,
             display: 'flex',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, onClick: (event) => {
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, target: target, onClick: (event) => {
+                if (target === '_blank') {
+                    return;
+                }
                 if (event.metaKey || event.ctrlKey) {
                     return;
                 }

package/DataGrid/useTableColumns.js

@@ -45,7 +45,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
     const contextCommands = isSubgrid
         ? // eslint-disable-next-line react-hooks/rules-of-hooks
-            (0, hooks_1.useSubGridCommands)()
+            (0, hooks_1.useSubGridContextCommands)()
         : // eslint-disable-next-line react-hooks/rules-of-hooks
             (0, hooks_1.useMainGridContextCommands)();
     const mutableContextCommandState = (0, mutable_1.useMutableState)(contextCommands, true);
@@ -241,6 +241,12 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                                     recordSetSetter('', []);
                                     router.push(path);
                                 } }, column.id));
+                        case 'attachment':
+                            const url = value === null || value === void 0 ? void 0 : value.url;
+                            if (!url) {
+                                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+                            }
+                            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: url, target: "_blank" }, column.id));
                     }
                     return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
                 },

package/Insights/WidgetDataGridContainer.js

@@ -20,6 +20,9 @@ function WidgetDataGridContainer({ content, }) {
     if (!view) {
         return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
+    if (!schema) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Schema not found" });
+    }
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,

package/Insights/Widgets.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Widgets = Widgets;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const insights_1 = require("@headless-adminapp/app/insights");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const widget_1 = require("@headless-adminapp/app/widget");
@@ -25,8 +26,9 @@ const WidgetProvider = ({ children, widget, }) => {
     return ((0, jsx_runtime_1.jsx)(widget_1.WidgetContext.Provider, { value: contextValue, children: children }));
 };
 function Widgets({ widgets, }) {
+    const isMobile = (0, hooks_1.useIsMobile)();
     return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGrid, { children: widgets.map((widget, index) => {
-            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, index));
+            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: isMobile ? 12 : widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, index));
         }) }));
 }
 function WidgetItem() {

package/PageEntityForm/RecordCard.js

@@ -52,7 +52,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: _record[cardView.primaryColumn] }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((column) => {
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((column) => {
                         const value = _record[column.name];
                         if (!value) {
                             return null;

package/PageEntityForm/RecordCardLoading.d.ts

@@ -0,0 +1,8 @@
+import { CardView } from '@headless-adminapp/core/experience/view';
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+interface RecordCardLoadingProps<S extends SchemaAttributes = SchemaAttributes> {
+    schema: Schema<S>;
+    cardView: CardView<S>;
+}
+export declare function RecordCardLoading<S extends SchemaAttributes = SchemaAttributes>({ cardView }: RecordCardLoadingProps<S>): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageEntityForm/RecordCardLoading.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordCardLoading = RecordCardLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        paddingInline: react_components_1.tokens.spacingHorizontalL,
+        paddingBlock: react_components_1.tokens.spacingVerticalS,
+        gap: react_components_1.tokens.spacingHorizontalS,
+    },
+});
+function RecordCardLoading({ cardView }) {
+    var _a;
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { color: "neutral", style: { cursor: 'pointer' } })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    gap: react_components_1.tokens.spacingVerticalXXS,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { height: 16 } }) }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((_, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { width: 160, height: 12 } }) }, index)))] })] }));
+}

package/PageEntityForm/StandardControl.js

@@ -26,6 +26,7 @@ const SwitchControl_1 = require("../form/controls/SwitchControl");
 const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 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;
     const { attribute, label: _label, isError, 
@@ -74,7 +75,7 @@ const StandardControl = (props) => {
                     return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
                 }
                 case 'url': {
-                    const Control = (_e = componentStore_1.componentStore.getComponent('Form.UrlControl')) !== null && _e !== void 0 ? _e : TextControl_1.TextControl;
+                    const Control = (_e = componentStore_1.componentStore.getComponent('Form.UrlControl')) !== null && _e !== void 0 ? _e : UrlControl_1.UrlControl;
                     return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
                 }
                 case 'textarea': {

package/PageEntityView/PageEntityView.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const PageEntityViewProvider_1 = require("@headless-adminapp/app/providers/PageEntityViewProvider");
 const icons_1 = require("@headless-adminapp/icons");
 const PageBroken_1 = require("../components/PageBroken");
 const PageLoading_1 = require("../components/PageLoading");
 const PageEntityViewDesktopContainer_1 = require("./PageEntityViewDesktopContainer");
+const PageEntityViewMobileContainer_1 = require("./PageEntityViewMobileContainer");
 const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
     const result = (0, datagrid_1.useLoadMainGridPage)(logicalName, viewId);
+    const isMobile = (0, hooks_1.useIsMobile)();
     if (result.loading) {
         return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
     }
@@ -17,6 +20,6 @@ const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
         return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }));
     }
     const { schema, commands, viewLookup, view } = result;
-    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {}) }));
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: isMobile ? ((0, jsx_runtime_1.jsx)(PageEntityViewMobileContainer_1.PageEntityViewMobileContainer, {})) : ((0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {})) }));
 };
 exports.PageEntityView = PageEntityView;

package/PageEntityView/PageEntityViewMobileContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PageEntityViewMobileContainer: FC;

package/PageEntityView/PageEntityViewMobileContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityViewMobileContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CommandContainer_1 = require("../DataGrid/CommandContainer");
+const GridHeaderMobile_1 = require("../DataGrid/GridHeaderMobile");
+const GridListContainer_1 = require("../DataGrid/GridListContainer");
+const GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
+const PageEntityViewDesktopFrame_1 = require("./PageEntityViewDesktopFrame");
+const PageEntityViewMobileContainer = () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrame_1.PageEntityViewDesktopFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }) }));
+};
+exports.PageEntityViewMobileContainer = PageEntityViewMobileContainer;

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, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TelephoneControl.js

@@ -4,10 +4,10 @@ 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, placeholder, disabled, autoComplete, }) {
+function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, 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: {
+        readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             width: '100%',
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 

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,7 +3,7 @@ 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())
@@ -12,5 +12,5 @@ function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFoc
                     : 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 }));
+        readOnly: disabled || readOnly, rows: rows }));
 }

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 === 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: 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.37",
+  "version": "0.0.17-alpha.39",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -48,5 +48,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "2a9d7f74b4685eb5c823ad55f83c16f3ff912e21"
+  "gitHead": "2bfa7d267f5fa6beb476fda508c43661444dc894"
 }

package/types/index.d.ts

@@ -39,6 +39,7 @@ declare module '@headless-adminapp/icons/types' {
         Copy: Icon;
         Document: Icon;
         Image: Icon;
+        Checkmark: Icon;
     }
 }
 export {};