@zendeskgarden/react-dropdowns 9.0.0-next.2 → 9.0.0-next.21

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 (157) hide show
  1. package/README.md +73 -69
  2. package/dist/esm/context/useComboboxContext.js +18 -0
  3. package/dist/esm/context/useFieldContext.js +18 -0
  4. package/dist/esm/context/useItemContext.js +18 -0
  5. package/dist/esm/context/useItemGroupContext.js +14 -0
  6. package/dist/esm/context/useMenuContext.js +18 -0
  7. package/dist/esm/context/useOptionContext.js +18 -0
  8. package/dist/esm/elements/combobox/Combobox.js +329 -0
  9. package/dist/esm/elements/combobox/Field.js +74 -0
  10. package/dist/esm/elements/combobox/Hint.js +56 -0
  11. package/dist/esm/elements/combobox/Label.js +67 -0
  12. package/dist/esm/elements/combobox/Listbox.js +154 -0
  13. package/dist/esm/elements/combobox/Message.js +62 -0
  14. package/dist/esm/elements/combobox/OptGroup.js +92 -0
  15. package/dist/esm/elements/combobox/Option.js +136 -0
  16. package/dist/esm/elements/combobox/OptionMeta.js +54 -0
  17. package/dist/esm/elements/combobox/Tag.js +97 -0
  18. package/dist/esm/elements/combobox/TagAvatar.js +13 -0
  19. package/dist/esm/elements/combobox/TagGroup.js +35 -0
  20. package/dist/esm/elements/combobox/utils.js +36 -0
  21. package/dist/esm/elements/menu/Item.js +141 -0
  22. package/dist/esm/elements/menu/ItemGroup.js +95 -0
  23. package/dist/esm/elements/menu/ItemMeta.js +54 -0
  24. package/dist/esm/elements/menu/Menu.js +126 -0
  25. package/dist/esm/elements/menu/MenuList.js +169 -0
  26. package/dist/esm/elements/menu/Separator.js +57 -0
  27. package/dist/esm/elements/menu/utils.js +55 -0
  28. package/dist/esm/index.js +19 -0
  29. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js +28 -0
  30. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js +25 -0
  31. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +25 -0
  32. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +25 -0
  33. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js +26 -0
  34. package/dist/esm/types/index.js +12 -0
  35. package/dist/esm/views/combobox/StyledCombobox.js +30 -0
  36. package/dist/esm/views/combobox/StyledContainer.js +22 -0
  37. package/dist/esm/views/combobox/StyledField.js +22 -0
  38. package/dist/esm/views/combobox/StyledFloatingListbox.js +27 -0
  39. package/dist/esm/views/combobox/StyledHint.js +23 -0
  40. package/dist/esm/views/combobox/StyledInput.js +47 -0
  41. package/dist/esm/views/combobox/StyledInputGroup.js +26 -0
  42. package/dist/esm/views/combobox/StyledInputIcon.js +62 -0
  43. package/dist/esm/views/combobox/StyledLabel.js +23 -0
  44. package/dist/esm/views/combobox/StyledListbox.js +31 -0
  45. package/dist/esm/views/combobox/StyledListboxSeparator.js +37 -0
  46. package/dist/esm/views/combobox/StyledMessage.js +23 -0
  47. package/dist/esm/views/combobox/StyledOptGroup.js +22 -0
  48. package/dist/esm/views/combobox/StyledOption.js +69 -0
  49. package/dist/esm/views/combobox/StyledOptionContent.js +22 -0
  50. package/dist/esm/views/combobox/StyledOptionIcon.js +51 -0
  51. package/dist/esm/views/combobox/StyledOptionMeta.js +39 -0
  52. package/dist/esm/views/combobox/StyledOptionTypeIcon.js +58 -0
  53. package/dist/esm/views/combobox/StyledTag.js +27 -0
  54. package/dist/esm/views/combobox/StyledTagsButton.js +34 -0
  55. package/dist/esm/views/combobox/StyledTrigger.js +125 -0
  56. package/dist/esm/views/combobox/StyledValue.js +39 -0
  57. package/dist/esm/views/menu/StyledFloatingMenu.js +23 -0
  58. package/dist/esm/views/menu/StyledItem.js +23 -0
  59. package/dist/esm/views/menu/StyledItemContent.js +23 -0
  60. package/dist/esm/views/menu/StyledItemGroup.js +23 -0
  61. package/dist/esm/views/menu/StyledItemIcon.js +23 -0
  62. package/dist/esm/views/menu/StyledItemMeta.js +23 -0
  63. package/dist/esm/views/menu/StyledItemTypeIcon.js +24 -0
  64. package/dist/esm/views/menu/StyledMenu.js +27 -0
  65. package/dist/esm/views/menu/StyledSeparator.js +23 -0
  66. package/dist/index.cjs.js +1780 -1763
  67. package/dist/typings/context/useComboboxContext.d.ts +25 -0
  68. package/dist/typings/context/useFieldContext.d.ts +32 -0
  69. package/dist/typings/context/useItemContext.d.ts +14 -0
  70. package/dist/typings/context/useItemGroupContext.d.ts +15 -0
  71. package/dist/typings/context/useMenuContext.d.ts +23 -0
  72. package/dist/typings/context/useOptionContext.d.ts +14 -0
  73. package/dist/typings/elements/{Combobox → combobox}/Combobox.d.ts +0 -2
  74. package/dist/typings/elements/{Fields → combobox}/Field.d.ts +8 -1
  75. package/dist/typings/elements/{Fields → combobox}/Hint.d.ts +2 -0
  76. package/dist/typings/elements/{Fields → combobox}/Label.d.ts +3 -1
  77. package/dist/typings/elements/{Menu/Items/MediaBody.d.ts → combobox/Listbox.d.ts} +2 -4
  78. package/dist/typings/elements/{Fields → combobox}/Message.d.ts +3 -1
  79. package/dist/typings/elements/{Menu/Items/HeaderItem.d.ts → combobox/OptGroup.d.ts} +2 -2
  80. package/dist/typings/elements/{Menu/Items/MediaItem.d.ts → combobox/Option.d.ts} +5 -2
  81. package/dist/typings/elements/{Menu/Items/HeaderIcon.d.ts → combobox/OptionMeta.d.ts} +1 -1
  82. package/dist/typings/elements/combobox/Tag.d.ts +15 -0
  83. package/dist/typings/elements/combobox/TagAvatar.d.ts +14 -0
  84. package/dist/typings/elements/combobox/TagGroup.d.ts +12 -0
  85. package/dist/typings/elements/combobox/utils.d.ts +30 -0
  86. package/dist/typings/elements/{Menu/Items → menu}/Item.d.ts +5 -2
  87. package/dist/typings/elements/{Menu/Items/AddItem.d.ts → menu/ItemGroup.d.ts} +2 -2
  88. package/dist/typings/elements/{Menu/Items → menu}/ItemMeta.d.ts +2 -2
  89. package/dist/typings/elements/{Menu → menu}/Menu.d.ts +0 -2
  90. package/dist/typings/elements/menu/MenuList.d.ts +12 -0
  91. package/dist/typings/elements/{Menu → menu}/Separator.d.ts +1 -1
  92. package/dist/typings/elements/menu/utils.d.ts +29 -0
  93. package/dist/typings/index.d.ts +18 -25
  94. package/dist/typings/types/index.d.ts +242 -121
  95. package/dist/typings/{styled/items/StyledItemIcon.d.ts → views/combobox/StyledCombobox.d.ts} +4 -6
  96. package/dist/typings/{styled/multiselect/StyledMultiselectItemWrapper.d.ts → views/combobox/StyledContainer.d.ts} +1 -1
  97. package/dist/typings/{styled/select/StyledSelect.d.ts → views/combobox/StyledField.d.ts} +1 -1
  98. package/dist/typings/views/combobox/StyledFloatingListbox.d.ts +18 -0
  99. package/dist/typings/views/combobox/StyledHint.d.ts +11 -0
  100. package/dist/typings/views/combobox/StyledInput.d.ts +20 -0
  101. package/dist/typings/{styled/items/StyledAddItem.d.ts → views/combobox/StyledInputGroup.d.ts} +2 -4
  102. package/dist/typings/views/combobox/StyledInputIcon.d.ts +20 -0
  103. package/dist/typings/views/combobox/StyledLabel.d.ts +11 -0
  104. package/dist/typings/views/combobox/StyledListbox.d.ts +17 -0
  105. package/dist/typings/{styled/items/StyledNextItem.d.ts → views/combobox/StyledListboxSeparator.d.ts} +2 -4
  106. package/dist/typings/views/combobox/StyledMessage.d.ts +11 -0
  107. package/dist/typings/views/combobox/StyledOptGroup.d.ts +14 -0
  108. package/dist/typings/views/combobox/StyledOption.d.ts +18 -0
  109. package/dist/typings/views/combobox/StyledOptionContent.d.ts +10 -0
  110. package/dist/typings/views/combobox/StyledOptionIcon.d.ts +17 -0
  111. package/dist/typings/views/combobox/StyledOptionMeta.d.ts +14 -0
  112. package/dist/typings/views/combobox/StyledOptionTypeIcon.d.ts +17 -0
  113. package/dist/typings/views/combobox/StyledTag.d.ts +17 -0
  114. package/dist/typings/views/combobox/StyledTagsButton.d.ts +16 -0
  115. package/dist/typings/views/combobox/StyledTrigger.d.ts +24 -0
  116. package/dist/typings/views/combobox/StyledValue.d.ts +21 -0
  117. package/dist/typings/views/index.d.ts +37 -0
  118. package/dist/typings/views/menu/StyledFloatingMenu.d.ts +13 -0
  119. package/dist/typings/{styled/items/StyledPreviousItem.d.ts → views/menu/StyledItem.d.ts} +4 -4
  120. package/dist/typings/views/menu/StyledItemContent.d.ts +13 -0
  121. package/dist/typings/views/menu/StyledItemGroup.d.ts +13 -0
  122. package/dist/typings/views/menu/StyledItemIcon.d.ts +14 -0
  123. package/dist/typings/{styled/items → views/menu}/StyledItemMeta.d.ts +5 -10
  124. package/dist/typings/views/menu/StyledItemTypeIcon.d.ts +14 -0
  125. package/dist/typings/views/menu/StyledMenu.d.ts +19 -0
  126. package/dist/typings/{styled → views}/menu/StyledSeparator.d.ts +7 -4
  127. package/package.json +20 -18
  128. package/dist/index.esm.js +0 -2032
  129. package/dist/typings/elements/Autocomplete/Autocomplete.d.ts +0 -14
  130. package/dist/typings/elements/Dropdown/Dropdown.d.ts +0 -26
  131. package/dist/typings/elements/Menu/Items/MediaFigure.d.ts +0 -11
  132. package/dist/typings/elements/Menu/Items/NextItem.d.ts +0 -12
  133. package/dist/typings/elements/Menu/Items/PreviousItem.d.ts +0 -12
  134. package/dist/typings/elements/Multiselect/Multiselect.d.ts +0 -14
  135. package/dist/typings/elements/Select/Select.d.ts +0 -14
  136. package/dist/typings/elements/Trigger/Trigger.d.ts +0 -24
  137. package/dist/typings/styled/index.d.ts +0 -29
  138. package/dist/typings/styled/items/StyledItem.d.ts +0 -20
  139. package/dist/typings/styled/items/StyledNextIcon.d.ts +0 -12
  140. package/dist/typings/styled/items/StyledPreviousIcon.d.ts +0 -12
  141. package/dist/typings/styled/items/header/StyledHeaderIcon.d.ts +0 -14
  142. package/dist/typings/styled/items/header/StyledHeaderItem.d.ts +0 -16
  143. package/dist/typings/styled/items/media/StyledMediaBody.d.ts +0 -17
  144. package/dist/typings/styled/items/media/StyledMediaFigure.d.ts +0 -287
  145. package/dist/typings/styled/items/media/StyledMediaItem.d.ts +0 -13
  146. package/dist/typings/styled/menu/StyledMenu.d.ts +0 -20
  147. package/dist/typings/styled/menu/StyledMenuWrapper.d.ts +0 -16
  148. package/dist/typings/styled/multiselect/StyledMultiselectInput.d.ts +0 -22
  149. package/dist/typings/styled/multiselect/StyledMultiselectItemsContainer.d.ts +0 -16
  150. package/dist/typings/styled/multiselect/StyledMultiselectMoreAnchor.d.ts +0 -15
  151. package/dist/typings/styled/select/StyledFauxInput.d.ts +0 -22
  152. package/dist/typings/styled/select/StyledInput.d.ts +0 -15
  153. package/dist/typings/utils/garden-placements.d.ts +0 -26
  154. package/dist/typings/utils/useDropdownContext.d.ts +0 -28
  155. package/dist/typings/utils/useFieldContext.d.ts +0 -17
  156. package/dist/typings/utils/useItemContext.d.ts +0 -16
  157. package/dist/typings/utils/useMenuContext.d.ts +0 -17
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
10
+
11
+ const COMPONENT_ID = 'dropdowns.menu.floating';
12
+ const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
13
+ 'data-garden-id': COMPONENT_ID,
14
+ 'data-garden-version': '9.0.0-next.21'
15
+ }).withConfig({
16
+ displayName: "StyledFloatingMenu",
17
+ componentId: "sc-1rc7ahb-0"
18
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
+ StyledFloatingMenu.defaultProps = {
20
+ theme: DEFAULT_THEME
21
+ };
22
+
23
+ export { StyledFloatingMenu };
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledOption } from '../combobox/StyledOption.js';
10
+
11
+ const COMPONENT_ID = 'dropdowns.menu.item';
12
+ const StyledItem = styled(StyledOption).attrs({
13
+ 'data-garden-id': COMPONENT_ID,
14
+ 'data-garden-version': '9.0.0-next.21'
15
+ }).withConfig({
16
+ displayName: "StyledItem",
17
+ componentId: "sc-1jp99dq-0"
18
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
+ StyledItem.defaultProps = {
20
+ theme: DEFAULT_THEME
21
+ };
22
+
23
+ export { StyledItem };
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledOptionContent } from '../combobox/StyledOptionContent.js';
10
+
11
+ const COMPONENT_ID = 'dropdowns.menu.item.content';
12
+ const StyledItemContent = styled(StyledOptionContent).attrs({
13
+ 'data-garden-id': COMPONENT_ID,
14
+ 'data-garden-version': '9.0.0-next.21'
15
+ }).withConfig({
16
+ displayName: "StyledItemContent",
17
+ componentId: "sc-1opglsb-0"
18
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
+ StyledItemContent.defaultProps = {
20
+ theme: DEFAULT_THEME
21
+ };
22
+
23
+ export { StyledItemContent };
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
10
+
11
+ const COMPONENT_ID = 'dropdowns.menu.item_group';
12
+ const StyledItemGroup = styled(StyledOptGroup).attrs({
13
+ 'data-garden-id': COMPONENT_ID,
14
+ 'data-garden-version': '9.0.0-next.21'
15
+ }).withConfig({
16
+ displayName: "StyledItemGroup",
17
+ componentId: "sc-1umk3cg-0"
18
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
+ StyledItemGroup.defaultProps = {
20
+ theme: DEFAULT_THEME
21
+ };
22
+
23
+ export { StyledItemGroup };
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
10
+
11
+ const COMPONENT_ID = 'dropdowns.menu.item.icon';
12
+ const StyledItemIcon = styled(StyledOptionIcon).attrs({
13
+ 'data-garden-id': COMPONENT_ID,
14
+ 'data-garden-version': '9.0.0-next.21'
15
+ }).withConfig({
16
+ displayName: "StyledItemIcon",
17
+ componentId: "sc-w9orqb-0"
18
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
+ StyledItemIcon.defaultProps = {
20
+ theme: DEFAULT_THEME
21
+ };
22
+
23
+ export { StyledItemIcon };
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
10
+
11
+ const COMPONENT_ID = 'dropdowns.menu.item.meta';
12
+ const StyledItemMeta = styled(StyledOptionMeta).attrs({
13
+ 'data-garden-id': COMPONENT_ID,
14
+ 'data-garden-version': '9.0.0-next.21'
15
+ }).withConfig({
16
+ displayName: "StyledItemMeta",
17
+ componentId: "sc-1unw3x1-0"
18
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
+ StyledItemMeta.defaultProps = {
20
+ theme: DEFAULT_THEME
21
+ };
22
+
23
+ export { StyledItemMeta };
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledOptionTypeIcon } from '../combobox/StyledOptionTypeIcon.js';
10
+ import { StyledItem } from './StyledItem.js';
11
+
12
+ const COMPONENT_ID = 'dropdowns.menu.item.type_icon';
13
+ const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
14
+ 'data-garden-id': COMPONENT_ID,
15
+ 'data-garden-version': '9.0.0-next.21'
16
+ }).withConfig({
17
+ displayName: "StyledItemTypeIcon",
18
+ componentId: "sc-1pll3nu-0"
19
+ })(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => retrieveComponentStyles(COMPONENT_ID, props));
20
+ StyledItemTypeIcon.defaultProps = {
21
+ theme: DEFAULT_THEME
22
+ };
23
+
24
+ export { StyledItemTypeIcon };
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { arrowStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledListbox } from '../combobox/StyledListbox.js';
10
+
11
+ const COMPONENT_ID = 'dropdowns.menu';
12
+ const StyledMenu = styled(StyledListbox).attrs({
13
+ 'data-garden-id': COMPONENT_ID,
14
+ 'data-garden-version': '9.0.0-next.21'
15
+ }).withConfig({
16
+ displayName: "StyledMenu",
17
+ componentId: "sc-f77ntu-0"
18
+ })(["position:static !important;", ";", ";"], props => props.arrowPosition && arrowStyles(props.arrowPosition, {
19
+ size: `${props.theme.space.base * 1.5}px`,
20
+ inset: '1px',
21
+ animationModifier: '[data-garden-animate-arrow="true"]'
22
+ }), props => retrieveComponentStyles(COMPONENT_ID, props));
23
+ StyledMenu.defaultProps = {
24
+ theme: DEFAULT_THEME
25
+ };
26
+
27
+ export { StyledMenu };
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator.js';
10
+
11
+ const COMPONENT_ID = 'dropdowns.menu.separator';
12
+ const StyledSeparator = styled(StyledListboxSeparator).attrs({
13
+ 'data-garden-id': COMPONENT_ID,
14
+ 'data-garden-version': '9.0.0-next.21'
15
+ }).withConfig({
16
+ displayName: "StyledSeparator",
17
+ componentId: "sc-8kqwen-0"
18
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
19
+ StyledSeparator.defaultProps = {
20
+ theme: DEFAULT_THEME
21
+ };
22
+
23
+ export { StyledSeparator };