@headless-adminapp/app 1.4.12 → 1.4.14

package/app/LayoutProvider.js

@@ -6,6 +6,7 @@ const react_query_1 = require("@tanstack/react-query");
 const auth_1 = require("../auth");
 const defaults_1 = require("../defaults");
 const dialog_1 = require("../dialog");
+const header_1 = require("../header");
 const locale_1 = require("../locale");
 const metadata_1 = require("../metadata");
 const progress_indicator_1 = require("../progress-indicator");
@@ -39,6 +40,6 @@ const defaultDataService = {
     },
 };
 const LayoutProvider = ({ authPlaceholder, authProps, dataService = defaultDataService, fileService, localeProps, metadataProps, queryClient = defaults_1.queryClient, routeProps, children, containers: { DialogContainer, ProgressIndicatorContainer, ToastNotificationContainer, }, }) => {
-    return ((0, jsx_runtime_1.jsx)(route_1.RouteProvider, { ...routeProps, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { ...localeProps, children: (0, jsx_runtime_1.jsx)(metadata_1.MetadataProvider, { ...metadataProps, children: (0, jsx_runtime_1.jsx)(transport_1.DataServiceContext.Provider, { value: dataService, children: (0, jsx_runtime_1.jsx)(context_1.FileServiceContext.Provider, { value: fileService ?? null, children: (0, jsx_runtime_1.jsx)(dialog_1.DialogProvider, { children: (0, jsx_runtime_1.jsx)(progress_indicator_1.ProgressIndicatorProvider, { children: (0, jsx_runtime_1.jsxs)(toast_notification_1.ToastNotificationProvider, { children: [(0, jsx_runtime_1.jsx)(DialogContainer, {}), (0, jsx_runtime_1.jsx)(ProgressIndicatorContainer, {}), (0, jsx_runtime_1.jsx)(ToastNotificationContainer, {}), (0, jsx_runtime_1.jsx)(auth_1.AuthProvider, { ...authProps, children: (0, jsx_runtime_1.jsx)(AuthWrapper_1.AuthWrapper, { Placeholder: authPlaceholder, children: children }) })] }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(route_1.RouteProvider, { ...routeProps, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { ...localeProps, children: (0, jsx_runtime_1.jsx)(metadata_1.MetadataProvider, { ...metadataProps, children: (0, jsx_runtime_1.jsx)(transport_1.DataServiceContext.Provider, { value: dataService, children: (0, jsx_runtime_1.jsx)(context_1.FileServiceContext.Provider, { value: fileService ?? null, children: (0, jsx_runtime_1.jsx)(dialog_1.DialogProvider, { children: (0, jsx_runtime_1.jsx)(progress_indicator_1.ProgressIndicatorProvider, { children: (0, jsx_runtime_1.jsxs)(toast_notification_1.ToastNotificationProvider, { children: [(0, jsx_runtime_1.jsx)(DialogContainer, {}), (0, jsx_runtime_1.jsx)(ProgressIndicatorContainer, {}), (0, jsx_runtime_1.jsx)(ToastNotificationContainer, {}), (0, jsx_runtime_1.jsx)(auth_1.AuthProvider, { ...authProps, children: (0, jsx_runtime_1.jsx)(header_1.HeaderProvider, { children: (0, jsx_runtime_1.jsx)(AuthWrapper_1.AuthWrapper, { Placeholder: authPlaceholder, children: children }) }) })] }) }) }) }) }) }) }) }) }));
 };
 exports.LayoutProvider = LayoutProvider;

package/builders/CommandBuilder/ViewCommandBuilder.js

@@ -69,6 +69,7 @@ var ViewCommandBuilder;
             Icon,
             text,
             localizedText: localizedTexts,
+            isQuickAction: true,
             onClick: (context) => {
                 context.navigation.openForm({
                     logicalName: context.primaryControl.schema.logicalName,

package/header/HeaderProvider.d.ts

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

package/header/HeaderProvider.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../mutable/context");
+const context_2 = require("./context");
+const HeaderProvider = ({ children }) => {
+    const contextValue = (0, context_1.useCreateContextStore)(context_2.defaultHeaderStoreState);
+    return ((0, jsx_runtime_1.jsx)(context_2.HeaderContext.Provider, { value: contextValue, children: children }));
+};
+exports.HeaderProvider = HeaderProvider;

package/header/components/MobileHeaderLeftContent.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface MobileHeaderLeftContentProps {
+    type: 'menu' | 'back';
+    order?: number;
+}
+export declare const MobileHeaderLeftContent: FC<MobileHeaderLeftContentProps>;
+export {};

package/header/components/MobileHeaderLeftContent.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileHeaderLeftContent = void 0;
+const useMobileHeaderSetValue_1 = require("../hooks/useMobileHeaderSetValue");
+const MobileHeaderLeftContent = ({ type, order = 0, }) => {
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(type === 'back', order, 'showBackButton');
+    return null;
+};
+exports.MobileHeaderLeftContent = MobileHeaderLeftContent;

package/header/components/MobileHeaderRightContent.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface MobileHeaderLeftContentProps {
+    order?: number;
+}
+export declare const MobileHeaderRightContent: FC<PropsWithChildren<MobileHeaderLeftContentProps>>;
+export {};

package/header/components/MobileHeaderRightContent.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileHeaderRightContent = void 0;
+const useMobileHeaderSetValue_1 = require("../hooks/useMobileHeaderSetValue");
+const MobileHeaderRightContent = ({ children, order = 0 }) => {
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(children, order, 'rightComponent');
+    return null;
+};
+exports.MobileHeaderRightContent = MobileHeaderRightContent;

package/header/components/MobileHeaderTitle.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface MobileHeaderTitleProps {
+    title: React.ReactNode;
+    order?: number;
+}
+export declare const MobileHeaderTitle: FC<MobileHeaderTitleProps>;
+export {};

package/header/components/MobileHeaderTitle.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileHeaderTitle = void 0;
+const useMobileHeaderSetValue_1 = require("../hooks/useMobileHeaderSetValue");
+const MobileHeaderTitle = ({ title, order = 0, }) => {
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(title, order, 'title');
+    return null;
+};
+exports.MobileHeaderTitle = MobileHeaderTitle;

package/header/context.d.ts

@@ -0,0 +1,11 @@
+export type DataStack<T> = {
+    order: number;
+    value: T;
+}[];
+export interface HeaderStoreState {
+    title: DataStack<React.ReactNode>;
+    showBackButton: DataStack<boolean>;
+    rightComponent: DataStack<React.ReactNode>;
+}
+export declare const defaultHeaderStoreState: HeaderStoreState;
+export declare const HeaderContext: import("react").Context<import("../mutable/context").ContextValue<HeaderStoreState>>;

package/header/context.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderContext = exports.defaultHeaderStoreState = void 0;
+const context_1 = require("../mutable/context");
+exports.defaultHeaderStoreState = {
+    title: [],
+    showBackButton: [],
+    rightComponent: [],
+};
+exports.HeaderContext = (0, context_1.createContext)();

package/header/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useHeaderValue } from './useHeaderValue';
+export { useMobileHeaderSetValue } from './useMobileHeaderSetValue';
+export { useHeaderShowBackButton } from './useHeaderShowBackButton';
+export { useMobileHeader } from './useMobileHeader';

package/header/hooks/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileHeader = exports.useHeaderShowBackButton = exports.useMobileHeaderSetValue = exports.useHeaderValue = void 0;
+var useHeaderValue_1 = require("./useHeaderValue");
+Object.defineProperty(exports, "useHeaderValue", { enumerable: true, get: function () { return useHeaderValue_1.useHeaderValue; } });
+var useMobileHeaderSetValue_1 = require("./useMobileHeaderSetValue");
+Object.defineProperty(exports, "useMobileHeaderSetValue", { enumerable: true, get: function () { return useMobileHeaderSetValue_1.useMobileHeaderSetValue; } });
+var useHeaderShowBackButton_1 = require("./useHeaderShowBackButton");
+Object.defineProperty(exports, "useHeaderShowBackButton", { enumerable: true, get: function () { return useHeaderShowBackButton_1.useHeaderShowBackButton; } });
+var useMobileHeader_1 = require("./useMobileHeader");
+Object.defineProperty(exports, "useMobileHeader", { enumerable: true, get: function () { return useMobileHeader_1.useMobileHeader; } });

package/header/hooks/useHeaderShowBackButton.d.ts

@@ -0,0 +1 @@
+export declare function useHeaderShowBackButton(show: boolean, order?: number): void;

package/header/hooks/useHeaderShowBackButton.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHeaderShowBackButton = useHeaderShowBackButton;
+const useMobileHeaderSetValue_1 = require("./useMobileHeaderSetValue");
+function useHeaderShowBackButton(show, order = 0) {
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(show, order, 'showBackButton');
+}

package/header/hooks/useHeaderValue.d.ts

@@ -0,0 +1,2 @@
+import { HeaderStoreState } from '../context';
+export declare function useHeaderValue<T>(field: keyof HeaderStoreState): T | null;

package/header/hooks/useHeaderValue.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHeaderValue = useHeaderValue;
+const mutable_1 = require("../../mutable");
+const context_1 = require("../context");
+function getLastValue(data) {
+    if (!data.length)
+        return null;
+    return data[data.length - 1];
+}
+function useHeaderValue(field) {
+    const value = (0, mutable_1.useContextSelector)(context_1.HeaderContext, (state) => getLastValue(state[field])?.value ?? null);
+    return value;
+}

package/header/hooks/useMobileHeader.d.ts

@@ -0,0 +1,5 @@
+export declare function useMobileHeader(showBackButton: boolean, options?: {
+    title?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    order?: number;
+}): void;

package/header/hooks/useMobileHeader.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileHeader = useMobileHeader;
+const useMobileHeaderSetValue_1 = require("./useMobileHeaderSetValue");
+function useMobileHeader(showBackButton, options) {
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(showBackButton, options?.order ?? 0, 'showBackButton');
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(options?.title, options?.order ?? 0, 'title');
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(options?.rightContent, options?.order ?? 0, 'rightComponent');
+}

package/header/hooks/useMobileHeaderSetValue.d.ts

@@ -0,0 +1,2 @@
+import { HeaderStoreState } from '../context';
+export declare function useMobileHeaderSetValue<T>(value: T, order: number, field: keyof HeaderStoreState): void;

package/header/hooks/useMobileHeaderSetValue.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileHeaderSetValue = useMobileHeaderSetValue;
+const react_1 = require("react");
+const mutable_1 = require("../../mutable");
+const context_1 = require("../context");
+function mergeStack(prevState, value, order) {
+    return [
+        ...prevState.filter((x) => x.order !== order),
+        {
+            order,
+            value,
+        },
+    ].sort((a, b) => a.order - b.order);
+}
+function useMobileHeaderSetValue(value, order, field) {
+    const setValue = (0, mutable_1.useContextSetValue)(context_1.HeaderContext);
+    (0, react_1.useEffect)(() => {
+        setValue((state) => ({
+            [field]: mergeStack(state[field], value, order),
+        }));
+    }, [setValue, field, order, value]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            setValue((state) => ({
+                [field]: state[field].filter((x) => x.order !== order),
+            }));
+        };
+    }, [setValue, field, order]);
+}

package/header/index.d.ts

@@ -0,0 +1,3 @@
+export { HeaderContext, type HeaderStoreState } from './context';
+export { HeaderProvider } from './HeaderProvider';
+export * from './hooks';

package/header/index.js

@@ -0,0 +1,22 @@
+"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 });
+exports.HeaderProvider = exports.HeaderContext = void 0;
+var context_1 = require("./context");
+Object.defineProperty(exports, "HeaderContext", { enumerable: true, get: function () { return context_1.HeaderContext; } });
+var HeaderProvider_1 = require("./HeaderProvider");
+Object.defineProperty(exports, "HeaderProvider", { enumerable: true, get: function () { return HeaderProvider_1.HeaderProvider; } });
+__exportStar(require("./hooks"), exports);

package/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from './useIsMobile';
 export * from './useStorageState';
 export * from './useSystemColorScheme';
 export { useItemsWithKey } from './useItemsWithKey';
+export * from './useLongPress';

package/hooks/index.js

@@ -22,3 +22,4 @@ __exportStar(require("./useStorageState"), exports);
 __exportStar(require("./useSystemColorScheme"), exports);
 var useItemsWithKey_1 = require("./useItemsWithKey");
 Object.defineProperty(exports, "useItemsWithKey", { enumerable: true, get: function () { return useItemsWithKey_1.useItemsWithKey; } });
+__exportStar(require("./useLongPress"), exports);

package/hooks/useElementLayout.d.ts

@@ -1,7 +1,11 @@
 import { RefObject } from 'react';
-interface Size {
+interface ElementLayout {
     width: number;
     height: number;
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
 }
-export declare function useElementSize(elementRef: RefObject<HTMLElement>, interval?: number): Size;
+export declare function useElementSize(elementRef: RefObject<HTMLElement>, interval?: number): ElementLayout;
 export {};

package/hooks/useElementLayout.js

@@ -3,17 +3,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useElementSize = useElementSize;
 const react_1 = require("react");
 function useElementSize(elementRef, interval) {
-    const [size, setSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    const [size, setSize] = (0, react_1.useState)({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    });
     (0, react_1.useLayoutEffect)(() => {
         function updateSize() {
             if (elementRef.current) {
                 const element = elementRef.current;
                 const rect = element.getBoundingClientRect();
                 setSize((size) => {
-                    if (size.width === rect.width && size.height === rect.height) {
+                    if (size.width === rect.width &&
+                        size.height === rect.height &&
+                        size.top === rect.top &&
+                        size.left === rect.left &&
+                        size.right === rect.right &&
+                        size.bottom === rect.bottom) {
                         return size;
                     }
-                    return { width: rect.width, height: rect.height };
+                    return {
+                        width: rect.width,
+                        height: rect.height,
+                        top: rect.top,
+                        left: rect.left,
+                        right: rect.right,
+                        bottom: rect.bottom,
+                    };
                 });
             }
         }

package/hooks/useLongPress.d.ts

@@ -0,0 +1,12 @@
+interface Options {
+    isPreventDefault?: boolean;
+    delay?: number;
+}
+export declare const useLongPress: (callback: (e: TouchEvent | MouseEvent) => void, { isPreventDefault, delay }?: Options) => {
+    readonly onMouseDown: (e: any) => void;
+    readonly onTouchStart: (e: any) => void;
+    readonly onMouseUp: () => void;
+    readonly onMouseLeave: () => void;
+    readonly onTouchEnd: () => void;
+};
+export {};

package/hooks/useLongPress.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLongPress = void 0;
+const react_1 = require("react");
+const util_1 = require("react-use/lib/misc/util");
+const isTouchEvent = (ev) => {
+    return 'touches' in ev;
+};
+const preventDefault = (ev) => {
+    if (!isTouchEvent(ev))
+        return;
+    if (ev.touches.length < 2 && ev.preventDefault) {
+        ev.preventDefault();
+    }
+};
+const useLongPress = (callback, { isPreventDefault = true, delay = 300 } = {}) => {
+    const timeout = (0, react_1.useRef)();
+    const target = (0, react_1.useRef)();
+    const start = (0, react_1.useCallback)((event) => {
+        // prevent ghost click on mobile devices
+        if (isPreventDefault && event.target) {
+            (0, util_1.on)(event.target, 'touchend', preventDefault, { passive: false });
+            target.current = event.target;
+        }
+        timeout.current = setTimeout(() => callback(event), delay);
+    }, [callback, delay, isPreventDefault]);
+    const clear = (0, react_1.useCallback)(() => {
+        // clearTimeout and removeEventListener
+        timeout.current && clearTimeout(timeout.current);
+        if (isPreventDefault && target.current) {
+            (0, util_1.off)(target.current, 'touchend', preventDefault);
+        }
+    }, [isPreventDefault]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('touchmove', clear);
+        return () => {
+            window.removeEventListener('touchmove', clear);
+        };
+    }, [clear]);
+    return {
+        onMouseDown: (e) => start(e),
+        onTouchStart: (e) => start(e),
+        onMouseUp: clear,
+        onMouseLeave: clear,
+        onTouchEnd: clear,
+    };
+};
+exports.useLongPress = useLongPress;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "1.4.12",
+  "version": "1.4.14",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -38,5 +38,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "ff83d8ca2e616d6125781975cfc1dde6a1fc05c3"
+  "gitHead": "0792de20ccf4a33c064428de55263fcf13de5543"
 }