feat(ui-options,ui-select,ui-simple-select,ui-time-select): rework Select, SimpleSelect and TimeSelect

packages/ui-color-picker/src/ColorPicker/v2/index.tsx

@@ -710,7 +710,11 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           display="inline-block"
           width={width}
           placeholder={placeholderText}
-          themeOverride={{ padding: '' }}
+          themeOverride={{
+            paddingHorizontalSm: '',
+            paddingHorizontalMd: '',
+            paddingHorizontalLg: ''
+          }}
           renderAfterInput={this.renderAfterInput()}
           renderBeforeInput={this.renderBeforeInput()}
           inputContainerRef={this.handleInputContainerRef}

packages/ui-options/src/Options/v2/Item/styles.ts

@@ -71,7 +71,7 @@ const generateStyle = (
     },
     'selected-highlighted': {
       background: componentTheme.selectedHighlightedBackground,
-      color: componentTheme.highlightedLabelColor
+      color: componentTheme.selectedLabelColor
     },
     default: {
       transition: 'background 200ms'

packages/ui-popover/src/Popover/v2/index.tsx

@@ -178,6 +178,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
   }
 
   componentDidMount() {
+    this.props.makeStyles?.()
     if (this.isTooltip) {
       // if popover is being used as a tooltip with no focusable content
       // manage its FocusRegion internally rather than registering it with
@@ -213,6 +214,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
   }
 
   componentDidUpdate(prevProps: PopoverProps, prevState: PopoverState) {
+    this.props.makeStyles?.()
     if (this._focusRegion && this.isTooltip) {
       // if focus region exists, popover is acting as a tooltip
       // so we manually activate and deactivate the region when showing/hiding

packages/ui-select/package.json

@@ -77,18 +77,18 @@
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     },
     "./latest": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     }
   }
 }

packages/ui-select/src/Select/v2/Group/index.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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 { Component } from 'react'
+import type { SelectGroupProps } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+parent: Select
+id: Select.Group
+---
+@module Group
+**/
+class Group extends Component<SelectGroupProps> {
+  static readonly componentId = 'Select.Group'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {}
+
+  /* istanbul ignore next */
+  render() {
+    // this component is only used for prop validation. Select.Group children
+    // are parsed in Select and rendered as Options components
+    return null
+  }
+}
+
+export default Group
+export { Group }

packages/ui-select/src/Select/v2/Group/props.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
+
+type SelectGroupOwnProps = {
+  /**
+   * The label associated with the group options.
+   */
+  renderLabel: Renderable
+  /**
+   * Children of type `<SimpleSelect.Option />` that will be considered part of the group.
+   */
+  children?: React.ReactNode // TODO: ChildrenPropTypes.oneOf([Option])
+}
+
+type PropKeys = keyof SelectGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SelectGroupProps = SelectGroupOwnProps &
+  OtherHTMLAttributes<SelectGroupOwnProps>
+const allowedProps: AllowedPropKeys = ['renderLabel', 'children']
+
+export type { SelectGroupProps }
+export { allowedProps }

packages/ui-select/src/Select/v2/Option/index.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 { Component } from 'react'
+import type { SelectOptionProps } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+parent: Select
+id: Select.Option
+---
+@module Option
+**/
+class Option extends Component<SelectOptionProps> {
+  static readonly componentId = 'Select.Option'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    isHighlighted: false,
+    isSelected: false,
+    isDisabled: false
+  }
+
+  /* istanbul ignore next */
+  render() {
+    // this component is only used for prop validation. Select.Option children
+    // are parsed in Select and rendered as Options.Item components
+    return null
+  }
+}
+
+export default Option
+export { Option }

packages/ui-select/src/Select/v2/Option/props.ts

@@ -0,0 +1,82 @@
+/*
+ * 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 type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
+
+type OptionProps = {
+  /**
+   * The id for the option. **Must be globally unique**, it will be translated
+   * to an `id` prop in the DOM.
+   */
+  id: string
+  /**
+   * Whether or not this option is highlighted.
+   */
+  isHighlighted?: boolean
+  /**
+   * Whether or not this option is selected.
+   */
+  isSelected?: boolean
+  /**
+   * Whether or not this option is disabled.
+   */
+  isDisabled?: boolean
+  /**
+   * Content to display as the option label.
+   */
+  children?: React.ReactNode
+}
+
+type RenderSelectOptionLabel = Renderable<OptionProps>
+
+type SelectOptionOwnProps = OptionProps & {
+  /**
+   * Content to display before the option label, such as an icon.
+   */
+  renderBeforeLabel?: RenderSelectOptionLabel
+  /**
+   * Content to display after the option label, such as an icon.
+   */
+  renderAfterLabel?: RenderSelectOptionLabel
+}
+
+type PropKeys = keyof SelectOptionOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SelectOptionProps = SelectOptionOwnProps &
+  OtherHTMLAttributes<SelectOptionOwnProps>
+const allowedProps: AllowedPropKeys = [
+  'id',
+  'isHighlighted',
+  'isSelected',
+  'isDisabled',
+  'renderBeforeLabel',
+  'renderAfterLabel',
+  'children'
+]
+
+export type { SelectOptionProps, RenderSelectOptionLabel }
+export { allowedProps }