@instructure/ui-options 11.6.0 → 11.6.1-snapshot-129

package/src/Options/v2/Separator/index.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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 { getElementType, omitProps } from '@instructure/ui-react-utils'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyles from './styles'
+import type { OptionsSeparatorProps } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+parent: Options
+id: Options.Separator
+---
+@module Separator
+**/
+@withStyle(generateStyles)
+class Separator extends Component<OptionsSeparatorProps> {
+  static readonly componentId = 'Options.Separator'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    as: 'span'
+  } as const
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const { as, styles, ...rest } = this.props
+
+    const ElementType = getElementType(Separator, this.props, () => as!)
+
+    return (
+      <ElementType role="none">
+        <div
+          // we need to omit the withStyle props
+          {...omitProps(rest, ['styles', 'makeStyles', 'themeOverride'])}
+          css={styles?.separator}
+          role="presentation"
+        />
+      </ElementType>
+    )
+  }
+}
+
+export default Separator
+export { Separator }

package/src/Options/v2/Separator/props.ts

@@ -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 type {
+  AsElementType,
+  OptionsSeparatorTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import { AllHTMLAttributes } from 'react'
+
+type OptionsSeparatorOwnProps = {
+  /**
+   * Element type to render as
+   */
+  as?: AsElementType
+}
+
+type PropKeys = keyof OptionsSeparatorOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type OptionsSeparatorProps = OptionsSeparatorOwnProps &
+  WithStyleProps<OptionsSeparatorTheme, OptionsSeparatorStyle> &
+  OtherHTMLAttributes<OptionsSeparatorOwnProps, AllHTMLAttributes<any>>
+
+type OptionsSeparatorStyle = ComponentStyle<'separator'>
+const allowedProps: AllowedPropKeys = ['as']
+
+export type { OptionsSeparatorProps, OptionsSeparatorStyle }
+export { allowedProps }

package/src/Options/v2/Separator/styles.ts

@@ -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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OptionsSeparatorStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['OptionsSeparator']
+): OptionsSeparatorStyle => {
+  return {
+    separator: {
+      label: 'separator',
+      height: componentTheme.height,
+      margin: `${componentTheme.marginVertical} ${componentTheme.marginHorizontal}`,
+      overflow: 'hidden',
+      background: componentTheme.background
+    }
+  }
+}
+
+export default generateStyle

package/src/Options/v2/Separator/theme.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 type { Theme } from '@instructure/ui-themes'
+import { OptionsSeparatorTheme } from '@instructure/shared-types'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (theme: Theme): OptionsSeparatorTheme => {
+  const { borders, colors, spacing } = theme
+
+  const componentVariables: OptionsSeparatorTheme = {
+    background: colors?.contrasts?.grey3045,
+    height: borders?.widthSmall,
+    margin: `0 ${spacing?.small}`
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export { generateComponentTheme as optionsSeparatorThemeGenerator }
+export default generateComponentTheme

package/src/Options/v2/index.tsx

@@ -0,0 +1,188 @@
+/*
+ * 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 { ComponentElement, Component, Children } from 'react'
+
+import {
+  omitProps,
+  matchComponentTypes,
+  callRenderProp,
+  safeCloneElement,
+  withDeterministicId
+} from '@instructure/ui-react-utils'
+
+import { View } from '@instructure/ui-view/latest'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyles from './styles'
+
+import { Item } from './Item'
+import type { OptionsItemProps } from './Item/props'
+import { Separator } from './Separator'
+import type { OptionsSeparatorProps } from './Separator/props'
+
+import type { OptionsProps } from './props'
+import { allowedProps } from './props'
+import { isAndroidOrIOS } from '@instructure/ui-utils'
+
+type ItemChild = ComponentElement<OptionsItemProps, Item>
+type SeparatorChild = ComponentElement<OptionsSeparatorProps, Separator>
+type OptionsChild = ComponentElement<OptionsProps, Options>
+type OptionsChildren = (ItemChild | SeparatorChild | OptionsChild)[]
+
+/**
+---
+category: components/utilities
+---
+**/
+@withDeterministicId()
+@withStyle(generateStyles)
+class Options extends Component<OptionsProps> {
+  static readonly componentId = 'Options'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    as: 'span',
+    role: 'list',
+    elementRef: () => {},
+    renderLabel: null,
+    children: null
+  }
+
+  static Item = Item
+  static Separator = Separator
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+  _labelId = this.props.deterministicId!('Options-label')
+
+  get childAs() {
+    const { as } = this.props
+    if (as === 'ul' || as === 'ol') {
+      return 'li'
+    }
+    return undefined
+  }
+
+  renderLabel() {
+    const { renderLabel, styles } = this.props
+    return (
+      <span
+        id={this._labelId}
+        role="presentation"
+        // because TalkBack and iOS VoiceOver don't announce sub-menu labels, aria-hidden needs to be false to achive that
+        aria-hidden={isAndroidOrIOS() ? 'false' : 'true'}
+        css={styles?.label}
+      >
+        {callRenderProp(renderLabel)}
+      </span>
+    )
+  }
+
+  renderSubList(subOptions: OptionsChild) {
+    const { styles } = this.props
+    return (
+      <Item as={this.childAs} role="presentation" css={styles?.label}>
+        {subOptions}
+      </Item>
+    )
+  }
+
+  renderChildren() {
+    const { children } = this.props
+
+    return Children.map(children as OptionsChildren, (child) => {
+      if (matchComponentTypes<OptionsChild>(child, ['Options'])) {
+        return this.renderSubList(child)
+      }
+      if (matchComponentTypes(child, ['Item', 'Separator'])) {
+        return safeCloneElement(child, { as: this.childAs || child.props.as })
+      }
+
+      return undefined
+    })
+  }
+
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId
+    }
+
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby']
+    }
+
+    return undefined
+  }
+
+  render() {
+    const passthroughProps = View.omitViewProps(
+      omitProps(this.props, Options.allowedProps),
+      Options
+    )
+
+    const { as, role, renderLabel, elementRef, styles } = this.props
+
+    return (
+      <div
+        css={styles?.options}
+        role="presentation"
+        ref={this.handleRef}
+        data-cid="Options"
+      >
+        {renderLabel && this.renderLabel()}
+        <View
+          {...passthroughProps}
+          elementRef={elementRef}
+          css={styles?.list}
+          as={as}
+          role={role}
+          display="block"
+          margin="none"
+          padding="none"
+          background="primary"
+          aria-labelledby={this.ariaLabelledby}
+        >
+          {this.renderChildren()}
+        </View>
+      </div>
+    )
+  }
+}
+
+export default Options
+export { Options }

package/src/Options/v2/props.ts

@@ -0,0 +1,76 @@
+/*
+ * 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 {
+  AsElementType,
+  OptionsTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import { Renderable } from '@instructure/shared-types'
+
+type OptionsOwnProps = {
+  /**
+   * Element type to render as
+   */
+  as?: AsElementType
+  /**
+   * The aria role of the element
+   */
+  role?: string
+  /**
+   * The the actual list element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Content to render as a label. Mostly for when the component is nested
+   */
+  renderLabel?: Renderable
+
+  //TODO children has to be typed better
+  //e.g.: ChildrenPropTypes.oneOf(['Options', 'Item', 'Separator']))
+  children?: React.ReactNode
+}
+
+type PropKeys = keyof OptionsOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type OptionsProps = OptionsOwnProps &
+  WithStyleProps<OptionsTheme, OptionsStyle> &
+  OtherHTMLAttributes<OptionsOwnProps> &
+  WithDeterministicIdProps
+
+type OptionsStyle = ComponentStyle<'options' | 'list' | 'label'>
+const allowedProps: AllowedPropKeys = [
+  'as',
+  'role',
+  'elementRef',
+  'renderLabel',
+  'children'
+]
+
+export type { OptionsProps, OptionsStyle }
+export { allowedProps }

package/src/Options/v2/styles.ts

@@ -0,0 +1,63 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OptionsStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['Options']
+): OptionsStyle => {
+  return {
+    options: {
+      label: 'options',
+      boxSizing: 'border-box',
+      wordWrap: 'break-word'
+    },
+    list: {
+      label: 'options__list',
+      listStyleType: 'none',
+      position: 'relative'
+    },
+    label: {
+      label: 'options__label',
+      color: componentTheme.labelColor,
+      cursor: 'default',
+      display: 'block',
+      fontWeight: componentTheme.labelFontWeight,
+      padding: `${componentTheme.nestedLabelPaddingVertical} ${componentTheme.nestedLabelPaddingHorizontal}`
+    }
+  }
+}
+
+export default generateStyle

package/src/Options/v2/theme.ts

@@ -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 type { Theme } from '@instructure/ui-themes'
+import type { OptionsTheme } from '@instructure/shared-types'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (theme: Theme): OptionsTheme => {
+  const { colors, typography, spacing } = theme
+
+  const componentVariables: OptionsTheme = {
+    labelFontWeight: typography?.fontWeightBold,
+
+    background: colors?.contrasts?.white1010,
+    labelColor: colors?.contrasts?.grey125125,
+
+    labelPadding: `${spacing?.xSmall} 0`,
+    nestedLabelPadding: `${spacing?.xSmall} ${spacing?.small}`
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export { generateComponentTheme as optionsThemeGenerator }
+export default generateComponentTheme

package/src/{index.ts → exports/a.ts}

@@ -22,17 +22,17 @@
  * SOFTWARE.
  */
 
-export { Options } from './Options'
-export { Item as OptionItem } from './Options/Item'
-export { Separator as OptionSeparator } from './Options/Separator'
+export { Options } from '../Options/v1'
+export { Item as OptionItem } from '../Options/v1/Item'
+export { Separator as OptionSeparator } from '../Options/v1/Separator'
 
-export { optionsThemeGenerator } from './Options/theme'
-export { optionsItemThemeGenerator } from './Options/Item/theme'
-export { optionsSeparatorThemeGenerator } from './Options/Separator/theme'
+export { optionsThemeGenerator } from '../Options/v1/theme'
+export { optionsItemThemeGenerator } from '../Options/v1/Item/theme'
+export { optionsSeparatorThemeGenerator } from '../Options/v1/Separator/theme'
 
-export type { OptionsProps } from './Options/props'
+export type { OptionsProps } from '../Options/v1/props'
 export type {
   OptionsItemProps,
   OptionsItemRenderProps
-} from './Options/Item/props'
-export type { OptionsSeparatorProps } from './Options/Separator/props'
+} from '../Options/v1/Item/props'
+export type { OptionsSeparatorProps } from '../Options/v1/Separator/props'

package/src/exports/b.ts

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+export { Options } from '../Options/v2'
+export { Item as OptionItem } from '../Options/v2/Item'
+export { Separator as OptionSeparator } from '../Options/v2/Separator'
+
+export { optionsThemeGenerator } from '../Options/v2/theme'
+export { optionsItemThemeGenerator } from '../Options/v2/Item/theme'
+export { optionsSeparatorThemeGenerator } from '../Options/v2/Separator/theme'
+
+export type { OptionsProps } from '../Options/v2/props'
+export type {
+  OptionsItemProps,
+  OptionsItemRenderProps
+} from '../Options/v2/Item/props'
+export type { OptionsSeparatorProps } from '../Options/v2/Separator/props'