@digigov/ui 0.28.0 → 0.28.2

package/esm/core/NavList/NavListBase.js

@@ -1,60 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "floating", "horizontal", "subMenu", "role"];
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-export var useNavListStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      padding: theme.spacing(0),
-      margin: theme.spacing(0),
-      display: 'flex',
-      '&$vertical': {
-        flexDirection: 'column'
-      }
-    },
-    subMenu: {
-      marginLeft: theme.spacing(3)
-    },
-    floating: {
-      left: 0,
-      zIndex: 99,
-      position: 'absolute',
-      background: theme.palette.grey['100'],
-      borderTop: "1px solid ".concat(theme.palette.grey['500']),
-      borderRight: "1px solid ".concat(theme.palette.grey['500']),
-      borderLeft: "1px solid ".concat(theme.palette.grey['500']),
-      margin: theme.spacing(1.5, 0, 0, 0),
-      boxShadow: theme.shadows[3],
-      '& > li': {
-        width: '100%',
-        borderBottom: "1px solid ".concat(theme.palette.grey['500']),
-        margin: 0
-      }
-    },
-    vertical: {},
-    floatClear: {
-      clear: 'both'
-    }
-  };
-}, {
-  name: 'MuiNavList'
-});
-export var NavListBase = function NavListBase(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      floating = _ref.floating,
-      horizontal = _ref.horizontal,
-      subMenu = _ref.subMenu,
-      role = _ref.role,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useNavListStyles();
-  return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("ul", {
-    style: props.style,
-    role: role,
-    className: clsx(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
-  }, children), /*#__PURE__*/React.createElement("div", {
-    className: classes.floatClear
-  }));
-};

package/esm/core/NavList/NavListContext.js

@@ -1,80 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { createContext, useEffect, useState } from 'react';
-export var NavListContext = /*#__PURE__*/createContext({
-  horizontal: false,
-  openSubMenus: false,
-  links: [],
-  activeLink: {},
-  activeSubMenu: []
-});
-var TRAILING_SLASH = /\/$/gm;
-export var NavListProvider = function NavListProvider(_ref) {
-  var children = _ref.children,
-      _ref$openSubMenus = _ref.openSubMenus,
-      openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
-      _ref$horizontal = _ref.horizontal,
-      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
-      _ref$showDividers = _ref.showDividers,
-      showDividers = _ref$showDividers === void 0 ? false : _ref$showDividers,
-      _ref$links = _ref.links,
-      links = _ref$links === void 0 ? [] : _ref$links;
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeSubMenu = _useState2[0],
-      setActiveSubMenu = _useState2[1];
-
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      activeLink = _useState4[0],
-      setActiveLink = _useState4[1];
-
-  useEffect(function () {
-    var currentActiveLink = links.find(function (link) {
-      var _link$subMenu;
-
-      if ((_link$subMenu = link.subMenu) !== null && _link$subMenu !== void 0 && _link$subMenu.length) {
-        return !!~link.subMenu.findIndex(function (subMenuLink) {
-          var _window, _subMenuLink$href;
-
-          return ((_window = window) === null || _window === void 0 ? void 0 : _window.location.pathname.replace(TRAILING_SLASH, '')) === ((_subMenuLink$href = subMenuLink.href) === null || _subMenuLink$href === void 0 ? void 0 : _subMenuLink$href.replace(TRAILING_SLASH, ''));
-        });
-      } else {
-        var _window2, _link$href;
-
-        return ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.location.pathname.replace(TRAILING_SLASH, '')) === ((_link$href = link.href) === null || _link$href === void 0 ? void 0 : _link$href.replace(TRAILING_SLASH, '')) || false;
-      }
-    }) || {
-      label: '',
-      href: ''
-    };
-    setActiveLink(currentActiveLink);
-  }, [links]);
-
-  var onSubMenuActive = function onSubMenuActive(href) {
-    if (href === null) {
-      setActiveSubMenu([]);
-    }
-
-    var link = links.find(function (link) {
-      return link.href === href && link.subMenu && link.subMenu.length;
-    });
-
-    if (link && link.subMenu) {
-      setActiveSubMenu(link.subMenu);
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(NavListContext.Provider, {
-    value: {
-      openSubMenus: openSubMenus,
-      horizontal: horizontal,
-      showDividers: showDividers,
-      links: links,
-      activeLink: activeLink,
-      activeSubMenu: activeSubMenu,
-      onSubMenuActive: onSubMenuActive
-    }
-  }, children);
-};
-export default NavListContext;

package/esm/core/NavList/NavListItem.js

@@ -1,143 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "expandOn", "children", "href", "className", "selected", "role"];
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-import Divider from '@digigov/react-core/SectionBreak';
-import { makeStyles } from '@material-ui/core/styles';
-import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
-import NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';
-import NavListContext from '@digigov/ui/core/NavList/NavListContext';
-export var useNavListItemStyles = makeStyles(function (theme) {
-  return {
-    root: {},
-    link: {
-      padding: theme.spacing(0.5, 2),
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    },
-    selected: {
-      borderStyle: 'solid',
-      borderColor: theme.palette.secondary.main,
-      fontWeight: 'bolder'
-    }
-  };
-}, {
-  name: 'MuiNavListItem'
-});
-
-var _ref3 = /*#__PURE__*/React.createElement(Divider, null);
-
-export var NavListItem = function NavListItem(_ref) {
-  var _ref$current2, _ref$current3;
-
-  var name = _ref.name,
-      _ref$expandOn = _ref.expandOn,
-      expandOn = _ref$expandOn === void 0 ? 'click' : _ref$expandOn,
-      children = _ref.children,
-      href = _ref.href,
-      className = _ref.className,
-      passSelected = _ref.selected,
-      role = _ref.role,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      style = _useState4[0],
-      setStyle = _useState4[1];
-
-  var ref = useRef(null);
-
-  var _useState5 = useState(),
-      _useState6 = _slicedToArray(_useState5, 2),
-      delayHandler = _useState6[0],
-      setDelayHandler = _useState6[1];
-
-  var _useState7 = useState(passSelected || false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      selected = _useState8[0],
-      setSelected = _useState8[1];
-
-  var classes = useNavListItemStyles();
-
-  var _useContext = useContext(NavListContext),
-      openSubMenus = _useContext.openSubMenus,
-      horizontal = _useContext.horizontal,
-      showDividers = _useContext.showDividers,
-      activeLink = _useContext.activeLink,
-      links = _useContext.links;
-
-  var _ref2 = links.find(function (link) {
-    return link.name === name;
-  }) || {},
-      contextHref = _ref2.href,
-      label = _ref2.label,
-      subMenu = _ref2.subMenu;
-
-  useEffect(function () {
-    if (activeLink !== null && activeLink !== void 0 && activeLink.name && name) {
-      setSelected(activeLink.name === name);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [activeLink === null || activeLink === void 0 ? void 0 : activeLink.name]);
-
-  var toggleOpen = function toggleOpen() {
-    setOpen(!open);
-  };
-
-  var handleOpen = function handleOpen() {
-    if (subMenu && subMenu.length) {
-      setDelayHandler(setTimeout(function () {
-        setOpen(true);
-      }, 300));
-    }
-  };
-
-  var handleClose = function handleClose() {
-    if (subMenu && subMenu.length) {
-      if (delayHandler) clearTimeout(delayHandler);
-      setOpen(false);
-    }
-  };
-
-  useEffect(function () {
-    var _ref$current;
-
-    if (ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.clientWidth && horizontal && ref.current.clientWidth !== style.width) {
-      setStyle({
-        top: ref.current.clientHeight - 12,
-        width: ref.current.clientWidth
-      });
-    }
-  }, [horizontal, style.width, (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.clientWidth, (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.clientHeight]);
-  var handlerProps = expandOn === 'hover' ? {
-    onMouseEnter: handleOpen,
-    onMouseLeave: handleClose
-  } : {
-    onClick: toggleOpen
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListItemBase, _extends({
-    ref: ref,
-    href: contextHref || href,
-    label: label || children,
-    expandOn: expandOn,
-    open: open,
-    selected: selected,
-    isNested: subMenu && subMenu.length > 0,
-    horizontal: horizontal,
-    role: role,
-    className: clsx(className, classes.root)
-  }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/React.createElement(NavListSubMenu, {
-    style: style,
-    links: subMenu
-  })), !horizontal && showDividers && _ref3);
-};
-export default NavListItem;

package/esm/core/NavList/NavListItemBase.js

@@ -1,137 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["href", "label", "children", "className", "open", "horizontal", "selected", "isNested", "expandOn", "onClick", "role"];
-import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import Link from '@digigov/ui/core/Link';
-import { useRouter } from '@digigov/ui/router';
-var TRAILING_SLASH = /\/$/gm;
-export var useNavListItemBaseStyles = makeStyles(function (theme) {
-  var transition = {
-    duration: theme.transitions.duration.shortest
-  };
-  return {
-    root: _extends({
-      position: 'relative',
-      listStyle: 'none',
-      boxSizing: 'border-box',
-      textAlign: 'left',
-      margin: theme.spacing(0)
-    }, theme.typography.body1, {
-      '&$horizontal': {
-        flexDirection: 'column'
-      }
-    }),
-    link: {
-      display: 'flex',
-      flexGrow: 1,
-      padding: theme.spacing(1),
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    },
-    selected: {
-      fontWeight: 'bolder',
-      '&$horizontal': {
-        borderStyle: 'solid',
-        borderColor: theme.palette.secondary.main,
-        borderTop: 0,
-        borderLeft: 0,
-        borderRight: 0
-      },
-      '&$vertical': {
-        border: 0
-      }
-    },
-    // Pseudoclasses - do not remove //
-    horizontal: {},
-    vertical: {},
-    // End Pseudoclasses //
-    label: {
-      display: 'flex',
-      alignItems: 'center',
-      flex: 'auto'
-    },
-    icon: {
-      display: 'flex',
-      alignItems: 'center',
-      transform: 'rotate(0deg)',
-      transition: theme.transitions.create('transform', transition),
-      '&$open': {
-        transform: 'rotate(180deg)'
-      }
-    },
-    submenu: {
-      display: 'flex'
-    },
-
-    /* Pseudo-class applied to the Expand icon if `open={true}`. */
-    open: {}
-  };
-}, {
-  name: 'MuiNavListItemBase'
-});
-
-var _ref2 = /*#__PURE__*/React.createElement(ExpandMore, null);
-
-export var NavListItemBase = /*#__PURE__*/React.forwardRef(function NavListItemBase(_ref, ref) {
-  var _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '#' : _ref$href,
-      label = _ref.label,
-      children = _ref.children,
-      className = _ref.className,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? false : _ref$open,
-      _ref$horizontal = _ref.horizontal,
-      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
-      _ref$selected = _ref.selected,
-      selected = _ref$selected === void 0 ? false : _ref$selected,
-      isNested = _ref.isNested,
-      expandOn = _ref.expandOn,
-      onClick = _ref.onClick,
-      role = _ref.role,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var classes = useNavListItemBaseStyles();
-
-  var _useState = useState(selected),
-      _useState2 = _slicedToArray(_useState, 2),
-      privateSelected = _useState2[0],
-      setPrivateSelected = _useState2[1];
-
-  var _useRouter = useRouter(),
-      router = _useRouter.router;
-
-  useEffect(function () {
-    var asPath = router === null || router === void 0 ? void 0 : router.asPath.split('?').shift();
-    var isSelected = (asPath === null || asPath === void 0 ? void 0 : asPath.replace(TRAILING_SLASH, '')) === href.replace(TRAILING_SLASH, '');
-
-    if (isSelected !== privateSelected) {
-      setPrivateSelected(isSelected);
-    }
-  }, [href, router === null || router === void 0 ? void 0 : router.asPath, selected, privateSelected]);
-  return /*#__PURE__*/React.createElement("li", {
-    ref: ref,
-    className: clsx(className, classes.root, horizontal && classes.horizontal),
-    onClick: onClick,
-    role: "none"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: clsx(horizontal ? classes.horizontal : classes.vertical, (selected || privateSelected) && classes.selected)
-  }, /*#__PURE__*/React.createElement(Link, _extends({
-    href: href,
-    className: classes.link
-  }, props, {
-    role: role
-  }), /*#__PURE__*/React.createElement("span", {
-    className: classes.label
-  }, label), /*#__PURE__*/React.createElement("span", {
-    className: clsx(classes.icon, open && classes.open)
-  }, isNested && _ref2))), /*#__PURE__*/React.createElement("div", {
-    className: classes.submenu
-  }, children));
-});
-export default NavListItemBase;

package/esm/core/NavList/NavListSubMenu.js

@@ -1,27 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["links"];
-import React, { useContext } from 'react';
-import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
-import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
-import NavListContext from '@digigov/ui/core/NavList/NavListContext';
-export var NavListSubMenu = function NavListSubMenu(_ref) {
-  var links = _ref.links,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useContext = useContext(NavListContext),
-      horizontal = _useContext.horizontal;
-
-  return /*#__PURE__*/React.createElement(NavListBase, _extends({
-    subMenu: true,
-    floating: horizontal
-  }, props), links && links.map(function (subMenuLink, key) {
-    return /*#__PURE__*/React.createElement(NavListItemBase, {
-      expandOn: "hover",
-      key: key,
-      href: subMenuLink.href,
-      label: subMenuLink.label
-    });
-  }));
-};
-export default NavListSubMenu;

package/esm/core/NavList/NavVertical.js

@@ -1,3 +0,0 @@
-import NavVertical from '@digigov/react-core/NavVertical';
-export { NavVertical };
-export default NavVertical;

package/esm/core/NavList/NavVerticalItem.js

@@ -1,3 +0,0 @@
-import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
-export { NavVerticalItem };
-export default NavVerticalItem;