@nethru/ui 1.0.82 → 2.0.1

package/dist/sidebar/MenuTreeGroup.js

@@ -1,65 +0,0 @@
-import { getMenuGroupStates, useSidebarContext } from './SidebarContext';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { variables } from '../variables';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function MenuTreeGroup({
-  id,
-  title,
-  children
-}) {
-  const styles = {
-    backgroundColor: variables.bodyBackgroundColor,
-    boxShadow: 'none',
-    '&:before': {
-      display: 'none'
-    },
-    '&.Mui-expanded': {
-      margin: 0
-    },
-    '.MuiSvgIcon-root': {
-      width: '0.9em',
-      height: '0.9em'
-    },
-    '.MuiAccordionSummary-root.Mui-expanded': {
-      minHeight: '48px'
-    },
-    '.MuiAccordionSummary-content.Mui-expanded': {
-      margin: 0
-    },
-    '.MuiAccordionDetails-root': {
-      padding: '0 16px 0 8px'
-    }
-  };
-  const {
-    states,
-    dispatch
-  } = useSidebarContext();
-  const expanded = getMenuGroupStates(states, id);
-  const handleChange = (event, expanded) => {
-    dispatch({
-      type: "menuGroupExpanded",
-      id,
-      expanded
-    });
-  };
-  return /*#__PURE__*/_jsxs(Accordion, {
-    expanded: expanded,
-    onChange: handleChange,
-    square: true,
-    sx: styles,
-    children: [/*#__PURE__*/_jsx(AccordionSummary, {
-      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
-        children: title
-      })
-    }), /*#__PURE__*/_jsx(AccordionDetails, {
-      children: children
-    })]
-  });
-}

package/dist/sidebar/SecondaryMenu.js

@@ -1,36 +0,0 @@
-import { Divider, Stack } from '@mui/material';
-import MenuTreeGroup from './MenuTreeGroup';
-import MenuTree from './MenuTree';
-import styles from './css/sidebar.module.css';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function SecondaryMenu({
-  sections,
-  closed
-}) {
-  return /*#__PURE__*/_jsx(Stack, {
-    className: `${styles.secondary} ${closed ? styles.closed : styles.opened}`,
-    children: sections.map((section, index) => {
-      let jsx = [];
-      jsx.push(index > 0 ? /*#__PURE__*/_jsx(Divider, {
-        sx: {
-          ml: 2,
-          mr: 2
-        }
-      }, `${section.id}_${index}`) : null);
-      jsx.push(section.name ? /*#__PURE__*/_jsx(MenuTreeGroup, {
-        id: section.id,
-        title: section.name,
-        children: /*#__PURE__*/_jsx(MenuTree, {
-          id: section.id,
-          data: section.menu
-        })
-      }, section.id) : /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(MenuTree, {
-          id: section.id,
-          data: section.menu
-        })
-      }, section.id));
-      return jsx;
-    })
-  });
-}

package/dist/sidebar/SidebarContext.js

@@ -1,122 +0,0 @@
-import { createContext, useContext, useReducer } from "react";
-import { produce } from "immer";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SidebarContext = /*#__PURE__*/createContext();
-export function SidebarContextProvider({
-  menu,
-  icons,
-  children
-}) {
-  const [states, dispatch] = useReducer(reducer, initialStates);
-  return /*#__PURE__*/_jsx(SidebarContext.Provider, {
-    value: {
-      menu,
-      icons,
-      states,
-      dispatch
-    },
-    children: children
-  });
-}
-export function useSidebarContext() {
-  return useContext(SidebarContext);
-}
-export function getMenuGroupStates(states, id) {
-  return states.menuGroupsExpanded[id] !== undefined ? states.menuGroupsExpanded[id] : true;
-}
-export function getMenuTreeStates(states, id) {
-  return states.menuTrees[id] || emptyState();
-}
-function reducer(states, action) {
-  const {
-    id,
-    type
-  } = action;
-  switch (type) {
-    case 'secondaryMenuToggled':
-      return produce(states, draft => {
-        draft.menuClosed = !states.menuClosed;
-      });
-    case 'menuGroupExpanded':
-      return produce(states, draft => {
-        draft.menuGroupsExpanded[id] = action.expanded;
-      });
-    case 'treeItemSelected':
-      return produce(states, draft => {
-        for (const key in draft.menuTrees) {
-          draft.menuTrees[key].selected = [];
-        }
-        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
-        draft.menuTrees[id].selected = action.ids;
-      });
-    case 'treeItemExpanded':
-      return produce(states, draft => {
-        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
-        draft.menuTrees[id].expanded = [...action.ids];
-      });
-    case 'updateActiveItems':
-      return produce(states, draft => {
-        updateActiveItems(draft, action.menu, action.href);
-      });
-    default:
-      throw new Error(`Undefined Sidebar Action Type: ${JSON.stringify(action)}`);
-  }
-}
-function emptyState() {
-  return {
-    selected: [],
-    expanded: []
-  };
-}
-const initialStates = {
-  activePrimaryItem: undefined,
-  activeSecondaryItem: undefined,
-  menuClosed: false,
-  menuGroupsExpanded: {},
-  menuTrees: {}
-};
-function updateActiveItems(draft, menu, href) {
-  draft.activePrimaryItem = undefined;
-  draft.activeSecondaryItem = undefined;
-  for (let item of menu) {
-    if (item.href === href) {
-      draft.activePrimaryItem = item.id;
-      return;
-    }
-    if (updateActiveSection(item.sections)) {
-      draft.activePrimaryItem = item.id;
-      return;
-    }
-  }
-  function updateActiveSection(sections) {
-    if (!sections) return;
-    for (let section of sections) {
-      if (startsWith(section.href)) {
-        draft.activeSecondaryItem = section.id;
-        return true;
-      }
-      if (updateActiveSubmenuItems(section.id, section.menu)) {
-        draft.menuGroupsExpanded[section.id] = true;
-        return true;
-      }
-    }
-  }
-  function updateActiveSubmenuItems(id, submenu) {
-    if (!submenu) return;
-    for (let item of submenu) {
-      if (startsWith(item.href)) {
-        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
-        draft.activeSecondaryItem = item.id;
-        return true;
-      }
-      if (updateActiveSubmenuItems(id, item.submenu)) {
-        draft.menuTrees[id].expanded.push(item.id);
-        return true;
-      }
-    }
-  }
-  function startsWith(hrefs) {
-    const menuHrefs = hrefs instanceof Array ? hrefs : [hrefs];
-    return menuHrefs.some(menuHref => href.startsWith(menuHref));
-  }
-}

package/dist/sidebar/css/primary.module.css

@@ -1,80 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    width: var(--primary-menu-width);
-    height: 100%;
-    border-right: 1px solid #dee2e6;
-    z-index: 30;
-    transition-property: width background-color;
-    transition-duration: .2s;
-}
-.container:hover {
-    width: 240px;
-    background-color: #fff;
-    box-shadow: 1px 1px 12px #dadce0;
-}
-.container a {
-    text-decoration: none;
-    cursor: pointer;
-}
-.container a:first-child {
-    padding-top: 10px;
-}
-.container a:last-child {
-    padding-bottom: 10px;
-}
-
-.nav-item {
-    position: relative;
-    display: flex;
-    height: 48px;
-    align-items: center;
-    color: #495057;
-}
-.nav-item:hover {
-    /*border-radius: 0 48px 48px 0;*/
-    background-color: #e9ecef;
-}
-.nav-item.active {
-    /*color: #fff;*/
-    /*border-left: 5px solid #0d6efd;*/
-}
-.container:hover .nav-item.active {
-    /*border-radius: 0 48px 48px 0;*/
-    /*background-color: #0d6efd !important;*/
-}
-
-.highlight {
-    position: absolute;
-    left: 0px;
-    width: 5px;
-    height: 36px;
-    z-index: 100;
-    /*border-radius: 50%;*/
-    background-color: #0d6efd;
-    transition-property: height;
-    transition-duration: .2s;
-}
-.container:hover .highlight {
-    height: 48px;
-    /*display: none;*/
-}
-
-.icon {
-    margin: 4px 15px 0px 16px;
-}
-.icon > svg {
-    width: 24px;
-    height: 24px;
-}
-
-.text {
-    font-size: .9rem;
-    display: none;
-    white-space: nowrap;
-    overflow-x: hidden;
-}
-.container:hover .text {
-    display: block;
-}

package/dist/sidebar/css/sidebar.module.css

@@ -1,50 +0,0 @@
-.container {
-    display: flex;
-    position: relative;
-    background-color: var(--body-background-color);
-    transition: width .2s;
-}
-.container.opened {
-    width: calc(var(--primary-menu-width) + var(--secondary-menu-width));
-}
-.container.closed {
-    width: var(--primary-menu-width);
-}
-
-
-.secondary {
-    position: absolute;
-    left: var(--primary-menu-width);
-    height: 100%;
-    z-index: 0;
-    white-space: nowrap;
-    overflow-x: hidden;
-}
-.secondary.opened {
-    width: var(--secondary-menu-width);
-}
-.secondary.closed {
-    width: 0px;
-    overflow: hidden;
-}
-
-.toggler {
-    position: absolute;
-    bottom: 12px;
-    width: 24px;
-    height: 32px;
-    padding-top: 2px;
-    z-index: 15;
-    cursor: pointer;
-    transition: left .2s;
-}
-.toggler.opened {
-    left: 264px;
-}
-.toggler.closed {
-    left: var(--primary-menu-width);
-    background-color: #f1f3f4;
-    border: unset;
-    border-radius: 0 50% 50% 0/0 50% 50% 0;
-    box-shadow: 1px 1px 1px 1px #e8eaed;
-}

package/dist/variables.js

@@ -1,6 +0,0 @@
-export const variables = {
-  bodyBackgroundColor: '#f8f9fa',
-  gnbHeight: 64,
-  primaryMenuWidth: 56,
-  secondaryMenuWidth: 256
-};