@codeleap/web 4.0.2 → 4.2.1

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TooltipProps as PrimitiveTooltipProps, TooltipContentProps, TooltipPortalProps, TooltipArrowProps, TooltipTriggerProps, TooltipProviderProps } from '@radix-ui/react-tooltip';
+import { AnyFunction, StylesOf } from '@codeleap/common';
+import { TooltipComposition } from './styles';
+import { ViewProps } from '../View';
+import { StyledProp } from '@codeleap/styles';
+type TooltipComponentProps = {
+    contentProps?: TooltipContentProps;
+    portalProps?: TooltipPortalProps;
+    arrowProps?: TooltipArrowProps;
+    triggerProps?: TooltipTriggerProps;
+    providerProps?: TooltipProviderProps;
+};
+export type TooltipProps = Omit<PrimitiveTooltipProps, 'style'> & Omit<TooltipComponentProps, 'style'> & {
+    toggle?: AnyFunction;
+    visible?: boolean;
+    content: React.ReactNode | ((props: TooltipProps & {
+        variantsStyles: StylesOf<TooltipComposition>;
+    }) => JSX.Element);
+    triggerWrapper?: React.ElementType;
+    triggerWrapperProps?: Partial<ViewProps>;
+    style?: StyledProp<TooltipComposition>;
+    side?: 'left' | 'right' | 'bottom' | 'top';
+    openOnPress?: boolean;
+    openOnHover?: boolean;
+    disabled?: boolean;
+    delayDuration?: number;
+    closeOnClickOutside?: boolean;
+    onOpen?: AnyFunction;
+    onClose?: AnyFunction;
+    onValueChange?: (value: boolean) => void;
+    onHover?: (hoverType: 'enter' | 'leave', value: boolean) => void;
+    onPress?: (value: boolean) => void;
+    children?: React.ReactNode;
+    debugName?: string;
+};
+export {};

package/dist/components/Tooltip/types.js

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

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

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

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

@@ -0,0 +1,5 @@
+import { TouchableProps } from './types';
+import { StyledComponentWithProps } from '@codeleap/styles';
+export * from './styles';
+export * from './types';
+export declare const Touchable: StyledComponentWithProps<TouchableProps>;

package/dist/components/Touchable/index.js

@@ -0,0 +1,135 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Touchable = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var common_1 = require("@codeleap/common");
+var react_1 = __importStar(require("react"));
+var lib_1 = require("../../lib");
+var test_1 = require("../../lib/utils/test");
+var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+exports.Touchable = (0, react_1.forwardRef)(function (touchableProps, ref) {
+    var allProps = __assign(__assign({}, exports.Touchable.defaultProps), touchableProps);
+    var propagate = allProps.propagate, debounce = allProps.debounce, leadingDebounce = allProps.leadingDebounce, setPressed = allProps.setPressed, component = allProps.component, disabled = allProps.disabled, onPress = allProps.onPress, onClick = allProps.onClick, debugName = allProps.debugName, debugComponent = allProps.debugComponent, style = allProps.style, analyticsEnabled = allProps.analyticsEnabled, analyticsName = allProps.analyticsName, analyticsData = allProps.analyticsData, props = __rest(allProps, ["propagate", "debounce", "leadingDebounce", "setPressed", "component", "disabled", "onPress", "onClick", "debugName", "debugComponent", "style", "analyticsEnabled", "analyticsName", "analyticsData"]);
+    var styles = (0, useStylesFor_1.useStylesFor)(exports.Touchable.styleRegistryName, style);
+    var pressed = react_1.default.useRef(!!leadingDebounce);
+    var logger = (0, common_1.useGlobalContext)().logger;
+    (0, common_1.onMount)(function () {
+        if (!!leadingDebounce && !!debounce) {
+            setTimeout(function () {
+                pressed.current = false;
+            }, debounce);
+        }
+    });
+    var Component = component;
+    var notPressable = !common_1.TypeGuards.isFunction(onPress) && !common_1.TypeGuards.isFunction(onClick);
+    var handleClick = function (event) {
+        if (disabled)
+            return;
+        if (!propagate)
+            (0, lib_1.stopPropagation)(event);
+        if (notPressable)
+            return;
+        var _onPress = function () {
+            var _a, _b;
+            if (event && ((event === null || event === void 0 ? void 0 : event.type) !== 'click' && (event === null || event === void 0 ? void 0 : event.keyCode) !== 13 && (event === null || event === void 0 ? void 0 : event.key) !== 'Enter'))
+                return null;
+            logger.log("<".concat(debugComponent || 'Touchable', "/> pressed"), { debugName: debugName, debugComponent: debugComponent }, 'User interaction');
+            if (analyticsEnabled) {
+                var name_1 = analyticsName || debugName;
+                if (!!((_a = name_1 === null || name_1 === void 0 ? void 0 : name_1.trim) === null || _a === void 0 ? void 0 : _a.call(name_1))) {
+                    (_b = logger.analytics) === null || _b === void 0 ? void 0 : _b.interaction(name_1, analyticsData);
+                }
+            }
+            if (common_1.TypeGuards.isFunction(onClick))
+                onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            onPress === null || onPress === void 0 ? void 0 : onPress();
+        };
+        if (common_1.TypeGuards.isNumber(debounce)) {
+            if (pressed.current) {
+                return;
+            }
+            setPressed === null || setPressed === void 0 ? void 0 : setPressed(true);
+            pressed.current = true;
+            _onPress();
+            setTimeout(function () {
+                setPressed === null || setPressed === void 0 ? void 0 : setPressed(false);
+                pressed.current = false;
+            }, debounce);
+        }
+        else {
+            _onPress();
+        }
+    };
+    var testId = (0, test_1.getTestId)(allProps);
+    return ((0, jsx_runtime_1.jsx)(Component, __assign({}, props, { onClick: handleClick, onKeyDown: handleClick, ref: ref, 
+        // @ts-expect-error icss type
+        css: [styles.wrapper, disabled && styles['wrapper:disabled']], "data-testid": testId })));
+});
+exports.Touchable.styleRegistryName = 'Touchable';
+exports.Touchable.elements = ['wrapper'];
+exports.Touchable.rootElement = 'wrapper';
+exports.Touchable.withVariantTypes = function (styles) {
+    return exports.Touchable;
+};
+exports.Touchable.defaultProps = {
+    propagate: true,
+    debounce: null,
+    component: 'div',
+    analyticsEnabled: false,
+    analyticsName: null,
+    analyticsData: {},
+    tabIndex: 0,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.Touchable);
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,3 @@
+export type TouchableState = 'disabled';
+export type TouchableParts = 'wrapper';
+export type TouchableComposition = TouchableParts | `${TouchableParts}:${TouchableState}`;

package/dist/components/Touchable/styles.js

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

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

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

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

@@ -0,0 +1,19 @@
+import { AnyFunction } from '@codeleap/common';
+import { ComponentPropsWithRef, ElementType } from 'react';
+import { TouchableComposition } from './styles';
+import { AnyRecord, StyledProp } from '@codeleap/styles';
+export type TouchableProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithRef<T>, 'style'> & {
+    component?: ElementType<AnyRecord>;
+    disabled?: boolean;
+    propagate?: boolean;
+    onPress?: AnyFunction;
+    debugName: string;
+    debugComponent?: string;
+    style?: StyledProp<TouchableComposition>;
+    debounce?: number;
+    leadingDebounce?: boolean;
+    setPressed?: (pressed: boolean) => void;
+    analyticsEnabled?: boolean;
+    analyticsName?: string;
+    analyticsData?: Record<string, any>;
+};

package/dist/components/Touchable/types.js

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

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

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

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

@@ -0,0 +1,5 @@
+import { ViewProps } from './types';
+import { StyledComponentWithProps } from '@codeleap/styles';
+export * from './styles';
+export * from './types';
+export declare const View: StyledComponentWithProps<ViewProps>;

package/dist/components/View/index.js

@@ -0,0 +1,88 @@
+"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.View = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var common_1 = require("@codeleap/common");
+var react_1 = require("react");
+var hooks_1 = require("../../lib/hooks");
+var framer_motion_1 = require("framer-motion");
+var test_1 = require("../../lib/utils/test");
+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);
+exports.View = (0, react_1.forwardRef)(function (viewProps, ref) {
+    var _a = __assign(__assign({}, exports.View.defaultProps), viewProps), component = _a.component, children = _a.children, is = _a.is, not = _a.not, up = _a.up, onHover = _a.onHover, debugName = _a.debugName, down = _a.down, style = _a.style, animated = _a.animated, animatedProps = _a.animatedProps, props = __rest(_a, ["component", "children", "is", "not", "up", "onHover", "debugName", "down", "style", "animated", "animatedProps"]);
+    var styles = (0, useStylesFor_1.useStylesFor)(exports.View.styleRegistryName, style);
+    var Component = animated ? ((framer_motion_1.motion === null || framer_motion_1.motion === void 0 ? void 0 : framer_motion_1.motion[component]) || framer_motion_1.motion.div) : (component || 'div');
+    var theme = (0, styles_1.useTheme)(function (store) { return store.current; });
+    function handleHover(isMouseOverElement) {
+        onHover === null || onHover === void 0 ? void 0 : onHover(isMouseOverElement);
+    }
+    var platformMediaQuery = (0, common_1.useMemo)(function () {
+        var _a;
+        // @ts-expect-error theme type
+        return (_a = theme === null || theme === void 0 ? void 0 : theme.media) === null || _a === void 0 ? void 0 : _a.renderToPlatformQuery({
+            is: is,
+            not: not,
+            up: up,
+            down: down,
+        });
+    }, [is, not, up, down]);
+    var matches = (0, hooks_1.useMediaQuery)(platformMediaQuery);
+    var hoverProps = common_1.TypeGuards.isFunction(onHover) && {
+        onMouseEnter: function () { return handleHover(true); },
+        onMouseLeave: function () { return handleHover(false); },
+    };
+    var testId = (0, test_1.getTestId)(viewProps);
+    return ((0, jsx_runtime_1.jsx)(Component, __assign({}, hoverProps, props, animatedProps, { ref: ref, "data-testid": testId, css: [styles.wrapper, matches && { display: 'none' }] }, { children: children })));
+});
+exports.View.styleRegistryName = 'View';
+exports.View.elements = ['wrapper'];
+exports.View.rootElement = 'wrapper';
+exports.View.withVariantTypes = function (styles) {
+    return exports.View;
+};
+exports.View.defaultProps = {
+    component: 'div',
+    animated: false,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.View);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/View/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAsD;AACtD,+BAAsD;AACtD,yCAA+C;AAC/C,+CAAsC;AAEtC,6CAAgD;AAChD,6DAA2D;AAC3D,+DAA6D;AAC7D,2CAA4G;AAE5G,2CAAwB;AACxB,0CAAuB;AAEV,QAAA,IAAI,GAAG,IAAA,kBAAU,EAA4B,UAAC,SAAS,EAAE,GAAG;IACvE,IAAM,2BAcD,YAAI,CAAC,YAAY,GACjB,SAAS,CACb,EAfC,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,EAAE,QAAA,EACF,GAAG,SAAA,EACH,EAAE,QAAA,EACF,OAAO,aAAA,EACP,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,aAAa,mBAAA,EACV,KAAK,cAZJ,kHAaL,CAGA,CAAA;IAED,IAAM,MAAM,GAAG,IAAA,2BAAY,EAAC,YAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE1D,IAAM,SAAS,GAAgB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA,sBAAM,aAAN,sBAAM,uBAAN,sBAAM,CAAG,SAAmB,CAAC,KAAI,sBAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,CAAA;IAE9G,IAAM,KAAK,GAAG,IAAA,iBAAQ,EAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,CAAC,CAAA;IAE9C,SAAS,WAAW,CAAC,kBAA2B;QAC9C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,kBAAkB,CAAC,CAAA;IAC/B,CAAC;IAED,IAAM,kBAAkB,GAAG,IAAA,gBAAO,EAAC;;QACjC,8BAA8B;QAC9B,OAAO,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,qBAAqB,CAAC;YACzC,EAAE,IAAA;YACF,GAAG,KAAA;YACH,EAAE,IAAA;YACF,IAAI,MAAA;SACL,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC,CAAA;IAEvB,IAAM,OAAO,GAAG,IAAA,qBAAa,EAAC,kBAAkB,CAAC,CAAA;IAEjD,IAAM,UAAU,GAAG,mBAAU,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;QACnD,YAAY,EAAE,cAAM,OAAA,WAAW,CAAC,IAAI,CAAC,EAAjB,CAAiB;QACrC,YAAY,EAAE,cAAM,OAAA,WAAW,CAAC,KAAK,CAAC,EAAlB,CAAkB;KACvC,CAAA;IAED,IAAM,MAAM,GAAG,IAAA,gBAAS,EAAC,SAAS,CAAC,CAAA;IAEnC,OAAO,CACL,uBAAC,SAAS,eACJ,UAAU,EACV,KAAK,EACL,aAAa,IACjB,GAAG,EAAE,GAAG,iBACK,MAAM,EACnB,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,gBAEpD,QAAQ,IACC,CACb,CAAA;AACH,CAAC,CAAwC,CAAA;AAEzC,YAAI,CAAC,iBAAiB,GAAG,MAAM,CAAA;AAC/B,YAAI,CAAC,QAAQ,GAAG,CAAC,SAAS,CAAC,CAAA;AAC3B,YAAI,CAAC,WAAW,GAAG,SAAS,CAAA;AAE5B,YAAI,CAAC,gBAAgB,GAAG,UAAsB,MAAS;IACrD,OAAO,YAAyG,CAAA;AAClH,CAAC,CAAA;AAED,YAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;CACM,CAAA;AAEvB,mCAAgB,CAAC,iBAAiB,CAAC,YAAI,CAAC,CAAA"}

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

@@ -0,0 +1 @@
+export type ViewComposition = 'wrapper';

package/dist/components/View/styles.js

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

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

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

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

@@ -0,0 +1,17 @@
+import { AnimationProps, MotionProps } from 'framer-motion';
+import { AnyRecord, StyledProp } from '@codeleap/styles';
+import { ViewComposition } from './styles';
+import { ComponentPropsWithRef, ElementType } from 'react';
+export type ViewProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithRef<T>, 'style'> & Omit<AnimationProps, 'style'> & {
+    component?: ElementType<AnyRecord>;
+    debugName?: string;
+    is?: any;
+    not?: any;
+    up?: any;
+    down?: any;
+    onHover?: (isMouseOverElement: boolean) => void;
+    animated?: boolean;
+    animatedProps?: Partial<MotionProps>;
+    style?: StyledProp<ViewComposition>;
+    children?: React.ReactNode;
+};

package/dist/components/View/types.js

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

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

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

package/dist/components/components.d.ts

@@ -0,0 +1,41 @@
+export * from './View';
+export * from './Icon';
+export * from './Touchable';
+export * from './Text';
+export * from './Slider';
+export * from './List';
+export * from './ActivityIndicator';
+export * from './Button';
+export * from './Modal';
+export * from './ActionIcon';
+export * from './Checkbox';
+export * from './Collapse';
+export * from './Drawer';
+export * from './Overlay';
+export * from './TextInput';
+export * from './RadioInput';
+export * from './Select';
+export * from './FileInput';
+export * from './Slider';
+export * from './List';
+export * from './LoadingOverlay';
+export * from './InputBase';
+export * from './Switch';
+export * from './NumberIncrement';
+export * from './SearchInput';
+export * from './Tooltip';
+export * from './SegmentedControl';
+export * from './Pager';
+export * from './EmptyPlaceholder';
+export * from './Grid';
+export * from './Badge';
+export * from './CropPicker';
+export * from './DatePicker';
+export * from './Dropzone';
+export * from './Progress';
+export * from './Tag';
+export * from './TextEditor';
+export * from './ColorPicker';
+export * from './PaginationButtons';
+export * from './SectionFilters';
+export * from './PaginationIndicator';

package/dist/components/components.js

@@ -0,0 +1,58 @@
+"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("./View"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./Touchable"), exports);
+__exportStar(require("./Text"), exports);
+__exportStar(require("./Slider"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./ActivityIndicator"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Modal"), exports);
+__exportStar(require("./ActionIcon"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./Collapse"), exports);
+__exportStar(require("./Drawer"), exports);
+__exportStar(require("./Overlay"), exports);
+__exportStar(require("./TextInput"), exports);
+__exportStar(require("./RadioInput"), exports);
+__exportStar(require("./Select"), exports);
+__exportStar(require("./FileInput"), exports);
+__exportStar(require("./Slider"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./LoadingOverlay"), exports);
+__exportStar(require("./InputBase"), exports);
+__exportStar(require("./Switch"), exports);
+__exportStar(require("./NumberIncrement"), exports);
+__exportStar(require("./SearchInput"), exports);
+__exportStar(require("./Tooltip"), exports);
+__exportStar(require("./SegmentedControl"), exports);
+__exportStar(require("./Pager"), exports);
+__exportStar(require("./EmptyPlaceholder"), exports);
+__exportStar(require("./Grid"), exports);
+__exportStar(require("./Badge"), exports);
+__exportStar(require("./CropPicker"), exports);
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./Dropzone"), exports);
+__exportStar(require("./Progress"), exports);
+__exportStar(require("./Tag"), exports);
+__exportStar(require("./TextEditor"), exports);
+__exportStar(require("./ColorPicker"), exports);
+__exportStar(require("./PaginationButtons"), exports);
+__exportStar(require("./SectionFilters"), exports);
+__exportStar(require("./PaginationIndicator"), exports);
+//# sourceMappingURL=components.js.map

package/dist/components/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAsB;AACtB,yCAAsB;AACtB,8CAA2B;AAC3B,yCAAsB;AACtB,2CAAwB;AACxB,yCAAsB;AACtB,sDAAmC;AACnC,2CAAwB;AACxB,0CAAuB;AACvB,+CAA4B;AAC5B,6CAA0B;AAC1B,6CAA0B;AAC1B,2CAAwB;AACxB,4CAAyB;AACzB,8CAA2B;AAC3B,+CAA4B;AAC5B,2CAAwB;AACxB,8CAA2B;AAC3B,2CAAwB;AACxB,yCAAsB;AACtB,mDAAgC;AAChC,8CAA2B;AAC3B,2CAAwB;AACxB,oDAAiC;AACjC,gDAA6B;AAC7B,4CAAyB;AACzB,qDAAkC;AAClC,0CAAuB;AACvB,qDAAkC;AAClC,yCAAsB;AACtB,0CAAuB;AACvB,+CAA4B;AAC5B,+CAA4B;AAC5B,6CAA0B;AAC1B,6CAA0B;AAC1B,wCAAqB;AACrB,+CAA4B;AAC5B,gDAA6B;AAC7B,sDAAmC;AACnC,mDAAgC;AAChC,wDAAqC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/components';
+export * from './types';
+export * from './lib';
+export * from './lib/WebStyleRegistry';

package/dist/index.js

@@ -0,0 +1,21 @@
+"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("./components/components"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./lib"), exports);
+__exportStar(require("./lib/WebStyleRegistry"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0DAAuC;AACvC,0CAAuB;AACvB,wCAAqB;AACrB,yDAAsC"}

package/dist/lib/ListMasonry.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { MasonryProps, RenderComponentProps } from 'masonic';
+type UseMasonryReloadArgs = {
+    data: Array<any>;
+    reloadTimeout: number;
+};
+export declare const useMasonryReload: (args: UseMasonryReloadArgs) => {
+    reloadingLayout: boolean;
+    setReloadingLayout: React.Dispatch<React.SetStateAction<boolean>>;
+    previousLength: number;
+};
+export type ItemMasonryProps<T> = RenderComponentProps<T>;
+export type ListMasonryProps<T> = MasonryProps<T> & {
+    previousItemsLength: number;
+    reloadingLayout: boolean;
+};
+export declare function MasonryComponent<Item>(props: ListMasonryProps<Item>): JSX.Element;
+export declare function ListMasonry<Item>(props: ListMasonryProps<Item>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/ListMasonry.js

@@ -0,0 +1,103 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListMasonry = exports.MasonryComponent = exports.useMasonryReload = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var window_size_1 = require("@react-hook/window-size");
+var common_1 = require("@codeleap/common");
+var EmptyPlaceholder_1 = require("../components/EmptyPlaceholder");
+var masonic_1 = require("masonic");
+function fillItems(arr, toCount, fillContent) {
+    if (fillContent === void 0) { fillContent = {}; }
+    if (!arr || !common_1.TypeGuards.isArray(arr))
+        return [];
+    if (toCount === (arr === null || arr === void 0 ? void 0 : arr.length))
+        return arr;
+    var diff = toCount - (arr === null || arr === void 0 ? void 0 : arr.length);
+    if (diff < 0)
+        return arr;
+    var right = Array(diff).fill(fillContent);
+    return arr.concat(right);
+}
+var useMasonryReload = function (args) {
+    var _a;
+    var data = args.data, _b = args.reloadTimeout, reloadTimeout = _b === void 0 ? 350 : _b;
+    var _c = react_1.default.useState(false), reloadingLayout = _c[0], setReloadingLayout = _c[1];
+    var previousLengthRef = react_1.default.useRef((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0);
+    var updater = function () {
+        var _a;
+        previousLengthRef.current = ((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0);
+    };
+    react_1.default.useEffect(function () {
+        if (previousLengthRef.current > (data === null || data === void 0 ? void 0 : data.length)) {
+            setReloadingLayout(true);
+            setTimeout(function () {
+                updater();
+                setTimeout(function () {
+                    setReloadingLayout(false);
+                }, reloadTimeout);
+            }, reloadTimeout);
+        }
+        else {
+            updater();
+        }
+    }, [data === null || data === void 0 ? void 0 : data.length]);
+    return {
+        reloadingLayout: reloadingLayout,
+        setReloadingLayout: setReloadingLayout,
+        previousLength: previousLengthRef.current,
+    };
+};
+exports.useMasonryReload = useMasonryReload;
+function MasonryComponent(props) {
+    var _a;
+    var containerRef = react_1.default.useRef(null);
+    var windowSize = (0, window_size_1.useWindowSize)({
+        initialWidth: props === null || props === void 0 ? void 0 : props.ssrWidth,
+        initialHeight: props === null || props === void 0 ? void 0 : props.ssrHeight,
+    });
+    var containerPosition = (0, masonic_1.useContainerPosition)(containerRef, windowSize);
+    var listProps = Object.assign({
+        offset: containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.offset,
+        width: (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.width) || ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || (windowSize === null || windowSize === void 0 ? void 0 : windowSize[0]),
+        height: windowSize === null || windowSize === void 0 ? void 0 : windowSize[1],
+        containerRef: containerRef,
+        scrollFps: (props === null || props === void 0 ? void 0 : props.scrollFps) || 12,
+    }, props);
+    var positioner = (0, masonic_1.usePositioner)({
+        width: listProps === null || listProps === void 0 ? void 0 : listProps.width,
+        columnGutter: listProps === null || listProps === void 0 ? void 0 : listProps.columnGutter,
+        columnWidth: listProps === null || listProps === void 0 ? void 0 : listProps.columnWidth,
+        columnCount: listProps === null || listProps === void 0 ? void 0 : listProps.columnCount,
+        maxColumnCount: listProps === null || listProps === void 0 ? void 0 : listProps.columnCount,
+        rowGutter: listProps === null || listProps === void 0 ? void 0 : listProps.rowGutter
+    });
+    var _b = (0, masonic_1.useScroller)(listProps === null || listProps === void 0 ? void 0 : listProps.offset, listProps === null || listProps === void 0 ? void 0 : listProps.scrollFps), scrollTop = _b.scrollTop, isScrolling = _b.isScrolling;
+    var resizeObserver = (0, masonic_1.useResizeObserver)(positioner);
+    return (0, masonic_1.useMasonry)(__assign(__assign({}, listProps), { resizeObserver: resizeObserver, positioner: positioner, scrollTop: scrollTop, isScrolling: isScrolling, items: fillItems(props === null || props === void 0 ? void 0 : props.items, props === null || props === void 0 ? void 0 : props.previousItemsLength) }));
+}
+exports.MasonryComponent = MasonryComponent;
+function ListMasonry(props) {
+    if (props === null || props === void 0 ? void 0 : props.reloadingLayout) {
+        return ((0, jsx_runtime_1.jsx)(EmptyPlaceholder_1.EmptyPlaceholder, { loading: true, title: '', description: null }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsx)(MasonryComponent, __assign({}, props, { items: (props === null || props === void 0 ? void 0 : props.items) || [] })));
+    }
+}
+exports.ListMasonry = ListMasonry;
+//# sourceMappingURL=ListMasonry.js.map