feat(factories): createShorthandFactory API update and removing HTML factories

src/components/Accordion/AccordionContent.tsx

@@ -59,6 +59,6 @@ class AccordionContent extends UIComponent<Extendable<AccordionContentProps>, an
   }
 }
 
-AccordionContent.create = createShorthandFactory(AccordionContent, content => ({ content }))
+AccordionContent.create = createShorthandFactory(AccordionContent, 'content')
 
 export default AccordionContent

src/components/Accordion/AccordionTitle.tsx

@@ -77,6 +77,6 @@ class AccordionTitle extends UIComponent<Extendable<AccordionTitleProps>, any> {
   }
 }
 
-AccordionTitle.create = createShorthandFactory(AccordionTitle, content => ({ content }))
+AccordionTitle.create = createShorthandFactory(AccordionTitle, 'content')
 
 export default AccordionTitle

src/components/Attachment/Attachment.tsx

@@ -1,12 +1,12 @@
-import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-
-import { UIComponent, customPropTypes, createShorthandFactory, createHTMLDivision } from '../../lib'
+import * as _ from 'lodash'
+import { UIComponent, customPropTypes, createShorthandFactory } from '../../lib'
 import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils'
 import Icon from '../Icon/Icon'
 import Button from '../Button/Button'
 import Text from '../Text/Text'
+import Slot from '../Slot/Slot'
 import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
 import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes'
 
@@ -147,7 +147,7 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
           </div>
         )}
         {!_.isNil(progress) &&
-          createHTMLDivision('', {
+          Slot.create('', {
             defaultProps: { className: classes.progress },
             render: renderProgress,
           })}
@@ -156,6 +156,6 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
   }
 }
 
-Attachment.create = createShorthandFactory(Attachment, header => ({ header }))
+Attachment.create = createShorthandFactory(Attachment, 'header')
 
 export default Attachment

src/components/Avatar/Avatar.tsx

@@ -121,7 +121,6 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
           !renderImage &&
           Label.create(label || {}, {
             defaultProps: {
-              as: 'div',
               content: getInitials(name),
               circular: true,
               title: name,
@@ -144,7 +143,7 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
   }
 }
 
-Avatar.create = createShorthandFactory(Avatar, name => ({ name }))
+Avatar.create = createShorthandFactory(Avatar, 'name')
 
 export default Avatar
 

src/components/Button/Button.tsx

@@ -4,7 +4,7 @@ import * as _ from 'lodash'
 
 import { UIComponent, childrenExist, customPropTypes, createShorthandFactory } from '../../lib'
 import Icon from '../Icon/Icon'
-import { createSlot } from '../Slot/Slot'
+import Slot from '../Slot/Slot'
 import { buttonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import {
@@ -155,7 +155,7 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
       >
         {hasChildren && children}
         {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
-        {createSlot(!hasChildren && content, {
+        {Slot.create(!hasChildren && content, {
           defaultProps: { as: 'span', className: classes.content },
         })}
         {!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}
@@ -194,6 +194,6 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
   }
 }
 
-Button.create = createShorthandFactory(Button, content => ({ content }))
+Button.create = createShorthandFactory(Button, 'content')
 
 export default Button

src/components/Chat/ChatItem.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 
 import { childrenExist, createShorthandFactory, RenderResultConfig, UIComponent } from '../../lib'
-import { createSlot } from '../Slot/Slot'
+import Slot from '../Slot/Slot'
 import { Extendable, ShorthandRenderFunction } from '../../../types/utils'
 import {
   UIComponentProps,
@@ -63,7 +63,7 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
       <ElementType {...rest} className={classes.root}>
         {childrenExist(children)
           ? children
-          : createSlot(content, {
+          : Slot.create(content, {
               styles: styles.content,
               variables: variables.content,
               render: renderContent,
@@ -73,6 +73,6 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
   }
 }
 
-ChatItem.create = createShorthandFactory(ChatItem, content => ({ content }))
+ChatItem.create = createShorthandFactory(ChatItem, 'content')
 
 export default ChatItem

src/components/Chat/ChatMessage.tsx

@@ -20,7 +20,7 @@ import { chatMessageBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 import Layout from '../Layout/Layout'
 import Text from '../Text/Text'
-import { createSlot } from '../Slot/Slot'
+import Slot from '../Slot/Slot'
 import {
   UIComponentProps,
   ChildrenComponentProps,
@@ -197,7 +197,7 @@ class ChatMessage extends UIComponent<Extendable<ChatMessageProps>, any> {
       render: renderTimestamp,
     })
 
-    const contentElement = createSlot(content, {
+    const contentElement = Slot.create(content, {
       styles: styles.content,
       variables: variables.content,
       render: renderContent,
@@ -225,6 +225,6 @@ class ChatMessage extends UIComponent<Extendable<ChatMessageProps>, any> {
   }
 }
 
-ChatMessage.create = createShorthandFactory(ChatMessage, content => ({ content }))
+ChatMessage.create = createShorthandFactory(ChatMessage, 'content')
 
 export default ChatMessage

src/components/Divider/Divider.tsx

@@ -66,7 +66,7 @@ class Divider extends UIComponent<Extendable<DividerProps>, any> {
   }
 }
 
-Divider.create = createShorthandFactory(Divider, content => ({ content }))
+Divider.create = createShorthandFactory(Divider, 'content')
 
 export default Divider
 

src/components/Form/FormField.tsx

@@ -4,8 +4,8 @@ import * as React from 'react'
 import { UIComponent, customPropTypes, childrenExist, createShorthandFactory } from '../../lib'
 import { Extendable, ShorthandValue, ShorthandRenderFunction } from '../../../types/utils'
 import Text from '../Text/Text'
-import { createSlot } from '../Slot/Slot'
 import Input from '../Input/Input'
+import Slot from '../Slot/Slot'
 import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
 import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes'
 
@@ -131,7 +131,7 @@ class FormField extends UIComponent<Extendable<FormFieldProps>, any> {
       render: renderMessage,
     })
 
-    const controlElement = createSlot(control || {}, {
+    const controlElement = Slot.create(control || {}, {
       defaultProps: { required, id, name, type, styles: styles.control },
       render: renderControl,
     })
@@ -158,6 +158,6 @@ class FormField extends UIComponent<Extendable<FormFieldProps>, any> {
   }
 }
 
-FormField.create = createShorthandFactory(FormField, label => ({ label }))
+FormField.create = createShorthandFactory(FormField, 'label')
 
 export default FormField

src/components/Header/HeaderDescription.tsx

@@ -48,6 +48,6 @@ class HeaderDescription extends UIComponent<Extendable<HeaderDescriptionProps>,
   }
 }
 
-HeaderDescription.create = createShorthandFactory(HeaderDescription, content => ({ content }))
+HeaderDescription.create = createShorthandFactory(HeaderDescription, 'content')
 
 export default HeaderDescription

src/components/Icon/Icon.tsx

@@ -113,6 +113,6 @@ class Icon extends UIComponent<Extendable<IconProps>, any> {
   }
 }
 
-Icon.create = createShorthandFactory(Icon, name => ({ name }))
+Icon.create = createShorthandFactory(Icon, 'name')
 
 export default Icon

src/components/Image/Image.tsx

@@ -61,6 +61,6 @@ class Image extends UIComponent<Extendable<ImageProps>, any> {
   }
 }
 
-Image.create = createShorthandFactory(Image, src => ({ src }))
+Image.create = createShorthandFactory(Image, 'src')
 
 export default Image

src/components/Input/Input.tsx

@@ -16,8 +16,8 @@ import {
   ComponentEventHandler,
 } from '../../../types/utils'
 import Icon from '../Icon/Icon'
-import { createHTMLInput, createSlot } from '../Slot/Slot'
 import Ref from '../Ref/Ref'
+import Slot from '../Slot/Slot'
 import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
 import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes'
 
@@ -136,7 +136,7 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
 
   static defaultProps = {
     type: 'text',
-    wrapper: 'div',
+    wrapper: {},
     iconPosition: 'end',
   }
 
@@ -153,16 +153,16 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
     const { value = '' } = this.state
     const [htmlInputProps, rest] = partitionHTMLProps(restProps)
 
-    return createSlot(wrapper, {
+    return Slot.create(wrapper, {
       defaultProps: {
-        as: ElementType,
         className: cx(Input.className, className),
         children: (
           <>
             <Ref innerRef={this.handleInputRef}>
-              {createHTMLInput(input || type, {
+              {Slot.create(input || type, {
                 defaultProps: {
                   ...htmlInputProps,
+                  as: 'input',
                   type,
                   value,
                   className: classes.input,
@@ -184,6 +184,9 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
         styles: styles.root,
         ...rest,
       },
+      overrideProps: {
+        as: (wrapper && (wrapper as any).as) || ElementType,
+      },
       render: renderWrapper,
     })
   }

src/components/ItemLayout/ItemLayout.tsx

@@ -202,7 +202,7 @@ class ItemLayout extends UIComponent<Extendable<ItemLayoutProps>, any> {
   }
 }
 
-ItemLayout.create = createShorthandFactory(ItemLayout, main => ({ main }))
+ItemLayout.create = createShorthandFactory(ItemLayout, 'main')
 
 export default ItemLayout
 

src/components/Label/Label.tsx

@@ -185,6 +185,6 @@ class Label extends UIComponent<Extendable<LabelProps>, any> {
   }
 }
 
-Label.create = createShorthandFactory(Label, content => ({ content }))
+Label.create = createShorthandFactory(Label, 'content')
 
 export default Label

src/components/List/ListItem.tsx

@@ -124,6 +124,6 @@ class ListItem extends UIComponent<Extendable<ListItemProps>, ListItemState> {
   }
 }
 
-ListItem.create = createShorthandFactory(ListItem, main => ({ main }))
+ListItem.create = createShorthandFactory(ListItem, 'main')
 
 export default ListItem

src/components/Menu/MenuItem.tsx

@@ -186,6 +186,6 @@ class MenuItem extends UIComponent<Extendable<MenuItemProps>, MenuItemState> {
   }
 }
 
-MenuItem.create = createShorthandFactory(MenuItem, content => ({ content }))
+MenuItem.create = createShorthandFactory(MenuItem, 'content')
 
 export default MenuItem

src/components/Popup/PopupContent.tsx

@@ -50,6 +50,6 @@ class PopupContent extends UIComponent<Extendable<PopupContentProps>, any> {
   }
 }
 
-PopupContent.create = createShorthandFactory(PopupContent, content => ({ content }))
+PopupContent.create = createShorthandFactory(PopupContent, 'content')
 
 export default PopupContent

src/components/RadioGroup/RadioGroupItem.tsx

@@ -204,6 +204,6 @@ class RadioGroupItem extends AutoControlledComponent<
   }
 }
 
-RadioGroupItem.create = createShorthandFactory(RadioGroupItem, () => ({}))
+RadioGroupItem.create = createShorthandFactory(RadioGroupItem)
 
 export default RadioGroupItem

src/components/Segment/Segment.tsx

@@ -4,7 +4,7 @@ import { UIComponent, childrenExist } from '../../lib'
 import { Extendable, ShorthandRenderFunction } from '../../../types/utils'
 import { UIComponentProps, ContentComponentProps } from '../../lib/commonPropInterfaces'
 import { commonUIComponentPropTypes, contentComponentPropsTypes } from '../../lib/commonPropTypes'
-import { createSlot } from '../Slot/Slot'
+import Slot from '../Slot/Slot'
 
 export interface SegmentProps extends UIComponentProps<SegmentProps, any>, ContentComponentProps {
   /** A segment can have its colors inverted for contrast. */
@@ -43,7 +43,7 @@ class Segment extends UIComponent<Extendable<SegmentProps>, any> {
 
     return (
       <ElementType {...rest} className={classes.root}>
-        {childrenExist(children) ? children : createSlot(content, { render: renderContent })}
+        {childrenExist(children) ? children : Slot.create(content, { render: renderContent })}
       </ElementType>
     )
   }

src/components/Slot/Slot.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { childrenExist, createShorthand } from '../../lib'
+import { childrenExist, createShorthandFactory } from '../../lib'
 import {
   UIComponentProps,
   ContentComponentProps,
@@ -10,8 +10,7 @@ import {
   contentComponentPropsTypes,
   childrenComponentPropTypes,
 } from '../../lib/commonPropTypes'
-import createComponent from '../../lib/createComponent'
-import { MapValueToProps, Props } from 'types/utils'
+import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
 
 export interface SlotProps
   extends UIComponentProps<SlotProps, any>,
@@ -21,7 +20,9 @@ export interface SlotProps
 /**
  * A Slot is a basic component (no default styles)
  */
-const Slot = createComponent<SlotProps>({
+const Slot: CreateComponentReturnType<SlotProps> & {
+  create?: Function
+} = createComponent<SlotProps>({
   displayName: 'Slot',
 
   className: 'ui-slot',
@@ -44,15 +45,6 @@ const Slot = createComponent<SlotProps>({
   },
 })
 
-const createSlotFactory = (as: any, mapValueToProps: MapValueToProps) => (
-  val,
-  options: Props = {},
-) => {
-  options.defaultProps = { as, ...options.defaultProps }
-  return createShorthand(Slot, mapValueToProps, val, options)
-}
-
-export const createSlot = createSlotFactory(Slot.defaultProps.as, content => ({ content }))
-export const createHTMLInput = createSlotFactory('input', type => ({ type }))
+Slot.create = createShorthandFactory(Slot)
 
 export default Slot

src/components/Status/Status.tsx

@@ -73,7 +73,7 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
   }
 }
 
-Status.create = createShorthandFactory(Status, state => ({ state }))
+Status.create = createShorthandFactory(Status, 'state')
 
 export default Status
 export type StatusPropsWithDefaults = StatusProps & typeof Status.defaultProps

src/components/Text/Text.tsx

@@ -93,6 +93,6 @@ class Text extends UIComponent<Extendable<TextProps>, any> {
   }
 }
 
-Text.create = createShorthandFactory(Text, content => ({ content }))
+Text.create = createShorthandFactory(Text, 'content')
 
 export default Text