@instructure/ui-simple-select 8.8.1-snapshot.3 → 8.8.1-snapshot.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "8.8.1-snapshot.3+d5d6d4cd8",
+  "version": "8.8.1-snapshot.63+ec21bbc1d",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,22 +25,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-form-field": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-position": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-prop-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-select": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-testable": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/uid": "8.8.1-snapshot.3+d5d6d4cd8",
+    "@instructure/console": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-form-field": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-position": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-prop-types": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-react-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-select": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-testable": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/uid": "8.8.1-snapshot.63+ec21bbc1d",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-color-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-icons": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.3+d5d6d4cd8"
+    "@instructure/ui-babel-preset": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-color-utils": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-icons": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-test-locator": "8.8.1-snapshot.63+ec21bbc1d",
+    "@instructure/ui-test-utils": "8.8.1-snapshot.63+ec21bbc1d"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "d5d6d4cd8f300e8635c69248f5d794c002269e08"
+  "gitHead": "ec21bbc1dcdd8567b11f2c15f5fadd16709d7e3d"
 }

package/src/SimpleSelect/Group/index.tsx

@@ -23,11 +23,9 @@
  */
 
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
-import { Option } from '../Option'
-import { SimpleSelectGroupProps } from './types'
+import type { SimpleSelectGroupProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -37,18 +35,8 @@ id: SimpleSelect.Group
 **/
 class Group extends Component<SimpleSelectGroupProps> {
   static readonly componentId = 'SimpleSelect.Group'
-
-  static propTypes = {
-    /**
-     * The label associated with the group options.
-     */
-    renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-      .isRequired,
-    /**
-     * Children of type `<SimpleSelect.Option />` that will be considered part of the group.
-     */
-    children: ChildrenPropTypes.oneOf([Option])
-  }
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     children: null

package/src/SimpleSelect/{types.ts → Group/props.ts}

@@ -21,41 +21,37 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React from 'react'
-import type { FormMessage } from '@instructure/ui-form-field'
-import type {
-  PlacementPropValues,
-  PositionConstraint,
-  PositionMountNode
-} from '@instructure/ui-position'
-
-export type SimpleSelectProps = {
+import PropTypes from 'prop-types'
+
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
+
+import { Option } from '../Option'
+
+import type { PropValidators } from '@instructure/shared-types'
+
+type SimpleSelectGroupOwnProps = {
   renderLabel: React.ReactNode | ((...args: any[]) => any)
-  value?: string | number // TODO: it was using the "controllable" util, in the TS migration mimic that behaviour
-  defaultValue?: string
-  id?: string
-  size?: 'small' | 'medium' | 'large'
-  assistiveText?: string
-  placeholder?: string
-  interaction?: 'enabled' | 'disabled' | 'readonly'
-  isRequired?: boolean
-  isInline?: boolean
-  width?: string
-  optionsMaxWidth?: string
-  visibleOptionsCount?: number
-  messages?: FormMessage[]
-  placement?: PlacementPropValues
-  constrain?: PositionConstraint
-  mountNode?: PositionMountNode
-  onChange?: (...args: any[]) => any
-  onFocus?: (...args: any[]) => any
-  onBlur?: (...args: any[]) => any
-  onShowOptions?: (...args: any[]) => any
-  onHideOptions?: (...args: any[]) => any
-  inputRef?: (...args: any[]) => any
-  listRef?: (...args: any[]) => any
-  renderEmptyOption?: React.ReactNode | ((...args: any[]) => any)
-  renderBeforeInput?: React.ReactNode | ((...args: any[]) => any)
-  renderAfterInput?: React.ReactNode | ((...args: any[]) => any)
+  children?: React.ReactNode
 }
+type PropKeys = keyof SimpleSelectGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SimpleSelectGroupProps = SimpleSelectGroupOwnProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * The label associated with the group options.
+   */
+  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /**
+   * Children of type `<SimpleSelect.Option />` that will be considered part of the group.
+   */
+  children: ChildrenPropTypes.oneOf([Option])
+}
+
+const allowedProps: AllowedPropKeys = ['renderLabel', 'children']
+
+export type { SimpleSelectGroupProps }
+export { propTypes, allowedProps }

package/src/SimpleSelect/Option/index.tsx

@@ -23,8 +23,8 @@
  */
 
 import { Component } from 'react'
-import PropTypes from 'prop-types'
-import { SimpleSelectOptionProps } from './types'
+import type { SimpleSelectOptionProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -35,37 +35,10 @@ id: SimpleSelect.Option
 class Option extends Component<SimpleSelectOptionProps> {
   static readonly componentId = 'SimpleSelect.Option'
 
-  static propTypes = {
-    /**
-     * The id for the option.
-     */
-    id: PropTypes.string.isRequired,
-    /**
-     * The value for the option.
-     */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    /**
-     * Whether or not this option is disabled.
-     */
-    isDisabled: PropTypes.bool,
-    /**
-     * Content to display before the option label, such as an icon.
-     */
-    renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    /**
-     * Content to display after the option label, such as an icon.
-     */
-    renderAfterLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    /**
-     * Content to display as the option label.
-     */
-    children: PropTypes.string
-  }
-
+  static allowedProps = allowedProps
+  static propTypes = propTypes
   static defaultProps = {
     isDisabled: false,
-    renderBeforeLabel: undefined,
-    renderAfterLabel: undefined,
     children: null
   }
 

package/src/SimpleSelect/Option/props.ts

@@ -0,0 +1,80 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import type { PropValidators } from '@instructure/shared-types'
+
+type SimpleSelectOptionOwnProps = {
+  id: string
+  value: string | number
+  isDisabled?: boolean
+  renderBeforeLabel?: React.ReactNode | ((...args: any[]) => any)
+  renderAfterLabel?: React.ReactNode | ((...args: any[]) => any)
+  children?: React.ReactNode
+}
+type PropKeys = keyof SimpleSelectOptionOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SimpleSelectOptionProps = SimpleSelectOptionOwnProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * The id for the option.
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * The value for the option.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  /**
+   * Whether or not this option is disabled.
+   */
+  isDisabled: PropTypes.bool,
+  /**
+   * Content to display before the option label, such as an icon.
+   */
+  renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /**
+   * Content to display after the option label, such as an icon.
+   */
+  renderAfterLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /**
+   * Content to display as the option label.
+   */
+  children: PropTypes.string
+}
+
+const allowedProps: AllowedPropKeys = [
+  'id',
+  'value',
+  'isDisabled',
+  'renderBeforeLabel',
+  'renderAfterLabel',
+  'children'
+]
+
+export type { SimpleSelectOptionProps }
+export { propTypes, allowedProps }

package/src/SimpleSelect/index.tsx

@@ -23,11 +23,7 @@
  */
 
 import React, { Component, Children } from 'react'
-import PropTypes from 'prop-types'
 
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
-import { FormPropTypes } from '@instructure/ui-form-field'
-import { PositionPropTypes } from '@instructure/ui-position'
 import { testable } from '@instructure/ui-testable'
 import {
   matchComponentTypes,
@@ -40,7 +36,8 @@ import { Select } from '@instructure/ui-select'
 
 import { Option } from './Option'
 import { Group } from './Group'
-import { SimpleSelectProps } from './types'
+import type { SimpleSelectProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -54,158 +51,17 @@ class SimpleSelect extends Component<SimpleSelectProps> {
 
   static Option = Option
   static Group = Group
-  static propTypes = {
-    /**
-     * The form field label.
-     */
-    renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-      .isRequired,
-    /**
-     * The value corresponding to the value of the selected option. If defined,
-     * the component will act controlled and will not manage its own state.
-     */
-    // TODO: it was using the "controllable" util, in the TS migration mimic that behaviour
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /**
-     * The value of the option to select by default, when uncontrolled.
-     */
-    defaultValue: PropTypes.string,
-    /**
-     * The id of the text input. One is generated if not supplied.
-     */
-    id: PropTypes.string,
-    /**
-     * The size of the text input.
-     */
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    /**
-     * Additional helpful text to provide to screen readers about the operation
-     * of the component. Provided via aria-describedby.
-     */
-    assistiveText: PropTypes.string,
-    /**
-     * Html placeholder text to display when the input has no value. This should
-     * be hint text, not a label replacement.
-     */
-    placeholder: PropTypes.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: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-    /**
-     * Whether or not the text input is required.
-     */
-    isRequired: PropTypes.bool,
-    /**
-     * Whether the input is rendered inline with other elements or if it
-     * is rendered as a block level element.
-     */
-    isInline: PropTypes.bool,
-    /**
-     * The width of the text input.
-     */
-    width: PropTypes.string,
-    /**
-     * 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: PropTypes.string,
-    /**
-     * The number of options that should be visible before having to scroll.
-     */
-    visibleOptionsCount: PropTypes.number,
-    /**
-     * Displays messages and validation for the input. It should be an object
-     * with the following shape:
-     * `{
-     *   text: PropTypes.string,
-     *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-     * }`
-     */
-    messages: PropTypes.arrayOf(FormPropTypes.message),
-    /**
-     * The placement of the options list.
-     */
-    placement: PositionPropTypes.placement,
-    /**
-     * The parent in which to constrain the placement.
-     */
-    constrain: PositionPropTypes.constrain,
-    /**
-     * An element or a function returning an element to use mount the options
-     * list to in the DOM (defaults to `document.body`)
-     */
-    mountNode: PositionPropTypes.mountNode,
-    /**
-     * Callback fired when a new option is selected.
-     * @param {Object} event - the event object
-     * @param {Object} data - additional data
-     * @param data.value - the value of selected option
-     * @param data.id - the id of the selected option
-     */
-    onChange: PropTypes.func,
-    /**
-     * Callback fired when text input receives focus.
-     */
-    onFocus: PropTypes.func,
-    /**
-     * Callback fired when text input loses focus.
-     */
-    onBlur: PropTypes.func,
-    /**
-     * Callback fired when the options list is shown.
-     */
-    onShowOptions: PropTypes.func,
-    /**
-     * Callback fired when the options list is hidden.
-     */
-    onHideOptions: 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 in the list when no options are available.
-     */
-    renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    /**
-     * Content to display before the text input. This will commonly be an icon.
-     */
-    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 `<SimpleSelect.Option />` or `<SimpleSelect.Group />`.
-     */
-    children: ChildrenPropTypes.oneOf([Group, Option])
-  }
+
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
-    value: undefined,
-    defaultValue: undefined,
-    id: undefined,
     size: 'medium',
-    assistiveText: undefined,
     placeholder: null,
-    interaction: undefined,
     isRequired: false,
     isInline: false,
-    width: undefined,
-    optionsMaxWidth: undefined,
     visibleOptionsCount: 8,
-    messages: undefined,
     placement: 'bottom stretch',
-    mountNode: undefined,
     constrain: 'window',
     // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
     onChange: (event, data) => {},