@toptal/picasso-popper 2.0.1-alpha-1757603192867.0 → 2.0.1-alpha-1757603777486.0

package/dist-package/src/Popper/Popper.d.ts

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ReferenceObject, PopperOptions } from 'popper.js';
+import type PopperJs from 'popper.js';
+import type { BaseProps } from '@toptal/picasso-shared';
+export declare type PopperPlacementType = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+export interface Props extends BaseProps {
+    children?: ReactNode;
+    /** if true, the popper is visible */
+    open: boolean;
+    /** Disable the portal behavior. The children stay within it's parent DOM hierarchy */
+    disablePortal?: boolean;
+    /** Popper placement */
+    placement?: PopperPlacementType;
+    /** Options provided to the popper.js instance */
+    popperOptions?: PopperOptions;
+    /** Always keep Popper's children in the DOM */
+    keepMounted?: boolean;
+    /**
+     * A node, component instance, or function that returns either.
+     * The `container` will have the portal children appended to it.
+     * By default, it uses the picasso root node
+     */
+    container?: HTMLElement | (() => HTMLElement);
+    /**
+     * HTML Element instance or a referenceObject
+     * https://popper.js.org/popper-documentation.html#referenceObject
+     */
+    anchorEl: null | ReferenceObject | (() => ReferenceObject);
+    /** Popper automatically resize to anchor element width */
+    autoWidth?: boolean;
+    /** Popper width */
+    width?: string;
+    /** Take full window width on small and medium screens */
+    enableCompactMode?: boolean;
+}
+export declare const getPopperOptions: (popperOptions: PopperOptions, isInsideModal?: boolean) => {
+    modifiers: {
+        flip: {
+            order?: number | undefined;
+            enabled: boolean;
+            fn?: PopperJs.ModifierFn | undefined;
+            behavior?: PopperJs.Behavior | PopperJs.Position[] | undefined;
+            padding?: number | PopperJs.Padding | undefined;
+            boundariesElement?: Element | PopperJs.Boundary | undefined;
+            flipVariations?: boolean | undefined;
+            flipVariationsByContent?: boolean | undefined;
+        };
+        preventOverflow: {
+            order?: number | undefined;
+            enabled: boolean;
+            fn?: PopperJs.ModifierFn | undefined;
+            priority?: PopperJs.Position[] | undefined;
+            padding: number | PopperJs.Padding;
+            boundariesElement: string | Element;
+            escapeWithReference?: boolean | undefined;
+        };
+        shift?: PopperJs.BaseModifier | undefined;
+        offset?: (PopperJs.BaseModifier & {
+            offset?: string | number | undefined;
+        }) | undefined;
+        keepTogether?: PopperJs.BaseModifier | undefined;
+        arrow?: (PopperJs.BaseModifier & {
+            element?: string | Element | undefined;
+        }) | undefined;
+        inner?: PopperJs.BaseModifier | undefined;
+        hide?: PopperJs.BaseModifier | undefined;
+        applyStyle?: (PopperJs.BaseModifier & {
+            onLoad?: Function | undefined;
+            gpuAcceleration?: boolean | undefined;
+        }) | undefined;
+        computeStyle?: (PopperJs.BaseModifier & {
+            gpuAcceleration?: boolean | undefined;
+            x?: "bottom" | "top" | undefined;
+            y?: "left" | "right" | undefined;
+        }) | undefined;
+    };
+    placement?: PopperJs.Placement | undefined;
+    positionFixed?: boolean | undefined;
+    eventsEnabled?: boolean | undefined;
+    removeOnDestroy?: boolean | undefined;
+    onCreate?(data: PopperJs.Data): void;
+    onUpdate?(data: PopperJs.Data): void;
+};
+export declare const Popper: React.ForwardRefExoticComponent<Props & React.RefAttributes<PopperJs>>;
+export default Popper;
+//# sourceMappingURL=Popper.d.ts.map

package/dist-package/src/Popper/Popper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../src/Popper/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAiC,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAA;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,oBAAY,mBAAmB,GAC3B,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,UAAU,GACV,YAAY,GACZ,MAAM,GACN,WAAW,GACX,aAAa,GACb,OAAO,GACP,SAAS,GACT,WAAW,GACX,KAAK,CAAA;AAET,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qCAAqC;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,sFAAsF;IACtF,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,uBAAuB;IACvB,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,iDAAiD;IACjD,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA;IAC7C;;;OAGG;IACH,QAAQ,EAAE,IAAI,GAAG,eAAe,GAAG,CAAC,MAAM,eAAe,CAAC,CAAA;IAC1D,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAoBD,eAAO,MAAM,gBAAgB,kBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB5B,CAAA;AAqBF,eAAO,MAAM,MAAM,wEAkEjB,CAAA;AAYF,eAAe,MAAM,CAAA"}

package/dist-package/src/Popper/Popper.js

@@ -0,0 +1,76 @@
+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;
+};
+import React, { forwardRef, useContext } from 'react';
+import { Popper as MUIPopper } from '@material-ui/core';
+import { useIsomorphicLayoutEffect } from '@toptal/picasso-shared';
+import { usePicassoRoot, useBreakpoint } from '@toptal/picasso-provider';
+import { useWidthOf } from '@toptal/picasso-utils';
+import ModalContext from '@toptal/picasso-modal-context';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+const getAnchorEl = (anchorEl) => (typeof anchorEl === 'function' ? anchorEl() : anchorEl);
+const getPreventOverflowOptions = (isInsideModal) => {
+    if (isInsideModal) {
+        return {
+            boundariesElement: 'scrollParent',
+            padding: 0,
+        };
+    }
+    return {
+        boundariesElement: 'viewport',
+        padding: 5,
+    };
+};
+export const getPopperOptions = (popperOptions, isInsideModal = false) => {
+    var _a, _b;
+    return (Object.assign(Object.assign({}, popperOptions), { modifiers: Object.assign(Object.assign({}, popperOptions.modifiers), { flip: Object.assign({ enabled: true }, (_a = popperOptions.modifiers) === null || _a === void 0 ? void 0 : _a.flip), preventOverflow: Object.assign(Object.assign({ enabled: true }, getPreventOverflowOptions(isInsideModal)), (_b = popperOptions.modifiers) === null || _b === void 0 ? void 0 : _b.preventOverflow) }) }));
+};
+const useWidthStyle = ({ anchorEl, autoWidth, width, }) => {
+    const resolvedAnchorEl = getAnchorEl(anchorEl);
+    const anchorElWidth = useWidthOf(resolvedAnchorEl);
+    if (width) {
+        return { width };
+    }
+    if (autoWidth) {
+        return { width: anchorElWidth };
+    }
+    return {};
+};
+export const Popper = forwardRef(function Popper(props, ref) {
+    const { children, open, anchorEl, className, container, popperOptions = {}, keepMounted, autoWidth, width, enableCompactMode, disablePortal, style } = props, rest = __rest(props, ["children", "open", "anchorEl", "className", "container", "popperOptions", "keepMounted", "autoWidth", "width", "enableCompactMode", "disablePortal", "style"]);
+    const picassoRootContainer = usePicassoRoot();
+    const isInsideModal = useContext(ModalContext);
+    const isCompactLayoutResolution = useBreakpoint(['xs', 'sm', 'md']);
+    const isCompactLayout = enableCompactMode && isCompactLayoutResolution;
+    const widthStyle = useWidthStyle({ autoWidth, width, anchorEl });
+    const anchorElWidthStyle = !isCompactLayout && widthStyle;
+    useIsomorphicLayoutEffect(() => {
+        if (isCompactLayout && open && document.body.style.overflow !== 'clip') {
+            const prev = document.body.style.overflow;
+            document.body.style.overflow = 'clip';
+            return () => {
+                document.body.style.overflow = prev;
+            };
+        }
+    }, [isCompactLayout, open]);
+    const memoizedPopperOptions = React.useMemo(() => getPopperOptions(popperOptions, isInsideModal), [popperOptions, isInsideModal]);
+    return (React.createElement(MUIPopper, Object.assign({ open: open, container: container || picassoRootContainer, anchorEl: anchorEl, className: twMerge('z-modal', 'xs:max-md:w-screen xs:max-md:max-w-screen xs:max-md:p-0 xs:max-md:m-0', '[&[x-out-of-boundaries]]:hidden', className), popperRef: ref, popperOptions: memoizedPopperOptions, disablePortal: disablePortal, keepMounted: keepMounted, style: Object.assign(Object.assign({}, style), anchorElWidthStyle) }, rest), children));
+});
+Popper.defaultProps = {
+    open: false,
+    disablePortal: false,
+    placement: 'bottom',
+    popperOptions: {},
+    autoWidth: true,
+};
+Popper.displayName = 'Popper';
+export default Popper;
+//# sourceMappingURL=Popper.js.map

package/dist-package/src/Popper/Popper.js.map

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

package/dist-package/src/Popper/index.d.ts

@@ -0,0 +1,5 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props } from './Popper';
+export { default as Popper } from './Popper';
+export declare type PopperProps = OmitInternalProps<Props>;
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/Popper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Popper/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,oBAAY,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

package/dist-package/src/Popper/index.js

@@ -0,0 +1,2 @@
+export { default as Popper } from './Popper';
+//# sourceMappingURL=index.js.map

package/dist-package/src/Popper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Popper/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA"}

package/dist-package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Popper';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist-package/src/index.js

@@ -0,0 +1,2 @@
+export * from './Popper';
+//# sourceMappingURL=index.js.map

package/dist-package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-popper",
-  "version": "2.0.1-alpha-1757603192867.0",
+  "version": "2.0.1-alpha-1757603777486.0",
   "description": "Toptal UI components library - Popper",
   "publishConfig": {
     "access": "public",
@@ -23,19 +23,19 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-shared": "15.0.1-alpha-1757603192867.0",
-    "@toptal/picasso-utils": "3.1.1-alpha-1757603192867.0",
-    "@toptal/picasso-modal-context": "1.0.2-alpha-1757603192867.0"
+    "@toptal/picasso-shared": "15.0.1-alpha-1757603777486.0",
+    "@toptal/picasso-utils": "3.1.1-alpha-1757603777486.0",
+    "@toptal/picasso-modal-context": "1.0.2-alpha-1757603777486.0"
   },
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
+    "@toptal/picasso-provider": "5.0.2-alpha-1757603777486.0",
     "react": ">=16.12.0 < 19.0.0",
-    "@toptal/picasso-tailwind": "3.0.1-alpha-1757603192867.0",
-    "@toptal/picasso-tailwind-merge": "^2.0.4-alpha-1757603192867.0"
+    "@toptal/picasso-tailwind": "3.0.1-alpha-1757603777486.0",
+    "@toptal/picasso-tailwind-merge": "^2.0.4-alpha-1757603777486.0"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
+    "@toptal/picasso-provider": "5.0.2-alpha-1757603777486.0",
     "popper.js": "^1.16.1"
   },
   "exports": {