@cypress-design/react-docmenu 0.1.0

package/dist/index.umd.js

@@ -0,0 +1,248 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var iconsRegistry = require('@cypress-design/icon-registry');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var iconsRegistry__namespace = /*#__PURE__*/_interopNamespaceDefault(iconsRegistry);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(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$1.apply(this, arguments);
+};
+
+function __rest$1(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;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+var DocLink = function (_a) {
+    var item = _a.item, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? -1 : _b, onActive = _a.onActive;
+    var activeLIRef = React__namespace.useRef(null);
+    // on mount, if the item is active,
+    // send the top position to the parent
+    React__namespace.useEffect(function () {
+        var _a;
+        if (item.active) {
+            onActive === null || onActive === void 0 ? void 0 : onActive(((_a = activeLIRef === null || activeLIRef === void 0 ? void 0 : activeLIRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0);
+        }
+    }, []);
+    return (React__namespace.createElement("li", { ref: activeLIRef, className: clsx('list-none p-0', {
+            'pl-[16px]': depth >= 0,
+        }) },
+        React__namespace.createElement("a", { className: clsx('group relative inline-block pl-[24px]', {
+                'text-indigo-500 dark:text-indigo-200': item.active,
+                'py-[8px] text-[16px] leading-[24px]': depth < 0,
+                'py-[12px] leading-[20px] text-[14px]': depth >= 0,
+            }), href: item.href },
+            depth >= 0 ? (React__namespace.createElement("div", { className: clsx('absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden', {
+                    'group-hover:block bg-gray-300': !item.active && collapsible,
+                }), style: {
+                    left: "-".concat(18.5 + depth * 8, "px"),
+                } })) : null,
+            item.text)));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(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);
+};
+
+function __rest(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 compileReactIconProperties = function (_a) {
+    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
+        if (!iconsRegistry.ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
+            newAttributes[attrName] =
+                attributes[attrName];
+        }
+        return newAttributes;
+    }, {});
+    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
+            __html: body,
+        } }, filteredAttributes);
+    if (attributes.className) {
+        compiledClasses.push(attributes.className);
+    }
+    if (compiledClasses.length) {
+        componentProps.className = compiledClasses.join(' ');
+    }
+    return componentProps;
+};
+var IconChevronDownSmall = function (props) {
+    var _a = iconsRegistry__namespace.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["8", "16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
+    var iconBodies = {
+        "8": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 2.5 3 3 3-3\" class=\"icon-dark\"/>",
+        "16": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m4 6 4 4 4-4\" class=\"icon-dark\"/>"
+    };
+    var body = iconBodies[size];
+    if (!body) {
+        throw Error("Icon \"chevron-down-small\" is not available in size ".concat(size));
+    }
+    return React__namespace.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
+};
+
+
+/* <windicss-keep class=""> */
+
+var classes = {
+    button: 'flex leading-[24px] py-[10px] items-center relative w-full',
+    topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',
+    leafButton: 'leading-[20px] text-[14px] pl-[40px]',
+};
+
+var DocGroup = function (_a) {
+    var _b;
+    var group = _a.group, collapsible = _a.collapsible, _c = _a.depth, depth = _c === void 0 ? 0 : _c, setHeight = _a.setHeight;
+    var _d = React__namespace.useState(depth === 0), open = _d[0], setOpen = _d[1];
+    var _e = React__namespace.useState(Array(group.items.length).fill(1)), itemsHeights = _e[0], setItemsHeights = _e[1];
+    React__namespace.useEffect(function () {
+        setHeight === null || setHeight === void 0 ? void 0 : setHeight(open ? itemsHeights.reduce(function (a, b) { return a + b; }, 1) : 1);
+    }, [itemsHeights, open]);
+    var _f = React__namespace.useState(0), activeTop = _f[0], setActiveTop = _f[1];
+    React__namespace.useEffect(function () {
+        var activeItem = group.items.findIndex(function (item) { return 'href' in item && item.active; });
+        if (activeItem >= 0) {
+            setActiveTop(itemsHeights.slice(0, activeItem).reduce(function (a, b) { return a + b; }, 1) * 44);
+        }
+    }, [itemsHeights]);
+    function toggleMenu(open) {
+        if (!collapsible)
+            return;
+        setOpen(open);
+    }
+    function onSetHeight(index, height) {
+        setItemsHeights(function (prev) {
+            var newHeights = __spreadArray([], prev, true);
+            newHeights[index] = height;
+            return newHeights;
+        });
+    }
+    var Head = collapsible ? 'button' : group.href ? 'a' : 'div';
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {},
+                _b[classes.topButton] = depth === 0,
+                _b[classes.leafButton] = depth,
+                _b)) },
+            collapsible ? (React__namespace.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx('absolute transform transition-transform left-0', {
+                    'rotate-0': open,
+                    '-rotate-90': !open,
+                    'ml-[16px]': depth,
+                }) })) : null,
+            group.text),
+        collapsible &&
+            depth >= 0 &&
+            open &&
+            group.items.some(function (item) { return 'href' in item && item.active; }) ? (React__namespace.createElement("div", { className: "absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px]", style: {
+                top: "".concat(activeTop, "px"),
+                left: "".concat(depth === 0 ? 0.5 : -(depth * 8) - 0.5, "px"),
+            } })) : null,
+        React__namespace.createElement("ul", { className: clsx('ml-[8px] list-none p-0', {
+                'border-l border-gray-100': depth === 0 && collapsible,
+                hidden: !open,
+            }) }, group.items.map(function (item, index) {
+            return 'items' in item ? (React__namespace.createElement("li", { key: index, className: "relative list-none p-0" },
+                React__namespace.createElement(DocGroup, { group: item, depth: depth + 1, setHeight: function (height) { return onSetHeight(index, height); }, collapsible: collapsible }))) : (React__namespace.createElement(DocLink, { key: index, item: item, collapsible: collapsible, depth: depth, onActive: function (top) { return setActiveTop(top); } }));
+        }))));
+};
+
+var DocMenu = function (_a) {
+    var items = _a.items, _b = _a.collapsible, collapsible = _b === void 0 ? true : _b, rest = __rest$1(_a, ["items", "collapsible"]);
+    return (React__namespace.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', rest.className) }), items.map(function (item, index) {
+        return 'items' in item ? (React__namespace.createElement("li", { key: index, className: "relative list-none p-0" },
+            React__namespace.createElement(DocGroup, { group: item, collapsible: collapsible }))) : (React__namespace.createElement(DocLink, { key: index, item: item, collapsible: collapsible }));
+    })));
+};
+
+module.exports = DocMenu;
+//# sourceMappingURL=index.umd.js.map
+
+/* <windicss-keep class="list-none p-0 relative pl-[16px] inline-block pl-[24px] text-indigo-500 dark:text-indigo-200 py-[8px] text-[16px] leading-[24px] py-[12px] leading-[20px] text-[14px] absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden group-hover:block bg-gray-300 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] h-[36px] bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px] ml-[8px] border-l border-gray-100 flex py-[10px] items-center w-full font-medium pl-[40px]"> */