@sikka/hawa 0.0.94 → 0.0.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.0.94",
3
+ "version": "0.0.95",
4
4
  "description": "UI Kit",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.es.js",
@@ -6,42 +6,54 @@ export const HawaMenu = ({
6
6
  withHeader,
7
7
  withIcons,
8
8
  headerTitle,
9
- headerSubtitle
9
+ headerSubtitle,
10
+ open,
11
+ handleClose
10
12
  }) => {
11
13
  return (
12
- <div
13
- id={popMenuID}
14
- className="z-10 w-44 bg-white rounded-lg divide-y divide-gray-100 shadow dark:bg-gray-700"
15
- >
16
- {withHeader && (
17
- <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
18
- <div>{headerTitle}</div>
19
- <div class="font-medium truncate">{headerSubtitle}</div>
20
- </div>
21
- )}
22
- {menuItems.map((group) => {
23
- return (
24
- <ul className="py-1 text-sm text-gray-700 dark:text-gray-200">
25
- {group.map((item) => {
26
- return (
27
- <li
28
- onClick={item.action}
29
- className={
30
- item.button
31
- ? "bg-primary-500 text-white hover:bg-primary-600 flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-primary-600 dark:hover:text-white"
32
- : "flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
33
- }
34
- >
35
- {withIcons && (
36
- <div className="mr-2 rtl:ml-2">{item.icon}</div>
37
- )}
38
- {item.label}
39
- </li>
40
- );
41
- })}
42
- </ul>
43
- );
44
- })}
14
+ <div>
15
+ <button
16
+ className="border rounded w-44 p-2 bg-blue-700 text-white"
17
+ onClick={() => handleClose(!open)}
18
+ >
19
+ Menu Dropdown
20
+ </button>
21
+ <div
22
+ id={popMenuID}
23
+ className={`${
24
+ open ? "block" : "hidden"
25
+ } z-10 w-44 bg-white rounded-lg divide-y divide-gray-100 shadow dark:bg-gray-700`}
26
+ >
27
+ {withHeader && (
28
+ <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
29
+ <div>{headerTitle}</div>
30
+ <div class="font-medium truncate">{headerSubtitle}</div>
31
+ </div>
32
+ )}
33
+ {menuItems.map((group) => {
34
+ return (
35
+ <ul className="py-1 text-sm text-gray-700 dark:text-gray-200">
36
+ {group.map((item) => {
37
+ return (
38
+ <li
39
+ onClick={item.action}
40
+ className={
41
+ item.button
42
+ ? "bg-primary-500 text-white hover:bg-primary-600 flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-primary-600 dark:hover:text-white"
43
+ : "flex flex-row rtl:flex-row-reverse items-center cursor-pointer py-2 px-4 rounded-lg mx-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
44
+ }
45
+ >
46
+ {withIcons && (
47
+ <div className="mr-2 rtl:ml-2">{item.icon}</div>
48
+ )}
49
+ {item.label}
50
+ </li>
51
+ );
52
+ })}
53
+ </ul>
54
+ );
55
+ })}
56
+ </div>
45
57
  </div>
46
58
  );
47
59
  };
@@ -361,4 +361,4 @@
361
361
 
362
362
 
363
363
 
364
- window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.67ec6e92.iframe.bundle.js"></script><script src="vendors~main.30019f92.iframe.bundle.js"></script><script src="main.c9ced472.iframe.bundle.js"></script></body></html>
364
+ window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.67ec6e92.iframe.bundle.js"></script><script src="vendors~main.a40572d0.iframe.bundle.js"></script><script src="main.ea9904c2.iframe.bundle.js"></script></body></html>