@automattic/plans-grid-next 1.0.0

package/dist/esm/components/sticky-container.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Global, css } from '@emotion/react';
+import styled from '@emotion/styled';
+import clsx from 'clsx';
+import { useRef, useState, useLayoutEffect } from 'react';
+const styles = ({ disabled, stickyOffset, zIndex, }) => disabled
+    ? ''
+    : css `
+				position: sticky;
+				top: ${stickyOffset + 'px'};
+				z-index: ${zIndex};
+		  `;
+const Container = styled.div `
+	${styles}
+`;
+export function StickyContainer(props) {
+    const { stickyOffset = 0, zIndex = 2, stickyClass = '', element = 'div', disabled = false, children, } = props;
+    const stickyRef = useRef(null);
+    const [isStuck, setIsStuck] = useState(false);
+    /**
+     * This effect sets the value of `isStuck` state when it detects that
+     * the element is sticky.
+     * The top property of the root margin is set at -1px (plus optional offset).
+     * So when position:sticky takes effect, the intersection ratio will always be ~99%
+     */
+    useLayoutEffect(() => {
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (disabled) {
+                return;
+            }
+            if (entry.intersectionRatio === 0) {
+                // The element is out of view
+                setIsStuck(false);
+            }
+            else if (entry.rootBounds?.bottom !== undefined &&
+                entry.boundingClientRect.bottom >= entry.rootBounds?.bottom) {
+                // The element is intersecting, but it is at the bottom of the screen
+                setIsStuck(false);
+            }
+            else {
+                // The element is in the "stuck" state
+                setIsStuck(entry.intersectionRatio < 1);
+            }
+        }, {
+            rootMargin: `-${stickyOffset + 1}px 0px 0px 0px`,
+            threshold: [0, 1],
+        });
+        if (stickyRef.current) {
+            observer.observe(stickyRef.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [disabled, stickyOffset]);
+    const isStuckFinalState = !disabled && isStuck;
+    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
+					/**
+				 * .layout__content has overflow set to hidden, which prevents position: sticky from working.
+				 * Instead of removing it globally, this CSS only unsets the property when this component is rendered.
+				 */
+					.layout__content {
+						overflow: unset;
+					}
+				` }), _jsx(Container, { ...props, as: element, ref: stickyRef, stickyOffset: stickyOffset, disabled: disabled, className: clsx({ [stickyClass]: isStuckFinalState }), zIndex: zIndex, children: children(isStuckFinalState) })] }));
+}
+//# sourceMappingURL=sticky-container.js.map

package/dist/esm/components/sticky-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-container.js","sourceRoot":"","sources":["../../../src/components/sticky-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAoB,QAAQ,EAAE,eAAe,EAAa,MAAM,OAAO,CAAC;AAqCvF,MAAM,MAAM,GAAG,CAAE,EAChB,QAAQ,EACR,YAAY,EACZ,MAAM,GAKN,EAAG,EAAE,CACL,QAAQ;IACP,CAAC,CAAC,EAAE;IACJ,CAAC,CAAC,GAAG,CAAA;;WAEK,YAAY,GAAG,IAAK;eAChB,MAAO;KAClB,CAAC;AAEN,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;GACxB,MAAO;CACV,CAAC;AAEF,MAAM,UAAU,eAAe,CAAE,KAAY;IAC5C,MAAM,EACL,YAAY,GAAG,CAAC,EAChB,MAAM,GAAG,CAAC,EACV,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,MAAM,CAAE,IAAI,CAAE,CAAC;IACjC,MAAM,CAAE,OAAO,EAAE,UAAU,CAAE,GAAG,QAAQ,CAAE,KAAK,CAAE,CAAC;IAElD;;;;;OAKG;IACH,eAAe,CAAE,GAAG,EAAE;QACrB,IAAK,OAAO,oBAAoB,KAAK,WAAW,EAAG,CAAC;YACnD,OAAO;QACR,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACxC,CAAE,CAAE,KAAK,CAAE,EAAG,EAAE;YACf,IAAK,QAAQ,EAAG,CAAC;gBAChB,OAAO;YACR,CAAC;YACD,IAAK,KAAK,CAAC,iBAAiB,KAAK,CAAC,EAAG,CAAC;gBACrC,6BAA6B;gBAC7B,UAAU,CAAE,KAAK,CAAE,CAAC;YACrB,CAAC;iBAAM,IACN,KAAK,CAAC,UAAU,EAAE,MAAM,KAAK,SAAS;gBACtC,KAAK,CAAC,kBAAkB,CAAC,MAAM,IAAI,KAAK,CAAC,UAAU,EAAE,MAAM,EAC1D,CAAC;gBACF,qEAAqE;gBACrE,UAAU,CAAE,KAAK,CAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACP,sCAAsC;gBACtC,UAAU,CAAE,KAAK,CAAC,iBAAiB,GAAG,CAAC,CAAE,CAAC;YAC3C,CAAC;QACF,CAAC,EACD;YACC,UAAU,EAAE,IAAK,YAAY,GAAG,CAAE,gBAAgB;YAClD,SAAS,EAAE,CAAE,CAAC,EAAE,CAAC,CAAE;SACnB,CACD,CAAC;QAEF,IAAK,SAAS,CAAC,OAAO,EAAG,CAAC;YACzB,QAAQ,CAAC,OAAO,CAAE,SAAS,CAAC,OAAO,CAAE,CAAC;QACvC,CAAC;QAED,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,UAAU,EAAE,CAAC;QACvB,CAAC,CAAC;IACH,CAAC,EAAE,CAAE,QAAQ,EAAE,YAAY,CAAE,CAAE,CAAC;IAEhC,MAAM,iBAAiB,GAAG,CAAE,QAAQ,IAAI,OAAO,CAAC;IAChD,OAAO,CACN,8BACC,KAAC,MAAM,IACN,MAAM,EAAG,GAAG,CAAA;;;;;;;;KAQX,GACA,EACF,KAAC,SAAS,OACJ,KAAK,EACV,EAAE,EAAG,OAAO,EACZ,GAAG,EAAG,SAAS,EACf,YAAY,EAAG,YAAY,EAC3B,QAAQ,EAAG,QAAQ,EACnB,SAAS,EAAG,IAAI,CAAE,EAAE,CAAE,WAAW,CAAE,EAAE,iBAAiB,EAAE,CAAE,EAC1D,MAAM,EAAG,MAAM,YAEb,QAAQ,CAAE,iBAAiB,CAAE,GACpB,IACV,CACH,CAAC;AACH,CAAC"}

package/dist/esm/constants.js

@@ -0,0 +1,8 @@
+import { TERM_ANNUALLY, TERM_BIENNIALLY, TERM_MONTHLY, TERM_TRIENNIALLY, } from '@automattic/calypso-products';
+export const EFFECTIVE_TERMS_LIST = [
+    TERM_MONTHLY,
+    TERM_ANNUALLY,
+    TERM_BIENNIALLY,
+    TERM_TRIENNIALLY,
+];
+//# sourceMappingURL=constants.js.map

package/dist/esm/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,aAAa,EACb,eAAe,EACf,YAAY,EACZ,gBAAgB,GAChB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,CAAC,MAAM,oBAAoB,GAAY;IAC5C,YAAY;IACZ,aAAa;IACb,eAAe;IACf,gBAAgB;CAChB,CAAC"}

package/dist/esm/css-mixins.js

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+export const plansGridMediumLarge = (styles) => css `
+	.plans-grid-next.is-smedium &,
+	.plans-grid-next.is-medium &,
+	.plans-grid-next.is-large &,
+	.plans-grid-next.is-xlarge & {
+		${styles}
+	}
+`;
+//# sourceMappingURL=css-mixins.js.map

package/dist/esm/css-mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-mixins.js","sourceRoot":"","sources":["../../src/css-mixins.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAGrC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAE,MAAwB,EAAG,EAAE,CAAC,GAAG,CAAA;;;;;IAKlE,MAAO;;CAEX,CAAC"}