@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/Navigation/components/Section/Section.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icons_1 = require("../../../Icons");
+const css_1 = require("../../../../utilities/css");
+const media_query_1 = require("../../../../utilities/media-query");
+const unique_id_1 = require("../../../../utilities/unique-id");
+const use_toggle_1 = require("../../../../utilities/use-toggle");
+const Collapsible_1 = require("../../../Collapsible");
+const Icon_1 = require("../../../Icon");
+const Text_1 = require("../../../Text");
+const Tooltip_1 = require("../../../Tooltip");
+const Navigation_classnames_1 = __importDefault(require("../../Navigation.classnames"));
+const Item_1 = require("../Item");
+function Section({ title, fill, action, items, rollup, separator }) {
+    const { value: expanded, toggle: toggleExpanded, setFalse: setExpandedFalse } = (0, use_toggle_1.useToggle)(false);
+    const animationFrame = (0, react_1.useRef)(null);
+    const { isNavigationCollapsed } = (0, media_query_1.useMediaQuery)();
+    const [expandedIndex, setExpandedIndex] = (0, react_1.useState)();
+    const handleClick = (onClick, hasSubNavItems) => {
+        return () => {
+            if (onClick) {
+                onClick();
+            }
+            if (animationFrame.current) {
+                cancelAnimationFrame(animationFrame.current);
+            }
+            if (!hasSubNavItems || !isNavigationCollapsed) {
+                animationFrame.current = requestAnimationFrame(setExpandedFalse);
+            }
+        };
+    };
+    (0, react_1.useEffect)(() => {
+        return () => {
+            animationFrame.current && cancelAnimationFrame(animationFrame.current);
+        };
+    });
+    const className = (0, css_1.classNames)(Navigation_classnames_1.default.Section, separator && Navigation_classnames_1.default['Section-withSeparator'], fill && Navigation_classnames_1.default['Section-fill']);
+    const buttonMarkup = action && ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: Navigation_classnames_1.default.Action, "aria-label": action.accessibilityLabel, onClick: action.onClick, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: action.icon }) }));
+    const actionMarkup = action &&
+        (action.tooltip ? (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...action.tooltip, children: buttonMarkup }) : buttonMarkup);
+    const sectionHeadingMarkup = title && ((0, jsx_runtime_1.jsxs)("li", { className: Navigation_classnames_1.default.SectionHeading, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', variant: 'headingXs', color: 'subdued', children: title }), actionMarkup] }));
+    const itemsMarkup = items.map((item, index) => {
+        const { onClick, label, subNavigationItems, ...rest } = item;
+        const hasSubNavItems = subNavigationItems != null && subNavigationItems.length > 0;
+        const handleToggleExpandedState = () => {
+            if (expandedIndex === index) {
+                setExpandedIndex(-1);
+            }
+            else {
+                setExpandedIndex(index);
+            }
+        };
+        return ((0, jsx_runtime_1.jsx)(Item_1.Item, { ...rest, label: label, subNavigationItems: subNavigationItems, onClick: handleClick(onClick, hasSubNavItems), onToggleExpandedState: handleToggleExpandedState, expanded: expandedIndex === index }, label));
+    });
+    const toggleClassName = (0, css_1.classNames)(Navigation_classnames_1.default.Item, Navigation_classnames_1.default.RollupToggle);
+    const ariaLabel = rollup && (expanded ? rollup.hide : rollup.view);
+    const toggleRollup = rollup && items.length > rollup.after && ((0, jsx_runtime_1.jsx)("div", { className: Navigation_classnames_1.default.ListItem, children: (0, jsx_runtime_1.jsx)("div", { className: Navigation_classnames_1.default.ItemWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: Navigation_classnames_1.default.ItemInnerWrapper, children: (0, jsx_runtime_1.jsx)("button", { type: 'button', className: toggleClassName, onClick: toggleExpanded, "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsx)("span", { className: Navigation_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaDotsHorizontal }) }) }) }) }) }, 'List Item'));
+    const activeItemIndex = items.findIndex((item) => {
+        if (!rollup) {
+            return false;
+        }
+        return (rollup.activePath === item.url ||
+            (item.url && rollup.activePath.startsWith(item.url)) ||
+            (item.subNavigationItems
+                ? item.subNavigationItems.some(({ url: itemUrl }) => rollup.activePath.startsWith(itemUrl))
+                : false));
+    });
+    const sectionItems = rollup ? itemsMarkup.slice(0, rollup.after) : itemsMarkup;
+    const additionalItems = rollup ? itemsMarkup.slice(rollup.after) : [];
+    if (rollup && activeItemIndex !== -1 && activeItemIndex > rollup.after - 1) {
+        sectionItems.push(...additionalItems.splice(activeItemIndex - rollup.after, 1));
+    }
+    const additionalItemsId = (0, unique_id_1.useUniqueId)('AdditionalItems');
+    const activeItemsMarkup = rollup && additionalItems.length > 0 && ((0, jsx_runtime_1.jsxs)("li", { className: Navigation_classnames_1.default.RollupSection, children: [(0, jsx_runtime_1.jsx)(Collapsible_1.Collapsible, { id: additionalItemsId, open: expanded, children: (0, jsx_runtime_1.jsx)("ul", { className: Navigation_classnames_1.default.List, children: additionalItems }) }), toggleRollup] }));
+    return ((0, jsx_runtime_1.jsxs)("ul", { className: className, children: [sectionHeadingMarkup, sectionItems, activeItemsMarkup] }));
+}
+exports.Section = Section;

package/dist/src/components/Navigation/components/Section/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Section"), exports);

package/dist/src/components/Navigation/components/Section/tests/fixtures/AdminNavQuery/multiple-channels.json

@@ -0,0 +1,18 @@
+[
+    {
+        "label": "Online Store",
+        "url": "https://shop1.myshopify.io/admin/dashboard/online"
+    },
+    {
+        "label": "Buy Button",
+        "url": "https://shop1.myshopify.io/admin/apps/buy_button"
+    },
+    {
+        "label": "Facebook",
+        "url": "https://shop1.myshopify.io/admin/apps/facebook"
+    },
+    {
+        "label": "Houzz",
+        "url": "https://shop1.myshopify.io/admin/apps/houzz"
+    }
+]

package/dist/src/components/Navigation/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Section"), exports);
+__exportStar(require("./Item"), exports);

package/dist/src/components/Navigation/context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationContext = void 0;
+const react_1 = require("react");
+exports.NavigationContext = (0, react_1.createContext)({
+    location: '',
+});

package/dist/src/components/Navigation/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNavigationItemActive = void 0;
+__exportStar(require("./Navigation"), exports);
+var components_1 = require("./components");
+Object.defineProperty(exports, "isNavigationItemActive", { enumerable: true, get: function () { return components_1.isNavigationItemActive; } });

package/dist/src/components/NavigationV1/AuthorityCheck/AuthorityCheck.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasAuthority = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * A component that conditionally renders its child component based on the user's authorities.
+ * @returns The child component if the user has the required authorities, or null otherwise.
+ */
+const AuthorityCheck = ({ authority: requiredAuthorities, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+userAuthority: userAuthorities, children, }) => {
+    // if (!menu) {
+    //   return null
+    // }
+    const hasPermission = hasAuthority(requiredAuthorities, userAuthorities);
+    // //@ts-ignore
+    // if (!userAuthority || userAuthority.length === 0) {
+    //   // If user authority is not provided, do not render the child component
+    //   return null
+    // const hasAuthority = authority.every((auth) => userAuthority?.includes(auth))
+    if (!hasPermission) {
+        // If the user does not have the required authority, do not render the child component
+        return null;
+    }
+    // Otherwise, render the child component
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.default = AuthorityCheck;
+/**
+ * Check if a user has the required authority.
+ * @param requiredAuthorities - The authorities required to access a resource.
+ * @param userAuthorities - The authorities of the user.
+ * @returns True if the user has the required authority, false otherwise.
+ */
+function hasAuthority(requiredAuthorities, userAuthorities) {
+    // If requiredAuthorities has a wildcard (*), return true
+    if (requiredAuthorities.includes('*')) {
+        return true;
+    }
+    // If both arrays are empty, return true
+    if (requiredAuthorities.length === 0 && userAuthorities.length === 0) {
+        return true;
+    }
+    // Check if userAuthorities includes any required authority
+    return requiredAuthorities.some((authority) => userAuthorities.includes(authority));
+}
+exports.hasAuthority = hasAuthority;

package/dist/src/components/NavigationV1/AuthorityCheck/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthorityCheck = void 0;
+var AuthorityCheck_1 = require("./AuthorityCheck");
+Object.defineProperty(exports, "AuthorityCheck", { enumerable: true, get: function () { return __importDefault(AuthorityCheck_1).default; } });

package/dist/src/components/NavigationV1/VerticalMenuContent/CollapsedMenuItemList.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsedMenuItemList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../utils");
+const Link_1 = require("../../Link");
+const AuthorityCheck_1 = require("../AuthorityCheck");
+/** The menu list rendered wen the  menu is open  */
+const CollapsedMenuItemList = ({ userAuthority, activeMenu, menu, activePage, active, }) => {
+    var _a, _b;
+    /**
+     * This function checks if the current submenu or one of its children is active and should be expanded.
+     * @param {object} subMenu - The submenu to check.
+     * @param {string} activePage - The current active page.
+     * @returns {boolean} True if the submenu or one of its children is active and should be expanded, false otherwise.
+     */
+    function checkIsActiveCollapse(subMenu, activePage) {
+        const isActiveCollapse = (subMenu === null || subMenu === void 0 ? void 0 : subMenu.children) &&
+            (subMenu === null || subMenu === void 0 ? void 0 : subMenu.children.some((child) => (0, utils_1.removeNumbersAndLetters)(child === null || child === void 0 ? void 0 : child.slug) === (0, utils_1.removeNumbersAndLetters)(activePage)));
+        const pareActive = subMenu.slug == activePage;
+        return isActiveCollapse || pareActive;
+    }
+    return ((0, jsx_runtime_1.jsx)(AuthorityCheck_1.AuthorityCheck, { userAuthority: userAuthority, authority: menu === null || menu === void 0 ? void 0 : menu.authority, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('dpt-2 bg-skin-primary', activeMenu || active ? 'block' : 'hidden'), children: (0, jsx_runtime_1.jsx)("div", { className: 'dleading-tight mr-3 flex flex-col', children: (_b = (_a = menu === null || menu === void 0 ? void 0 : menu.subMenus) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map((subMenu) => {
+                        const isActive = checkIsActiveCollapse(subMenu, activePage);
+                        return ((0, jsx_runtime_1.jsx)(AuthorityCheck_1.AuthorityCheck, { userAuthority: userAuthority, authority: subMenu === null || subMenu === void 0 ? void 0 : subMenu.authority, children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(isActive
+                                    ? 'bg-small text-selected bg-gray-100 dark:bg-gray-500'
+                                    : 'text-[#6d7175] dark:text-gray-300', 'dblock relative inline-block w-full cursor-pointer', ' rounded px-2 py-2.5 pl-[60px]', 'hover:bg-gray-100 dark:hover:bg-gray-600'), children: (0, jsx_runtime_1.jsxs)(Link_1.Link, { removeUnderline: true, monochrome: true, url: subMenu.slug, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(isActive ? 'bg-selected' : 'bg-transparent', 'absolute top-0 -ml-[60px] h-full w-1 rounded-md') }), (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)(isActive
+                                                ? 'bg-small text-selected bg-gray-100 dark:bg-gray-500'
+                                                : 'text-[#6d7175] dark:text-gray-300', 'capitalize-first  text-base font-medium leading-5 md:text-sm'), children: [' ', subMenu === null || subMenu === void 0 ? void 0 : subMenu.displayName] }), (0, jsx_runtime_1.jsx)("span", { className: 'dp-1 text-xs text-[teal] ', children: subMenu === null || subMenu === void 0 ? void 0 : subMenu.tag })] }) }) }, subMenu === null || subMenu === void 0 ? void 0 : subMenu.id));
+                    }) }) }) }) }));
+};
+exports.CollapsedMenuItemList = CollapsedMenuItemList;

package/dist/src/components/NavigationV1/VerticalMenuContent/VerticalCollapsedMenuItem.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CollapsedMenuItemList_1 = require("./CollapsedMenuItemList");
+const utils_1 = require("./utils");
+const VerticalSingleButton_1 = __importDefault(require("./VerticalSingleButton"));
+const VerticalSingleMenuItem_1 = __importDefault(require("./VerticalSingleMenuItem"));
+const Disclosure = ({ as: Component, children,
+// accordionRefs,
+// activeMenu,
+// index,
+ }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // const handleToggle = () => {
+    //   setOpen(!open)
+    // }
+    const handleToggle = () => {
+        setOpen(!open);
+    };
+    // // Close other items except the clicked item and the active menu
+    // if (open && activeMenu !== index) {
+    //   accordionRefs.current.forEach((ref, i) => {
+    //     if (i !== index && i !== activeMenu) {
+    //       ref?.click() // Simulate a click to close
+    //     }
+    //   })
+    // }
+    return (0, jsx_runtime_1.jsx)(Component, { onClick: handleToggle, children: children({ open }) });
+};
+const VerticalCollapsedMenuItem = ({ active, menus, activePage, userAuthority }) => {
+    const accordionRefs = (0, react_1.useRef)([]);
+    const [currentAccordion, setCurrentAccordion] = (0, react_1.useState)(0);
+    function closeCurrent(e) {
+        var _a;
+        //@ts-ignore
+        const button = e.target.closest('button');
+        const buttonParent = (_a = button === null || button === void 0 ? void 0 : button.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        const parent = buttonParent === null || buttonParent === void 0 ? void 0 : buttonParent.parentElement;
+        const index = parent && Array.prototype.indexOf.call(parent === null || parent === void 0 ? void 0 : parent.children, buttonParent);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        accordionRefs.current.forEach((ref) => {
+            if (
+            //@ts-ignore
+            ref.querySelector('button') &&
+                //@ts-ignore
+                ref.querySelector('button').getAttribute('aria-expanded') === 'true' &&
+                //@ts-ignore
+                currentAccordion !== index) {
+                //@ts-ignore
+                ref.querySelector('button').click();
+            }
+        });
+        setCurrentAccordion(index);
+    }
+    const slug = activePage;
+    return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: menus === null || menus === void 0 ? void 0 : menus.map((menu, index) => {
+            var _a, _b;
+            const activeMenu = (0, utils_1.isActiveMenu)(slug, menu);
+            if (!((_b = (_a = menu === null || menu === void 0 ? void 0 : menu.subMenus) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) {
+                return ((0, jsx_runtime_1.jsx)(VerticalSingleMenuItem_1.default, { level: 0, menu: menu, userAuthority: [], activePage: slug }, `single-sub-menu-${index}`));
+            }
+            return (
+            // <li key={menu?.id} ref={(el: HTMLLIElement) => (accordionRefs.current[index] = el!)}>
+            (0, jsx_runtime_1.jsx)(Disclosure, { as: 'li', accordionRefs: accordionRefs, activeMenu: activeMenu ? activeMenu : null, index: index, children: ({ open }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VerticalSingleButton_1.default, { activeMenu: activeMenu, open: open, menu: menu, activePage: slug, index: index, closeCurrent: closeCurrent, userAuthority: userAuthority, 
+                            // AccordionRefs={null as any}
+                            AccordionRefs: accordionRefs }), (0, jsx_runtime_1.jsx)(CollapsedMenuItemList_1.CollapsedMenuItemList, { activeMenu: activeMenu, menu: menu, activePage: slug, active: active || open, userAuthority: userAuthority })] })) }, `sub-menu-${index}`));
+        }) }));
+};
+exports.default = VerticalCollapsedMenuItem;

package/dist/src/components/NavigationV1/VerticalMenuContent/VerticalSingleButton.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../utils");
+const AuthorityCheck_1 = require("../AuthorityCheck");
+/**
+ * Renders the disclosure menu item button
+ */
+const VerticalSingleButton = (props) => {
+    var _a, _b;
+    const { userAuthority, open, activeMenu, menu, activePage, index, AccordionRefs, closeCurrent } = props;
+    return ((0, jsx_runtime_1.jsx)(AuthorityCheck_1.AuthorityCheck, { userAuthority: userAuthority, menu: menu, authority: menu === null || menu === void 0 ? void 0 : menu.authority, children: (0, jsx_runtime_1.jsx)("dt", { className: '  w-full', onClick: closeCurrent, 
+            // onClick={() => AccordionRefs.current[index]?.click()}
+            ref: (el) => (AccordionRefs.current[index] = el), children: (0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.cn)(activeMenu && (menu === null || menu === void 0 ? void 0 : menu.slug) == activePage ? 'bg-gray-100 dark:bg-gray-500' : '', '  flex  w-full items-center justify-between px-5 py-2.5 text-lg  font-normal  md:py-2 md:text-base ', '  hover:bg-gray-100 hover:dark:bg-gray-500'), "aria-expanded": activeMenu, children: [(0, utils_1.getIconComponent)({
+                        iconName: menu === null || menu === void 0 ? void 0 : menu.iconC,
+                        className: (0, utils_1.cn)(activeMenu ? 'dtext-selected text-accent' : '', 'theme-icon transition duration-75 '),
+                    }), (0, jsx_runtime_1.jsx)("span", { className: 'capitalize-first float-left mr-auto pl-3 text-base  font-medium leading-tight text-gray-900 md:text-sm', children: menu === null || menu === void 0 ? void 0 : menu.displayName }), (0, jsx_runtime_1.jsx)("span", { className: ' ml-3 hidden items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium ', children: "Pro" }), ((_b = (_a = menu === null || menu === void 0 ? void 0 : menu.subMenus) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('ml-3 inline-flex  items-center justify-center font-medium', activeMenu && '!hidden'), children: (0, jsx_runtime_1.jsx)("div", { className: 'hidden', children: open ? (0, jsx_runtime_1.jsx)("span", { children: "\u25B2" }) : (0, jsx_runtime_1.jsx)("span", { children: "\u25BC" }) }) })) : ('')] }) }) }));
+};
+exports.default = VerticalSingleButton;

package/dist/src/components/NavigationV1/VerticalMenuContent/VerticalSingleMenuItem.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../utils");
+const Link_1 = require("../../Link");
+const AuthorityCheck_1 = require("../AuthorityCheck");
+/**
+ * Display a verticle menu list when no href is provided for the link it returns a dis
+ * @param param0
+ * @returns
+ */
+const VerticalSingleMenuItem = ({ menu, userAuthority, activePage, onClick, level, }) => {
+    const isActive = (menu === null || menu === void 0 ? void 0 : menu.slug) == activePage;
+    const Component = (menu === null || menu === void 0 ? void 0 : menu.slug) ? Link_1.Link : 'div';
+    return ((0, jsx_runtime_1.jsx)(AuthorityCheck_1.AuthorityCheck, { userAuthority: userAuthority, authority: menu === null || menu === void 0 ? void 0 : menu.authority, children: (0, jsx_runtime_1.jsx)(Component, { onClick: onClick, ...((menu === null || menu === void 0 ? void 0 : menu.slug) && { url: menu === null || menu === void 0 ? void 0 : menu.slug }), children: (0, jsx_runtime_1.jsx)("div", { className: '  w-full cursor-pointer  ', children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(isActive ? 'bg-gray-50 dark:bg-gray-500' : '', '  flex w-full items-center justify-between px-5   py-2  text-base font-normal ', '  hover:bg-gray-100  hover:dark:bg-gray-500', level !== 0 && 'text-nav'), children: [(0, utils_1.getIconComponent)({
+                            iconName: menu === null || menu === void 0 ? void 0 : menu.iconC,
+                            className: (0, utils_1.cn)(isActive ? 'text-accent' : 'text-gray-800', 'theme-icon transition duration-75 '),
+                        }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('capitalize-first float-left mr-auto pl-3  text-base font-medium leading-tight md:text-sm', isActive ? 'text-accent' : 'text-gray-800 '), children: menu === null || menu === void 0 ? void 0 : menu.displayName }), (0, jsx_runtime_1.jsx)("span", { className: 'ml-3 hidden items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium ', children: "Pro" })] }) }) }) }));
+};
+exports.default = VerticalSingleMenuItem;

package/dist/src/components/NavigationV1/VerticalMenuContent/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = void 0;
+var CollapsedMenuItemList_1 = require("./CollapsedMenuItemList");
+Object.defineProperty(exports, "CollapsedMenuItemList", { enumerable: true, get: function () { return CollapsedMenuItemList_1.CollapsedMenuItemList; } });
+var VerticalCollapsedMenuItem_1 = require("./VerticalCollapsedMenuItem");
+Object.defineProperty(exports, "VerticalCollapsedMenuItem", { enumerable: true, get: function () { return __importDefault(VerticalCollapsedMenuItem_1).default; } });
+var VerticalSingleMenuItem_1 = require("./VerticalSingleMenuItem");
+Object.defineProperty(exports, "VerticalSingleMenuItem", { enumerable: true, get: function () { return __importDefault(VerticalSingleMenuItem_1).default; } });

package/dist/src/components/NavigationV1/VerticalMenuContent/utils.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isActiveMenu = void 0;
+const utils_1 = require("../../../utils");
+/**
+ * Determines if a given slug is currently active in a menu.
+ * @param slug - The slug to check. using router.pathname
+ * @param menu - The menu to check in.
+ * @returns True if the slug is active in the menu, false otherwise.
+ */
+function isActiveMenu(slug, menu) {
+    /**
+     * Recursively checks if a given slug exists in a menu or its submenus.
+     * @param slug - The slug to check.
+     * @param menu - The menu to check in.
+     * @returns True if the slug exists in the menu or its submenus, false otherwise.
+     */
+    function checkSlugInMenu(slug, menu) {
+        // If the menu has no submenus or data, the slug cannot exist in it.
+        if (!menu.subMenus || !menu.subMenus.data || menu.subMenus.data.length === 0) {
+            return false;
+        }
+        // Check if the slug exists in the current menu's submenus.
+        const slugInSubMenus = menu.subMenus.data.some((item) => item.slug === slug);
+        // Check if the slug exists in any of the current menu's submenus' children.
+        const slugInChildren = menu.subMenus.data.some((item) => {
+            var _a;
+            return (_a = item.children) === null || _a === void 0 ? void 0 : _a.some((child) => (0, utils_1.removeNumbersAndLetters)(child.slug) === (0, utils_1.removeNumbersAndLetters)(slug));
+        });
+        // Return true if the slug exists in either the submenus or the children of the menu.
+        return slugInSubMenus || slugInChildren;
+    }
+    // Check if the given slug is active in the given menu.
+    const currentActiveMenu = checkSlugInMenu(slug /**asPath */, menu);
+    // Return true if the current menu is active, false otherwise.
+    return currentActiveMenu ? true : false;
+}
+exports.isActiveMenu = isActiveMenu;
+//     /**
+//    * Determines if a given slug is currently active in a menu.
+//    * @param slug - The slug to check.
+//    * @param menu - The menu to check in.
+//    * @returns True if the slug is active in the menu, false otherwise.
+//    */
+//     function isActiveMenu(slug: string, menu: MenuItem): boolean {
+//         /**
+//          * Recursively checks if a given slug exists in a menu or its submenus.
+//          * @param slug - The slug to check.
+//          * @param menu - The menu to check in.
+//          * @returns True if the slug exists in the menu or its submenus, false otherwise.
+//          */
+//         function checkSlugInMenu(slug: string, menu: MenuItem): boolean {
+//           // If the menu has no submenus or data, the slug cannot exist in it.
+//           if (!menu.subMenus || !menu.subMenus.data || menu.subMenus.data.length === 0) {
+//             return false
+//           }
+//           return (
+//             menu.subMenus.data.some((item) => item.slug === slug) ||
+//             menu.subMenus.data.some((item) =>
+//               item.children?.some(
+//                 (child) => removeNumbersAndLetters(child.slug) === removeNumbersAndLetters(slug),
+//               ),
+//             )
+//           )
+//         }
+//         // Check if the given slug is active in the given menu.
+//         const currentActiveMenu = checkSlugInMenu(router.pathname /**asPath */, menu)
+//         // Return true if the current menu is active, false otherwise.
+//         return currentActiveMenu ? true : false
+//       }

package/dist/src/components/OptionList/OptionList.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const arrays_1 = require("../../utilities/arrays");
+const options_1 = require("../../utilities/options");
+const unique_id_1 = require("../../utilities/unique-id");
+const use_deep_effect_1 = require("../../utilities/use-deep-effect");
+const Bleed_1 = require("../Bleed");
+const Box_1 = require("../Box");
+const Text_1 = require("../Text");
+const components_1 = require("./components");
+function OptionList({ options, sections, title, selected, allowMultiple, role, optionRole, verticalAlign, onChange, id: idProp, onPointerEnterOption, onFocusOption, }) {
+    const [normalizedOptions, setNormalizedOptions] = (0, react_1.useState)(createNormalizedOptions(options, sections, title));
+    const id = (0, unique_id_1.useUniqueId)('OptionList', idProp);
+    (0, use_deep_effect_1.useDeepEffect)(() => {
+        setNormalizedOptions(createNormalizedOptions(options || [], sections || [], title));
+    }, [options, sections, title], optionArraysAreEqual);
+    const handleClick = (0, react_1.useCallback)((sectionIndex, optionIndex) => {
+        const selectedValue = normalizedOptions[sectionIndex].options[optionIndex].value;
+        const foundIndex = selected.indexOf(selectedValue);
+        if (allowMultiple) {
+            const newSelection = foundIndex === -1
+                ? [selectedValue, ...selected]
+                : [...selected.slice(0, foundIndex), ...selected.slice(foundIndex + 1, selected.length)];
+            onChange(newSelection);
+            return;
+        }
+        onChange([selectedValue]);
+    }, [normalizedOptions, selected, allowMultiple, onChange]);
+    const handlePointerEnter = (0, react_1.useCallback)((sectionIndex, optionIndex) => {
+        if (!onPointerEnterOption)
+            return;
+        const selectedValue = normalizedOptions[sectionIndex].options[optionIndex].value;
+        onPointerEnterOption(selectedValue);
+    }, [normalizedOptions, onPointerEnterOption]);
+    const handleFocus = (0, react_1.useCallback)((sectionIndex, optionIndex) => {
+        if (!onFocusOption)
+            return;
+        const selectedValue = normalizedOptions[sectionIndex].options[optionIndex].value;
+        onFocusOption(selectedValue);
+    }, [normalizedOptions, onFocusOption]);
+    const optionsExist = normalizedOptions.length > 0;
+    const optionsMarkup = optionsExist
+        ? normalizedOptions.map(({ title, options }, sectionIndex) => {
+            const isFirstOption = sectionIndex === 0;
+            const titleMarkup = title ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingBlockStart: isFirstOption ? '2' : '4', paddingInlineStart: '2', paddingBlockEnd: '2', paddingInlineEnd: '2', borderColor: 'border-subdued', borderBlockStartWidth: !isFirstOption ? '1' : undefined, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'p', variant: 'headingXs', children: title }) })) : null;
+            const optionsMarkup = options &&
+                options.map((option, optionIndex) => {
+                    const isSelected = selected.includes(option.value);
+                    const optionId = option.id || `${id}-${sectionIndex}-${optionIndex}`;
+                    return ((0, jsx_runtime_1.jsx)(components_1.Option, { ...option, id: optionId, section: sectionIndex, index: optionIndex, onClick: handleClick, select: isSelected, allowMultiple: allowMultiple, verticalAlign: verticalAlign, role: optionRole, onPointerEnter: handlePointerEnter, onFocus: handleFocus }, optionId));
+                });
+            return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { as: 'li', paddingBlockStart: isFirstOption ? undefined : '2', children: [titleMarkup, (0, jsx_runtime_1.jsx)(Bleed_1.Bleed, { marginBlockStart: title ? undefined : '05', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { as: 'ul', id: `${id}-${sectionIndex}`, role: role, children: optionsMarkup }) })] }, title || `noTitle-${sectionIndex}`));
+        })
+        : null;
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { as: 'ul', role: role, padding: '2', children: optionsMarkup }));
+}
+exports.OptionList = OptionList;
+function createNormalizedOptions(options, sections, title) {
+    if (options == null) {
+        const section = { options: [], title };
+        return sections == null ? [] : [section, ...sections];
+    }
+    if (sections == null) {
+        return [
+            {
+                title,
+                options,
+            },
+        ];
+    }
+    return [
+        {
+            title,
+            options,
+        },
+        ...sections,
+    ];
+}
+function optionArraysAreEqual(firstArray, secondArray) {
+    if ((0, options_1.isSection)(firstArray) && (0, options_1.isSection)(secondArray)) {
+        return (0, arrays_1.arraysAreEqual)(firstArray, secondArray, testSectionsPropEquality);
+    }
+    return (0, arrays_1.arraysAreEqual)(firstArray, secondArray);
+}
+function testSectionsPropEquality(previousSection, currentSection) {
+    const { options: previousOptions } = previousSection;
+    const { options: currentOptions } = currentSection;
+    const optionsAreEqual = (0, arrays_1.arraysAreEqual)(previousOptions, currentOptions);
+    const titlesAreEqual = previousSection.title === currentSection.title;
+    return optionsAreEqual && titlesAreEqual;
+}

package/dist/src/components/OptionList/components/Checkbox/Checkbox.classnames.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const CheckboxClassnames = {
+    "active": "Checkbox-active",
+    "Checkbox": "Checkbox-Checkbox",
+    "Backdrop": "Checkbox-Backdrop",
+    "Input": "Checkbox-Input",
+    "Input-indeterminate": "Checkbox-Input-indeterminate",
+    "Icon": "Checkbox-Icon",
+    "Backdrop::before": "Checkbox-Backdrop::before"
+};
+exports.default = CheckboxClassnames;

package/dist/src/components/OptionList/components/Checkbox/Checkbox.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../../../utilities/css");
+const unique_id_1 = require("../../../../utilities/unique-id");
+const Icon_1 = require("../../../Icon");
+const Icons_1 = require("../../../Icons");
+const Checkbox_classnames_1 = __importDefault(require("./Checkbox.classnames"));
+function Checkbox({ id: idProp, checked = false, disabled, active, onChange, name, value, role, }) {
+    const id = (0, unique_id_1.useUniqueId)('Checkbox', idProp);
+    const className = (0, css_1.classNames)(Checkbox_classnames_1.default.Checkbox, active && Checkbox_classnames_1.default.active);
+    const inputClassName = (0, css_1.classNames)(Checkbox_classnames_1.default.Input);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, value: value, type: 'checkbox', checked: checked, disabled: disabled, className: inputClassName, "aria-checked": checked, onChange: onChange, role: role }), (0, jsx_runtime_1.jsx)("div", { className: Checkbox_classnames_1.default.Backdrop }), (0, jsx_runtime_1.jsx)("div", { className: Checkbox_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCheck }) })] }));
+}
+exports.Checkbox = Checkbox;

package/dist/src/components/OptionList/components/Checkbox/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Checkbox"), exports);