@pega/cosmos-react-core 2.0.0-dev.13.0 → 2.0.0-dev.14.0

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 (221) hide show
  1. package/lib/components/AppShell/AppShell.d.ts.map +1 -1
  2. package/lib/components/AppShell/AppShell.js +1 -1
  3. package/lib/components/AppShell/AppShell.js.map +1 -1
  4. package/lib/components/AppShell/AppShell.styles.d.ts +1 -0
  5. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  6. package/lib/components/AppShell/AppShell.styles.js +14 -8
  7. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  8. package/lib/components/Avatar/Avatar.js +1 -1
  9. package/lib/components/Avatar/Avatar.js.map +1 -1
  10. package/lib/components/Backdrop/Backdrop.d.ts +1 -1
  11. package/lib/components/Button/Button.d.ts +5 -0
  12. package/lib/components/Button/Button.d.ts.map +1 -1
  13. package/lib/components/Button/Button.js +16 -7
  14. package/lib/components/Button/Button.js.map +1 -1
  15. package/lib/components/Card/CardContent.js +1 -1
  16. package/lib/components/Card/CardContent.js.map +1 -1
  17. package/lib/components/Card/CardFooter.js +1 -1
  18. package/lib/components/Card/CardFooter.js.map +1 -1
  19. package/lib/components/Card/CardHeader.js +1 -1
  20. package/lib/components/Card/CardHeader.js.map +1 -1
  21. package/lib/components/ComboBox/ComboBox.d.ts +1 -1
  22. package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
  23. package/lib/components/ComboBox/ComboBox.js +2 -1
  24. package/lib/components/ComboBox/ComboBox.js.map +1 -1
  25. package/lib/components/Configuration/Configuration.js +1 -1
  26. package/lib/components/Configuration/Configuration.js.map +1 -1
  27. package/lib/components/DateTime/Picker/Calendar.styles.d.ts +2 -2
  28. package/lib/components/DateTime/Picker/Calendar.styles.d.ts.map +1 -1
  29. package/lib/components/DateTime/Picker/Calendar.styles.js +2 -2
  30. package/lib/components/DateTime/Picker/Calendar.styles.js.map +1 -1
  31. package/lib/components/File/FileInput.d.ts +1 -1
  32. package/lib/components/File/FileInput.d.ts.map +1 -1
  33. package/lib/components/Flex/Flex.d.ts +2 -2
  34. package/lib/components/Flex/Flex.d.ts.map +1 -1
  35. package/lib/components/Flex/Flex.js.map +1 -1
  36. package/lib/components/FormControl/FormControl.d.ts +1 -1
  37. package/lib/components/FormControl/FormControl.d.ts.map +1 -1
  38. package/lib/components/Grid/Grid.d.ts +1 -1
  39. package/lib/components/Grid/Grid.d.ts.map +1 -1
  40. package/lib/components/Icon/{mocks/iconNames.d.ts → iconNames.d.ts} +0 -0
  41. package/lib/components/Icon/iconNames.d.ts.map +1 -0
  42. package/lib/components/Icon/{mocks/iconNames.js → iconNames.js} +0 -0
  43. package/lib/components/Icon/iconNames.js.map +1 -0
  44. package/lib/components/Input/Input.styles.js +2 -2
  45. package/lib/components/Input/Input.styles.js.map +1 -1
  46. package/lib/components/Menu/FlyoutMenuList.d.ts.map +1 -1
  47. package/lib/components/Menu/FlyoutMenuList.js +4 -2
  48. package/lib/components/Menu/FlyoutMenuList.js.map +1 -1
  49. package/lib/components/Menu/Menu.styles.d.ts +10 -0
  50. package/lib/components/Menu/Menu.styles.d.ts.map +1 -1
  51. package/lib/components/Menu/Menu.styles.js +196 -1
  52. package/lib/components/Menu/Menu.styles.js.map +1 -1
  53. package/lib/components/Menu/Menu.types.d.ts +15 -7
  54. package/lib/components/Menu/Menu.types.d.ts.map +1 -1
  55. package/lib/components/Menu/Menu.types.js.map +1 -1
  56. package/lib/components/Menu/MenuGroup.d.ts +6 -0
  57. package/lib/components/Menu/MenuGroup.d.ts.map +1 -0
  58. package/lib/components/Menu/MenuGroup.js +17 -0
  59. package/lib/components/Menu/MenuGroup.js.map +1 -0
  60. package/lib/components/Menu/MenuItem.d.ts +0 -3
  61. package/lib/components/Menu/MenuItem.d.ts.map +1 -1
  62. package/lib/components/Menu/MenuItem.js +9 -116
  63. package/lib/components/Menu/MenuItem.js.map +1 -1
  64. package/lib/components/Menu/MenuList.d.ts.map +1 -1
  65. package/lib/components/Menu/MenuList.js +6 -5
  66. package/lib/components/Menu/MenuList.js.map +1 -1
  67. package/lib/components/Menu/MenuListHeader.d.ts +0 -1
  68. package/lib/components/Menu/MenuListHeader.d.ts.map +1 -1
  69. package/lib/components/Menu/MenuListHeader.js +4 -54
  70. package/lib/components/Menu/MenuListHeader.js.map +1 -1
  71. package/lib/components/Menu/helpers.d.ts +13 -12
  72. package/lib/components/Menu/helpers.d.ts.map +1 -1
  73. package/lib/components/Menu/helpers.js +32 -22
  74. package/lib/components/Menu/helpers.js.map +1 -1
  75. package/lib/components/Menu/index.d.ts +2 -3
  76. package/lib/components/Menu/index.d.ts.map +1 -1
  77. package/lib/components/Menu/index.js +1 -2
  78. package/lib/components/Menu/index.js.map +1 -1
  79. package/lib/components/Modal/Modal.js +1 -1
  80. package/lib/components/Modal/Modal.js.map +1 -1
  81. package/lib/components/Modal/Modal.styles.d.ts +1 -1
  82. package/lib/components/Modal/Modal.styles.d.ts.map +1 -1
  83. package/lib/components/Modal/Modal.styles.js +17 -7
  84. package/lib/components/Modal/Modal.styles.js.map +1 -1
  85. package/lib/components/Modal/Modal.types.d.ts +7 -2
  86. package/lib/components/Modal/Modal.types.d.ts.map +1 -1
  87. package/lib/components/Modal/Modal.types.js.map +1 -1
  88. package/lib/components/MultiStep/MultiStep.styles.js +1 -1
  89. package/lib/components/MultiStep/MultiStep.styles.js.map +1 -1
  90. package/lib/components/Number/NumberInput.styles.d.ts +2 -2
  91. package/lib/components/Number/NumberInput.styles.d.ts.map +1 -1
  92. package/lib/components/PageTemplates/PageTemplates.d.ts +1 -0
  93. package/lib/components/PageTemplates/PageTemplates.d.ts.map +1 -1
  94. package/lib/components/PageTemplates/PageTemplates.js +18 -22
  95. package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
  96. package/lib/components/Progress/Bar.js +1 -1
  97. package/lib/components/Progress/Bar.js.map +1 -1
  98. package/lib/components/Progress/Ring.js +1 -1
  99. package/lib/components/Progress/Ring.js.map +1 -1
  100. package/lib/components/RadioCheck/RadioCheck.js +3 -3
  101. package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
  102. package/lib/components/RadioCheckGroup/RadioCheckGroup.js +2 -2
  103. package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
  104. package/lib/components/SearchInput/SearchInput.js +7 -7
  105. package/lib/components/SearchInput/SearchInput.js.map +1 -1
  106. package/lib/components/Select/Select.js +2 -2
  107. package/lib/components/Select/Select.js.map +1 -1
  108. package/lib/components/Slider/Slider.styles.d.ts +1 -1
  109. package/lib/components/Slider/Slider.styles.js +1 -1
  110. package/lib/components/Slider/Slider.styles.js.map +1 -1
  111. package/lib/components/Switch/Switch.d.ts.map +1 -1
  112. package/lib/components/Switch/Switch.js +39 -29
  113. package/lib/components/Switch/Switch.js.map +1 -1
  114. package/lib/components/Text/Text.d.ts +1 -1
  115. package/lib/components/Text/Text.d.ts.map +1 -1
  116. package/lib/hooks/useI18n.d.ts +3 -0
  117. package/lib/hooks/useI18n.d.ts.map +1 -1
  118. package/lib/i18n/default.json +4 -1
  119. package/lib/i18n/i18n.d.ts +6 -0
  120. package/lib/i18n/i18n.d.ts.map +1 -1
  121. package/lib/styles/GlobalStyle.d.ts.map +1 -1
  122. package/lib/styles/GlobalStyle.js +2 -1
  123. package/lib/styles/GlobalStyle.js.map +1 -1
  124. package/lib/theme/theme.d.ts +41 -11
  125. package/lib/theme/theme.d.ts.map +1 -1
  126. package/lib/theme/themeDefinition.json +50 -30
  127. package/lib/theme/themeOverrides.schema.json +15 -3
  128. package/lib/types/types.d.ts +4 -1
  129. package/lib/types/types.d.ts.map +1 -1
  130. package/lib/types/types.js.map +1 -1
  131. package/package.json +1 -1
  132. package/lib/components/AppShell/mocks/AppShell.mocks.d.ts +0 -14
  133. package/lib/components/AppShell/mocks/AppShell.mocks.d.ts.map +0 -1
  134. package/lib/components/AppShell/mocks/AppShell.mocks.js +0 -142
  135. package/lib/components/AppShell/mocks/AppShell.mocks.js.map +0 -1
  136. package/lib/components/AppShell/mocks/AppShell.styles.d.ts +0 -2
  137. package/lib/components/AppShell/mocks/AppShell.styles.d.ts.map +0 -1
  138. package/lib/components/AppShell/mocks/AppShell.styles.js +0 -5
  139. package/lib/components/AppShell/mocks/AppShell.styles.js.map +0 -1
  140. package/lib/components/Breadcrumbs/mocks/Breadcrumbs.styles.d.ts +0 -2
  141. package/lib/components/Breadcrumbs/mocks/Breadcrumbs.styles.d.ts.map +0 -1
  142. package/lib/components/Breadcrumbs/mocks/Breadcrumbs.styles.js +0 -12
  143. package/lib/components/Breadcrumbs/mocks/Breadcrumbs.styles.js.map +0 -1
  144. package/lib/components/Card/mocks/Card.styles.d.ts +0 -2
  145. package/lib/components/Card/mocks/Card.styles.d.ts.map +0 -1
  146. package/lib/components/Card/mocks/Card.styles.js +0 -5
  147. package/lib/components/Card/mocks/Card.styles.js.map +0 -1
  148. package/lib/components/CheckboxGroup/mocks/CheckboxGroup.styles.d.ts +0 -3
  149. package/lib/components/CheckboxGroup/mocks/CheckboxGroup.styles.d.ts.map +0 -1
  150. package/lib/components/CheckboxGroup/mocks/CheckboxGroup.styles.js +0 -10
  151. package/lib/components/CheckboxGroup/mocks/CheckboxGroup.styles.js.map +0 -1
  152. package/lib/components/ComboBox/mocks/ComboBox.mocks.d.ts +0 -24
  153. package/lib/components/ComboBox/mocks/ComboBox.mocks.d.ts.map +0 -1
  154. package/lib/components/ComboBox/mocks/ComboBox.mocks.js +0 -44
  155. package/lib/components/ComboBox/mocks/ComboBox.mocks.js.map +0 -1
  156. package/lib/components/Drawer/mocks/Drawer.styles.d.ts +0 -2
  157. package/lib/components/Drawer/mocks/Drawer.styles.d.ts.map +0 -1
  158. package/lib/components/Drawer/mocks/Drawer.styles.js +0 -11
  159. package/lib/components/Drawer/mocks/Drawer.styles.js.map +0 -1
  160. package/lib/components/ExpandCollapse/mocks/ExpandCollapse.styles.d.ts +0 -4
  161. package/lib/components/ExpandCollapse/mocks/ExpandCollapse.styles.d.ts.map +0 -1
  162. package/lib/components/ExpandCollapse/mocks/ExpandCollapse.styles.js +0 -12
  163. package/lib/components/ExpandCollapse/mocks/ExpandCollapse.styles.js.map +0 -1
  164. package/lib/components/Flex/mocks/Flex.styles.d.ts +0 -10
  165. package/lib/components/Flex/mocks/Flex.styles.d.ts.map +0 -1
  166. package/lib/components/Flex/mocks/Flex.styles.js +0 -42
  167. package/lib/components/Flex/mocks/Flex.styles.js.map +0 -1
  168. package/lib/components/Grid/mocks/Grid.styles.d.ts +0 -6
  169. package/lib/components/Grid/mocks/Grid.styles.d.ts.map +0 -1
  170. package/lib/components/Grid/mocks/Grid.styles.js +0 -37
  171. package/lib/components/Grid/mocks/Grid.styles.js.map +0 -1
  172. package/lib/components/Icon/mocks/iconNames.d.ts.map +0 -1
  173. package/lib/components/Icon/mocks/iconNames.js.map +0 -1
  174. package/lib/components/Menu/mocks/Menu.mocks.d.ts +0 -32
  175. package/lib/components/Menu/mocks/Menu.mocks.d.ts.map +0 -1
  176. package/lib/components/Menu/mocks/Menu.mocks.js +0 -87
  177. package/lib/components/Menu/mocks/Menu.mocks.js.map +0 -1
  178. package/lib/components/Menu/mocks/Menu.styles.d.ts +0 -2
  179. package/lib/components/Menu/mocks/Menu.styles.d.ts.map +0 -1
  180. package/lib/components/Menu/mocks/Menu.styles.js +0 -6
  181. package/lib/components/Menu/mocks/Menu.styles.js.map +0 -1
  182. package/lib/components/PageTemplates/mocks/PageTemplates.mocks.d.ts +0 -3
  183. package/lib/components/PageTemplates/mocks/PageTemplates.mocks.d.ts.map +0 -1
  184. package/lib/components/PageTemplates/mocks/PageTemplates.mocks.js +0 -10
  185. package/lib/components/PageTemplates/mocks/PageTemplates.mocks.js.map +0 -1
  186. package/lib/components/PageTemplates/mocks/PageTemplates.styles.d.ts +0 -4
  187. package/lib/components/PageTemplates/mocks/PageTemplates.styles.d.ts.map +0 -1
  188. package/lib/components/PageTemplates/mocks/PageTemplates.styles.js +0 -23
  189. package/lib/components/PageTemplates/mocks/PageTemplates.styles.js.map +0 -1
  190. package/lib/components/Progress/mocks/Progress.styles.d.ts +0 -2
  191. package/lib/components/Progress/mocks/Progress.styles.d.ts.map +0 -1
  192. package/lib/components/Progress/mocks/Progress.styles.js +0 -13
  193. package/lib/components/Progress/mocks/Progress.styles.js.map +0 -1
  194. package/lib/components/RadioButtonGroup/mocks/RadioButtonGroup.styles.d.ts +0 -3
  195. package/lib/components/RadioButtonGroup/mocks/RadioButtonGroup.styles.d.ts.map +0 -1
  196. package/lib/components/RadioButtonGroup/mocks/RadioButtonGroup.styles.js +0 -10
  197. package/lib/components/RadioButtonGroup/mocks/RadioButtonGroup.styles.js.map +0 -1
  198. package/lib/components/SummaryList/mocks/SummaryList.mocks.d.ts +0 -29
  199. package/lib/components/SummaryList/mocks/SummaryList.mocks.d.ts.map +0 -1
  200. package/lib/components/SummaryList/mocks/SummaryList.mocks.js +0 -29
  201. package/lib/components/SummaryList/mocks/SummaryList.mocks.js.map +0 -1
  202. package/lib/components/Switch/mocks/Switch.styles.d.ts +0 -2
  203. package/lib/components/Switch/mocks/Switch.styles.d.ts.map +0 -1
  204. package/lib/components/Switch/mocks/Switch.styles.js +0 -13
  205. package/lib/components/Switch/mocks/Switch.styles.js.map +0 -1
  206. package/lib/components/Table/mocks/Table.mocks.d.ts +0 -18
  207. package/lib/components/Table/mocks/Table.mocks.d.ts.map +0 -1
  208. package/lib/components/Table/mocks/Table.mocks.js +0 -30
  209. package/lib/components/Table/mocks/Table.mocks.js.map +0 -1
  210. package/lib/components/Table/mocks/Table.styles.d.ts +0 -4
  211. package/lib/components/Table/mocks/Table.styles.d.ts.map +0 -1
  212. package/lib/components/Table/mocks/Table.styles.js +0 -9
  213. package/lib/components/Table/mocks/Table.styles.js.map +0 -1
  214. package/lib/components/Tree/mocks/Tree.mocks.d.ts +0 -2
  215. package/lib/components/Tree/mocks/Tree.mocks.d.ts.map +0 -1
  216. package/lib/components/Tree/mocks/Tree.mocks.js +0 -22
  217. package/lib/components/Tree/mocks/Tree.mocks.js.map +0 -1
  218. package/lib/components/Tree/mocks/Tree.styles.d.ts +0 -3
  219. package/lib/components/Tree/mocks/Tree.styles.d.ts.map +0 -1
  220. package/lib/components/Tree/mocks/Tree.styles.js +0 -10
  221. package/lib/components/Tree/mocks/Tree.styles.js.map +0 -1
@@ -0,0 +1,6 @@
1
+ import { FunctionComponent } from 'react';
2
+ import type { ForwardProps } from '../../types';
3
+ import type { MenuGroupProps } from './Menu.types';
4
+ declare const MenuGroup: FunctionComponent<MenuGroupProps & ForwardProps>;
5
+ export default MenuGroup;
6
+ //# sourceMappingURL=MenuGroup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAyB/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -0,0 +1,17 @@
1
+ import { createElement as _createElement } from "react";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { useContext } from 'react';
4
+ import Flex from '../Flex';
5
+ import MenuContext from './Menu.context';
6
+ import { StyledMenuGroupHeader, StyledMenuGroupList } from './Menu.styles';
7
+ import MenuItem from './MenuItem';
8
+ const MenuGroup = ({ id, label, items }) => {
9
+ const { componentId } = useContext(MenuContext);
10
+ const groupId = `${componentId}-${id}`;
11
+ return (_jsxs("li", { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center', pad: [0.5, 1] }, as: StyledMenuGroupHeader, id: groupId }, { children: label }), void 0), _jsx(StyledMenuGroupList, Object.assign({ role: 'group', "aria-labelledby": `#${groupId}` }, { children: items.length > 0 &&
12
+ items.map(item => {
13
+ return _createElement(MenuItem, { ...item, key: item.id });
14
+ }) }), void 0)] }, void 0));
15
+ };
16
+ export default MenuGroup;
17
+ //# sourceMappingURL=MenuGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuGroup.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuGroup.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,SAAS,GAAqD,CAAC,EACnE,EAAE,EACF,KAAK,EACL,KAAK,EACyB,EAAE,EAAE;IAClC,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,WAAW,IAAI,EAAE,EAAE,CAAC;IACvC,OAAO,CACL,yBACE,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAClD,EAAE,EAAE,qBAAqB,EACzB,EAAE,EAAE,OAAO,gBAEV,KAAK,YACD,EACP,KAAC,mBAAmB,kBAAC,IAAI,EAAC,OAAO,qBAAkB,IAAI,OAAO,EAAE,gBAC7D,KAAK,CAAC,MAAM,GAAG,CAAC;oBACf,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBACf,OAAO,eAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CAAC;oBAC9C,CAAC,CAAC,YACgB,YACnB,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, useContext } from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\n\nimport MenuContext from './Menu.context';\nimport { StyledMenuGroupHeader, StyledMenuGroupList } from './Menu.styles';\nimport type { MenuGroupProps } from './Menu.types';\nimport MenuItem from './MenuItem';\n\nconst MenuGroup: FunctionComponent<MenuGroupProps & ForwardProps> = ({\n id,\n label,\n items\n}: MenuGroupProps & ForwardProps) => {\n const { componentId } = useContext(MenuContext);\n\n const groupId = `${componentId}-${id}`;\n return (\n <li>\n <Flex\n container={{ alignItems: 'center', pad: [0.5, 1] }}\n as={StyledMenuGroupHeader}\n id={groupId}\n >\n {label}\n </Flex>\n <StyledMenuGroupList role='group' aria-labelledby={`#${groupId}`}>\n {items.length > 0 &&\n items.map(item => {\n return <MenuItem {...item} key={item.id} />;\n })}\n </StyledMenuGroupList>\n </li>\n );\n};\n\nexport default MenuGroup;\n"]}
@@ -1,9 +1,6 @@
1
1
  import { FunctionComponent } from 'react';
2
2
  import { ForwardProps } from '../../types';
3
3
  import { MenuItemProps } from './Menu.types';
4
- export declare const StyledMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
5
- isParentItem: boolean;
6
- }, never>;
7
4
  declare const MenuItem: FunctionComponent<MenuItemProps & ForwardProps>;
8
5
  export default MenuItem;
9
6
  //# sourceMappingURL=MenuItem.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAa3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAqExE,eAAO,MAAM,cAAc;kBAA6B,OAAO;SA0C9D,CAAC;AAsDF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkP7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAa3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAgDxE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkP7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1,134 +1,27 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Fragment, useCallback, useContext, useEffect, useRef, useMemo } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { hideVisually, mix, readableColor, rgba } from 'polished';
5
- import { defaultThemeProp } from '../../theme';
6
3
  import MetaList from '../MetaList';
7
4
  import SummaryItem from '../SummaryItem';
8
5
  import Flex from '../Flex';
9
- import Icon, { StyledIcon } from '../Icon';
10
- import Text, { StyledText } from '../Text';
6
+ import Icon from '../Icon';
7
+ import Text from '../Text';
11
8
  import { Count } from '../Badges';
12
- import BareButton, { StyledBareButton } from '../Button/BareButton';
9
+ import BareButton from '../Button/BareButton';
13
10
  import { StyledPrimary } from '../SummaryItem/SummaryItem';
14
- import { replaceMatchWithElement, tryCatch } from '../../utils';
11
+ import { replaceMatchWithElement } from '../../utils';
15
12
  import Button from '../Button';
16
- import { StyledGrid } from '../Grid';
17
13
  import { useElement, useI18n, usePrevious, useDirection } from '../../hooks';
18
14
  import Tooltip from '../Tooltip';
15
+ import menuHelpers from './helpers';
19
16
  import MenuContext from './Menu.context';
20
- const StyledItemLabel = styled.label(({ theme }) => {
21
- const hoverCheckColor = tryCatch(() => rgba(theme.components['radio-check'][':checked']['background-color'], theme.base.transparency['transparent-5']));
22
- const checkedBackground = theme.components['radio-check'][':checked']['background-color'];
23
- const checkedForeground = tryCatch(() => readableColor(checkedBackground));
24
- return css `
25
- padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};
26
- cursor: pointer;
27
-
28
- &:hover {
29
- & > input[type='radio']:not(:checked) + ${StyledIcon} {
30
- color: ${hoverCheckColor};
31
- }
32
-
33
- & > input[type='checkbox'] + ${StyledIcon} {
34
- border-color: ${theme.components['form-control'][':hover']['border-color']};
35
- }
36
- }
37
-
38
- > ${StyledGrid} {
39
- flex-grow: 1;
40
- }
41
-
42
- > input {
43
- ${hideVisually}
44
-
45
- & + ${StyledIcon} {
46
- margin-inline-start: 0;
47
- flex-shrink: 0;
48
- }
49
-
50
- &[type='radio'] + ${StyledIcon} {
51
- color: transparent;
52
- }
53
-
54
- &[type='radio']:checked + ${StyledIcon} {
55
- color: ${checkedBackground};
56
- }
57
-
58
- &[type='checkbox'] + ${StyledIcon} {
59
- border: 0.0625rem solid ${theme.components['radio-check']['border-color']};
60
- border-radius: min(
61
- calc(${theme.base['border-radius']} * ${theme.components.checkbox['border-radius']}),
62
- 0.25rem
63
- );
64
- color: transparent;
65
- background-color: ${theme.components['radio-check']['background-color']};
66
- }
67
-
68
- &[type='checkbox']:checked + ${StyledIcon} {
69
- background-color: ${checkedBackground};
70
- border-color: ${theme.components['radio-check'][':checked']['border-color']};
71
- color: ${checkedForeground};
72
- }
73
- }
74
- `;
75
- });
76
- StyledItemLabel.defaultProps = defaultThemeProp;
77
- export const StyledMenuItem = styled.li(({ theme: { base, components }, isParentItem }) => {
78
- const hoverColor = tryCatch(() => mix(0.85, base.palette['primary-background'], base.palette.interactive));
79
- return css `
80
- min-height: ${base.sizes['touch-mouse']};
81
-
82
- @media (pointer: coarse) {
83
- min-height: ${base.sizes['touch-finger']};
84
- }
85
-
86
- &:focus-within,
87
- &:hover:not([aria-disabled='true']),
88
- &[data-current='true'] {
89
- background-color: ${hoverColor};
90
- }
91
-
92
- > button:first-child,
93
- > a:first-child {
94
- display: block;
95
- width: 100%;
96
- padding: calc(0.5 * ${base.spacing}) ${base.spacing};
97
- text-align: start;
98
- text-decoration: none;
99
- color: inherit;
100
- ${isParentItem &&
101
- css `
102
- padding-inline-start: calc(1.125rem + 2 * ${base.spacing});
103
- `}
104
- }
105
-
106
- &[aria-disabled='true'] {
107
- label,
108
- ${StyledBareButton} {
109
- background-color: ${components['form-control'][':disabled']['background-color']};
110
- opacity: ${base['disabled-opacity']};
111
- }
112
- }
113
- `;
114
- });
115
- StyledMenuItem.defaultProps = defaultThemeProp;
116
- const StyledAncestors = styled.div `
117
- & > ${StyledText} {
118
- white-space: nowrap;
119
- overflow: hidden;
120
- text-overflow: ellipsis;
121
- }
122
- `;
123
- const StyledVisibilityHidden = styled.p `
124
- ${hideVisually}
125
- `;
17
+ import { StyledAncestors, StyledItemLabel, StyledMenuItem, StyledVisibilityHidden } from './Menu.styles';
126
18
  const AncestorPath = ({ ancestors = [] }) => {
127
19
  const truncatedPath = ancestors.length > 2;
128
20
  const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;
129
21
  const { end } = useDirection();
130
- return (_jsx(Flex, Object.assign({ container: { gap: 0.5, alignItems: 'center' }, as: StyledAncestors, title: pathParts.map(a => a.primary).join(' > ') }, { children: pathParts.map((ancestor, i, arr) => {
131
- return (_jsxs(Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: ancestor.primary }), void 0), i < arr.length - 1 && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: _jsx(Icon, { name: `caret-${end}` }, void 0) }), void 0), truncatedPath && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: "..." }), void 0), _jsx(Text, Object.assign({ variant: 'secondary' }, { children: _jsx(Icon, { name: `caret-${end}` }, void 0) }), void 0)] }, void 0))] }, void 0))] }, ancestor.primary));
22
+ return (_jsx(Flex, Object.assign({ container: { gap: 0.5, alignItems: 'center' }, as: StyledAncestors, title: ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ') }, { children: pathParts.map((ancestor, i, arr) => {
23
+ const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;
24
+ return (_jsxs(Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: label }), void 0), i < arr.length - 1 && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: _jsx(Icon, { name: `caret-${end}` }, void 0) }), void 0), truncatedPath && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ variant: 'secondary' }, { children: "..." }), void 0), _jsx(Text, Object.assign({ variant: 'secondary' }, { children: _jsx(Icon, { name: `caret-${end}` }, void 0) }), void 0)] }, void 0))] }, void 0))] }, label));
132
25
  }) }), void 0));
133
26
  };
134
27
  const MenuItem = ({ id, primary, secondary, ancestors, visual, count, items, selected, partial, href, tooltip, onClick, onExpand, disabled, ...restProps }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Fragment,\n FunctionComponent,\n KeyboardEvent,\n MouseEvent,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, mix, readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon } from '../Icon';\nimport Text, { StyledText } from '../Text';\nimport { Count } from '../Badges';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport { StyledPrimary } from '../SummaryItem/SummaryItem';\nimport { replaceMatchWithElement, tryCatch } from '../../utils';\nimport Button from '../Button';\nimport { StyledGrid } from '../Grid';\nimport { useElement, useI18n, usePrevious, useDirection } from '../../hooks';\nimport Tooltip from '../Tooltip';\n\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\n\nconst StyledItemLabel = styled.label(({ theme }) => {\n const hoverCheckColor = tryCatch(() =>\n rgba(\n theme.components['radio-check'][':checked']['background-color'],\n theme.base.transparency['transparent-5']\n )\n );\n\n const checkedBackground = theme.components['radio-check'][':checked']['background-color'];\n const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n return css`\n padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n cursor: pointer;\n\n &:hover {\n & > input[type='radio']:not(:checked) + ${StyledIcon} {\n color: ${hoverCheckColor};\n }\n\n & > input[type='checkbox'] + ${StyledIcon} {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n\n > ${StyledGrid} {\n flex-grow: 1;\n }\n\n > input {\n ${hideVisually}\n\n & + ${StyledIcon} {\n margin-inline-start: 0;\n flex-shrink: 0;\n }\n\n &[type='radio'] + ${StyledIcon} {\n color: transparent;\n }\n\n &[type='radio']:checked + ${StyledIcon} {\n color: ${checkedBackground};\n }\n\n &[type='checkbox'] + ${StyledIcon} {\n border: 0.0625rem solid ${theme.components['radio-check']['border-color']};\n border-radius: min(\n calc(${theme.base['border-radius']} * ${theme.components.checkbox['border-radius']}),\n 0.25rem\n );\n color: transparent;\n background-color: ${theme.components['radio-check']['background-color']};\n }\n\n &[type='checkbox']:checked + ${StyledIcon} {\n background-color: ${checkedBackground};\n border-color: ${theme.components['radio-check'][':checked']['border-color']};\n color: ${checkedForeground};\n }\n }\n `;\n});\n\nStyledItemLabel.defaultProps = defaultThemeProp;\n\nexport const StyledMenuItem = styled.li<{ isParentItem: boolean }>(\n ({ theme: { base, components }, isParentItem }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n min-height: ${base.sizes['touch-mouse']};\n\n @media (pointer: coarse) {\n min-height: ${base.sizes['touch-finger']};\n }\n\n &:focus-within,\n &:hover:not([aria-disabled='true']),\n &[data-current='true'] {\n background-color: ${hoverColor};\n }\n\n > button:first-child,\n > a:first-child {\n display: block;\n width: 100%;\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n text-decoration: none;\n color: inherit;\n ${isParentItem &&\n css`\n padding-inline-start: calc(1.125rem + 2 * ${base.spacing});\n `}\n }\n\n &[aria-disabled='true'] {\n label,\n ${StyledBareButton} {\n background-color: ${components['form-control'][':disabled']['background-color']};\n opacity: ${base['disabled-opacity']};\n }\n }\n `;\n }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nconst StyledAncestors = styled.div`\n & > ${StyledText} {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n\nconst StyledVisibilityHidden = styled.p`\n ${hideVisually}\n`;\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={pathParts.map(a => a.primary).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n return (\n <Fragment key={ancestor.primary}>\n <Text variant='secondary'>{ancestor.primary}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>...</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n id,\n primary,\n secondary,\n ancestors,\n visual,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n accent,\n radioName,\n variant: menuVariant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n const previouslySelected = usePrevious(selected);\n const selectionMode = mode === 'single-select' || mode === 'multi-select';\n const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);\n const selectableParent = isParentItem && typeof selected === 'boolean';\n const inputRef = useRef<HTMLInputElement>(null);\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n const { end } = useDirection();\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n },\n [onExpand, id]\n );\n\n const navigationInteractionId = `${id}-description`;\n const secondaryId = `${id}-secondary`;\n\n let accentedPrimary;\n if (accent && !items) {\n const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n const accentedArr = replaceMatchWithElement(primary, accentRegex, str => (\n <StyledPrimary as='span' isString>\n {str}\n </StyledPrimary>\n ));\n\n if (accentedArr.length > 1) accentedPrimary = accentedArr;\n }\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} />\n );\n\n const [summaryItemRef, setSummaryItemRef] = useElement();\n\n const summaryItem = (\n <>\n <SummaryItem\n ref={setSummaryItemRef}\n primary={accentedPrimary || (!items ? <Text>{primary}</Text> : primary)}\n secondary={secondaryContent}\n visual={visual}\n actions={\n <Flex container={{ gap: 1 }}>\n <Count>{count ?? null}</Count>\n\n {items && !selectableParent && <Icon name={`caret-${end}`} />}\n </Flex>\n }\n container={{\n colGap: 1\n }}\n />\n {tooltip && (\n <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n let InteractiveWrap;\n if (href) {\n InteractiveWrap = href ? 'a' : BareButton;\n } else if (mode === 'action' || items) {\n InteractiveWrap = BareButton;\n }\n\n const itemChild = InteractiveWrap ? (\n <InteractiveWrap\n onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={items ? expandHandler : clickHandler}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n tabIndex='-1'\n disabled={disabled}\n >\n {summaryItem}\n </InteractiveWrap>\n ) : (\n summaryItem\n );\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = !!partial;\n }\n }, [partial]);\n\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const itemLabel = useMemo(() => {\n const label = selected ? t('noun_checked', primary) : primary;\n\n return isParentItem ? t('expand_noun', label) : label;\n }, [selected, primary, isParentItem]);\n\n const describedBy = useMemo(() => {\n const hasItems = !!items;\n const hasSecondary = !!secondary;\n let idString = hasSecondary ? secondaryId : undefined;\n\n if (hasItems) {\n if (hasSecondary) idString = idString!.concat(`, ${navigationInteractionId}`);\n else idString = navigationInteractionId;\n }\n\n return idString;\n }, [items, secondary, navigationInteractionId, secondaryId]);\n\n const navigationInstructions = useMemo(() => {\n if (arrowNavigationUnsupported) {\n return t('menu_item_shift_space_expand_collapse');\n }\n\n return t('menu_item_expand_arrow');\n }, []);\n\n const interactionNotification = useMemo(() => {\n if (previouslySelected === undefined) return '';\n\n return `${selected ? t('noun_selected', primary) : t('noun_deselected', primary)}`;\n }, [selected]);\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'stretch', justify: 'between' }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={describedBy}\n isParentItem={isParentItem}\n role='menuitem'\n aria-disabled={disabled}\n data-expand={!!items}\n tabIndex='-1'\n >\n {selectionMode && typeof selected === 'boolean' ? (\n <>\n <Flex\n ref={labelRef}\n as={StyledItemLabel}\n container={{ alignItems: 'center', gap: 1 }}\n item={{ grow: 1 }}\n onMouseDown={(e: MouseEvent<HTMLLabelElement>) => {\n e.preventDefault();\n }}\n // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus\n onClick={(e: MouseEvent<HTMLLabelElement>) => {\n if (labelRef.current?.control !== e.target) {\n e.preventDefault();\n\n // Preserve detail property (lost with .click()).\n const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);\n labelRef.current?.control?.dispatchEvent(event);\n }\n }}\n >\n <input\n ref={inputRef}\n type={mode === 'single-select' ? 'radio' : 'checkbox'}\n name={mode === 'single-select' ? radioName : undefined}\n aria-label={primary}\n checked={!!selected}\n disabled={disabled}\n onClick={clickHandler as (e: MouseEvent<HTMLInputElement>) => void}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (mode === 'single-select' && e.key === 'Enter') {\n e.currentTarget.click();\n }\n }}\n // no-op since React will complain about a controlled input without an onChange\n onChange={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n tabIndex={-1}\n />\n {(mode === 'single-select' || mode === 'multi-select') && <Icon name='check' />}\n {summaryItem}\n </Flex>\n\n {isParentItem && (\n <Button icon variant='simple' onClick={expandHandler} tabIndex='-1'>\n <Icon name={`caret-${end}`} />\n </Button>\n )}\n </>\n ) : (\n itemChild\n )}\n\n {!!items && (\n <StyledVisibilityHidden id={navigationInteractionId}>\n {navigationInstructions}\n </StyledVisibilityHidden>\n )}\n\n <StyledVisibilityHidden role='alert'>{interactionNotification}</StyledVisibilityHidden>\n </Flex>\n );\n};\n\nexport default MenuItem;\n"]}
1
+ {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Fragment,\n FunctionComponent,\n KeyboardEvent,\n MouseEvent,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useMemo\n} from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { StyledPrimary } from '../SummaryItem/SummaryItem';\nimport { replaceMatchWithElement } from '../../utils';\nimport Button from '../Button';\nimport { useElement, useI18n, usePrevious, useDirection } from '../../hooks';\nimport Tooltip from '../Tooltip';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport {\n StyledAncestors,\n StyledItemLabel,\n StyledMenuItem,\n StyledVisibilityHidden\n} from './Menu.styles';\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={label}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>...</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n id,\n primary,\n secondary,\n ancestors,\n visual,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n accent,\n radioName,\n variant: menuVariant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n const previouslySelected = usePrevious(selected);\n const selectionMode = mode === 'single-select' || mode === 'multi-select';\n const isParentItem = useMemo(() => selectionMode && items, [selectionMode, items]);\n const selectableParent = isParentItem && typeof selected === 'boolean';\n const inputRef = useRef<HTMLInputElement>(null);\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n const { end } = useDirection();\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n },\n [onExpand, id]\n );\n\n const navigationInteractionId = `${id}-description`;\n const secondaryId = `${id}-secondary`;\n\n let accentedPrimary;\n if (accent && !items) {\n const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n const accentedArr = replaceMatchWithElement(primary, accentRegex, str => (\n <StyledPrimary as='span' isString>\n {str}\n </StyledPrimary>\n ));\n\n if (accentedArr.length > 1) accentedPrimary = accentedArr;\n }\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} />\n );\n\n const [summaryItemRef, setSummaryItemRef] = useElement();\n\n const summaryItem = (\n <>\n <SummaryItem\n ref={setSummaryItemRef}\n primary={accentedPrimary || (!items ? <Text>{primary}</Text> : primary)}\n secondary={secondaryContent}\n visual={visual}\n actions={\n <Flex container={{ gap: 1 }}>\n <Count>{count ?? null}</Count>\n\n {items && !selectableParent && <Icon name={`caret-${end}`} />}\n </Flex>\n }\n container={{\n colGap: 1\n }}\n />\n {tooltip && (\n <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n let InteractiveWrap;\n if (href) {\n InteractiveWrap = href ? 'a' : BareButton;\n } else if (mode === 'action' || items) {\n InteractiveWrap = BareButton;\n }\n\n const itemChild = InteractiveWrap ? (\n <InteractiveWrap\n onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={items ? expandHandler : clickHandler}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n tabIndex='-1'\n disabled={disabled}\n >\n {summaryItem}\n </InteractiveWrap>\n ) : (\n summaryItem\n );\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = !!partial;\n }\n }, [partial]);\n\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const itemLabel = useMemo(() => {\n const label = selected ? t('noun_checked', primary) : primary;\n\n return isParentItem ? t('expand_noun', label) : label;\n }, [selected, primary, isParentItem]);\n\n const describedBy = useMemo(() => {\n const hasItems = !!items;\n const hasSecondary = !!secondary;\n let idString = hasSecondary ? secondaryId : undefined;\n\n if (hasItems) {\n if (hasSecondary) idString = idString!.concat(`, ${navigationInteractionId}`);\n else idString = navigationInteractionId;\n }\n\n return idString;\n }, [items, secondary, navigationInteractionId, secondaryId]);\n\n const navigationInstructions = useMemo(() => {\n if (arrowNavigationUnsupported) {\n return t('menu_item_shift_space_expand_collapse');\n }\n\n return t('menu_item_expand_arrow');\n }, []);\n\n const interactionNotification = useMemo(() => {\n if (previouslySelected === undefined) return '';\n\n return `${selected ? t('noun_selected', primary) : t('noun_deselected', primary)}`;\n }, [selected]);\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'stretch', justify: 'between' }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={describedBy}\n isParentItem={isParentItem}\n role='menuitem'\n aria-disabled={disabled}\n data-expand={!!items}\n tabIndex='-1'\n >\n {selectionMode && typeof selected === 'boolean' ? (\n <>\n <Flex\n ref={labelRef}\n as={StyledItemLabel}\n container={{ alignItems: 'center', gap: 1 }}\n item={{ grow: 1 }}\n onMouseDown={(e: MouseEvent<HTMLLabelElement>) => {\n e.preventDefault();\n }}\n // https://stackoverflow.com/questions/32958091/how-to-prevent-clicking-on-a-checkboxs-label-from-stealing-focus\n onClick={(e: MouseEvent<HTMLLabelElement>) => {\n if (labelRef.current?.control !== e.target) {\n e.preventDefault();\n\n // Preserve detail property (lost with .click()).\n const event = new window.MouseEvent(e.nativeEvent.type, e.nativeEvent);\n labelRef.current?.control?.dispatchEvent(event);\n }\n }}\n >\n <input\n ref={inputRef}\n type={mode === 'single-select' ? 'radio' : 'checkbox'}\n name={mode === 'single-select' ? radioName : undefined}\n aria-label={primary}\n checked={!!selected}\n disabled={disabled}\n onClick={clickHandler as (e: MouseEvent<HTMLInputElement>) => void}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (mode === 'single-select' && e.key === 'Enter') {\n e.currentTarget.click();\n }\n }}\n // no-op since React will complain about a controlled input without an onChange\n onChange={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n tabIndex={-1}\n />\n {(mode === 'single-select' || mode === 'multi-select') && <Icon name='check' />}\n {summaryItem}\n </Flex>\n\n {isParentItem && (\n <Button icon variant='simple' onClick={expandHandler} tabIndex='-1'>\n <Icon name={`caret-${end}`} />\n </Button>\n )}\n </>\n ) : (\n itemChild\n )}\n\n {!!items && (\n <StyledVisibilityHidden id={navigationInteractionId}>\n {navigationInstructions}\n </StyledVisibilityHidden>\n )}\n\n <StyledVisibilityHidden role='alert'>{interactionNotification}</StyledVisibilityHidden>\n </Flex>\n );\n};\n\nexport default MenuItem;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,EAAE,aAAa,EAAuB,MAAM,cAAc,CAAC;AAgBlE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAsL7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,EAAE,aAAa,EAAuB,MAAM,cAAc,CAAC;AAsBlE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA6L7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { createElement as _createElement } from "react";
3
- import { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState, useMemo } from 'react';
3
+ import { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState, useMemo, Fragment } from 'react';
4
4
  import Drawer from '../Drawer';
5
5
  import { useAfterInitialEffect, useConsolidatedRef, useItemIntersection, useDirection } from '../../hooks';
6
6
  import Progress from '../Progress';
@@ -9,8 +9,9 @@ import MenuContext from './Menu.context';
9
9
  import MenuListHeader from './MenuListHeader';
10
10
  import MenuItem from './MenuItem';
11
11
  import helpers from './helpers';
12
- import { StyledLoadingItem, StyledMenuList, StyledMenuListContainer } from './Menu.styles';
12
+ import { StyledLoadingItem, StyledMenuList, StyledMenuListContainer, StyledSeparator } from './Menu.styles';
13
13
  import { resizeRootEl } from './NavItemsList';
14
+ import MenuGroup from './MenuGroup';
14
15
  const setParentDisabled = (fieldset, bool) => {
15
16
  fieldset.disabled = bool;
16
17
  const legendButton = fieldset.querySelector('legend button');
@@ -57,8 +58,8 @@ const MenuList = forwardRef(({ items, parent }, ref) => {
57
58
  }, [currentItemId, items, parent]);
58
59
  const listContent = useMemo(() => {
59
60
  if (items.length) {
60
- return items.map(item => {
61
- return (_createElement(MenuItem, { ...item, key: item.id, onExpand: item.items
61
+ return items.map((item, index) => {
62
+ return helpers.isItem(item) ? (_createElement(MenuItem, { ...item, key: item.id, onExpand: item.items
62
63
  ? (id, e) => {
63
64
  returnFocusRef.current = e.currentTarget;
64
65
  setExpandedItem(item); // FIXME
@@ -66,7 +67,7 @@ const MenuList = forwardRef(({ items, parent }, ref) => {
66
67
  onItemExpand?.(id, e);
67
68
  updateActiveDescendants({ preventScroll: true });
68
69
  }
69
- : undefined }));
70
+ : undefined })) : (_jsxs(Fragment, { children: [_jsx(MenuGroup, Object.assign({}, item), void 0), items[index + 1] && helpers.isItem(items[index + 1]) && (_jsx(StyledSeparator, { role: 'separator' }, void 0))] }, item.id));
70
71
  });
71
72
  }
72
73
  if (!loading) {
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n useMemo\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Drawer from '../Drawer';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useItemIntersection,\n useDirection\n} from '../../hooks';\nimport Progress from '../Progress';\nimport EmptyState from '../EmptyState';\n\nimport { MenuListProps, ParentMenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport MenuListHeader from './MenuListHeader';\nimport MenuItem from './MenuItem';\nimport helpers from './helpers';\nimport { StyledLoadingItem, StyledMenuList, StyledMenuListContainer } from './Menu.styles';\nimport { resizeRootEl } from './NavItemsList';\n\nconst setParentDisabled = (fieldset: HTMLFieldSetElement, bool: boolean) => {\n fieldset.disabled = bool;\n const legendButton = fieldset.querySelector<HTMLButtonElement>('legend button');\n if (legendButton) {\n legendButton.disabled = bool;\n }\n};\n\nconst MenuList: FunctionComponent<MenuListProps & ForwardProps> = forwardRef(\n ({ items, parent }: PropsWithoutRef<MenuListProps>, ref: MenuListProps['ref']) => {\n const menuListWrapperRef: MutableRefObject<HTMLElement | null> = useRef(null);\n const selfRef = useConsolidatedRef(ref);\n const ulRef = useRef<HTMLUListElement>(null);\n const returnFocusRef: MutableRefObject<HTMLButtonElement | null> = useRef(null);\n const [open, setOpen] = useState(!parent);\n const [expandedItem, setExpandedItem] = useState<ParentMenuItemProps>();\n const {\n scrollAt,\n loadMore,\n loading,\n emptyText,\n currentItemId,\n onItemExpand,\n updateActiveDescendants,\n setFocusReturnEl,\n onItemCollapse\n } = useContext(MenuContext);\n const { end } = useDirection();\n\n useItemIntersection(ulRef, items.length - 1, () => {\n loadMore?.(parent?.item?.id);\n });\n\n useLayoutEffect(() => {\n if (!selfRef.current || expandedItem) return;\n menuListWrapperRef.current = selfRef.current.parentElement;\n resizeRootEl(\n selfRef.current,\n menuListWrapperRef.current as HTMLElement,\n items.length,\n scrollAt\n );\n });\n\n useEffect(() => {\n if (parent) setOpen(true);\n }, []);\n\n useAfterInitialEffect(() => {\n if (expandedItem) {\n setExpandedItem(items.find(item => item.id === expandedItem.id) as ParentMenuItemProps); // FIXME\n }\n }, [expandedItem, items]);\n\n useAfterInitialEffect(() => {\n if (currentItemId) {\n // if there is ancestor item of the controlled item, set it to expanded.\n const ancestor = items.find(\n item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined\n );\n\n if (ancestor) {\n setExpandedItem(ancestor as ParentMenuItemProps);\n updateActiveDescendants({ preventScroll: true });\n }\n }\n }, [currentItemId, items, parent]);\n\n const listContent = useMemo(() => {\n if (items.length) {\n return items.map(item => {\n return (\n <MenuItem\n {...item}\n key={item.id}\n onExpand={\n item.items\n ? (id, e) => {\n returnFocusRef.current = e.currentTarget as HTMLButtonElement;\n setExpandedItem(item as ParentMenuItemProps); // FIXME\n item?.onExpand?.(id, e);\n onItemExpand?.(id, e);\n updateActiveDescendants({ preventScroll: true });\n }\n : undefined\n }\n />\n );\n });\n }\n\n if (!loading) {\n return <EmptyState message={emptyText} forwardedAs='li' />;\n }\n\n return null;\n }, [items, loading, emptyText]);\n\n const list = (\n <StyledMenuList ref={ulRef} role='menu'>\n {listContent}\n {loading && !expandedItem && (\n <StyledLoadingItem>\n <Progress placement='local' />\n </StyledLoadingItem>\n )}\n </StyledMenuList>\n );\n\n return (\n <>\n <Drawer\n aria-hidden={!!expandedItem}\n as={StyledMenuListContainer}\n ref={selfRef}\n open={open}\n style={{ opacity: expandedItem ? 0 : 1 }}\n disabled={!!expandedItem}\n placement={end}\n onBeforeOpen={() => {\n if (parent) {\n parent.el.style.opacity = '0';\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '1';\n }\n }}\n onAfterOpen={() => {\n if (parent) {\n setParentDisabled(parent.el, true);\n }\n }}\n onBeforeClose={() => {\n if (parent && menuListWrapperRef.current) {\n setParentDisabled(parent.el, false);\n parent.el.style.opacity = '1';\n resizeRootEl(\n parent.el,\n menuListWrapperRef.current,\n parent.siblingItems.length,\n scrollAt\n );\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '0';\n }\n }}\n onAfterClose={() => {\n if (parent) {\n const expandBtn = parent.returnFocusRef.current;\n parent.setExpandedItem(undefined);\n\n if (expandBtn) {\n setFocusReturnEl(expandBtn?.closest('li'));\n }\n\n onItemCollapse?.(parent.item.id);\n updateActiveDescendants();\n }\n }}\n >\n {parent && (\n <MenuListHeader\n text={parent.item.primary}\n onClick={() => {\n setOpen(false);\n }}\n />\n )}\n\n {list}\n </Drawer>\n\n {expandedItem && selfRef.current && (\n <MenuList\n items={expandedItem.items}\n parent={{\n el: selfRef.current,\n item: expandedItem,\n siblingItems: items,\n setExpandedItem,\n returnFocusRef\n }}\n />\n )}\n </>\n );\n }\n);\n\nexport default MenuList;\n"]}
1
+ {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n useMemo,\n Fragment\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport Drawer from '../Drawer';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useItemIntersection,\n useDirection\n} from '../../hooks';\nimport Progress from '../Progress';\nimport EmptyState from '../EmptyState';\n\nimport { MenuListProps, ParentMenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport MenuListHeader from './MenuListHeader';\nimport MenuItem from './MenuItem';\nimport helpers from './helpers';\nimport {\n StyledLoadingItem,\n StyledMenuList,\n StyledMenuListContainer,\n StyledSeparator\n} from './Menu.styles';\nimport { resizeRootEl } from './NavItemsList';\nimport MenuGroup from './MenuGroup';\n\nconst setParentDisabled = (fieldset: HTMLFieldSetElement, bool: boolean) => {\n fieldset.disabled = bool;\n const legendButton = fieldset.querySelector<HTMLButtonElement>('legend button');\n if (legendButton) {\n legendButton.disabled = bool;\n }\n};\n\nconst MenuList: FunctionComponent<MenuListProps & ForwardProps> = forwardRef(\n ({ items, parent }: PropsWithoutRef<MenuListProps>, ref: MenuListProps['ref']) => {\n const menuListWrapperRef: MutableRefObject<HTMLElement | null> = useRef(null);\n const selfRef = useConsolidatedRef(ref);\n const ulRef = useRef<HTMLUListElement>(null);\n const returnFocusRef: MutableRefObject<HTMLButtonElement | null> = useRef(null);\n const [open, setOpen] = useState(!parent);\n const [expandedItem, setExpandedItem] = useState<ParentMenuItemProps>();\n const {\n scrollAt,\n loadMore,\n loading,\n emptyText,\n currentItemId,\n onItemExpand,\n updateActiveDescendants,\n setFocusReturnEl,\n onItemCollapse\n } = useContext(MenuContext);\n const { end } = useDirection();\n\n useItemIntersection(ulRef, items.length - 1, () => {\n loadMore?.(parent?.item?.id);\n });\n\n useLayoutEffect(() => {\n if (!selfRef.current || expandedItem) return;\n menuListWrapperRef.current = selfRef.current.parentElement;\n resizeRootEl(\n selfRef.current,\n menuListWrapperRef.current as HTMLElement,\n items.length,\n scrollAt\n );\n });\n\n useEffect(() => {\n if (parent) setOpen(true);\n }, []);\n\n useAfterInitialEffect(() => {\n if (expandedItem) {\n setExpandedItem(items.find(item => item.id === expandedItem.id) as ParentMenuItemProps); // FIXME\n }\n }, [expandedItem, items]);\n\n useAfterInitialEffect(() => {\n if (currentItemId) {\n // if there is ancestor item of the controlled item, set it to expanded.\n const ancestor = items.find(\n item => item.items?.length && helpers.getItem(item.items, currentItemId) !== undefined\n );\n\n if (ancestor) {\n setExpandedItem(ancestor as ParentMenuItemProps);\n updateActiveDescendants({ preventScroll: true });\n }\n }\n }, [currentItemId, items, parent]);\n\n const listContent = useMemo(() => {\n if (items.length) {\n return items.map((item, index) => {\n return helpers.isItem(item) ? (\n <MenuItem\n {...item}\n key={item.id}\n onExpand={\n item.items\n ? (id, e) => {\n returnFocusRef.current = e.currentTarget as HTMLButtonElement;\n setExpandedItem(item as ParentMenuItemProps); // FIXME\n item?.onExpand?.(id, e);\n onItemExpand?.(id, e);\n updateActiveDescendants({ preventScroll: true });\n }\n : undefined\n }\n />\n ) : (\n <Fragment key={item.id}>\n <MenuGroup {...item} />\n {items[index + 1] && helpers.isItem(items[index + 1]) && (\n <StyledSeparator role='separator' />\n )}\n </Fragment>\n );\n });\n }\n\n if (!loading) {\n return <EmptyState message={emptyText} forwardedAs='li' />;\n }\n\n return null;\n }, [items, loading, emptyText]);\n\n const list = (\n <StyledMenuList ref={ulRef} role='menu'>\n {listContent}\n {loading && !expandedItem && (\n <StyledLoadingItem>\n <Progress placement='local' />\n </StyledLoadingItem>\n )}\n </StyledMenuList>\n );\n\n return (\n <>\n <Drawer\n aria-hidden={!!expandedItem}\n as={StyledMenuListContainer}\n ref={selfRef}\n open={open}\n style={{ opacity: expandedItem ? 0 : 1 }}\n disabled={!!expandedItem}\n placement={end}\n onBeforeOpen={() => {\n if (parent) {\n parent.el.style.opacity = '0';\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '1';\n }\n }}\n onAfterOpen={() => {\n if (parent) {\n setParentDisabled(parent.el, true);\n }\n }}\n onBeforeClose={() => {\n if (parent && menuListWrapperRef.current) {\n setParentDisabled(parent.el, false);\n parent.el.style.opacity = '1';\n resizeRootEl(\n parent.el,\n menuListWrapperRef.current,\n parent.siblingItems.length,\n scrollAt\n );\n }\n\n if (selfRef.current) {\n selfRef.current.style.opacity = '0';\n }\n }}\n onAfterClose={() => {\n if (parent) {\n const expandBtn = parent.returnFocusRef.current;\n parent.setExpandedItem(undefined);\n\n if (expandBtn) {\n setFocusReturnEl(expandBtn?.closest('li'));\n }\n\n onItemCollapse?.(parent.item.id);\n updateActiveDescendants();\n }\n }}\n >\n {parent && (\n <MenuListHeader\n text={parent.item.primary}\n onClick={() => {\n setOpen(false);\n }}\n />\n )}\n\n {list}\n </Drawer>\n\n {expandedItem && selfRef.current && (\n <MenuList\n items={expandedItem.items}\n parent={{\n el: selfRef.current,\n item: expandedItem,\n siblingItems: items,\n setExpandedItem,\n returnFocusRef\n }}\n />\n )}\n </>\n );\n }\n);\n\nexport default MenuList;\n"]}
@@ -1,7 +1,6 @@
1
1
  import { FunctionComponent } from 'react';
2
2
  import { ForwardProps } from '../../types';
3
3
  import { MenuListHeaderProps } from './Menu.types';
4
- export declare const StyledMenuListHeader: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {}, never>;
5
4
  declare const MenuListHeader: FunctionComponent<MenuListHeaderProps & ForwardProps>;
6
5
  export default MenuListHeader;
7
6
  //# sourceMappingURL=MenuListHeader.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MenuListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA0C,MAAM,OAAO,CAAC;AAMlF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,eAAO,MAAM,oBAAoB,4GAgD/B,CAAC;AAIH,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"MenuListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA0C,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -1,63 +1,13 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useCallback, useContext } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { mix } from 'polished';
5
- import Icon, { StyledIcon } from '../Icon';
6
- import { defaultThemeProp } from '../../theme';
3
+ import Icon from '../Icon';
7
4
  import { useI18n, useDirection } from '../../hooks';
8
5
  import Flex from '../Flex';
9
- import BareButton, { StyledBareButton } from '../Button/BareButton';
6
+ import BareButton from '../Button/BareButton';
10
7
  import SummaryItem from '../SummaryItem';
11
- import { StyledGrid } from '../Grid';
12
- import { cap, tryCatch } from '../../utils';
8
+ import { cap } from '../../utils';
13
9
  import MenuContext from './Menu.context';
14
- export const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {
15
- const hoverColor = tryCatch(() => mix(0.85, base.palette['primary-background'], base.palette.interactive));
16
- return css `
17
- width: 100%;
18
- background-color: ${base.palette['primary-background']};
19
-
20
- &:first-child {
21
- border-top-left-radius: inherit;
22
- border-top-right-radius: inherit;
23
- }
24
- &:last-child {
25
- border-bottom-left-radius: inherit;
26
- border-bottom-right-radius: inherit;
27
- }
28
-
29
- &:focus-within {
30
- box-shadow: inset ${base.shadow.focus};
31
- background-color: ${hoverColor};
32
- }
33
-
34
- &:hover {
35
- background-color: ${hoverColor};
36
- }
37
-
38
- & > ${StyledBareButton}, & > button {
39
- color: ${base.palette['foreground-color']};
40
- width: 100%;
41
- padding: calc(0.5 * ${base.spacing}) ${base.spacing};
42
- text-align: start;
43
- border-radius: inherit;
44
-
45
- > ${StyledGrid} {
46
- grid-column-gap: ${base.spacing};
47
- }
48
-
49
- ${StyledIcon} {
50
- /* Fixes vertical align issue increasing box size beyond square */
51
- display: block;
52
- }
53
- }
54
-
55
- > button[data-current='true'] {
56
- background-color: ${hoverColor};
57
- }
58
- `;
59
- });
60
- StyledMenuListHeader.defaultProps = defaultThemeProp;
10
+ import { StyledMenuListHeader } from './Menu.styles';
61
11
  const MenuListHeader = ({ text, onClick }) => {
62
12
  const t = useI18n();
63
13
  const { arrowNavigationUnsupported } = useContext(MenuContext);
@@ -1 +1 @@
1
- {"version":3,"file":"MenuListHeader.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuListHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoC,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACxE,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACxE,CAAC;IAEF,OAAO,GAAG,CAAA;;wBAEY,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;;;;;;;;;;0BAYhC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACjB,UAAU;;;;0BAIV,UAAU;;;UAG1B,gBAAgB;eACX,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;4BAEnB,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO;;;;UAI/C,UAAU;2BACO,IAAI,CAAC,OAAO;;;QAG/B,UAAU;;;;;;;0BAOQ,UAAU;;GAEjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,CAAC,EAC7E,IAAI,EACJ,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,0BAA0B,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAoC,EAAE,EAAE;QACvC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE;YACzD,OAAO,EAAE,CAAC;SACX;IACH,CAAC,EACD,CAAC,OAAO,EAAE,KAAK,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,gBACjE,KAAC,UAAU,kBACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,mBACN,MAAM,mBACN,MAAM,gBACR,GAAG,CAAC,CAAC,eAAe,EAAE,IAAI,IAAI,EAAE,CAAC,IAC3C,0BAA0B;gBACxB,CAAC,CAAC,CAAC,CAAC,gCAAgC,CAAC;gBACrC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAClC,EAAE,gBAEF,KAAC,WAAW,IAAC,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,WAAI,EAAE,OAAO,EAAE,IAAI,WAAI,YAC7D,YACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, KeyboardEvent, useCallback, useContext } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport Icon, { StyledIcon } from '../Icon';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { useI18n, useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport SummaryItem from '../SummaryItem';\nimport { StyledGrid } from '../Grid';\nimport { cap, tryCatch } from '../../utils';\n\nimport { MenuListHeaderProps } from './Menu.types';\nimport MenuContext from './Menu.context';\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n width: 100%;\n background-color: ${base.palette['primary-background']};\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &:focus-within {\n box-shadow: inset ${base.shadow.focus};\n background-color: ${hoverColor};\n }\n\n &:hover {\n background-color: ${hoverColor};\n }\n\n & > ${StyledBareButton}, & > button {\n color: ${base.palette['foreground-color']};\n width: 100%;\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n border-radius: inherit;\n\n > ${StyledGrid} {\n grid-column-gap: ${base.spacing};\n }\n\n ${StyledIcon} {\n /* Fixes vertical align issue increasing box size beyond square */\n display: block;\n }\n }\n\n > button[data-current='true'] {\n background-color: ${hoverColor};\n }\n `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nconst MenuListHeader: FunctionComponent<MenuListHeaderProps & ForwardProps> = ({\n text,\n onClick\n}) => {\n const t = useI18n();\n const { arrowNavigationUnsupported } = useContext(MenuContext);\n const { start } = useDirection();\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLegendElement>) => {\n if (ev.key === 'Enter' || ev.key === `Arrow${cap(start)}`) {\n onClick();\n }\n },\n [onClick, start]\n );\n\n return (\n <Flex container={{ alignItems: 'center' }} as={StyledMenuListHeader}>\n <BareButton\n onClick={onClick}\n onKeyDown={onKeyDown}\n data-collapse='true'\n aria-expanded='true'\n aria-label={`${t('collapse_noun', text || '')} ${\n arrowNavigationUnsupported\n ? t('menu_item_collapse_shift_space')\n : t('menu_item_collapse_arrow')\n }`}\n >\n <SummaryItem visual={<Icon name={`caret-${start}`} />} primary={text} />\n </BareButton>\n </Flex>\n );\n};\n\nexport default MenuListHeader;\n"]}
1
+ {"version":3,"file":"MenuListHeader.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuListHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoC,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,cAAc,GAA0D,CAAC,EAC7E,IAAI,EACJ,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,0BAA0B,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAoC,EAAE,EAAE;QACvC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE;YACzD,OAAO,EAAE,CAAC;SACX;IACH,CAAC,EACD,CAAC,OAAO,EAAE,KAAK,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,gBACjE,KAAC,UAAU,kBACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,mBACN,MAAM,mBACN,MAAM,gBACR,GAAG,CAAC,CAAC,eAAe,EAAE,IAAI,IAAI,EAAE,CAAC,IAC3C,0BAA0B;gBACxB,CAAC,CAAC,CAAC,CAAC,gCAAgC,CAAC;gBACrC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAClC,EAAE,gBAEF,KAAC,WAAW,IAAC,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,WAAI,EAAE,OAAO,EAAE,IAAI,WAAI,YAC7D,YACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, KeyboardEvent, useCallback, useContext } from 'react';\n\nimport Icon from '../Icon';\nimport { ForwardProps } from '../../types';\nimport { useI18n, useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport BareButton from '../Button/BareButton';\nimport SummaryItem from '../SummaryItem';\nimport { cap } from '../../utils';\n\nimport { MenuListHeaderProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledMenuListHeader } from './Menu.styles';\n\nconst MenuListHeader: FunctionComponent<MenuListHeaderProps & ForwardProps> = ({\n text,\n onClick\n}) => {\n const t = useI18n();\n const { arrowNavigationUnsupported } = useContext(MenuContext);\n const { start } = useDirection();\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLegendElement>) => {\n if (ev.key === 'Enter' || ev.key === `Arrow${cap(start)}`) {\n onClick();\n }\n },\n [onClick, start]\n );\n\n return (\n <Flex container={{ alignItems: 'center' }} as={StyledMenuListHeader}>\n <BareButton\n onClick={onClick}\n onKeyDown={onKeyDown}\n data-collapse='true'\n aria-expanded='true'\n aria-label={`${t('collapse_noun', text || '')} ${\n arrowNavigationUnsupported\n ? t('menu_item_collapse_shift_space')\n : t('menu_item_collapse_arrow')\n }`}\n >\n <SummaryItem visual={<Icon name={`caret-${start}`} />} primary={text} />\n </BareButton>\n </Flex>\n );\n};\n\nexport default MenuListHeader;\n"]}
@@ -1,20 +1,21 @@
1
- import { MenuProps, MenuItemProps } from './Menu.types';
1
+ import { MenuProps, MenuObjectProps, MenuItemProps, MenuGroupProps } from './Menu.types';
2
2
  declare const helpers: {
3
- getItem(items: MenuProps['items'], id: MenuItemProps['id']): MenuItemProps | undefined;
4
- getPath(items: MenuProps['items'], id: MenuItemProps['id']): MenuItemProps[];
3
+ isItem(item: MenuItemProps | MenuGroupProps): item is MenuItemProps;
4
+ getItem(items: MenuProps['items'], id: MenuObjectProps['id']): MenuItemProps | undefined;
5
+ getPath(items: MenuProps['items'], id: MenuObjectProps['id']): MenuProps['items'];
5
6
  setItem(items: MenuProps['items'], id: MenuItemProps['id'], newItem: MenuItemProps): MenuProps['items'];
6
- mapItem(items: MenuProps['items'], id: MenuItemProps['id'], fn: (item: MenuItemProps, index: number, array: MenuItemProps[]) => MenuItemProps): MenuProps['items'];
7
- mapTree(items: MenuProps['items'], fn: (item: MenuItemProps, index: number, array: MenuItemProps[]) => MenuItemProps): MenuProps['items'];
8
- flatten(items: MenuProps['items'], ancestors?: MenuItemProps[] | undefined): MenuProps['items'];
9
- toggleSelected(items: MenuProps['items'], id: MenuItemProps['id'], mode?: MenuProps['mode'], bool?: boolean | undefined): MenuItemProps[];
10
- selectItem(items: MenuProps['items'], id: MenuItemProps['id'], mode?: MenuProps['mode']): MenuItemProps[];
11
- deselectItem(items: MenuProps['items'], id: MenuItemProps['id'], mode?: MenuProps['mode']): MenuItemProps[];
7
+ mapItem(items: MenuProps['items'], id: MenuItemProps['id'], fn: (item: MenuItemProps, index: number, array: MenuProps['items']) => MenuItemProps): MenuProps['items'];
8
+ mapTree(items: MenuProps['items'], fn: (item: MenuItemProps, index: number, array: MenuProps['items']) => MenuItemProps): MenuProps['items'];
9
+ flatten(items: MenuProps['items'], ancestors?: (MenuItemProps | MenuGroupProps)[] | undefined): MenuItemProps[];
10
+ toggleSelected(items: MenuProps['items'], id: MenuItemProps['id'], mode?: MenuProps['mode'], bool?: boolean | undefined): MenuProps['items'];
11
+ selectItem(items: MenuProps['items'], id: MenuItemProps['id'], mode?: MenuProps['mode']): MenuProps['items'];
12
+ deselectItem(items: MenuProps['items'], id: MenuItemProps['id'], mode?: MenuProps['mode']): MenuProps['items'];
12
13
  getSelected(items: MenuProps['items']): MenuItemProps[];
13
14
  prependTo(items: MenuProps['items'], newItems: MenuProps['items'], id?: string | undefined): MenuProps['items'];
14
15
  appendTo(items: MenuProps['items'], newItems: MenuProps['items'], id?: string | undefined): MenuProps['items'];
15
- getNextItem(items: MenuItemProps[], itemId?: string | undefined): MenuItemProps | undefined;
16
- getPrevItem(items: MenuItemProps[], itemId?: string | undefined): MenuItemProps | undefined;
17
- getParentItem(items: MenuItemProps[], itemId?: string | undefined): MenuItemProps | undefined;
16
+ getNextItem(items: MenuProps['items'], itemId?: string | undefined): MenuItemProps | MenuGroupProps | undefined;
17
+ getPrevItem(items: MenuProps['items'], itemId?: string | undefined): MenuItemProps | MenuGroupProps | undefined;
18
+ getParentItem(items: MenuProps['items'], itemId?: string | undefined): MenuItemProps | MenuGroupProps | undefined;
18
19
  };
19
20
  export default helpers;
20
21
  //# sourceMappingURL=helpers.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,QAAA,MAAM,OAAO;mBACI,SAAS,CAAC,OAAO,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,GAAG,aAAa,GAAG,SAAS;mBAmBvE,SAAS,CAAC,OAAO,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,GAAG,aAAa,EAAE;mBAqBnE,SAAS,CAAC,OAAO,CAAC,MACrB,aAAa,CAAC,IAAI,CAAC,WACd,aAAa,GACrB,SAAS,CAAC,OAAO,CAAC;mBAgBZ,SAAS,CAAC,OAAO,CAAC,MACrB,aAAa,CAAC,IAAI,CAAC,aACZ,aAAa,SAAS,MAAM,SAAS,aAAa,EAAE,KAAK,aAAa,GAChF,SAAS,CAAC,OAAO,CAAC;mBAoBZ,SAAS,CAAC,OAAO,CAAC,aACd,aAAa,SAAS,MAAM,SAAS,aAAa,EAAE,KAAK,aAAa,GAChF,SAAS,CAAC,OAAO,CAAC;mBAeN,SAAS,CAAC,OAAO,CAAC,4CAAmC,SAAS,CAAC,OAAO,CAAC;0BAe7E,SAAS,CAAC,OAAO,CAAC,MACrB,aAAa,CAAC,IAAI,CAAC,SAChB,SAAS,CAAC,MAAM,CAAC;sBAsBR,SAAS,CAAC,OAAO,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,SAAS,SAAS,CAAC,MAAM,CAAC;wBAInE,SAAS,CAAC,OAAO,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,SAAS,SAAS,CAAC,MAAM,CAAC;uBAItE,SAAS,CAAC,OAAO,CAAC;qBAe5B,SAAS,CAAC,OAAO,CAAC,YACf,SAAS,CAAC,OAAO,CAAC,4BAE3B,SAAS,CAAC,OAAO,CAAC;oBAWZ,SAAS,CAAC,OAAO,CAAC,YACf,SAAS,CAAC,OAAO,CAAC,4BAE3B,SAAS,CAAC,OAAO,CAAC;uBAUF,aAAa,EAAE,gCAAiC,aAAa,GAAG,SAAS;uBAUzE,aAAa,EAAE,gCAAiC,aAAa,GAAG,SAAS;yBAUvE,aAAa,EAAE,gCAAiC,aAAa,GAAG,SAAS;CAK/F,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzF,QAAA,MAAM,OAAO;iBACE,aAAa,GAAG,cAAc;mBAI5B,SAAS,CAAC,OAAO,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,GAAG,aAAa,GAAG,SAAS;mBAmBzE,SAAS,CAAC,OAAO,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC;mBAqBxE,SAAS,CAAC,OAAO,CAAC,MACrB,aAAa,CAAC,IAAI,CAAC,WACd,aAAa,GACrB,SAAS,CAAC,OAAO,CAAC;mBAgBZ,SAAS,CAAC,OAAO,CAAC,MACrB,aAAa,CAAC,IAAI,CAAC,aACZ,aAAa,SAAS,MAAM,SAAS,SAAS,CAAC,OAAO,CAAC,KAAK,aAAa,GACnF,SAAS,CAAC,OAAO,CAAC;mBAoBZ,SAAS,CAAC,OAAO,CAAC,aACd,aAAa,SAAS,MAAM,SAAS,SAAS,CAAC,OAAO,CAAC,KAAK,aAAa,GACnF,SAAS,CAAC,OAAO,CAAC;mBAeN,SAAS,CAAC,OAAO,CAAC,+DAAmC,aAAa,EAAE;0BAkB1E,SAAS,CAAC,OAAO,CAAC,MACrB,aAAa,CAAC,IAAI,CAAC,SAChB,SAAS,CAAC,MAAM,CAAC,+BAEvB,SAAS,CAAC,OAAO,CAAC;sBAuBZ,SAAS,CAAC,OAAO,CAAC,MACrB,aAAa,CAAC,IAAI,CAAC,SAChB,SAAS,CAAC,MAAM,CAAC,GACvB,SAAS,CAAC,OAAO,CAAC;wBAKZ,SAAS,CAAC,OAAO,CAAC,MACrB,aAAa,CAAC,IAAI,CAAC,SAChB,SAAS,CAAC,MAAM,CAAC,GACvB,SAAS,CAAC,OAAO,CAAC;uBAIF,SAAS,CAAC,OAAO,CAAC,GAAG,aAAa,EAAE;qBAc9C,SAAS,CAAC,OAAO,CAAC,YACf,SAAS,CAAC,OAAO,CAAC,4BAE3B,SAAS,CAAC,OAAO,CAAC;oBAWZ,SAAS,CAAC,OAAO,CAAC,YACf,SAAS,CAAC,OAAO,CAAC,4BAE3B,SAAS,CAAC,OAAO,CAAC;uBAWZ,SAAS,CAAC,OAAO,CAAC,gCAExB,aAAa,GAAG,cAAc,GAAG,SAAS;uBAWpC,SAAS,CAAC,OAAO,CAAC,gCAExB,aAAa,GAAG,cAAc,GAAG,SAAS;yBAWpC,SAAS,CAAC,OAAO,CAAC,gCAExB,aAAa,GAAG,cAAc,GAAG,SAAS;CAK9C,CAAC;AAEF,eAAe,OAAO,CAAC"}