@onepercentio/one-ui 0.29.0 → 0.29.2

package/dist-ts/components/Chart/Chart.js

@@ -0,0 +1,3 @@
+export { default } from "./Chart.logic";
+export * from "./Chart.logic";
+//# sourceMappingURL=Chart.js.map

package/dist-ts/components/Chart/Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../../src/components/Chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,cAAc,eAAe,CAAC"}

package/dist-ts/components/Chart/Chart.logic.d.ts

@@ -0,0 +1,3 @@
+import { ChartProps } from "./Chart.types";
+/** An proprietary implementation of some chart variations */
+export default function ChartLogic(props: ChartProps): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/Chart/Chart.logic.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import View from "./Chart.view";
+/** An proprietary implementation of some chart variations */
+export default function ChartLogic(props) {
+    return _jsx(View, { ...props });
+}
+//# sourceMappingURL=Chart.logic.js.map

package/dist-ts/components/Chart/Chart.logic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.logic.js","sourceRoot":"","sources":["../../../src/components/Chart/Chart.logic.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,cAAc,CAAC;AAGhC,6DAA6D;AAC7D,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAiB;IAChD,OAAO,KAAC,IAAI,OAAK,KAAK,GAAI,CAAC;AAC/B,CAAC"}

package/dist-ts/components/Chart/Chart.module.scss

@@ -0,0 +1,58 @@
+@import "../../assets/styles";
+
+.tooltipContainer {
+  > * {
+    padding: 16px;
+    border-radius: 8px;
+    background-color: var(--line-color) !important;
+    color: var(--text-color);
+  }
+
+  &::after,
+  &::before {
+    border-color: var(--line-color) !important;
+  }
+}
+
+.chartRoot {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+  .chartContainer {
+    width: 100%;
+    height: 100%;
+    border-left: 2px solid $primaryColor;
+    border-bottom: 2px solid $primaryColor;
+    svg {
+      height: 100%;
+      width: 100%;
+      circle {
+        fill: var(--point-color);
+      }
+      polyline {
+        stroke: var(--line-color);
+      }
+    }
+  }
+  .yAxis,
+  .xAxis {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    > * {
+      text-align: center;
+    }
+  }
+  .xAxis {
+    border-left: 2px solid $primaryColor;
+    flex-direction: row;
+    > * {
+      flex: 1;
+    }
+  }
+  .yAxis {
+    border-bottom: 2px solid $primaryColor;
+  }
+}

package/dist-ts/components/Chart/Chart.types.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement } from "react";
+export type ChartProps = ChartViewProps;
+export type ChartViewProps = {
+    bounds: Readonly<[
+        horizontal: Readonly<[min: number, max: number, incrementRate: number]>,
+        vertical: Readonly<[min: number, max: number, incrementRate: number]>
+    ]>;
+    style?: (Partial<{
+        lineColor: string;
+        pointColor: string;
+        textColor: string;
+    }> | undefined)[];
+    data?: Readonly<Readonly<Readonly<[x: number, y: number]>[]>[]>;
+    points?: Readonly<Readonly<Readonly<[
+        x: number,
+        y: number,
+        label: ReactElement,
+        onlyOnHover?: boolean
+    ]>[]>[]>;
+    label: {
+        x: (val: number) => ReactElement;
+        y: (val: number) => ReactElement;
+    };
+};

package/dist-ts/components/Chart/Chart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Chart.types.js.map

package/dist-ts/components/Chart/Chart.types.js.map

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

package/dist-ts/components/Chart/Chart.view.d.ts

@@ -0,0 +1,5 @@
+import { ChartViewProps } from "./Chart.types";
+/**
+ * Draws a simple line chart with some animation
+ **/
+export default function ChartView({ bounds: [[startX, endX, stepsX], [startY, endY, stepsY]], data, points, label, style: groupStyle, }: ChartViewProps): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/Chart/Chart.view.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import Styles from "./Chart.module.scss";
+import { ChartDataTestIds } from "./Chart.e2e";
+import AnchoredTooltip from "../AnchoredTooltip";
+const DEFAULT_STYLE = {
+    lineColor: "#000",
+    pointColor: "#000",
+    textColor: "#fff",
+};
+function FloatingTooltip({ children, x, y, hoverOnly, height, style, }) {
+    const [ope, setOpen] = useState(() => (hoverOnly ? false : true));
+    const ref = useRef(null);
+    const circleRef = useRef(null);
+    useEffect(() => {
+        const animateEl = circleRef.current.children.item(0);
+        let interval;
+        animateEl.addEventListener("beginEvent", () => {
+            interval = setInterval(() => ref.current.updatePosition(), 1000 / 24);
+        });
+        animateEl.addEventListener("endEvent", () => {
+            clearInterval(interval);
+            ref.current.updatePosition();
+        });
+    }, []);
+    const actions = useMemo(() => hoverOnly
+        ? {
+            onMouseEnter: () => setOpen(true),
+            onMouseOut: () => setOpen(false),
+        }
+        : {}, [hoverOnly]);
+    return (_jsxs(_Fragment, { children: [_jsx("circle", { ref: circleRef, r: height * 0.01, cx: x, cy: y, style: {
+                    "--point-color": style.pointColor,
+                }, ...actions, children: _jsx("animate", { attributeName: "cy", values: `${height};${y}`, dur: "1s" }) }), _jsx(AnchoredTooltip, { ref: ref, containInViewport: false, anchorRef: circleRef, open: ope, className: Styles.tooltipContainer, style: {
+                    "--line-color": style.lineColor,
+                    "--text-color": style.textColor,
+                }, children: children })] }));
+}
+/**
+ * Draws a simple line chart with some animation
+ **/
+export default function ChartView({ bounds: [[startX, endX, stepsX], [startY, endY, stepsY]], data = [], points = [], label, style: groupStyle = [], }) {
+    const [dim, setDIm] = useState();
+    const chartRef = useRef(null);
+    useLayoutEffect(() => {
+        setDIm({
+            width: chartRef.current.clientWidth,
+            height: chartRef.current.clientHeight,
+        });
+    }, []);
+    const { width, height } = dim || {};
+    const howMuchStepsY = useMemo(() => (endY - startY) / stepsY + 1, [endY, startY, stepsY]);
+    const yAxis = useMemo(() => {
+        return new Array(howMuchStepsY).fill(undefined).map((_, i) => {
+            return _jsx("span", { children: label.y(endY - i * stepsY) });
+        });
+    }, [startY, endY, stepsY, howMuchStepsY]);
+    const howMuchStepsX = useMemo(() => (endX - startX) / stepsX + 1, [endX, startX, stepsX]);
+    const xAxis = useMemo(() => {
+        return new Array(howMuchStepsX).fill(undefined).map((_, i) => {
+            return _jsx("span", { children: label.x(startX + i * stepsX) });
+        });
+    }, [startX, endX, stepsX]);
+    const { polylines, tooltips } = useMemo(() => {
+        const calculate = (end, start, overrideScale = 100) => (point) => {
+            const max = end - start;
+            const current = point - start;
+            return (current * overrideScale) / max;
+        };
+        const calculateX = calculate(endX, startX, width);
+        const calculateY = calculate(endY, startY, height);
+        return {
+            tooltips: points.map((pointsCategory, i) => {
+                const style = groupStyle[i] || DEFAULT_STYLE;
+                return pointsCategory.map(([x, y, label, onlyOnHover = false]) => {
+                    return (_jsx(FloatingTooltip, { x: calculateX(x), y: height - calculateY(y), height: height, style: style, hoverOnly: onlyOnHover, children: label }));
+                });
+            }),
+            polylines: data.map((lineData, i) => {
+                const style = groupStyle[i] || DEFAULT_STYLE;
+                const calculateLines = (yOverride) => {
+                    return lineData
+                        .map(([x, y]) => `${calculateX(x)},${yOverride === undefined ? height - calculateY(y) : yOverride}`)
+                        .join(" ");
+                };
+                return (_jsx("polyline", { strokeLinejoin: "round", strokeLinecap: "round", points: calculateLines(), fill: "none", strokeWidth: 5, style: {
+                        "--line-color": style.lineColor,
+                    }, children: _jsx("animate", { attributeName: "points", attributeType: "XML", values: [calculateLines(height), calculateLines()].join("; "), dur: "1s" }) }));
+            }),
+        };
+    }, [data, width, height]);
+    const paddingY = useMemo(() => {
+        const stepSizeY = height / (howMuchStepsY - 1);
+        return stepSizeY / 2;
+    }, [howMuchStepsY, height]);
+    const paddingX = useMemo(() => {
+        const stepSizeX = width / (howMuchStepsX - 1);
+        return stepSizeX / 2;
+    }, [howMuchStepsX, width]);
+    return (_jsxs("div", { className: Styles.chartRoot, children: [_jsx("div", { className: Styles.yAxis, "data-testid": ChartDataTestIds.Y_AXIS, children: yAxis }), _jsx("div", { ref: chartRef, className: Styles.chartContainer, children: width && (_jsxs("svg", { className: Styles.chart, viewBox: `${-paddingX} ${-paddingY} ${width + paddingX * 2} ${height + paddingY * 2}`, preserveAspectRatio: "none", children: [polylines, tooltips] })) }), "\u00A0", _jsx("div", { className: Styles.xAxis, "data-testid": ChartDataTestIds.X_AXIS, children: xAxis })] }));
+}
+//# sourceMappingURL=Chart.view.js.map

package/dist-ts/components/Chart/Chart.view.js.map

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

package/dist-ts/components/Chart/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Chart";
+export * from "./Chart";

package/dist-ts/components/Chart/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Chart";
+export * from "./Chart";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,cAAc,SAAS,CAAC"}

package/dist-ts/components/CheckBox/CheckBox.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from "react";
+/**
+ * A simple checkbox with nissan guidelines
+ **/
+export default function CheckBox({ checked, onToggle, label, className, size, groupId, value, ...props }: PropsWithChildren<{
+    checked: boolean;
+    onToggle: (checked: boolean) => void;
+    label: React.ReactNode;
+    className?: string;
+    size?: number;
+    groupId: string;
+    value: string;
+}> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "onToggle">): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/CheckBox/CheckBox.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+import Styles from "./CheckBox.module.scss";
+/**
+ * A simple checkbox with nissan guidelines
+ **/
+export default function CheckBox({ checked, onToggle, label, className = "", size = undefined, groupId, value, ...props }) {
+    const Checkbox = useOneUIConfig("component.checkbox.Component", "span");
+    return (_jsxs("label", { className: `${Styles.container} ${className}`, style: { fontSize: size }, onClick: (e) => {
+            onToggle(!checked);
+            e.preventDefault();
+        }, children: [_jsx(Checkbox, { ...props, className: `${checked ? Styles.checked : ""} ${label ? Styles.wContent : ""}` }), _jsx("input", { type: "checkbox", name: groupId, id: value, checked: checked, readOnly: true }), label] }));
+}
+//# sourceMappingURL=CheckBox.js.map

package/dist-ts/components/CheckBox/CheckBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../../src/components/CheckBox/CheckBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,SAAS,EAChB,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EAgBP;IACD,MAAM,QAAQ,GAAG,cAAc,CAC7B,8BAA8B,EAC9B,MAAa,CACP,CAAC;IACT,OAAO,CACL,iBACE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,SAAS,EAAE,EAC7C,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EACzB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;YACnB,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,aAED,KAAC,QAAQ,OACH,KAAK,EACT,SAAS,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IACzC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC5B,EAAE,GACF,EACF,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,OAAO,EACb,EAAE,EAAE,KAAK,EACT,OAAO,EAAE,OAAO,EAChB,QAAQ,SACR,EAED,KAAK,IACA,CACT,CAAC;AACJ,CAAC"}

package/dist-ts/components/CheckBox/CheckBox.module.scss

@@ -0,0 +1,36 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  display: flex;
+  line-height: 1.5em;
+  vertical-align: middle;
+  input {
+    max-width: 0px;
+    max-height: 0px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
+  > span:first-child {
+    visibility: visible;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 0.45em;
+    background-image: url("../../assets/img/svg/checkbox.svg");
+    background-color: transparent;
+    transition: background-color 250ms, border 250ms, box-shadow 250ms;
+    border: 1px solid rgb(40, 43, 53);
+    box-shadow: 0px 0px 0px -4px $digitalBlue;
+    flex-shrink: 0;
+
+    &.wContent {
+      margin-right: 0.45em;
+    }
+  }
+  > span:first-child.checked {
+    background-color: $digitalBlue;
+    border: 1px solid $digitalBlue;
+    box-shadow: 0px 0px 12px -4px $digitalBlue;
+  }
+}

package/dist-ts/components/CheckBox/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CheckBox";
+export * from "./CheckBox";

package/dist-ts/components/CheckBox/index.js

@@ -0,0 +1,3 @@
+export { default } from "./CheckBox";
+export * from "./CheckBox";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/CheckBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CheckBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,cAAc,YAAY,CAAC"}

package/dist-ts/components/CodeInput/CodeInput.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Allows the user to input code using monaco editor
+ **/
+export default function CodeInput({ codeSample, onChange, mode, }: {
+    codeSample?: string;
+    onChange?: (code: string) => void;
+    mode?: "dark" | "light";
+}): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/CodeInput/CodeInput.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { Uri } from "monaco-editor";
+import Styles from "./CodeInput.module.scss";
+import Loader from "../Loader";
+import useModule from "../../hooks/utility/useModule";
+window.MonacoEnvironment = {
+    getWorkerUrl: function (moduleId, label) {
+        if (label === "typescript" || label === "javascript")
+            return "./ts.worker.js";
+        return "./editor.worker.js";
+    },
+};
+/**
+ * Allows the user to input code using monaco editor
+ **/
+export default function CodeInput({ codeSample, onChange, mode, }) {
+    const divRef = useRef(null);
+    const Monaco = useModule(() => import("monaco-editor"));
+    const content = useMemo(() => {
+        if (!Monaco)
+            return _jsx(Loader, {});
+        else {
+            return null;
+        }
+    }, [Monaco]);
+    const editorRef = useRef(undefined);
+    useEffect(() => {
+        if (Monaco) {
+            Monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+                noSemanticValidation: true,
+            });
+            const editor = Monaco.editor.create(divRef.current, {
+                language: "typescript",
+                scrollBeyondLastLine: false,
+                minimap: { enabled: false },
+                folding: false,
+                readOnly: !onChange,
+                theme: mode === "dark" ? "vs-dark" : undefined,
+                automaticLayout: true
+            });
+            editor.onDidContentSizeChange(() => {
+                if (!editorRef.current) {
+                    editorRef.current = editor;
+                }
+            });
+            editor.onDidChangeModelContent(() => {
+                if (onChange)
+                    onChange(editor.getModel().getValue());
+            });
+            const model = Monaco.editor.createModel(codeSample || "", "typescript", Uri.file(`example.tsx`));
+            editor.setModel(model);
+            return () => {
+                model.dispose();
+            };
+        }
+    }, [Monaco]);
+    useEffect(() => {
+        if (!codeSample)
+            return;
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const model = editor.getModel();
+        if (!model)
+            return;
+        const currentValue = model.getValue();
+        if (codeSample !== currentValue)
+            model.setValue(codeSample);
+    }, [codeSample]);
+    return (_jsx("div", { ref: divRef, className: Styles.root, children: content }));
+}
+//# sourceMappingURL=CodeInput.js.map

package/dist-ts/components/CodeInput/CodeInput.js.map

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

package/dist-ts/components/CodeInput/CodeInput.module.scss

@@ -0,0 +1,5 @@
+.root {
+  min-height: 150px;
+  height: 100%;
+  flex: 1;
+}

package/dist-ts/components/CodeInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CodeInput";
+export * from "./CodeInput";

package/dist-ts/components/CodeInput/index.js

@@ -0,0 +1,3 @@
+export { default } from "./CodeInput";
+export * from "./CodeInput";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/CodeInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CodeInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,aAAa,CAAC"}

package/dist-ts/components/Collapsable/Collapsable.d.ts

@@ -0,0 +1,49 @@
+import React, { HTMLAttributes } from "react";
+import { AnchoredTooltipAlignment, AnchoredTooltipAnchor } from "../AnchoredTooltip/AnchoredTooltip";
+declare class _CollapsableInterface {
+    _id: string;
+    constructor(id: string);
+    _getElements(): {
+        header: HTMLElement | null;
+        content: HTMLElement | null;
+    };
+    open(onOpened: () => void): void;
+    getElement(type: "header" | "content"): HTMLDivElement | null;
+}
+/**
+ * A helper function for interacting with collapsables without a reference
+ */
+export declare function CollapsableInterface(id: string): _CollapsableInterface;
+/**
+ * Allows collapsing and expanding the wrapped content
+ **/
+declare const Collapsable: React.ForwardRefExoticComponent<(React.PropsWithChildren<{
+    title: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+    className?: string | undefined;
+    contentClassName?: string | undefined;
+    onToggleOpen?: ((isOpen: boolean) => void) | undefined;
+    open?: boolean | undefined;
+    id?: string | undefined;
+    "data-testid"?: string | undefined;
+    onContentClick?: HTMLAttributes<HTMLInputElement>["onClick"];
+    /**
+     * This flag indicates if the collapsable content should be kept in HTML while it's collapsed
+     *
+     * Usefull for responsive layouts where the collapsable should not "behave" as a collapsable content
+     */
+    keepUnderlayingElement?: boolean | undefined;
+    /**
+     * To detect when the user clicks out of the container
+     */
+    onClickOut?: (() => void) | undefined;
+} & ({
+    /** This will define if the content will be floating under the title or will expand all the container as one */
+    mode?: "block" | undefined;
+} | {
+    mode: "float";
+    alignTo: AnchoredTooltipAlignment;
+    anchorTo?: AnchoredTooltipAnchor | undefined;
+})> & Omit<React.HTMLAttributes<HTMLDivElement>, "title">) & React.RefAttributes<{
+    redimension: () => void;
+}>>;
+export default Collapsable;

package/dist-ts/components/Collapsable/Collapsable.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import FadeIn from "../FadeIn";
+import Styles from "./Collapsable.module.scss";
+import { AnchoredTooltipAlignment, updateTooltipPosition, } from "../AnchoredTooltip/AnchoredTooltip";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+function _Collapsable({ children, title, className, onToggleOpen: _onToggleOpen, open: _open, id, mode = "block", contentClassName, onContentClick, keepUnderlayingElement, onClickOut, ...props }, ref) {
+    const globalClassName = useOneUIConfig("component.collapsable.className", "");
+    const [localOpen, setLocalOpen] = useState(!!_open);
+    const open = _open === undefined ? localOpen : _open;
+    const onToggleOpen = _onToggleOpen === undefined ? setLocalOpen : _onToggleOpen;
+    const contentRef = useRef(null);
+    const toggleRef = useRef(null);
+    useEffect(() => {
+        if (open && onClickOut) {
+            window.addEventListener("click", onClickOut);
+            return () => window.removeEventListener("click", onClickOut);
+        }
+    }, [!!onClickOut, open]);
+    function redimension(canShrink = false) {
+        const el = contentRef.current;
+        const contentEl = el.firstElementChild;
+        if (open) {
+            el.style.marginTop = ``;
+            el.style.height =
+                Math.min(canShrink ? contentEl.clientHeight : Number.POSITIVE_INFINITY, el.scrollHeight, visualViewport.height - 16) + "px";
+            el.parentElement.style.position = "relative";
+            if (mode === "float") {
+                el.style.minHeight = el.style.height;
+                const { shouldAnchorToBottom } = updateTooltipPosition(el, toggleRef.current, true, "alignTo" in props ? props.alignTo : AnchoredTooltipAlignment.CENTER, "anchorTo" in props ? props.anchorTo : undefined);
+                el.style.minHeight = "";
+                if (!shouldAnchorToBottom) {
+                    el.style.marginTop = el.style.height;
+                }
+                const transitionStart = ({ currentTarget, target, propertyName, }) => {
+                    if (currentTarget === target &&
+                        propertyName == "height" &&
+                        !shouldAnchorToBottom) {
+                        el.classList.add(Styles.transitionMarginTop);
+                        el.style.marginTop = "0px";
+                    }
+                };
+                el.addEventListener("transitionstart", transitionStart);
+                return () => el.removeEventListener("transitionstart", transitionStart);
+            }
+            const onTransitionEnd = () => {
+                el.style.height = "auto";
+            };
+            el.addEventListener("transitionend", onTransitionEnd);
+            el.addEventListener("transitionend", () => el.removeEventListener("transitionend", onTransitionEnd));
+            return () => {
+                el.removeEventListener("transitionend", onTransitionEnd);
+            };
+        }
+        else {
+            el.style.height = el.clientHeight + "px";
+            setTimeout(() => {
+                if (el.style.marginTop === "0px")
+                    el.style.marginTop = `${el.clientHeight}px`;
+                el.style.height = 0 + "px";
+            }, 100);
+            const onTransitionEnd = () => {
+                el.parentElement.style.position = "initial";
+                el.classList.remove(Styles.transitionMarginTop);
+                el.removeEventListener("transitionend", onTransitionEnd);
+            };
+            el.addEventListener("transitionend", onTransitionEnd);
+            return () => {
+                el.removeEventListener("transitionend", onTransitionEnd);
+            };
+        }
+    }
+    useImperativeHandle(ref, () => ({
+        redimension: () => redimension(true),
+    }));
+    useLayoutEffect(() => {
+        redimension();
+    }, [open]);
+    const propsToSpread = { ...props };
+    delete propsToSpread.alignTo;
+    delete propsToSpread.anchorTo;
+    return (_jsxs("div", { className: `${Styles.container} ${open ? Styles.open : Styles.closed} ${className} ${globalClassName}`, ...propsToSpread, children: [_jsx("div", { ref: toggleRef, onClick: (e) => {
+                    e.stopPropagation();
+                    onToggleOpen(!open);
+                }, id: _collapsableId("header", id), children: typeof title === "function" ? title(open) : title }), _jsx("div", { onClick: (e) => {
+                    e.stopPropagation();
+                    if (onContentClick)
+                        onContentClick(e);
+                }, ref: contentRef, className: `${Styles.content} ${Styles[mode] || ""} ${contentClassName}`, id: _collapsableId("content", id), children: _jsx(FadeIn, { children: open || keepUnderlayingElement ? children : null }) })] }));
+}
+function _collapsableId(type, id) {
+    return id ? `collapsable_${type}_${id}` : undefined;
+}
+class _CollapsableInterface {
+    _id;
+    constructor(id) {
+        this._id = id;
+    }
+    _getElements() {
+        return {
+            header: document.getElementById(_collapsableId("header", this._id)),
+            content: document.getElementById(_collapsableId("content", this._id)),
+        };
+    }
+    open(onOpened) {
+        const { header, content } = this._getElements();
+        if ((content?.clientHeight || 0) === 0) {
+            header.click();
+            content.addEventListener("transitionend", function _handler() {
+                content.removeEventListener("transitionend", _handler);
+                onOpened();
+            });
+        }
+        else {
+            onOpened();
+        }
+    }
+    getElement(type) {
+        return document.getElementById(_collapsableId(type, this._id));
+    }
+}
+/**
+ * A helper function for interacting with collapsables without a reference
+ */
+export function CollapsableInterface(id) {
+    return new _CollapsableInterface(id);
+}
+/**
+ * Allows collapsing and expanding the wrapped content
+ **/
+const Collapsable = forwardRef(_Collapsable);
+export default Collapsable;
+//# sourceMappingURL=Collapsable.js.map