chore(shorthands): allow arrays as shorthand value

CHANGELOG.md

@@ -40,6 +40,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `Reaction` and `ReactionGroup` components @mnajdova ([#959](https://github.com/stardust-ui/react/pull/959))
 - Add `reactionGroup` and `reactionGroupPosition` props to the `ChatMessage` component @mnajdova ([#959](https://github.com/stardust-ui/react/pull/959))
 - Set `aria-modal` attribute for both Dialog and Popup with focus trap @sophieH29 ([#995](https://github.com/stardust-ui/react/pull/995))
+- Allow arrays as shorthand for the Components containing prop of type `CollectionShorthand` @mnajdova ([#996](https://github.com/stardust-ui/react/pull/996))
 
 ### Documentation
 - Add `MenuButton` prototype (only available in development mode) @layershifter ([#947](https://github.com/stardust-ui/react/pull/947))

docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx

@@ -10,7 +10,7 @@ const items = [
     message: {
       content: (
         <Chat.Message
-          reactionGroup={{ items: reactions }}
+          reactionGroup={reactions}
           content="Hello"
           author="John Doe"
           timestamp="Yesterday, 10:15 PM"
@@ -27,7 +27,7 @@ const items = [
     message: {
       content: (
         <Chat.Message
-          reactionGroup={{ items: [{ icon: 'thumbs up', content: '8' }] }}
+          reactionGroup={[{ icon: 'thumbs up', content: '8' }]}
           reactionGroupPosition={'end'}
           content="I'm back!"
           author="John Doe"
@@ -42,7 +42,7 @@ const items = [
     message: {
       content: (
         <Chat.Message
-          reactionGroup={{ items: reactions }}
+          reactionGroup={reactions}
           content="Hi"
           author="Jane Doe"
           timestamp="Yesterday, 10:15 PM"

docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx

@@ -100,7 +100,7 @@ const ChatMessageExampleStyled = () => (
                 mine
                 badge={{ icon: 'at' }}
                 badgePosition="start"
-                reactionGroup={{ items: reactions }}
+                reactionGroup={reactions}
               />
             ),
           },
@@ -117,7 +117,7 @@ const ChatMessageExampleStyled = () => (
                 author="Jane Doe"
                 timestamp="Yesterday, 10:15 PM"
                 badge={{ icon: 'exclamation' }}
-                reactionGroup={{ items: reactions }}
+                reactionGroup={reactions}
               />
             ),
           },

docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx

@@ -74,20 +74,18 @@ const items = [
     accessibility: toolbarButtonBehavior,
     'aria-label': 'More options',
     indicator: false,
-    menu: {
-      items: [
-        { key: '1', content: 'item1' },
-        {
-          key: '2',
-          content: 'item2',
-        },
-        {
-          key: '3',
-          content: 'item3',
-          menu: { items: [{ key: '1', content: 'item3.1' }, { key: '2', content: 'item3.2' }] },
-        },
-      ],
-    },
+    menu: [
+      { key: '1', content: 'item1' },
+      {
+        key: '2',
+        content: 'item2',
+      },
+      {
+        key: '3',
+        content: 'item3',
+        menu: [{ key: '1', content: 'item3.1' }, { key: '2', content: 'item3.2' }],
+      },
+    ],
   },
 ]
 

docs/src/examples/components/Menu/Usages/MenuExampleWithSubmenu.shorthand.tsx

@@ -11,12 +11,12 @@ const items = [
         {
           key: '2',
           content: 'item2',
-          menu: { items: [{ key: '1', content: 'item2.1' }, { key: '2', content: 'item2.2' }] },
+          menu: [{ key: '1', content: 'item2.1' }, { key: '2', content: 'item2.2' }],
         },
         {
           key: '3',
           content: 'item3',
-          menu: { items: [{ key: '1', content: 'item3.1' }, { key: '2', content: 'item3.2' }] },
+          menu: [{ key: '1', content: 'item3.1' }, { key: '2', content: 'item3.2' }],
         },
       ],
     },
@@ -30,7 +30,7 @@ const items = [
         {
           key: '2',
           content: 'item2',
-          menu: { items: [{ key: '1', content: 'item2.1' }, { key: '2', content: 'item2.2' }] },
+          menu: [{ key: '1', content: 'item2.1' }, { key: '2', content: 'item2.2' }],
         },
       ],
     },

packages/react/src/components/Accordion/AccordionContent.tsx

@@ -60,6 +60,9 @@ class AccordionContent extends UIComponent<ReactProps<AccordionContentProps>, an
   }
 }
 
-AccordionContent.create = createShorthandFactory(AccordionContent, 'content')
+AccordionContent.create = createShorthandFactory({
+  Component: AccordionContent,
+  mappedProp: 'content',
+})
 
 export default AccordionContent

packages/react/src/components/Accordion/AccordionTitle.tsx

@@ -90,6 +90,6 @@ class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
   }
 }
 
-AccordionTitle.create = createShorthandFactory(AccordionTitle, 'content')
+AccordionTitle.create = createShorthandFactory({ Component: AccordionTitle, mappedProp: 'content' })
 
 export default AccordionTitle

packages/react/src/components/Attachment/Attachment.tsx

@@ -163,6 +163,6 @@ class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentStat
   }
 }
 
-Attachment.create = createShorthandFactory(Attachment, 'header')
+Attachment.create = createShorthandFactory({ Component: Attachment, mappedProp: 'header' })
 
 export default Attachment

packages/react/src/components/Avatar/Avatar.tsx

@@ -127,6 +127,6 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
   }
 }
 
-Avatar.create = createShorthandFactory(Avatar, 'name')
+Avatar.create = createShorthandFactory({ Component: Avatar, mappedProp: 'name' })
 
 export default Avatar

packages/react/src/components/Box/Box.tsx

@@ -44,6 +44,6 @@ const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<Box
   },
 })
 
-Box.create = createShorthandFactory(Box)
+Box.create = createShorthandFactory({ Component: Box })
 
 export default Box

packages/react/src/components/Button/Button.tsx

@@ -180,6 +180,6 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
   }
 }
 
-Button.create = createShorthandFactory(Button, 'content')
+Button.create = createShorthandFactory({ Component: Button, mappedProp: 'content' })
 
 export default Button

packages/react/src/components/Button/ButtonGroup.tsx

@@ -12,6 +12,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   rtlTextContainer,
+  createShorthandFactory,
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
@@ -38,6 +39,8 @@ export interface ButtonGroupProps
  * A button group presents multiple related actions.
  */
 class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
+  public static create: Function
+
   public static displayName = 'ButtonGroup'
 
   public static className = 'ui-buttons'
@@ -103,4 +106,10 @@ class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
   }
 }
 
+ButtonGroup.create = createShorthandFactory({
+  Component: ButtonGroup,
+  mappedProp: 'content',
+  mappedArrayProp: 'buttons',
+})
+
 export default ButtonGroup

packages/react/src/components/Chat/ChatItem.tsx

@@ -108,7 +108,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
   }
 }
 
-ChatItem.create = createShorthandFactory(ChatItem, 'message')
+ChatItem.create = createShorthandFactory({ Component: ChatItem, mappedProp: 'message' })
 ChatItem.slotClassNames = {
   message: `${ChatItem.className}__message`,
   gutter: `${ChatItem.className}__gutter`,

packages/react/src/components/Chat/ChatMessage.tsx

@@ -248,7 +248,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
   }
 }
 
-ChatMessage.create = createShorthandFactory(ChatMessage, 'content')
+ChatMessage.create = createShorthandFactory({ Component: ChatMessage, mappedProp: 'content' })
 ChatMessage.slotClassNames = {
   actionMenu: `${ChatMessage.className}__actions`,
   author: `${ChatMessage.className}__author`,

packages/react/src/components/Divider/Divider.tsx

@@ -75,7 +75,7 @@ class Divider extends UIComponent<ReactProps<DividerProps>, any> {
   }
 }
 
-Divider.create = createShorthandFactory(Divider, 'content')
+Divider.create = createShorthandFactory({ Component: Divider, mappedProp: 'content' })
 
 export default Divider
 

packages/react/src/components/Dropdown/DropdownItem.tsx

@@ -85,6 +85,6 @@ class DropdownItem extends UIComponent<ReactProps<DropdownItemProps>, any> {
   }
 }
 
-DropdownItem.create = createShorthandFactory(DropdownItem, 'header')
+DropdownItem.create = createShorthandFactory({ Component: DropdownItem, mappedProp: 'header' })
 
 export default DropdownItem

packages/react/src/components/Dropdown/DropdownSearchInput.tsx

@@ -142,6 +142,6 @@ DropdownSearchInput.slotClassNames = {
   wrapper: `${DropdownSearchInput.className}__wrapper`,
 }
 
-DropdownSearchInput.create = createShorthandFactory(DropdownSearchInput)
+DropdownSearchInput.create = createShorthandFactory({ Component: DropdownSearchInput })
 
 export default DropdownSearchInput

packages/react/src/components/Dropdown/DropdownSelectedItem.tsx

@@ -158,6 +158,9 @@ DropdownSelectedItem.slotClassNames = {
   removeIcon: `${DropdownSelectedItem.className}__remove-icon`,
 }
 
-DropdownSelectedItem.create = createShorthandFactory(DropdownSelectedItem, 'header')
+DropdownSelectedItem.create = createShorthandFactory({
+  Component: DropdownSelectedItem,
+  mappedProp: 'header',
+})
 
 export default DropdownSelectedItem

packages/react/src/components/Form/FormField.tsx

@@ -129,6 +129,6 @@ class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
   }
 }
 
-FormField.create = createShorthandFactory(FormField, 'label')
+FormField.create = createShorthandFactory({ Component: FormField, mappedProp: 'label' })
 
 export default FormField

packages/react/src/components/Header/Header.tsx

@@ -97,6 +97,6 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
   }
 }
 
-Header.create = createShorthandFactory(Header, 'content')
+Header.create = createShorthandFactory({ Component: Header, mappedProp: 'content' })
 
 export default Header

packages/react/src/components/Header/HeaderDescription.tsx

@@ -61,6 +61,9 @@ class HeaderDescription extends UIComponent<ReactProps<HeaderDescriptionProps>,
   }
 }
 
-HeaderDescription.create = createShorthandFactory(HeaderDescription, 'content')
+HeaderDescription.create = createShorthandFactory({
+  Component: HeaderDescription,
+  mappedProp: 'content',
+})
 
 export default HeaderDescription

packages/react/src/components/Icon/Icon.tsx

@@ -126,6 +126,6 @@ class Icon extends UIComponent<ReactProps<IconProps>, any> {
   }
 }
 
-Icon.create = createShorthandFactory(Icon, 'name')
+Icon.create = createShorthandFactory({ Component: Icon, mappedProp: 'name' })
 
 export default Icon

packages/react/src/components/Image/Image.tsx

@@ -70,6 +70,6 @@ class Image extends UIComponent<ReactProps<ImageProps>, any> {
   }
 }
 
-Image.create = createShorthandFactory(Image, 'src')
+Image.create = createShorthandFactory({ Component: Image, mappedProp: 'src' })
 
 export default Image

packages/react/src/components/Indicator/Indicator.tsx

@@ -83,6 +83,6 @@ class Indicator extends UIComponent<ReactProps<IndicatorProps>, any> {
   }
 }
 
-Indicator.create = createShorthandFactory(Indicator)
+Indicator.create = createShorthandFactory({ Component: Indicator, mappedProp: 'icon' })
 
 export default Indicator

packages/react/src/components/ItemLayout/ItemLayout.tsx

@@ -222,7 +222,7 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
   }
 }
 
-ItemLayout.create = createShorthandFactory(ItemLayout, 'content')
+ItemLayout.create = createShorthandFactory({ Component: ItemLayout, mappedProp: 'content' })
 ItemLayout.slotClassNames = {
   header: `${ItemLayout.className}__header`,
   headerMedia: `${ItemLayout.className}__headerMedia`,

packages/react/src/components/Label/Label.tsx

@@ -156,6 +156,6 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
   }
 }
 
-Label.create = createShorthandFactory(Label, 'content')
+Label.create = createShorthandFactory({ Component: Label, mappedProp: 'content' })
 
 export default Label

packages/react/src/components/List/ListItem.tsx

@@ -206,7 +206,7 @@ class ListItem extends UIComponent<ReactProps<ListItemProps>, ListItemState> {
   }
 }
 
-ListItem.create = createShorthandFactory(ListItem, 'content')
+ListItem.create = createShorthandFactory({ Component: ListItem, mappedProp: 'content' })
 ListItem.slotClassNames = {
   header: `${ListItem.className}__header`,
   headerMedia: `${ListItem.className}__headerMedia`,

packages/react/src/components/Loader/Loader.tsx

@@ -120,6 +120,6 @@ class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
   }
 }
 
-Loader.create = createShorthandFactory(Loader)
+Loader.create = createShorthandFactory({ Component: Loader })
 
 export default Loader

packages/react/src/components/Menu/Menu.tsx

@@ -205,6 +205,6 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
   }
 }
 
-Menu.create = createShorthandFactory(Menu, 'items')
+Menu.create = createShorthandFactory({ Component: Menu, mappedArrayProp: 'items' })
 
 export default Menu

packages/react/src/components/Menu/MenuDivider.tsx

@@ -57,6 +57,6 @@ class MenuDivider extends UIComponent<ReactProps<MenuDividerProps>, any> {
   }
 }
 
-MenuDivider.create = createShorthandFactory(MenuDivider, 'color')
+MenuDivider.create = createShorthandFactory({ Component: MenuDivider, mappedProp: 'color' })
 
 export default MenuDivider

packages/react/src/components/Menu/MenuItem.tsx

@@ -381,7 +381,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
   }
 }
 
-MenuItem.create = createShorthandFactory(MenuItem, 'content')
+MenuItem.create = createShorthandFactory({ Component: MenuItem, mappedProp: 'content' })
 MenuItem.slotClassNames = {
   wrapper: `${MenuItem.className}__wrapper`,
 }

packages/react/src/components/Popup/PopupContent.tsx

@@ -94,6 +94,6 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
   }
 }
 
-PopupContent.create = createShorthandFactory(PopupContent, 'content')
+PopupContent.create = createShorthandFactory({ Component: PopupContent, mappedProp: 'content' })
 
 export default PopupContent

packages/react/src/components/RadioGroup/RadioGroupItem.tsx

@@ -185,6 +185,6 @@ class RadioGroupItem extends AutoControlledComponent<
   }
 }
 
-RadioGroupItem.create = createShorthandFactory(RadioGroupItem)
+RadioGroupItem.create = createShorthandFactory({ Component: RadioGroupItem, mappedProp: 'label' })
 
 export default RadioGroupItem

packages/react/src/components/Reaction/Reaction.tsx

@@ -99,7 +99,7 @@ class Reaction extends UIComponent<ReactProps<ReactionProps>> {
   }
 }
 
-Reaction.create = createShorthandFactory(Reaction, 'content')
+Reaction.create = createShorthandFactory({ Component: Reaction, mappedProp: 'content' })
 Reaction.slotClassNames = {
   icon: `${Reaction.className}__icon`,
   content: `${Reaction.className}__content`,

packages/react/src/components/Reaction/ReactionGroup.tsx

@@ -85,6 +85,10 @@ class ReactionGroup extends UIComponent<ReactProps<ReactionGroupProps>> {
   }
 }
 
-ReactionGroup.create = createShorthandFactory(ReactionGroup, 'content')
+ReactionGroup.create = createShorthandFactory({
+  Component: ReactionGroup,
+  mappedProp: 'content',
+  mappedArrayProp: 'items',
+})
 
 export default ReactionGroup

packages/react/src/components/Status/Status.tsx

@@ -81,6 +81,6 @@ class Status extends UIComponent<ReactProps<StatusProps>, any> {
   }
 }
 
-Status.create = createShorthandFactory(Status, 'state')
+Status.create = createShorthandFactory({ Component: Status, mappedProp: 'state' })
 
 export default Status