Update docs

Author: cdes

.gitignore

@@ -9,4 +9,4 @@ dist
 compiled
 .awcache
 .rpt2_cache
-docs
+

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2017 Ahmad Al Haddad <haddad@ah.sa>
+Copyright 2020 Ahmad Al Haddad <haddad@ah.sa>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -127,6 +127,7 @@ React.render(<App />, rootElement);
 
 ## To do
 
+- Improve documentation.
 - Use popper for positioning menus.
 
 ## Examples

docs/assets/css/main.css

@@ -0,0 +1 @@
+{"kinds":{"64":"Function","256":"Interface","1024":"Property","4194304":"Type alias"},"rows":[{"id":0,"kind":256,"name":"MenuItem","url":"interfaces/menuitem.html","classes":"tsd-kind-interface"},{"id":1,"kind":1024,"name":"id","url":"interfaces/menuitem.html#id","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"MenuItem"},{"id":2,"kind":1024,"name":"label","url":"interfaces/menuitem.html#label","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"MenuItem"},{"id":3,"kind":1024,"name":"subMenu","url":"interfaces/menuitem.html#submenu","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"MenuItem"},{"id":4,"kind":256,"name":"NestedMenuProps","url":"interfaces/nestedmenuprops.html","classes":"tsd-kind-interface"},{"id":5,"kind":1024,"name":"items","url":"interfaces/nestedmenuprops.html#items","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"NestedMenuProps"},{"id":6,"kind":1024,"name":"isOpen","url":"interfaces/nestedmenuprops.html#isopen","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"NestedMenuProps"},{"id":7,"kind":1024,"name":"defaultOpenPath","url":"interfaces/nestedmenuprops.html#defaultopenpath","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"NestedMenuProps"},{"id":8,"kind":4194304,"name":"Items","url":"globals.html#items","classes":"tsd-kind-type-alias"},{"id":9,"kind":4194304,"name":"Action","url":"globals.html#action","classes":"tsd-kind-type-alias"},{"id":10,"kind":64,"name":"useNestedMenu","url":"globals.html#usenestedmenu","classes":"tsd-kind-function"}],"index":{"version":"2.3.9","fields":["name","parent"],"fieldVectors":[["name/0",[0,9.808]],["parent/0",[]],["name/1",[1,20.794]],["parent/1",[0,0.731]],["name/2",[2,20.794]],["parent/2",[0,0.731]],["name/3",[3,20.794]],["parent/3",[0,0.731]],["name/4",[4,9.808]],["parent/4",[]],["name/5",[5,15.686]],["parent/5",[4,0.731]],["name/6",[6,20.794]],["parent/6",[4,0.731]],["name/7",[7,20.794]],["parent/7",[4,0.731]],["name/8",[5,15.686]],["parent/8",[]],["name/9",[8,20.794]],["parent/9",[]],["name/10",[9,20.794]],["parent/10",[]]],"invertedIndex":[["action",{"_index":8,"name":{"9":{}},"parent":{}}],["defaultopenpath",{"_index":7,"name":{"7":{}},"parent":{}}],["id",{"_index":1,"name":{"1":{}},"parent":{}}],["isopen",{"_index":6,"name":{"6":{}},"parent":{}}],["items",{"_index":5,"name":{"5":{},"8":{}},"parent":{}}],["label",{"_index":2,"name":{"2":{}},"parent":{}}],["menuitem",{"_index":0,"name":{"0":{}},"parent":{"1":{},"2":{},"3":{}}}],["nestedmenuprops",{"_index":4,"name":{"4":{}},"parent":{"5":{},"6":{},"7":{}}}],["submenu",{"_index":3,"name":{"3":{}},"parent":{}}],["usenestedmenu",{"_index":9,"name":{"10":{}},"parent":{}}]],"pipeline":[]}}

docs/assets/images/icons.png

@@ -1,8 +1,17 @@
 {
   "name": "react-headless-nested-menu",
-  "version": "0.0.0-development",
-  "description": "",
-  "keywords": [],
+  "version": "0.5.0",
+  "description": "A useful headless component (hook) that gives you all the functions you need to create a multi-level menu using your own components!",
+  "keywords": [
+    "menu",
+    "nested menu",
+    "multi-level menu",
+    "multilevel menu",
+    "mega menu",
+    "headless ui",
+    "headless component",
+    "hook"
+  ],
   "main": "dist/react-headless-nested-menu.umd.js",
   "module": "dist/react-headless-nested-menu.es5.js",
   "typings": "dist/types/react-headless-nested-menu.d.ts",
@@ -21,7 +30,7 @@
   "scripts": {
     "lint": "tslint  --project tsconfig.json -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
     "prebuild": "rimraf dist",
-    "build": "tsc --module commonjs && rollup -c rollup.config.ts && typedoc --out docs --target es6 --theme minimal --mode file src",
+    "build": "tsc --module commonjs && rollup -c rollup.config.ts && typedoc --out docs --target es6 --theme minimal --mode file src --exclude 'src/utils.ts'",
     "start": "rollup -c rollup.config.ts -w",
     "test": "jest --coverage",
     "test:watch": "jest --coverage --watch",

docs/assets/images/icons@2x.png

@@ -1,12 +1,7 @@
-// Import here Polyfills if needed. Recommended core-js (npm i -D core-js)
-// ...
-
 import React from 'react'
 import produce, { Draft } from 'immer'
 import getEventPath, { handleRefs, getDirection } from './utils'
 
-const { useRef, useReducer, useEffect, useCallback } = React
-
 interface MenuItem {
   id: string
   label: string
@@ -15,28 +10,43 @@ interface MenuItem {
 
 export type Items = MenuItem[]
 
+/**
+ * @ignore
+ */
 interface ToggleAction {
   type: 'toggle'
 }
 
+/**
+ * @ignore
+ */
 interface OpenPathAction {
   type: 'open-path'
   id: string
 }
 
+/**
+ * @ignore
+ */
 interface ClosePathAction {
   type: 'close-path'
   id: string
 }
 
 type Action = ToggleAction | OpenPathAction | ClosePathAction
 
+/**
+ * @ignore
+ */
 interface NestedMenuState {
   items: Items
   isOpen: boolean
   currentPath: string[]
 }
 
+/**
+ * @ignore
+ */
 const reducer = produce((draft: Draft<NestedMenuState>, action: Action) => {
   switch (action.type) {
     case 'toggle':
@@ -56,29 +66,38 @@ const reducer = produce((draft: Draft<NestedMenuState>, action: Action) => {
   }
 })
 
+/**
+ * The props you pass to `useNestedMenu(props) as args`
+ *
+ * @category Types
+ */
 interface NestedMenuProps {
   items?: Items
   isOpen?: boolean
   defaultOpenPath?: string[]
 }
 
-interface HitAreaProps {
-  anchor?: DOMRect
-  menu?: DOMRect
-}
+// interface HitAreaProps {
+//   anchor?: DOMRect
+//   menu?: DOMRect
+// }
 
+/**
+ *
+ * @category Hooks
+ */
 export const useNestedMenu = ({
   items = [],
   isOpen = false,
   defaultOpenPath = [],
 }: NestedMenuProps) => {
-  const [state, dispatch] = useReducer(reducer, {
+  const [state, dispatch] = React.useReducer(reducer, {
     items,
     isOpen,
     currentPath: defaultOpenPath,
   })
 
-  const globalClickHandler = useCallback(
+  const globalClickHandler = React.useCallback(
     (event: MouseEvent) => {
       const path = getEventPath(event)
       const items = Object.keys(itemRefs.current).map((id) => itemRefs.current[id]) as EventTarget[]
@@ -96,7 +115,7 @@ export const useNestedMenu = ({
     [state.isOpen]
   )
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (state.isOpen) {
       document.addEventListener('click', globalClickHandler)
     }
@@ -131,7 +150,7 @@ export const useNestedMenu = ({
 
   const isSubMenuOpen = (item: MenuItem) => state.currentPath.indexOf(item.id) !== -1
 
-  const toggleButtonRef = useRef(null!)
+  const toggleButtonRef = React.useRef(null!)
 
   const getToggleButtonProps = () => ({
     onClick() {
@@ -140,7 +159,7 @@ export const useNestedMenu = ({
     ref: toggleButtonRef,
   })
 
-  const menuRefs = useRef<{ [key: string]: HTMLElement }>({})
+  const menuRefs = React.useRef<{ [key: string]: HTMLElement }>({})
 
   const getMenuProps = (item?: MenuItem) => ({
     key: item?.id || 'root',
@@ -151,7 +170,7 @@ export const useNestedMenu = ({
     }),
   })
 
-  const itemRefs = useRef<{ [key: string]: HTMLElement }>({})
+  const itemRefs = React.useRef<{ [key: string]: HTMLElement }>({})
 
   const getItemProps = (item: MenuItem) => ({
     key: item.id,
@@ -224,8 +243,8 @@ export const useNestedMenu = ({
   const getItemPath = (item: MenuItem) => [...state.currentPath, item.id]
 
   // still not working properly
-  const anchorRef = useRef<HTMLElement>()
-  const menuRef = useRef<HTMLElement>()
+  const anchorRef = React.useRef<HTMLElement>()
+  const menuRef = React.useRef<HTMLElement>()
 
   return {
     getToggleButtonProps,
@@ -236,7 +255,6 @@ export const useNestedMenu = ({
     getCloseTriggerProps,
     getToggleTriggerProps,
     getItemPath,
-    items: state.items,
     isOpen: state.isOpen,
     currentPath: state.currentPath,
     openPath,