@economic/taco 1.1.5-alpha.108 → 1.1.5-alpha.127

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.
Files changed (130) hide show
  1. package/dist/components/Accordion/Accordion.stories.d.ts +26 -0
  2. package/dist/components/Backdrop/Backdrop.stories.d.ts +7 -0
  3. package/dist/components/Badge/Badge.stories.d.ts +15 -0
  4. package/dist/components/Banner/Banner.stories.d.ts +23 -0
  5. package/dist/components/Button/Button.stories.d.ts +69 -0
  6. package/dist/components/Calendar/Calendar.d.ts +3 -1
  7. package/dist/components/Calendar/Calendar.stories.d.ts +13 -0
  8. package/dist/components/Card/Card.stories.d.ts +12 -0
  9. package/dist/components/Datepicker/Datepicker.stories.d.ts +43 -0
  10. package/dist/components/Dialog/Dialog.d.ts +1 -1
  11. package/dist/components/Dialog/Dialog.stories.d.ts +54 -0
  12. package/dist/components/Field/Field.stories.d.ts +14 -0
  13. package/dist/components/Form/Form.stories.d.ts +14 -0
  14. package/dist/components/Group/Group.d.ts +11 -1
  15. package/dist/components/Group/Group.stories.d.ts +23 -0
  16. package/dist/components/Hanger/Hanger.stories.d.ts +11 -0
  17. package/dist/components/HoverCard/HoverCard.stories.d.ts +28 -0
  18. package/dist/components/Icon/Icon.stories.d.ts +24 -0
  19. package/dist/components/Icon/components/ChevronLeftSolid.d.ts +3 -0
  20. package/dist/components/Icon/components/ChevronRightSolid.d.ts +3 -0
  21. package/dist/components/Icon/components/index.d.ts +1 -1
  22. package/dist/components/IconButton/IconButton.stories.d.ts +45 -0
  23. package/dist/components/Input/Input.d.ts +1 -1
  24. package/dist/components/Input/Input.stories.d.ts +43 -0
  25. package/dist/components/Listbox/Listbox.stories.d.ts +44 -0
  26. package/dist/components/Menu/Menu.d.ts +2 -2
  27. package/dist/components/Menu/Menu.stories.d.ts +93 -0
  28. package/dist/components/Menu/components/Item.d.ts +1 -1
  29. package/dist/components/Menu/components/Link.d.ts +1 -1
  30. package/dist/components/Navigation/Navigation.stories.d.ts +7 -0
  31. package/dist/components/Pagination/Pagination.stories.d.ts +28 -0
  32. package/dist/components/Popover/Popover.stories.d.ts +14 -0
  33. package/dist/components/Progress/Progress.stories.d.ts +8 -0
  34. package/dist/components/RadioGroup/RadioGroup.stories.d.ts +49 -0
  35. package/dist/components/SearchInput/SearchInput.stories.d.ts +41 -0
  36. package/dist/components/Select/Select.stories.d.ts +35 -0
  37. package/dist/components/Spinner/Spinner.stories.d.ts +15 -0
  38. package/dist/components/Table/Table.stories.d.ts +32 -0
  39. package/dist/components/Table/util/rowIndexPath.d.ts +2 -2
  40. package/dist/components/Tabs/Tabs.stories.d.ts +19 -0
  41. package/dist/components/Textarea/Textarea.stories.d.ts +40 -0
  42. package/dist/components/Toast/Toast.d.ts +2 -2
  43. package/dist/components/Toast/Toast.stories.d.ts +12 -0
  44. package/dist/components/Toast/Toaster.d.ts +2 -2
  45. package/dist/components/Tooltip/Tooltip.stories.d.ts +25 -0
  46. package/dist/components/Tour/Tour.stories.d.ts +11 -0
  47. package/dist/css/Typography.stories.d.ts +6 -0
  48. package/dist/esm/components/Badge/Badge.js +1 -1
  49. package/dist/esm/components/Badge/Badge.js.map +1 -1
  50. package/dist/esm/components/Calendar/Calendar.js +4 -11
  51. package/dist/esm/components/Calendar/Calendar.js.map +1 -1
  52. package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
  53. package/dist/esm/components/Combobox/Combobox.js.map +1 -1
  54. package/dist/esm/components/Combobox/useCombobox.js +12 -13
  55. package/dist/esm/components/Combobox/useCombobox.js.map +1 -1
  56. package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
  57. package/dist/esm/components/Dialog/Dialog.js +39 -58
  58. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  59. package/dist/esm/components/Dialog/components/Content.js.map +1 -1
  60. package/dist/esm/components/Dialog/components/Drawer.js.map +1 -1
  61. package/dist/esm/components/Field/Field.js +10 -12
  62. package/dist/esm/components/Field/Field.js.map +1 -1
  63. package/dist/esm/components/Form/Form.js +6 -8
  64. package/dist/esm/components/Form/Form.js.map +1 -1
  65. package/dist/esm/components/Group/Group.js +9 -8
  66. package/dist/esm/components/Group/Group.js.map +1 -1
  67. package/dist/esm/components/Hanger/Hanger.js +27 -35
  68. package/dist/esm/components/Hanger/Hanger.js.map +1 -1
  69. package/dist/esm/components/HoverCard/HoverCard.js +8 -9
  70. package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
  71. package/dist/esm/components/Icon/components/ChevronLeftSolid.js +20 -0
  72. package/dist/esm/components/Icon/components/ChevronLeftSolid.js.map +1 -0
  73. package/dist/esm/components/Icon/components/ChevronRightSolid.js +20 -0
  74. package/dist/esm/components/Icon/components/ChevronRightSolid.js.map +1 -0
  75. package/dist/esm/components/Icon/components/index.js +4 -0
  76. package/dist/esm/components/Icon/components/index.js.map +1 -1
  77. package/dist/esm/components/Listbox/ScrollableList.js +2 -2
  78. package/dist/esm/components/Listbox/ScrollableList.js.map +1 -1
  79. package/dist/esm/components/Listbox/useListbox.js +3 -2
  80. package/dist/esm/components/Listbox/useListbox.js.map +1 -1
  81. package/dist/esm/components/Listbox/useMultiListbox.js +7 -7
  82. package/dist/esm/components/Listbox/useMultiListbox.js.map +1 -1
  83. package/dist/esm/components/Menu/components/Content.js.map +1 -1
  84. package/dist/esm/components/Menu/components/RadioGroup.js.map +1 -1
  85. package/dist/esm/components/Navigation/Navigation.js +2 -1
  86. package/dist/esm/components/Navigation/Navigation.js.map +1 -1
  87. package/dist/esm/components/Pagination/PageNumbers.js.map +1 -1
  88. package/dist/esm/components/Pagination/usePaginationShortcuts.js +4 -5
  89. package/dist/esm/components/Pagination/usePaginationShortcuts.js.map +1 -1
  90. package/dist/esm/components/Popover/Primitives.js.map +1 -1
  91. package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
  92. package/dist/esm/components/SearchInput/SearchInput.js +1 -2
  93. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  94. package/dist/esm/components/Select/useSelect.js +6 -7
  95. package/dist/esm/components/Select/useSelect.js.map +1 -1
  96. package/dist/esm/components/Spinner/Spinner.js.map +1 -1
  97. package/dist/esm/components/Table/components/BaseTable.js.map +1 -1
  98. package/dist/esm/components/Table/components/WindowedTable.js.map +1 -1
  99. package/dist/esm/components/Table/hooks/plugins/useRowActions.js +2 -3
  100. package/dist/esm/components/Table/hooks/plugins/useRowActions.js.map +1 -1
  101. package/dist/esm/components/Table/hooks/useTable.js +5 -1
  102. package/dist/esm/components/Table/hooks/useTable.js.map +1 -1
  103. package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js +18 -13
  104. package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js.map +1 -1
  105. package/dist/esm/components/Table/util/rowIndexPath.js.map +1 -1
  106. package/dist/esm/components/Tabs/Tabs.js.map +1 -1
  107. package/dist/esm/components/Toast/Toast.js +6 -1
  108. package/dist/esm/components/Toast/Toast.js.map +1 -1
  109. package/dist/esm/components/Toast/Toaster.js.map +1 -1
  110. package/dist/esm/components/Toast/util.js.map +1 -1
  111. package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
  112. package/dist/esm/components/Tour/Tour.js +1 -2
  113. package/dist/esm/components/Tour/Tour.js.map +1 -1
  114. package/dist/esm/index.css +623 -635
  115. package/dist/esm/index.js +1 -1
  116. package/dist/esm/primitives/Button.js.map +1 -1
  117. package/dist/esm/utils/hooks/useListKeyboardNavigation.js +10 -11
  118. package/dist/esm/utils/hooks/useListKeyboardNavigation.js.map +1 -1
  119. package/dist/esm/utils/input.js +1 -1
  120. package/dist/esm/utils/input.js.map +1 -1
  121. package/dist/index.css +623 -635
  122. package/dist/primitives/Button.d.ts +2 -1
  123. package/dist/taco.cjs.development.js +201 -164
  124. package/dist/taco.cjs.development.js.map +1 -1
  125. package/dist/taco.cjs.production.min.js +1 -1
  126. package/dist/taco.cjs.production.min.js.map +1 -1
  127. package/dist/utils/hooks/useListKeyboardNavigation.d.ts +1 -1
  128. package/dist/utils/tailwind.d.ts +1 -1
  129. package/package.json +5 -6
  130. package/types.json +18 -4
package/dist/esm/index.js CHANGED
@@ -15,7 +15,7 @@ export { Calendar } from './components/Calendar/Calendar.js';
15
15
  export { Checkbox } from './components/Checkbox/Checkbox.js';
16
16
  export { useProxiedRef } from './utils/hooks/useProxiedRef.js';
17
17
  export { Input } from './components/Input/Input.js';
18
- export { getNextIndexFromKeycode, useListKeyboardNavigation } from './utils/hooks/useListKeyboardNavigation.js';
18
+ export { getNextIndexFromKey, useListKeyboardNavigation } from './utils/hooks/useListKeyboardNavigation.js';
19
19
  export { useListScrollTo } from './utils/hooks/useListScrollTo.js';
20
20
  export { useBoundingClientRectListener } from './utils/hooks/useBoundingClientRectListener.js';
21
21
  export { Combobox } from './components/Combobox/Combobox.js';
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/primitives/Button.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {\n /** Content should be a text */\n children: React.ReactNode;\n /** Provides url for buttons being used as a link */\n href?: string;\n /** Provides target for buttons being used as a link */\n target?: '_self' | '_blank' | '_parent' | '_top';\n};\n\nconst Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n const { disabled, target, type = 'button', ...otherProps } = props;\n\n const Tag = props.href ? 'a' : 'button';\n\n return (\n <Tag\n {...otherProps}\n aria-disabled={disabled ? 'true' : undefined}\n disabled={disabled}\n target={Tag === 'a' ? target : undefined}\n type={Tag !== 'a' ? type : undefined}\n ref={ref as any}\n >\n {React.Children.count(props.children) > 1\n ? React.Children.map(props.children, child => (typeof child === 'string' ? <span>{child}</span> : child))\n : props.children}\n </Tag>\n );\n});\n\nexport { Button, ButtonProps };\n"],"names":["Button","React","props","ref","disabled","target","type","otherProps","Tag","href","undefined","count","children","map","child"],"mappings":";;MAWMA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;EAC5B,MAAM;IAAEC,QAAF;IAAYC,MAAZ;IAAoBC,IAAI,GAAG,QAA3B;IAAqC,GAAGC;MAAeL,KAA7D;EAEA,MAAMM,GAAG,GAAGN,KAAK,CAACO,IAAN,GAAa,GAAb,GAAmB,QAA/B;EAEA,OACIR,aAAA,CAACO,GAAD,oBACQD;qBACWH,QAAQ,GAAG,MAAH,GAAYM;IACnCN,QAAQ,EAAEA;IACVC,MAAM,EAAEG,GAAG,KAAK,GAAR,GAAcH,MAAd,GAAuBK;IAC/BJ,IAAI,EAAEE,GAAG,KAAK,GAAR,GAAcF,IAAd,GAAqBI;IAC3BP,GAAG,EAAEA;IANT,EAQKF,QAAA,CAAeU,KAAf,CAAqBT,KAAK,CAACU,QAA3B,IAAuC,CAAvC,GACKX,QAAA,CAAeY,GAAf,CAAmBX,KAAK,CAACU,QAAzB,EAAmCE,KAAK,IAAK,OAAOA,KAAP,KAAiB,QAAjB,GAA4Bb,aAAA,OAAA,MAAA,EAAOa,KAAP,CAA5B,GAAmDA,KAAhG,CADL,GAEKZ,KAAK,CAACU,QAVhB,CADJ;AAcH,CAnBc;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/primitives/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {\r\n /** Content should be a text */\r\n children: React.ReactNode;\r\n /** Provides url for buttons being used as a link */\r\n href?: string;\r\n /** Provides target for buttons being used as a link */\r\n target?: '_self' | '_blank' | '_parent' | '_top';\r\n};\r\n\r\nconst Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\r\n const { disabled, target, type = 'button', ...otherProps } = props;\r\n\r\n const Tag = props.href ? 'a' : 'button';\r\n\r\n return (\r\n <Tag\r\n {...otherProps}\r\n aria-disabled={disabled ? 'true' : undefined}\r\n disabled={disabled}\r\n target={Tag === 'a' ? target : undefined}\r\n type={Tag !== 'a' ? type : undefined}\r\n ref={ref as any}>\r\n {React.Children.count(props.children) > 1\r\n ? React.Children.map(props.children, child => (typeof child === 'string' ? <span>{child}</span> : child))\r\n : props.children}\r\n </Tag>\r\n );\r\n});\r\n\r\nexport { Button };\r\nexport type { ButtonProps };\r\n"],"names":["Button","React","props","ref","disabled","target","type","otherProps","Tag","href","undefined","count","children","map","child"],"mappings":";;MAWMA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;EAC5B,MAAM;IAAEC,QAAF;IAAYC,MAAZ;IAAoBC,IAAI,GAAG,QAA3B;IAAqC,GAAGC;MAAeL,KAA7D;EAEA,MAAMM,GAAG,GAAGN,KAAK,CAACO,IAAN,GAAa,GAAb,GAAmB,QAA/B;EAEA,OACIR,aAAA,CAACO,GAAD,oBACQD;qBACWH,QAAQ,GAAG,MAAH,GAAYM;IACnCN,QAAQ,EAAEA;IACVC,MAAM,EAAEG,GAAG,KAAK,GAAR,GAAcH,MAAd,GAAuBK;IAC/BJ,IAAI,EAAEE,GAAG,KAAK,GAAR,GAAcF,IAAd,GAAqBI;IAC3BP,GAAG,EAAEA;IANT,EAOKF,QAAA,CAAeU,KAAf,CAAqBT,KAAK,CAACU,QAA3B,IAAuC,CAAvC,GACKX,QAAA,CAAeY,GAAf,CAAmBX,KAAK,CAACU,QAAzB,EAAmCE,KAAK,IAAK,OAAOA,KAAP,KAAiB,QAAjB,GAA4Bb,aAAA,OAAA,MAAA,EAAOa,KAAP,CAA5B,GAAmDA,KAAhG,CADL,GAEKZ,KAAK,CAACU,QAThB,CADJ;AAaH,CAlBc;;;;"}
@@ -1,25 +1,24 @@
1
1
  import React__default from 'react';
2
- import keycode from 'keycode';
3
2
 
4
- var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
3
+ var getNextIndexFromKey = function getNextIndexFromKey(key, length, index, direction) {
5
4
  if (direction === void 0) {
6
5
  direction = 'vertical';
7
6
  }
8
7
 
9
- var previousKey = direction === 'horizontal' ? 'left' : 'up';
10
- var nextKey = direction === 'horizontal' ? 'right' : 'down';
8
+ var previousKey = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
9
+ var nextKey = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
11
10
 
12
- switch (keyCode) {
13
- case keycode(previousKey):
11
+ switch (key) {
12
+ case previousKey:
14
13
  return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
15
14
 
16
- case keycode(nextKey):
15
+ case nextKey:
17
16
  return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
18
17
 
19
- case keycode('home'):
18
+ case 'Home':
20
19
  return 0;
21
20
 
22
- case keycode('end'):
21
+ case 'End':
23
22
  return length - 1;
24
23
 
25
24
  default:
@@ -42,7 +41,7 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(length, optio
42
41
  setIndex = _React$useState[1];
43
42
 
44
43
  var getNextIndex = function getNextIndex(event) {
45
- var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
44
+ var nextIndex = getNextIndexFromKey(event.key, length, index, options.direction);
46
45
 
47
46
  if (nextIndex !== undefined) {
48
47
  event.preventDefault();
@@ -54,5 +53,5 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(length, optio
54
53
  return [index, setIndex, getNextIndex];
55
54
  };
56
55
 
57
- export { getNextIndexFromKeycode, useListKeyboardNavigation };
56
+ export { getNextIndexFromKey, useListKeyboardNavigation };
58
57
  //# sourceMappingURL=useListKeyboardNavigation.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useListKeyboardNavigation.js","sources":["../../../../src/utils/hooks/useListKeyboardNavigation.ts"],"sourcesContent":["import React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Orientation } from '../../types';\r\n\r\nexport const getNextIndexFromKeycode = (\r\n keyCode: number,\r\n length: number,\r\n index: number | undefined,\r\n direction: Orientation = 'vertical'\r\n): number | undefined => {\r\n const previousKey = direction === 'horizontal' ? 'left' : 'up';\r\n const nextKey = direction === 'horizontal' ? 'right' : 'down';\r\n\r\n switch (keyCode) {\r\n case keycode(previousKey):\r\n return index !== undefined ? (index - 1 < 0 ? 0 : index - 1) : index;\r\n\r\n case keycode(nextKey):\r\n return index !== undefined ? (index + 1 >= length ? index : index + 1) : index;\r\n\r\n case keycode('home'):\r\n return 0;\r\n\r\n case keycode('end'):\r\n return length - 1;\r\n\r\n default:\r\n return;\r\n }\r\n};\r\n\r\nexport type useListKeyboardNavigationOptions = {\r\n direction?: Orientation;\r\n initialIndex?: number;\r\n};\r\n\r\nexport const useListKeyboardNavigation = (\r\n length = 0,\r\n options: useListKeyboardNavigationOptions = {\r\n direction: 'vertical',\r\n }\r\n): [number | undefined, (index: number | undefined) => void, (event: React.KeyboardEvent<HTMLElement>) => number | undefined] => {\r\n const [index, setIndex] = React.useState<number | undefined>(options.initialIndex);\r\n\r\n const getNextIndex = (event: React.KeyboardEvent<HTMLElement>): number | undefined => {\r\n const nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);\r\n\r\n if (nextIndex !== undefined) {\r\n event.preventDefault();\r\n }\r\n\r\n return nextIndex;\r\n };\r\n\r\n return [index, setIndex, getNextIndex];\r\n};\r\n"],"names":["getNextIndexFromKeycode","keyCode","length","index","direction","previousKey","nextKey","keycode","undefined","useListKeyboardNavigation","options","React","useState","initialIndex","setIndex","getNextIndex","event","nextIndex","preventDefault"],"mappings":";;;IAIaA,uBAAuB,GAAG,SAA1BA,uBAA0B,CACnCC,OADmC,EAEnCC,MAFmC,EAGnCC,KAHmC,EAInCC,SAJmC;MAInCA;IAAAA,YAAyB;;;EAEzB,IAAMC,WAAW,GAAGD,SAAS,KAAK,YAAd,GAA6B,MAA7B,GAAsC,IAA1D;EACA,IAAME,OAAO,GAAGF,SAAS,KAAK,YAAd,GAA6B,OAA7B,GAAuC,MAAvD;;EAEA,QAAQH,OAAR;IACI,KAAKM,OAAO,CAACF,WAAD,CAAZ;MACI,OAAOF,KAAK,KAAKK,SAAV,GAAuBL,KAAK,GAAG,CAAR,GAAY,CAAZ,GAAgB,CAAhB,GAAoBA,KAAK,GAAG,CAAnD,GAAwDA,KAA/D;;IAEJ,KAAKI,OAAO,CAACD,OAAD,CAAZ;MACI,OAAOH,KAAK,KAAKK,SAAV,GAAuBL,KAAK,GAAG,CAAR,IAAaD,MAAb,GAAsBC,KAAtB,GAA8BA,KAAK,GAAG,CAA7D,GAAkEA,KAAzE;;IAEJ,KAAKI,OAAO,CAAC,MAAD,CAAZ;MACI,OAAO,CAAP;;IAEJ,KAAKA,OAAO,CAAC,KAAD,CAAZ;MACI,OAAOL,MAAM,GAAG,CAAhB;;IAEJ;MACI;;AAEX;IAOYO,yBAAyB,GAAG,SAA5BA,yBAA4B,CACrCP,MADqC,EAErCQ,OAFqC;MACrCR;IAAAA,SAAS;;;MACTQ;IAAAA,UAA4C;MACxCN,SAAS,EAAE;;;;EAGf,sBAA0BO,cAAK,CAACC,QAAN,CAAmCF,OAAO,CAACG,YAA3C,CAA1B;MAAOV,KAAP;MAAcW,QAAd;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;IACjB,IAAMC,SAAS,GAAGjB,uBAAuB,CAACgB,KAAK,CAACf,OAAP,EAAgBC,MAAhB,EAAwBC,KAAxB,EAA+BO,OAAO,CAACN,SAAvC,CAAzC;;IAEA,IAAIa,SAAS,KAAKT,SAAlB,EAA6B;MACzBQ,KAAK,CAACE,cAAN;;;IAGJ,OAAOD,SAAP;GAPJ;;EAUA,OAAO,CAACd,KAAD,EAAQW,QAAR,EAAkBC,YAAlB,CAAP;AACH;;;;"}
1
+ {"version":3,"file":"useListKeyboardNavigation.js","sources":["../../../../src/utils/hooks/useListKeyboardNavigation.ts"],"sourcesContent":["import React from 'react';\r\nimport { Orientation } from '../../types';\r\n\r\nexport const getNextIndexFromKey = (\r\n key: string,\r\n length: number,\r\n index: number | undefined,\r\n direction: Orientation = 'vertical'\r\n): number | undefined => {\r\n const previousKey = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\r\n const nextKey = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\r\n\r\n switch (key) {\r\n case previousKey:\r\n return index !== undefined ? (index - 1 < 0 ? 0 : index - 1) : index;\r\n\r\n case nextKey:\r\n return index !== undefined ? (index + 1 >= length ? index : index + 1) : index;\r\n\r\n case 'Home':\r\n return 0;\r\n\r\n case 'End':\r\n return length - 1;\r\n\r\n default:\r\n return;\r\n }\r\n};\r\n\r\nexport type useListKeyboardNavigationOptions = {\r\n direction?: Orientation;\r\n initialIndex?: number;\r\n};\r\n\r\nexport const useListKeyboardNavigation = (\r\n length = 0,\r\n options: useListKeyboardNavigationOptions = {\r\n direction: 'vertical',\r\n }\r\n): [number | undefined, (index: number | undefined) => void, (event: React.KeyboardEvent<HTMLElement>) => number | undefined] => {\r\n const [index, setIndex] = React.useState<number | undefined>(options.initialIndex);\r\n\r\n const getNextIndex = (event: React.KeyboardEvent<HTMLElement>): number | undefined => {\r\n const nextIndex = getNextIndexFromKey(event.key, length, index, options.direction);\r\n\r\n if (nextIndex !== undefined) {\r\n event.preventDefault();\r\n }\r\n\r\n return nextIndex;\r\n };\r\n\r\n return [index, setIndex, getNextIndex];\r\n};\r\n"],"names":["getNextIndexFromKey","key","length","index","direction","previousKey","nextKey","undefined","useListKeyboardNavigation","options","React","useState","initialIndex","setIndex","getNextIndex","event","nextIndex","preventDefault"],"mappings":";;IAGaA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAC/BC,GAD+B,EAE/BC,MAF+B,EAG/BC,KAH+B,EAI/BC,SAJ+B;MAI/BA;IAAAA,YAAyB;;;EAEzB,IAAMC,WAAW,GAAGD,SAAS,KAAK,YAAd,GAA6B,WAA7B,GAA2C,SAA/D;EACA,IAAME,OAAO,GAAGF,SAAS,KAAK,YAAd,GAA6B,YAA7B,GAA4C,WAA5D;;EAEA,QAAQH,GAAR;IACI,KAAKI,WAAL;MACI,OAAOF,KAAK,KAAKI,SAAV,GAAuBJ,KAAK,GAAG,CAAR,GAAY,CAAZ,GAAgB,CAAhB,GAAoBA,KAAK,GAAG,CAAnD,GAAwDA,KAA/D;;IAEJ,KAAKG,OAAL;MACI,OAAOH,KAAK,KAAKI,SAAV,GAAuBJ,KAAK,GAAG,CAAR,IAAaD,MAAb,GAAsBC,KAAtB,GAA8BA,KAAK,GAAG,CAA7D,GAAkEA,KAAzE;;IAEJ,KAAK,MAAL;MACI,OAAO,CAAP;;IAEJ,KAAK,KAAL;MACI,OAAOD,MAAM,GAAG,CAAhB;;IAEJ;MACI;;AAEX;IAOYM,yBAAyB,GAAG,SAA5BA,yBAA4B,CACrCN,MADqC,EAErCO,OAFqC;MACrCP;IAAAA,SAAS;;;MACTO;IAAAA,UAA4C;MACxCL,SAAS,EAAE;;;;EAGf,sBAA0BM,cAAK,CAACC,QAAN,CAAmCF,OAAO,CAACG,YAA3C,CAA1B;MAAOT,KAAP;MAAcU,QAAd;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;IACjB,IAAMC,SAAS,GAAGhB,mBAAmB,CAACe,KAAK,CAACd,GAAP,EAAYC,MAAZ,EAAoBC,KAApB,EAA2BM,OAAO,CAACL,SAAnC,CAArC;;IAEA,IAAIY,SAAS,KAAKT,SAAlB,EAA6B;MACzBQ,KAAK,CAACE,cAAN;;;IAGJ,OAAOD,SAAP;GAPJ;;EAUA,OAAO,CAACb,KAAD,EAAQU,QAAR,EAAkBC,YAAlB,CAAP;AACH;;;;"}
@@ -22,7 +22,7 @@ const createCustomKeyboardEvent = event => {
22
22
  } else {
23
23
  customKeyboardEvent = document.createEvent('Event');
24
24
  customKeyboardEvent.initEvent(event.type, true, true);
25
- customKeyboardEvent.keyCode = event.keyCode;
25
+ customKeyboardEvent.key = event.key;
26
26
  customKeyboardEvent.charCode = event.charCode;
27
27
  }
28
28
 
@@ -1 +1 @@
1
- {"version":3,"file":"input.js","sources":["../../../src/utils/input.ts"],"sourcesContent":["// returns a custom event compatible with all browsers\r\nexport const createCustomEvent = (eventType: string) => {\r\n let customEvent;\r\n\r\n if (typeof Event === 'function') {\r\n customEvent = new Event(eventType, { bubbles: true });\r\n } else {\r\n customEvent = document.createEvent('Event');\r\n customEvent.initEvent(eventType, true, true);\r\n }\r\n return customEvent;\r\n};\r\n\r\n// returns a custom keyboard event compatible with all browsers\r\nexport const createCustomKeyboardEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n let customKeyboardEvent;\r\n\r\n if (typeof KeyboardEvent === 'function') {\r\n customKeyboardEvent = new KeyboardEvent(event.type, event as any);\r\n } else {\r\n customKeyboardEvent = document.createEvent('Event') as any;\r\n customKeyboardEvent.initEvent(event.type, true, true);\r\n customKeyboardEvent.keyCode = event.keyCode;\r\n customKeyboardEvent.charCode = event.charCode;\r\n }\r\n\r\n return customKeyboardEvent;\r\n};\r\n\r\nexport const setInputValueByRef = (input: HTMLInputElement | null, value: string | undefined, event = 'change'): void => {\r\n if (!input) {\r\n return;\r\n }\r\n\r\n const previousValue = input.value;\r\n input.value = value || '';\r\n\r\n const tracker = (input as any)._valueTracker;\r\n\r\n if (tracker) {\r\n tracker.setValue(previousValue);\r\n }\r\n\r\n // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324\r\n input.dispatchEvent(createCustomEvent(event));\r\n};\r\n"],"names":["createCustomEvent","eventType","customEvent","Event","bubbles","document","createEvent","initEvent","createCustomKeyboardEvent","event","customKeyboardEvent","KeyboardEvent","type","keyCode","charCode","setInputValueByRef","input","value","previousValue","tracker","_valueTracker","setValue","dispatchEvent"],"mappings":"AAAA;MACaA,iBAAiB,GAAIC,SAAD;EAC7B,IAAIC,WAAJ;;EAEA,IAAI,OAAOC,KAAP,KAAiB,UAArB,EAAiC;IAC7BD,WAAW,GAAG,IAAIC,KAAJ,CAAUF,SAAV,EAAqB;MAAEG,OAAO,EAAE;KAAhC,CAAd;GADJ,MAEO;IACHF,WAAW,GAAGG,QAAQ,CAACC,WAAT,CAAqB,OAArB,CAAd;IACAJ,WAAW,CAACK,SAAZ,CAAsBN,SAAtB,EAAiC,IAAjC,EAAuC,IAAvC;;;EAEJ,OAAOC,WAAP;AACH;;MAGYM,yBAAyB,GAAIC,KAAD;EACrC,IAAIC,mBAAJ;;EAEA,IAAI,OAAOC,aAAP,KAAyB,UAA7B,EAAyC;IACrCD,mBAAmB,GAAG,IAAIC,aAAJ,CAAkBF,KAAK,CAACG,IAAxB,EAA8BH,KAA9B,CAAtB;GADJ,MAEO;IACHC,mBAAmB,GAAGL,QAAQ,CAACC,WAAT,CAAqB,OAArB,CAAtB;IACAI,mBAAmB,CAACH,SAApB,CAA8BE,KAAK,CAACG,IAApC,EAA0C,IAA1C,EAAgD,IAAhD;IACAF,mBAAmB,CAACG,OAApB,GAA8BJ,KAAK,CAACI,OAApC;IACAH,mBAAmB,CAACI,QAApB,GAA+BL,KAAK,CAACK,QAArC;;;EAGJ,OAAOJ,mBAAP;AACH;MAEYK,kBAAkB,GAAG,CAACC,KAAD,EAAiCC,KAAjC,EAA4DR,KAAK,GAAG,QAApE;EAC9B,IAAI,CAACO,KAAL,EAAY;IACR;;;EAGJ,MAAME,aAAa,GAAGF,KAAK,CAACC,KAA5B;EACAD,KAAK,CAACC,KAAN,GAAcA,KAAK,IAAI,EAAvB;EAEA,MAAME,OAAO,GAAIH,KAAa,CAACI,aAA/B;;EAEA,IAAID,OAAJ,EAAa;IACTA,OAAO,CAACE,QAAR,CAAiBH,aAAjB;;;;EAIJF,KAAK,CAACM,aAAN,CAAoBtB,iBAAiB,CAACS,KAAD,CAArC;AACH;;;;"}
1
+ {"version":3,"file":"input.js","sources":["../../../src/utils/input.ts"],"sourcesContent":["// returns a custom event compatible with all browsers\r\nexport const createCustomEvent = (eventType: string) => {\r\n let customEvent;\r\n\r\n if (typeof Event === 'function') {\r\n customEvent = new Event(eventType, { bubbles: true });\r\n } else {\r\n customEvent = document.createEvent('Event');\r\n customEvent.initEvent(eventType, true, true);\r\n }\r\n return customEvent;\r\n};\r\n\r\n// returns a custom keyboard event compatible with all browsers\r\nexport const createCustomKeyboardEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n let customKeyboardEvent;\r\n\r\n if (typeof KeyboardEvent === 'function') {\r\n customKeyboardEvent = new KeyboardEvent(event.type, event as any);\r\n } else {\r\n customKeyboardEvent = document.createEvent('Event') as any;\r\n customKeyboardEvent.initEvent(event.type, true, true);\r\n customKeyboardEvent.key = event.key;\r\n customKeyboardEvent.charCode = event.charCode;\r\n }\r\n\r\n return customKeyboardEvent;\r\n};\r\n\r\nexport const setInputValueByRef = (input: HTMLInputElement | null, value: string | undefined, event = 'change'): void => {\r\n if (!input) {\r\n return;\r\n }\r\n\r\n const previousValue = input.value;\r\n input.value = value || '';\r\n\r\n const tracker = (input as any)._valueTracker;\r\n\r\n if (tracker) {\r\n tracker.setValue(previousValue);\r\n }\r\n\r\n // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324\r\n input.dispatchEvent(createCustomEvent(event));\r\n};\r\n"],"names":["createCustomEvent","eventType","customEvent","Event","bubbles","document","createEvent","initEvent","createCustomKeyboardEvent","event","customKeyboardEvent","KeyboardEvent","type","key","charCode","setInputValueByRef","input","value","previousValue","tracker","_valueTracker","setValue","dispatchEvent"],"mappings":"AAAA;MACaA,iBAAiB,GAAIC,SAAD;EAC7B,IAAIC,WAAJ;;EAEA,IAAI,OAAOC,KAAP,KAAiB,UAArB,EAAiC;IAC7BD,WAAW,GAAG,IAAIC,KAAJ,CAAUF,SAAV,EAAqB;MAAEG,OAAO,EAAE;KAAhC,CAAd;GADJ,MAEO;IACHF,WAAW,GAAGG,QAAQ,CAACC,WAAT,CAAqB,OAArB,CAAd;IACAJ,WAAW,CAACK,SAAZ,CAAsBN,SAAtB,EAAiC,IAAjC,EAAuC,IAAvC;;;EAEJ,OAAOC,WAAP;AACH;;MAGYM,yBAAyB,GAAIC,KAAD;EACrC,IAAIC,mBAAJ;;EAEA,IAAI,OAAOC,aAAP,KAAyB,UAA7B,EAAyC;IACrCD,mBAAmB,GAAG,IAAIC,aAAJ,CAAkBF,KAAK,CAACG,IAAxB,EAA8BH,KAA9B,CAAtB;GADJ,MAEO;IACHC,mBAAmB,GAAGL,QAAQ,CAACC,WAAT,CAAqB,OAArB,CAAtB;IACAI,mBAAmB,CAACH,SAApB,CAA8BE,KAAK,CAACG,IAApC,EAA0C,IAA1C,EAAgD,IAAhD;IACAF,mBAAmB,CAACG,GAApB,GAA0BJ,KAAK,CAACI,GAAhC;IACAH,mBAAmB,CAACI,QAApB,GAA+BL,KAAK,CAACK,QAArC;;;EAGJ,OAAOJ,mBAAP;AACH;MAEYK,kBAAkB,GAAG,CAACC,KAAD,EAAiCC,KAAjC,EAA4DR,KAAK,GAAG,QAApE;EAC9B,IAAI,CAACO,KAAL,EAAY;IACR;;;EAGJ,MAAME,aAAa,GAAGF,KAAK,CAACC,KAA5B;EACAD,KAAK,CAACC,KAAN,GAAcA,KAAK,IAAI,EAAvB;EAEA,MAAME,OAAO,GAAIH,KAAa,CAACI,aAA/B;;EAEA,IAAID,OAAJ,EAAa;IACTA,OAAO,CAACE,QAAR,CAAiBH,aAAjB;;;;EAIJF,KAAK,CAACM,aAAN,CAAoBtB,iBAAiB,CAACS,KAAD,CAArC;AACH;;;;"}