@cypress-design/react-docmenu 1.0.0 → 1.0.1

package/dist/index.umd.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var React = require('react');
+var reactIcon = require('@cypress-design/react-icon');
 var clsx = require('clsx');
-var iconsRegistry = require('@cypress-design/icon-registry');
+var constantsDocmenu = require('@cypress-design/constants-docmenu');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -22,52 +23,6 @@ function _interopNamespaceDefault(e) {
 }
 
 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.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-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;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -114,84 +69,12 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var compileReactIconProperties = function (_a) {
-    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
-    var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
-        if (!iconsRegistry.ICON_COLOR_PROP_NAMES.includes(attrName) &&
-            attrName !== 'name') {
-            // @ts-expect-error the ky of React's SVGProps is too broad and
-            // breaks here. Since we do not need to check for it. We keep the expect error
-            newAttributes[attrName] =
-                attributes[attrName];
-        }
-        return newAttributes;
-    }, {});
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React__namespace.useEffect(function () {
-        var iconFileId = "".concat(name, "_").concat(size);
-        if (defs) {
-            if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
-                return;
-            }
-            var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            svgElement.setAttribute('data-cy-svg-defs', iconFileId);
-            svgElement.setAttribute('width', '0');
-            svgElement.setAttribute('height', '0');
-            svgElement.innerHTML = defs;
-            document.body.appendChild(svgElement);
-        }
-    }, [defs, name, size]);
-    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
-            __html: alt
-                ? "<title>".concat(alt.replace(/[><]/g, function (s) {
-                    return s === '>' ? '&gt;' : '&lt;';
-                }), "</title>").concat(body)
-                : body,
-        }, className: undefined }, filteredAttributes);
-    if (attributes.className) {
-        compiledClasses.push(attributes.className);
-    }
-    if (compiledClasses.length) {
-        componentProps.className = compiledClasses.join(' ');
-    }
-    return componentProps;
-};
-
-function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
-    var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
-    var _a = iconsRegistry__namespace.getComponentAttributes(__assign(__assign({}, cleanProps), { availableSizes: availableSizes, interactiveColorsOnGroup: interactiveColorsOnGroup })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
-    var _b = iconBodiesAndDefs[size] || {}, body = _b.body, defs = _b.defs;
-    if (!body) {
-        throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
-    }
-    return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
-}
-var IconChevronDownSmall = function (props) { return React__namespace.createElement('svg', useIconProps(props, {
-    "8": {
-        "body": "<path d=\"m1 2.5 3 3 3-3\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
-    },
-    "16": {
-        "body": "<path d=\"m4 6 4 4 4-4\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
-    }
-}, ["8", "16"], "chevron-down-small")); };
-
-
-/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
-
-const classes = {
-    expandedIcon: 'absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700',
-    button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',
-    topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',
-    leafButton: 'leading-[20px] text-[14px] pl-[48px]',
-    openListBorderLeft: 'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',
-};
-
 var DocLink = React__namespace.forwardRef(function (_a, ref) {
     var item = _a.item, depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
     var activeLIRef = React__namespace.useRef(null);
     var active = React__namespace.useMemo(function () { return item.href === context.activePath; }, [item.href, context.activePath]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    item.label; var itemRest = __rest$1(item, ["label"]);
+    item.label; var itemRest = __rest(item, ["label"]);
     var setActiveMarkerPosition = function () {
         var _a;
         if (active) {
@@ -229,7 +112,7 @@ var DocLink = React__namespace.forwardRef(function (_a, ref) {
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
     return (React__namespace.createElement("li", { ref: activeLIRef, className: "list-none p-0 scroll-my-10" },
-        React__namespace.createElement(LinkComponent, __assign$1({}, itemRest, { className: clsx('group relative block w-full pl-[24px]', {
+        React__namespace.createElement(LinkComponent, __assign({}, itemRest, { className: clsx('group relative block w-full pl-[24px]', {
                 'text-indigo-500 dark:text-indigo-400': active,
                 'text-gray-700 dark:text-gray-500': !active,
                 'py-[8px] text-[16px] leading-[24px]': depth < 0,
@@ -332,16 +215,16 @@ var DocGroup = React__namespace.forwardRef(function (_a, ref) {
         }
     }, [hasActiveItemRecursivelyMemo, updateMarkerPosition]);
     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,
+        React__namespace.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(constantsDocmenu.classes.button, (_b = {},
+                _b[constantsDocmenu.classes.topButton] = depth === 0,
+                _b[constantsDocmenu.classes.leafButton] = depth,
                 _b['text-indigo-500 dark:text-indigo-400'] = activePath === group.href,
                 _b['text-gray-900 dark:text-gray-100'] = hasActiveItemRecursivelyMemo && activePath !== group.href,
                 _b['text-gray-800 dark:text-gray-200'] = !hasActiveItemRecursivelyMemo && activePath !== group.href,
                 _b)), style: {
                 paddingLeft: depth >= 1 ? "".concat((depth - 1) * 12 + 48, "px") : undefined,
             } },
-            collapsible ? (React__namespace.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx(classes.expandedIcon, {
+            collapsible ? (React__namespace.createElement(reactIcon.IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx(constantsDocmenu.classes.expandedIcon, {
                     'rotate-0': open,
                     '-rotate-90': !open,
                 }), style: {
@@ -355,12 +238,12 @@ var DocGroup = React__namespace.forwardRef(function (_a, ref) {
                     'grid-rows-[1fr]': open,
                 }
                 : null), onTransitionEnd: restoreActiveMarkerAfterTransition },
-            open && collapsible && depth === 0 ? (React__namespace.createElement("div", { className: classes.openListBorderLeft })) : null,
+            open && collapsible && depth === 0 ? (React__namespace.createElement("div", { className: constantsDocmenu.classes.openListBorderLeft })) : null,
             React__namespace.createElement(DocGroupElements, { ref: $groupElements, className: "overflow-hidden", items: group.items, depth: depth, context: context, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, updateMarkerPosition: onUpdateMarkerPosition, LinkComponent: LinkComponent }))));
 });
 DocGroup.displayName = 'DocMenuDocGroup';
 var DocGroupElements = React__namespace.forwardRef(function (_a, ref) {
-    var items = _a.items, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, markerIsMoving = _a.markerIsMoving, LinkComponent = _a.LinkComponent, className = _a.className, context = _a.context, rest = __rest$1(_a, ["items", "depth", "onActivePosition", "updateMarkerPosition", "markerIsMoving", "LinkComponent", "className", "context"]);
+    var items = _a.items, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, markerIsMoving = _a.markerIsMoving, LinkComponent = _a.LinkComponent, className = _a.className, context = _a.context, rest = __rest(_a, ["items", "depth", "onActivePosition", "updateMarkerPosition", "markerIsMoving", "LinkComponent", "className", "context"]);
     var $groups = React__namespace.useRef([]);
     var $items = React__namespace.useRef([]);
     var reTriggerSetActiveGroup = React__namespace.useCallback(function (index) {
@@ -392,7 +275,7 @@ var DocGroupElements = React__namespace.forwardRef(function (_a, ref) {
             updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
         }
     }, [updateMarkerPosition, reTriggerSetActiveGroup, items, activePath]);
-    return (React__namespace.createElement("ul", __assign$1({}, rest, { className: clsx('list-none p-0', className) }), items.map(function (item, index) {
+    return (React__namespace.createElement("ul", __assign({}, rest, { className: clsx('list-none p-0', 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, { ref: function (el) {
                     $groups.current[index] = el;
@@ -406,7 +289,7 @@ var DocGroupElements = React__namespace.forwardRef(function (_a, ref) {
 DocGroupElements.displayName = 'DocMenuDocGroupElements';
 
 var DocMenu = function (_a) {
-    var items = _a.items, _b = _a.activePath, activePath = _b === void 0 ? '<unknown>' : _b, _c = _a.collapsible, collapsible = _c === void 0 ? true : _c, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, rest = __rest$1(_a, ["items", "activePath", "collapsible", "LinkComponent"]);
+    var items = _a.items, _b = _a.activePath, activePath = _b === void 0 ? '<unknown>' : _b, _c = _a.collapsible, collapsible = _c === void 0 ? true : _c, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, rest = __rest(_a, ["items", "activePath", "collapsible", "LinkComponent"]);
     var _e = React__namespace.useState(0), activeTop = _e[0], setActiveTop = _e[1];
     var _f = React__namespace.useState(36), activeHeight = _f[0], setActiveHeight = _f[1];
     var _g = React__namespace.useState(false), showMarker = _g[0], setShowMarker = _g[1];
@@ -440,7 +323,7 @@ var DocMenu = function (_a) {
                     ? 'height .3s ease-in-out, top .3s ease-in-out'
                     : 'none',
             } })) : null,
-        React__namespace.createElement(DocGroupElements, __assign$1({}, rest, { items: items, depth: -1, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, LinkComponent: LinkComponent, context: {
+        React__namespace.createElement(DocGroupElements, __assign({}, rest, { items: items, depth: -1, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, LinkComponent: LinkComponent, context: {
                 setMarkerIsMoving: setMarkerIsMoving,
                 activePath: activePath,
                 collapsible: collapsible,
@@ -451,4 +334,4 @@ var DocMenu = function (_a) {
 module.exports = DocMenu;
 //# sourceMappingURL=index.umd.js.map
 
-/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 transition-all grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 visible block inline scroll-my-10 w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-indigo-400 text-gray-500 bg-indigo-400 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 transition-all grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 visible block inline scroll-my-10 w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-indigo-400 text-gray-500 bg-indigo-400"> */