@codeleap/web 4.1.0 → 4.2.1

package/dist/components/InputBase/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/InputBase/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAEA,SAAgB,oBAAoB,CAA0C,KAAQ;IAIpF,IAAM,OAAO,GAAkB;QAC7B,OAAO;QACP,OAAO;QACP,cAAc;QACd,UAAU;QACV,WAAW;QACX,aAAa;QACb,SAAS;QACT,UAAU;QACV,mBAAmB;QACnB,cAAc;QACd,UAAU;KACX,CAAA;IAED,IAAM,IAAI,gBAAQ,KAAK,CAAE,CAAA;IAEzB,IAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,GAAG;QACrC,aAAa;QACb,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA;QAEpB,OAAO,GAAG,CAAA;IACZ,CAAC,EAAE,EAAoB,CAAC,CAAA;IAExB,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,IAAsB,EAAE,CAAA;AACnE,CAAC;AA5BD,oDA4BC;AAEM,IAAM,aAAa,GAAG,UAAC,GAAe,EAAE,KAAgB,IAAK,OAAA,CAAC;IACnE,IAAI,iCACC,GAAG,CAAC,IAAI,GACR,CAAC,KAAK,CAAC,OAAO,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC,GACpC,CAAC,KAAK,CAAC,QAAQ,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC,CACzC;IACD,eAAe,eACV,CAAC,KAAK,CAAC,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC,CAC5C;IACD,gBAAgB,iCACX,GAAG,CAAC,gBAAgB,GACpB,CAAC,KAAK,CAAC,OAAO,IAAI,GAAG,CAAC,wBAAwB,CAAC,CAAC,GAChD,CAAC,KAAK,CAAC,QAAQ,IAAI,GAAG,CAAC,wBAAwB,CAAC,CAAC,CACrD;IACD,2BAA2B,eACtB,CAAC,KAAK,CAAC,QAAQ,IAAI,GAAG,CAAC,2BAA2B,CAAC,CAAC,CACxD;CACF,CAAC,EAjBkE,CAiBlE,CAAA;AAjBW,QAAA,aAAa,iBAiBxB;AAEF,SAAgB,YAAY,CAAC,QAAiC;IAAjC,yBAAA,EAAA,aAAiC;IAC5D,IAAI,MAAM,GAAG,EAAE,CAAA;IAEf,MAAM,CAAC,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,UAAA,KAAK;QACzC,IAAI,KAAK,EAAE;YACT,MAAM,yBACD,MAAM,GACN,KAAK,CACT,CAAA;SACF;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,MAAM,CAAA;AACf,CAAC;AAbD,oCAaC;AAEM,IAAM,YAAY,GAAG,UAAC,UAAsB,EAAE,MAAkB,IAAK,OAAA,CAAC;IAC3E,IAAI,wBACC,UAAU,CAAC,IAAI,GACf,MAAM,CAAC,IAAI,CACf;IACD,eAAe,wBACV,UAAU,CAAC,eAAe,CAAC,GAC3B,MAAM,CAAC,eAAe,CAAC,CAC3B;IACD,gBAAgB,wBACX,UAAU,CAAC,gBAAgB,GAC3B,MAAM,CAAC,gBAAgB,CAC3B;IACD,2BAA2B,wBACtB,UAAU,CAAC,2BAA2B,CAAC,GACvC,MAAM,CAAC,2BAA2B,CAAC,CACvC;CACF,CAAC,EAjB0E,CAiB1E,CAAA;AAjBW,QAAA,YAAY,gBAiBvB"}

package/dist/components/List/ListLayout.d.ts

@@ -0,0 +1,2 @@
+import { ListLayoutProps } from './types';
+export declare const ListLayout: (props: ListLayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/List/ListLayout.js

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListLayout = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var View_1 = require("../View");
+var styles_1 = require("@codeleap/styles");
+var ActivityIndicator_1 = require("../ActivityIndicator");
+var common_1 = require("@codeleap/common");
+var framer_motion_1 = require("framer-motion");
+var DefaultRefreshIndicator = function (props) {
+    var refreshing = props.refreshing, styles = props.styles, refreshPosition = props.refreshPosition, refreshControlProps = props.refreshControlProps, debugName = props.debugName, refreshSize = props.refreshSize, refreshControlIndicatorProps = props.refreshControlIndicatorProps;
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({ initial: false, animate: {
+            opacity: refreshing ? 1 : 0,
+            top: refreshing ? refreshPosition : 0,
+        } }, refreshControlProps, { style: styles === null || styles === void 0 ? void 0 : styles.refreshControl }, { children: (0, jsx_runtime_1.jsx)(ActivityIndicator_1.ActivityIndicator, __assign({ debugName: debugName + 'refresh-indicator', size: refreshSize }, refreshControlIndicatorProps, { style: styles.refreshControlIndicator })) })));
+};
+var ListLayout = function (props) {
+    var ListEmptyComponent = props.ListEmptyComponent, ListFooterComponent = props.ListFooterComponent, ListHeaderComponent = props.ListHeaderComponent, refresh = props.refresh, _a = props.ListRefreshControlComponent, ListRefreshControlComponent = _a === void 0 ? DefaultRefreshIndicator : _a, styles = props.styles, isEmpty = props.isEmpty, isLoading = props.isLoading, _b = props.placeholder, placeholder = _b === void 0 ? {} : _b, children = props.children, debugName = props.debugName, isFetching = props.isFetching, isFetchingNextPage = props.isFetchingNextPage, ListLoadingIndicatorComponent = props.ListLoadingIndicatorComponent, scrollableRef = props.scrollableRef, _c = props.showFooter, showFooter = _c === void 0 ? true : _c, wrapperProps = props.wrapperProps;
+    var getKeyStyle = function (key) { return (0, styles_1.mergeStyles)([
+        styles[key],
+        isLoading ? styles["".concat(key, ":loading")] : null,
+        isEmpty ? styles["".concat(key, ":empty")] : null,
+    ]); };
+    var showIndicator = (isFetching || isFetchingNextPage) && !common_1.TypeGuards.isNil(ListLoadingIndicatorComponent);
+    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ style: getKeyStyle('wrapper'), ref: scrollableRef }, wrapperProps, { children: [!!ListHeaderComponent ? (0, jsx_runtime_1.jsx)(ListHeaderComponent, {}) : null, isEmpty ? (0, jsx_runtime_1.jsx)(ListEmptyComponent, __assign({ debugName: debugName }, placeholder)) : null, (0, jsx_runtime_1.jsxs)(View_1.View, __assign({ style: [getKeyStyle('innerWrapper'), isEmpty && { display: 'none' }] }, { children: [(!ListRefreshControlComponent || !refresh) ? null : (0, jsx_runtime_1.jsx)(ListRefreshControlComponent, __assign({}, props, { styles: styles })), children] })), showIndicator ? (0, jsx_runtime_1.jsx)(ListLoadingIndicatorComponent, {}) : null, (!!ListFooterComponent && showFooter) ? (0, jsx_runtime_1.jsx)(ListFooterComponent, __assign({}, props)) : null] })));
+};
+exports.ListLayout = ListLayout;
+//# sourceMappingURL=ListLayout.js.map

package/dist/components/List/ListLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListLayout.js","sourceRoot":"","sources":["../../../src/components/List/ListLayout.tsx"],"names":[],"mappings":"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"}

package/dist/components/List/index.d.ts

@@ -0,0 +1,13 @@
+import { ListItem, ListProps } from './types';
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
+export * from './styles';
+export * from './types';
+export * from './ListLayout';
+export declare function List(props: ListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace List {
+    var styleRegistryName: string;
+    var elements: string[];
+    var rootElement: string;
+    var withVariantTypes: <S extends AnyRecord>(styles: S) => <T extends ListItem>(props: StyledComponentProps<ListProps<T>, S>) => IJSX;
+    var defaultProps: Partial<ListProps>;
+}

package/dist/components/List/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var View_1 = require("../View");
+var EmptyPlaceholder_1 = require("../EmptyPlaceholder");
+var lib_1 = require("../../lib");
+var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+var ListLayout_1 = require("./ListLayout");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./ListLayout"), exports);
+var RenderSeparator = function (props) {
+    return (0, jsx_runtime_1.jsx)(View_1.View, { style: props === null || props === void 0 ? void 0 : props.separatorStyles });
+};
+function List(props) {
+    var allProps = __assign(__assign({}, List.defaultProps), props);
+    var RenderItem = allProps.renderItem, rowItemsSpacing = allProps.rowItemsSpacing, ListSeparatorComponent = allProps.ListSeparatorComponent, data = allProps.data, overscan = allProps.overscan, separators = allProps.separators, masonryProps = allProps.masonryProps, reloadTimeout = allProps.reloadTimeout, showFooter = allProps.showFooter, style = allProps.style, layoutWrapperProps = allProps.layoutWrapperProps;
+    var styles = (0, useStylesFor_1.useStylesFor)(List.styleRegistryName, style);
+    var _a = (0, lib_1.useInfiniteScroll)(allProps), layoutProps = _a.layoutProps, onLoadMore = _a.onLoadMore;
+    var _b = (0, lib_1.useMasonryReload)({
+        data: data,
+        reloadTimeout: reloadTimeout,
+    }), reloadingLayout = _b.reloadingLayout, previousLength = _b.previousLength;
+    var separator = react_1.default.useMemo(function () {
+        return separators ? (0, jsx_runtime_1.jsx)(ListSeparatorComponent, { separatorStyles: styles.separator }) : null;
+    }, []);
+    var renderItem = react_1.default.useCallback(function (_item) {
+        if (!RenderItem)
+            return null;
+        var listLength = (data === null || data === void 0 ? void 0 : data.length) || 0;
+        var isFirst = (_item === null || _item === void 0 ? void 0 : _item.index) === 0;
+        var isLast = (_item === null || _item === void 0 ? void 0 : _item.index) === listLength - 1;
+        var isOnly = isFirst && isLast;
+        var _itemProps = __assign(__assign({}, _item), { isOnly: isOnly, isLast: isLast, isFirst: isFirst, item: _item === null || _item === void 0 ? void 0 : _item.data });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isFirst ? null : separator, (0, jsx_runtime_1.jsx)(RenderItem, __assign({}, _itemProps))] });
+    }, [RenderItem]);
+    return ((0, jsx_runtime_1.jsx)(ListLayout_1.ListLayout, __assign({}, allProps, layoutProps, { wrapperProps: layoutWrapperProps, styles: styles, showFooter: reloadingLayout ? false : showFooter }, { children: (0, jsx_runtime_1.jsx)(lib_1.ListMasonry, __assign({ items: data, render: renderItem, itemKey: function (item, _index) { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : _index); }, rowGutter: rowItemsSpacing, onRender: onLoadMore, overscanBy: overscan, columnCount: 1, previousItemsLength: previousLength, reloadingLayout: reloadingLayout }, masonryProps)) })));
+}
+exports.List = List;
+List.styleRegistryName = 'List';
+List.elements = ['wrapper', 'innerWrapper', 'separator', 'refreshControl', 'refreshControlIndicator'];
+List.rootElement = 'wrapper';
+List.withVariantTypes = function (styles) {
+    return List;
+};
+List.defaultProps = {
+    ListEmptyComponent: EmptyPlaceholder_1.EmptyPlaceholder,
+    ListSeparatorComponent: RenderSeparator,
+    refreshDebounce: 1500,
+    refreshSize: 40,
+    refreshThreshold: 0.1,
+    refreshPosition: 16,
+    refresh: true,
+    rowItemsSpacing: 8,
+    overscan: 2,
+    reloadTimeout: 350,
+    showFooter: true,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(List);
+//# sourceMappingURL=index.js.map

package/dist/components/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/List/styles.d.ts

@@ -0,0 +1,4 @@
+type ListStates = 'empty' | 'loading';
+export type ListParts = 'wrapper' | 'innerWrapper' | 'separator' | 'refreshControl' | 'refreshControlIndicator';
+export type ListComposition = `${ListParts}:${ListStates}` | ListParts;
+export {};

package/dist/components/List/styles.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=styles.js.map

package/dist/components/List/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/List/styles.ts"],"names":[],"mappings":""}

package/dist/components/List/types.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { StylesOf } from '@codeleap/common';
+import { EmptyPlaceholderProps } from '../EmptyPlaceholder';
+import { ViewProps } from '../View';
+import { MotionProps } from 'framer-motion';
+import { ActivityIndicatorProps } from '../ActivityIndicator';
+import { ComponentCommonProps } from '../../types';
+import { ItemMasonryProps, ListMasonryProps, UseInfiniteScrollArgs, UseInfiniteScrollReturn } from '../../lib';
+import { ListComposition } from './styles';
+import { StyledProp } from '@codeleap/styles';
+export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['layoutProps'] & {
+    styles: StylesOf<ListComposition>;
+    children?: React.ReactNode;
+    showFooter?: boolean;
+    wrapperProps?: Partial<ViewProps>;
+};
+export type ListRefreshControlComponent = Partial<ListLayoutProps> & {
+    styles: StylesOf<ListComposition>;
+};
+export type AugmentedRenderItemInfo<T> = ItemMasonryProps<T> & {
+    item: T;
+    isFirst: boolean;
+    isLast: boolean;
+    isOnly: boolean;
+};
+export type ListItem = {
+    id: string | number;
+};
+export type ListProps<T extends ListItem = ListItem> = ComponentCommonProps & UseInfiniteScrollArgs & {
+    data: T[];
+    isFetching?: boolean;
+    hasNextPage?: boolean;
+    separators?: boolean;
+    onRefresh?: () => void;
+    placeholder?: Omit<EmptyPlaceholderProps, 'debugName'>;
+    keyExtractor?: (item: T, index: number) => string;
+    renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement;
+    ListFooterComponent?: (props: ListLayoutProps) => React.ReactElement;
+    ListLoadingIndicatorComponent?: () => React.ReactElement;
+    ListRefreshControlComponent?: () => React.ReactElement;
+    ListEmptyComponent?: React.FC | ((props: EmptyPlaceholderProps) => React.ReactElement);
+    ListSeparatorComponent?: React.FC | ((props: {
+        separatorStyles: ViewProps['style'];
+    }) => React.ReactElement);
+    isLoading?: boolean;
+    isFetchingNextPage?: boolean;
+    fetchNextPage?: () => void;
+    ListHeaderComponent?: () => React.ReactElement;
+    refreshDebounce?: number;
+    refreshSize?: number;
+    refreshThreshold?: number;
+    refreshPosition?: number;
+    refresh?: boolean;
+    refreshControlProps?: Partial<MotionProps>;
+    refreshControlIndicatorProps?: Partial<ActivityIndicatorProps>;
+    style?: StyledProp<ListComposition>;
+    ref?: React.MutableRefObject<undefined>;
+    rowItemsSpacing?: number;
+    overscan?: number;
+    masonryProps?: Partial<ListMasonryProps<T>>;
+    reloadTimeout?: number;
+    showFooter?: boolean;
+    layoutWrapperProps?: Partial<ViewProps>;
+};

package/dist/components/List/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/List/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":""}

package/dist/components/LoadingOverlay/index.d.ts

@@ -0,0 +1,12 @@
+import { LoadingOverlayProps } from './types';
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
+export * from './styles';
+export * from './types';
+export declare const LoadingOverlay: {
+    (props: LoadingOverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    styleRegistryName: string;
+    elements: string[];
+    rootElement: string;
+    withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<LoadingOverlayProps, S>) => IJSX;
+    defaultProps: Partial<LoadingOverlayProps>;
+};

package/dist/components/LoadingOverlay/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var View_1 = require("../View");
+var ActivityIndicator_1 = require("../ActivityIndicator");
+var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+var styles_1 = require("@codeleap/styles");
+var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+var LoadingOverlay = function (props) {
+    var _a = __assign(__assign({}, exports.LoadingOverlay.defaultProps), props), visible = _a.visible, children = _a.children, style = _a.style, indicatorProps = _a.indicatorProps, debugName = _a.debugName, rest = __rest(_a, ["visible", "children", "style", "indicatorProps", "debugName"]);
+    var styles = (0, useStylesFor_1.useStylesFor)(exports.LoadingOverlay.styleRegistryName, style);
+    var indicatorStyles = (0, styles_1.useNestedStylesByKey)('indicator', styles);
+    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({}, rest, { style: [styles.wrapper, visible && styles['wrapper:visible']] }, { children: [(0, jsx_runtime_1.jsx)(ActivityIndicator_1.ActivityIndicator, __assign({ debugName: debugName }, indicatorProps, { style: indicatorStyles })), children] })));
+};
+exports.LoadingOverlay = LoadingOverlay;
+exports.LoadingOverlay.styleRegistryName = 'LoadingOverlay';
+exports.LoadingOverlay.elements = ['wrapper', 'indicator'];
+exports.LoadingOverlay.rootElement = 'wrapper';
+exports.LoadingOverlay.withVariantTypes = function (styles) {
+    return exports.LoadingOverlay;
+};
+exports.LoadingOverlay.defaultProps = {};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.LoadingOverlay);
+//# sourceMappingURL=index.js.map

package/dist/components/LoadingOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LoadingOverlay/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,gCAA8B;AAC9B,0DAAwD;AAExD,6DAA2D;AAC3D,2CAA8F;AAC9F,+DAA6D;AAE7D,2CAAwB;AACxB,0CAAuB;AAEhB,IAAM,cAAc,GAAG,UAAC,KAA0B;IACvD,IAAM,2BAQD,sBAAc,CAAC,YAAY,GAC3B,KAAK,CACT,EATC,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,cAAc,oBAAA,EACd,SAAS,eAAA,EACN,IAAI,cANH,+DAOL,CAGA,CAAA;IAED,IAAM,MAAM,GAAG,IAAA,2BAAY,EAAC,sBAAc,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAEpE,IAAM,eAAe,GAAG,IAAA,6BAAoB,EAAC,WAAW,EAAE,MAAM,CAAC,CAAA;IAEjE,OAAO,CACL,wBAAC,WAAI,eAAK,IAAI,IAAE,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,iBAC3E,uBAAC,qCAAiB,aAAC,SAAS,EAAE,SAAS,IAAM,cAAc,IAAE,KAAK,EAAE,eAAe,IAAI,EACtF,QAAQ,KACJ,CACR,CAAA;AACH,CAAC,CAAA;AAvBY,QAAA,cAAc,kBAuB1B;AAED,sBAAc,CAAC,iBAAiB,GAAG,gBAAgB,CAAA;AACnD,sBAAc,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;AAClD,sBAAc,CAAC,WAAW,GAAG,SAAS,CAAA;AAEtC,sBAAc,CAAC,gBAAgB,GAAG,UAAsB,MAAS;IAC/D,OAAO,sBAA2F,CAAA;AACpG,CAAC,CAAA;AAED,sBAAc,CAAC,YAAY,GAAG,EAAkC,CAAA;AAEhE,mCAAgB,CAAC,iBAAiB,CAAC,sBAAc,CAAC,CAAA"}

package/dist/components/LoadingOverlay/styles.d.ts

@@ -0,0 +1,5 @@
+import { ActivityIndicatorComposition } from '../ActivityIndicator';
+type LoadingOverlayStates = 'visible';
+export type LoadingOverlayParts = 'wrapper' | `indicator${Capitalize<ActivityIndicatorComposition>}`;
+export type LoadingOverlayComposition = `${LoadingOverlayParts}:${LoadingOverlayStates}` | LoadingOverlayParts;
+export {};

package/dist/components/LoadingOverlay/styles.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=styles.js.map

package/dist/components/LoadingOverlay/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/LoadingOverlay/styles.ts"],"names":[],"mappings":""}

package/dist/components/LoadingOverlay/types.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LoadingOverlayComposition } from './styles';
+import { ViewProps } from '../View';
+import { ActivityIndicatorProps } from '../ActivityIndicator';
+import { ComponentCommonProps } from '../../types/utility';
+import { StyledProp } from '@codeleap/styles';
+export type LoadingOverlayProps = Omit<ViewProps, 'style'> & ComponentCommonProps & {
+    visible?: boolean;
+    style?: StyledProp<LoadingOverlayComposition>;
+    indicatorProps?: ActivityIndicatorProps;
+    children?: React.ReactNode;
+};

package/dist/components/LoadingOverlay/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/LoadingOverlay/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/LoadingOverlay/types.ts"],"names":[],"mappings":""}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,15 @@
+import { ModalProps } from './types';
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
+export * from './styles';
+export * from './types';
+export declare const ModalContent: (modalProps: ModalProps & {
+    id: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Modal: {
+    (props: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    styleRegistryName: string;
+    elements: string[];
+    rootElement: string;
+    withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<ModalProps, S>) => IJSX;
+    defaultProps: Partial<ModalProps>;
+};

package/dist/components/Modal/index.js

@@ -0,0 +1,235 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = exports.ModalContent = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var common_1 = require("@codeleap/common");
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var uuid_1 = require("uuid");
+var View_1 = require("../View");
+var Text_1 = require("../Text");
+var Overlay_1 = require("../Overlay");
+var ActionIcon_1 = require("../ActionIcon");
+var Touchable_1 = require("../Touchable");
+var modal_1 = require("../../lib/tools/modal");
+var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+var styles_1 = require("@codeleap/styles");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+function focusModal(event, id) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    var modal = document.getElementById(id);
+    if (modal)
+        modal.focus();
+}
+var ModalDefaultHeader = function (props) {
+    var id = props.id, styles = props.styles, title = props.title, showClose = props.showClose, closable = props.closable, closeIconName = props.closeIconName, onPressClose = props.onPressClose, _a = props.closeButtonProps, closeButtonProps = _a === void 0 ? {} : _a, description = props.description, debugName = props.debugName;
+    var closeButtonStyles = (0, styles_1.useNestedStylesByKey)('closeButton', styles);
+    var showCloseButton = showClose && closable;
+    var hasHeader = !!title || !!description || showCloseButton;
+    if (!hasHeader)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ id: "".concat(id, "-header"), component: 'header', style: styles.header, className: 'modal-header header' }, { children: [(0, jsx_runtime_1.jsxs)(View_1.View, __assign({ id: "".concat(id, "-title"), style: styles.titleWrapper }, { children: [common_1.TypeGuards.isString(title) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { debugName: debugName, text: title, style: styles.title })) : title, showCloseButton ? ((0, jsx_runtime_1.jsx)(ActionIcon_1.ActionIcon, __assign({ debugName: debugName, icon: closeIconName, onPress: onPressClose }, closeButtonProps, { style: closeButtonStyles }))) : null] })), common_1.TypeGuards.isString(description) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { debugName: debugName, text: description, style: styles.description })) : description] })));
+};
+var ModalContent = function (modalProps) {
+    var children = modalProps.children, visible = modalProps.visible, title = modalProps.title, toggle = modalProps.toggle, footer = modalProps.footer, style = modalProps.style, ModalHeader = modalProps.renderHeader, closable = modalProps.closable, withOverlay = modalProps.withOverlay, showClose = modalProps.showClose, closeIconName = modalProps.closeIconName, scroll = modalProps.scroll, renderModalBody = modalProps.renderModalBody, closeOnEscape = modalProps.closeOnEscape, onClose = modalProps.onClose, overlayProps = modalProps.overlayProps, dismissOnBackdrop = modalProps.dismissOnBackdrop, zIndex = modalProps.zIndex, withScrollContainer = modalProps.withScrollContainer, debugName = modalProps.debugName, backdropProps = modalProps.backdropProps, alterHistory = modalProps.alterHistory, modalId = modalProps.id, autoIndex = modalProps.autoIndex, props = __rest(modalProps, ["children", "visible", "title", "toggle", "footer", "style", "renderHeader", "closable", "withOverlay", "showClose", "closeIconName", "scroll", "renderModalBody", "closeOnEscape", "onClose", "overlayProps", "dismissOnBackdrop", "zIndex", "withScrollContainer", "debugName", "backdropProps", "alterHistory", "id", "autoIndex"]);
+    var styles = (0, useStylesFor_1.useStylesFor)(exports.Modal.styleRegistryName, style);
+    var index = (0, modal_1.ModalStore)(function (store) { var _a, _b; return ((_b = (_a = store.indexes) === null || _a === void 0 ? void 0 : _a[modalId]) !== null && _b !== void 0 ? _b : 0); });
+    var id = (0, react_1.useId)();
+    var modalRef = (0, react_1.useRef)(null);
+    var toggleAndReturn = function () {
+        toggle === null || toggle === void 0 ? void 0 : toggle();
+        if (alterHistory) {
+            window.history.back();
+        }
+        if (common_1.TypeGuards.isFunction(onClose))
+            onClose();
+    };
+    function closeOnEscPress(e) {
+        if (!closeOnEscape)
+            return null;
+        if ((e === null || e === void 0 ? void 0 : e.key) === 'Escape' || (e === null || e === void 0 ? void 0 : e.keyCode) === 27) {
+            toggleAndReturn();
+        }
+    }
+    var handleTabKeyPress = function (e, _a) {
+        var firstElement = _a.firstElement, lastElement = _a.lastElement;
+        if (e.key === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9) {
+            if (e.shiftKey && document.activeElement === firstElement) {
+                e.preventDefault();
+                lastElement.focus();
+            }
+            else if (!e.shiftKey &&
+                document.activeElement === lastElement) {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
+    };
+    (0, common_1.onUpdate)(function () {
+        if (visible) {
+            var modalElement_1 = modalRef.current;
+            var focusableElements = modalElement_1.querySelectorAll('[tabindex]:not([tabindex="-1"])');
+            var firstElement_1 = focusableElements[0];
+            var lastElement_1 = focusableElements[focusableElements.length - 1];
+            modalElement_1.addEventListener('keydown', function (e) { return handleTabKeyPress(e, { firstElement: firstElement_1, lastElement: lastElement_1 }); });
+            modalElement_1.addEventListener('keydown', closeOnEscPress);
+            return function () {
+                modalElement_1.removeEventListener('keydown', function (e) { return handleTabKeyPress(e, { firstElement: firstElement_1, lastElement: lastElement_1 }); });
+                modalElement_1.removeEventListener('keydown', closeOnEscPress);
+            };
+        }
+    }, [visible]);
+    (0, common_1.useIsomorphicEffect)(function () {
+        var modal = document.getElementById(id);
+        if (modal)
+            modal.focus();
+    }, [id]);
+    var close = (closable && dismissOnBackdrop) ? toggleAndReturn : function () { return null; };
+    var ModalBody = renderModalBody || View_1.View;
+    var _zIndex = react_1.default.useMemo(function () {
+        return common_1.TypeGuards.isNumber(zIndex) ? { zIndex: zIndex } : {};
+    }, [zIndex]);
+    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ ref: modalRef, "aria-hidden": !visible, style: [
+            styles.wrapper,
+            visible ? styles['wrapper:visible'] : styles['wrapper:hidden'],
+            autoIndex ? { zIndex: index } : null,
+            _zIndex,
+        ] }, { children: [(0, jsx_runtime_1.jsx)(Overlay_1.Overlay, __assign({ debugName: debugName, visible: withOverlay ? visible : false }, overlayProps, { style: [
+                    styles.backdrop,
+                    visible ? styles['backdrop:visible'] : styles['backdrop:hidden'],
+                ] })), (0, jsx_runtime_1.jsxs)(View_1.View, __assign({ style: styles.innerWrapper }, { children: [(0, jsx_runtime_1.jsx)(Touchable_1.Touchable, __assign({ onPress: close, debounce: 1000, debugName: 'modal backdrop' }, backdropProps, { style: styles.backdropPressable })), (0, jsx_runtime_1.jsxs)(View_1.View, __assign({ component: 'section', className: 'content', tabIndex: 0, id: id, "aria-modal": true, role: 'dialog', "aria-describedby": "".concat(id, "-title"), "aria-label": 'Close the modal by pressing Escape key' }, props, { style: [
+                            styles.box,
+                            visible ? styles['box:visible'] : styles['box:hidden'],
+                        ] }, { children: [(0, jsx_runtime_1.jsx)(ModalHeader, __assign({}, modalProps, { styles: styles, id: id, onPressClose: toggleAndReturn, debugName: debugName })), (0, jsx_runtime_1.jsx)(ModalBody, __assign({ style: styles.body, id: id }, { children: children })), footer ? ((0, jsx_runtime_1.jsx)(View_1.View, __assign({ component: 'footer', style: styles.footer }, { children: footer }))) : null] }))] }))] })));
+};
+exports.ModalContent = ModalContent;
+var Modal = function (props) {
+    var allProps = __assign(__assign({}, exports.Modal.defaultProps), props);
+    var accessible = allProps.accessible, _visible = allProps.visible, scrollLock = allProps.scrollLock, _modalId = allProps.modalId, autoIndex = allProps.autoIndex, _toggle = allProps.toggle;
+    var modalId = (0, react_1.useRef)(_modalId !== null && _modalId !== void 0 ? _modalId : (0, uuid_1.v4)());
+    var setIndex = (0, modal_1.ModalStore)(function (store) { return store.setIndex; });
+    var visible = common_1.TypeGuards.isBoolean(_visible) ? _visible : (0, modal_1.ModalStore)(function (store) { var _a, _b; return ((_b = (_a = store.modals) === null || _a === void 0 ? void 0 : _a[_modalId]) !== null && _b !== void 0 ? _b : false); });
+    var toggle = common_1.TypeGuards.isFunction(_toggle) ? _toggle : (0, modal_1.ModalStore)(function (store) { return function () { return store.toggle(_modalId); }; });
+    (0, common_1.onMount)(function () {
+        if (accessible) {
+            var appRoot_1 = document.body;
+            appRoot_1.addEventListener('focusin', function (e) { return focusModal(e, modalId.current); });
+            return function () { return appRoot_1.removeEventListener('focusin', function (e) { return focusModal(e, modalId.current); }); };
+        }
+    });
+    (0, common_1.onUpdate)(function () {
+        if (accessible) {
+            var appRoot = document.body;
+            appRoot.setAttribute('aria-hidden', "".concat(visible));
+            appRoot.setAttribute('tabindex', "".concat(-1));
+        }
+        if (scrollLock)
+            (0, modal_1.modalScrollLock)(visible, modalId.current);
+        if (autoIndex) {
+            setTimeout(function () {
+                setIndex(visible, modalId.current);
+            }, visible ? 0 : 500);
+        }
+        return function () {
+            if (scrollLock)
+                (0, modal_1.modalScrollLock)(false, modalId.current);
+        };
+    }, [visible]);
+    var content = (0, jsx_runtime_1.jsx)(exports.ModalContent, __assign({}, allProps, { visible: visible, toggle: toggle, id: modalId.current }));
+    if (typeof window === 'undefined')
+        return content;
+    return react_dom_1.default.createPortal(content, document.body);
+};
+exports.Modal = Modal;
+exports.Modal.styleRegistryName = 'Modal';
+exports.Modal.elements = [
+    'wrapper',
+    'box',
+    'backdrop',
+    'body',
+    'footer',
+    'header',
+    'title',
+    'innerWrapper',
+    'backdropPressable',
+    'description',
+    'titleWrapper',
+    "closeButton",
+];
+exports.Modal.rootElement = 'wrapper';
+exports.Modal.withVariantTypes = function (styles) {
+    return exports.Modal;
+};
+exports.Modal.defaultProps = {
+    title: '',
+    closeIconName: 'x',
+    closable: true,
+    withOverlay: true,
+    showClose: true,
+    scroll: false,
+    closeOnEscape: true,
+    renderHeader: ModalDefaultHeader,
+    keepMounted: true,
+    dismissOnBackdrop: true,
+    zIndex: null,
+    description: null,
+    withScrollContainer: false,
+    scrollLock: false,
+    autoIndex: false,
+    alterHistory: false,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.Modal);
+//# sourceMappingURL=index.js.map