@instructure/ui-select 8.13.1-snapshot.14 → 8.13.1-snapshot.26

package/src/Select/props.ts

@@ -46,190 +46,249 @@ import type {
 } from '@instructure/ui-position'
 
 type SelectOwnProps = {
-  renderLabel: React.ReactNode | ((...args: any[]) => any)
-  inputValue?: string
-  isShowingOptions?: boolean
+  /**
+   * The id of the text input. One is generated if not supplied.
+   */
   id?: string
-  size?: 'small' | 'medium' | 'large'
+
+  /**
+   * Additional helpful text to provide to screen readers about the operation
+   * of the component.
+   */
   assistiveText?: string
-  placeholder?: string
+
+  /**
+   * Specifies if interaction with the input is enabled, disabled, or readonly.
+   * When "disabled", the input changes visibly to indicate that it cannot
+   * receive user interactions. When "readonly" the input still cannot receive
+   * user interactions but it keeps the same styles as if it were enabled.
+   */
   interaction?: 'enabled' | 'disabled' | 'readonly'
-  isRequired?: boolean
-  isInline?: boolean
-  width?: string
-  htmlSize?: string | number
-  optionsMaxWidth?: string
-  visibleOptionsCount?: number
-  messages?: FormMessage[]
-  placement?: PlacementPropValues
-  constrain?: PositionConstraint
-  mountNode?: PositionMountNode
-  onFocus?: (...args: any[]) => any
-  onBlur?: (...args: any[]) => any
-  onInputChange?: (...args: any[]) => any
-  onRequestShowOptions?: (...args: any[]) => any
-  onRequestHideOptions?: (...args: any[]) => any
-  onRequestHighlightOption?: (...args: any[]) => any
-  onRequestSelectOption?: (...args: any[]) => any
-  inputRef?: (...args: any[]) => any
-  listRef?: (...args: any[]) => any
-  renderBeforeInput?: React.ReactNode | ((...args: any[]) => any)
-  renderAfterInput?: React.ReactNode | ((...args: any[]) => any)
-  shouldNotWrap?: boolean
-  children?: React.ReactNode
-}
 
-type PropKeys = keyof SelectOwnProps
+  /**
+   * Whether the input is rendered inline with other elements or if it
+   * is rendered as a block level element.
+   */
+  isInline?: boolean
 
-type AllowedPropKeys = Readonly<Array<PropKeys>>
+  /**
+   * The max width the options list can be before option text wraps. If not
+   * set, the list will only display as wide as the text input.
+   */
+  optionsMaxWidth?: string
 
-type SelectProps = SelectOwnProps &
-  WithStyleProps<SelectTheme, SelectStyle> &
-  OtherHTMLAttributes<SelectOwnProps, InputHTMLAttributes<SelectOwnProps>>
+  /**
+   * The number of options that should be visible before having to scroll.
+   */
+  visibleOptionsCount?: number
 
-type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>
+  // Passed directly to TextInput as `value`
+  /**
+   * The value to display in the text input.
+   */
+  inputValue?: string
 
-const propTypes: PropValidators<PropKeys> = {
+  // Passed directly to TextInput as `onChange`
   /**
-   * The form field label.
+   * Callback fired when text input value changes.
    */
-  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  onInputChange?: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    value: string
+  ) => void
+
   /**
-   * The value to display in the text input.
+   * A ref to the html `ul` element.
    */
-  inputValue: PropTypes.string,
+  listRef?: (listElement: HTMLUListElement | null) => void
+
   /**
-   * Whether or not to show the options list.
+   * Children of type `<Select.Option />` or `<Select.Group />`.
    */
-  isShowingOptions: PropTypes.bool,
+  children?: React.ReactNode // TODO: ChildrenPropTypes.oneOf([Group, Option])
+} & PropsFromSelectable &
+  PropsFromTextInput &
+  PropsFromPopover
+
+// These props are directly passed to Selectable
+// TODO: import these from Selectable once TS types can be imported
+type PropsFromSelectable = {
   /**
-   * The id of the text input. One is generated if not supplied.
+   * Whether or not to show the options list.
    */
-  id: PropTypes.string,
+  isShowingOptions?: boolean
+
   /**
-   * The size of the text input.
+   * Callback fired requesting that the options list be shown.
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  onRequestShowOptions?: (event: React.SyntheticEvent) => void
+
   /**
-   * Additional helpful text to provide to screen readers about the operation
-   * of the component.
+   * Callback fired requesting that the options list be hidden.
    */
-  assistiveText: PropTypes.string,
+  onRequestHideOptions?: (event: React.SyntheticEvent) => void
+
   /**
-   * Html placeholder text to display when the input has no value. This should
-   * be hint text, not a label replacement.
+   * Callback fired requesting a particular option be highlighted.
    */
-  placeholder: PropTypes.string,
+  onRequestHighlightOption?: (
+    event: React.SyntheticEvent,
+    data: { id?: string; direction?: 1 | -1 }
+  ) => void
+
   /**
-   * Specifies if interaction with the input is enabled, disabled, or readonly.
-   * When "disabled", the input changes visibly to indicate that it cannot
-   * receive user interactions. When "readonly" the input still cannot receive
-   * user interactions but it keeps the same styles as if it were enabled.
+   * Callback fired requesting a particular option be selected.
    */
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  onRequestSelectOption?: (
+    event: React.SyntheticEvent,
+    data: { id?: string }
+  ) => void
+}
+
+// These props are directly passed to TextInput
+// TODO: import these from TextInput once TS types can be imported
+type PropsFromTextInput = {
   /**
-   * Whether or not the text input is required.
+   * The form field label.
    */
-  isRequired: PropTypes.bool,
+  renderLabel: React.ReactNode | (() => React.ReactNode)
+
   /**
-   * Whether the input is rendered inline with other elements or if it
-   * is rendered as a block level element.
+   * The size of the text input.
    */
-  isInline: PropTypes.bool,
+  size?: 'small' | 'medium' | 'large'
+
   /**
-   * The width of the text input.
+   * Html placeholder text to display when the input has no value. This should
+   * be hint text, not a label replacement.
    */
-  width: PropTypes.string,
+  placeholder?: string
+
   /**
-   * The width of the text input, in characters, if a width is not explicitly
-   * provided via the `width` prop. Only applicable if `isInline={true}`.
+   * Whether or not the text input is required.
    */
-  htmlSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  isRequired?: boolean
+
   /**
-   * The max width the options list can be before option text wraps. If not
-   * set, the list will only display as wide as the text input.
+   * The width of the text input.
    */
-  optionsMaxWidth: PropTypes.string,
+  width?: string
+
   /**
-   * The number of options that should be visible before having to scroll.
+   * The width of the input (integer value 0 or higher), if a width is not explicitly
+   * provided via the `width` prop.
+   *
+   * Only applicable if `isInline={true}`.
+   *
+   * For more see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size
    */
-  visibleOptionsCount: PropTypes.number,
+  htmlSize?: number
+
   /**
    * Displays messages and validation for the input. It should be an object
    * with the following shape:
    * `{
-   *   text: PropTypes.node,
-   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+   *   text: React.ReactNode,
+   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
    * }`
    */
-  messages: PropTypes.arrayOf(FormPropTypes.message),
+  messages?: FormMessage[]
+
   /**
-   * The placement of the options list.
+   * Callback fired when text input receives focus.
    */
-  placement: PositionPropTypes.placement,
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void
+
   /**
-   * The parent in which to constrain the placement.
+   * Callback fired when text input loses focus.
    */
-  constrain: PositionPropTypes.constrain,
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
+
   /**
-   * An element or a function returning an element to use mount the options
-   * list to in the DOM (defaults to `document.body`)
+   * A ref to the html `input` element.
    */
-  mountNode: PositionPropTypes.mountNode,
+  inputRef?: (inputElement: HTMLInputElement | null) => void
+
   /**
-   * Callback fired when text input receives focus.
+   * Content to display before the text input. This will commonly be an icon or
+   * tags to show multiple selections.
    */
-  onFocus: PropTypes.func,
+  renderBeforeInput?: React.ReactNode | (() => React.ReactNode)
+
   /**
-   * Callback fired when text input loses focus.
+   * Content to display after the text input. This content will replace the
+   * default arrow icons.
    */
-  onBlur: PropTypes.func,
+  renderAfterInput?: React.ReactNode | (() => React.ReactNode)
+
   /**
-   * Callback fired when text input value changes.
+   * Prevents the default behavior of wrapping the input and rendered content
+   * when available space is exceeded.
    */
-  onInputChange: PropTypes.func,
+  shouldNotWrap?: boolean
+}
+
+// These props are directly passed to Popover
+// TODO: import these from Popover once TS types can be imported
+type PropsFromPopover = {
   /**
-   * Callback fired requesting that the options list be shown.
+   * The placement of the options list.
    */
-  onRequestShowOptions: PropTypes.func,
+  placement?: PlacementPropValues
+
   /**
-   * Callback fired requesting that the options list be hidden.
+   * The parent in which to constrain the placement.
    */
-  onRequestHideOptions: PropTypes.func,
+  constrain?: PositionConstraint
+
   /**
-   * Callback fired requesting a particular option be highlighted.
+   * An element or a function returning an element to use mount the options
+   * list to in the DOM (defaults to `document.body`)
    */
+  mountNode?: PositionMountNode
+}
+
+type PropKeys = keyof SelectOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SelectProps = SelectOwnProps &
+  WithStyleProps<SelectTheme, SelectStyle> &
+  OtherHTMLAttributes<SelectOwnProps, InputHTMLAttributes<SelectOwnProps>>
+
+type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>
+
+const propTypes: PropValidators<PropKeys> = {
+  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  inputValue: PropTypes.string,
+  id: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  assistiveText: PropTypes.string,
+  placeholder: PropTypes.string,
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  isRequired: PropTypes.bool,
+  isInline: PropTypes.bool,
+  width: PropTypes.string,
+  htmlSize: PropTypes.number,
+  optionsMaxWidth: PropTypes.string,
+  visibleOptionsCount: PropTypes.number,
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  placement: PositionPropTypes.placement,
+  constrain: PositionPropTypes.constrain,
+  mountNode: PositionPropTypes.mountNode,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onInputChange: PropTypes.func,
+  isShowingOptions: PropTypes.bool,
+  onRequestShowOptions: PropTypes.func,
+  onRequestHideOptions: PropTypes.func,
   onRequestHighlightOption: PropTypes.func,
-  /**
-   * Callback fired requesting a particular option be selected.
-   */
   onRequestSelectOption: PropTypes.func,
-  /**
-   * A ref to the html `input` element.
-   */
   inputRef: PropTypes.func,
-  /**
-   * A ref to the html `ul` element.
-   */
   listRef: PropTypes.func,
-  /**
-   * Content to display before the text input. This will commonly be an icon or
-   * tags to show multiple selections.
-   */
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * Content to display after the text input. This content will replace the
-   * default arrow icons.
-   */
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * Children of type `<Select.Option />` or `<Select.Group />`.
-   */
   children: ChildrenPropTypes.oneOf([Group, Option]),
-  /**
-   * Prevents the default behavior of wrapping the input and rendered content
-   * when available space is exceeded.
-   */
   shouldNotWrap: PropTypes.bool
 }
 

package/tsconfig.build.json

@@ -1,7 +1,32 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "./types"
+    "outDir": "./types",
+    "rootDir": "./src",
+    "composite": true
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-color-utils/tsconfig.build.json" },
+    { "path": "../ui-test-locator/tsconfig.build.json" },
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" },
+    { "path": "../emotion/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-dom-utils/tsconfig.build.json" },
+    { "path": "../ui-form-field/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-options/tsconfig.build.json" },
+    { "path": "../ui-popover/tsconfig.build.json" },
+    { "path": "../ui-position/tsconfig.build.json" },
+    { "path": "../ui-prop-types/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-selectable/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
+    { "path": "../ui-text-input/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" },
+    { "path": "../ui-view/tsconfig.build.json" },
+    { "path": "../uid/tsconfig.build.json" }
+  ]
 }