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

package/lib/{index.js → exports/a.js}

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "OptionSeparator", {
 Object.defineProperty(exports, "Options", {
   enumerable: true,
   get: function () {
-    return _Options.Options;
+    return _v.Options;
   }
 });
 Object.defineProperty(exports, "optionsItemThemeGenerator", {
@@ -39,9 +39,9 @@ Object.defineProperty(exports, "optionsThemeGenerator", {
     return _theme.optionsThemeGenerator;
   }
 });
-var _Options = require("./Options");
-var _Item = require("./Options/Item");
-var _Separator = require("./Options/Separator");
-var _theme = require("./Options/theme");
-var _theme2 = require("./Options/Item/theme");
-var _theme3 = require("./Options/Separator/theme");
+var _v = require("../Options/v1");
+var _Item = require("../Options/v1/Item");
+var _Separator = require("../Options/v1/Separator");
+var _theme = require("../Options/v1/theme");
+var _theme2 = require("../Options/v1/Item/theme");
+var _theme3 = require("../Options/v1/Separator/theme");

package/lib/exports/b.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OptionItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.Item;
+  }
+});
+Object.defineProperty(exports, "OptionSeparator", {
+  enumerable: true,
+  get: function () {
+    return _Separator.Separator;
+  }
+});
+Object.defineProperty(exports, "Options", {
+  enumerable: true,
+  get: function () {
+    return _v.Options;
+  }
+});
+Object.defineProperty(exports, "optionsItemThemeGenerator", {
+  enumerable: true,
+  get: function () {
+    return _theme2.optionsItemThemeGenerator;
+  }
+});
+Object.defineProperty(exports, "optionsSeparatorThemeGenerator", {
+  enumerable: true,
+  get: function () {
+    return _theme3.optionsSeparatorThemeGenerator;
+  }
+});
+Object.defineProperty(exports, "optionsThemeGenerator", {
+  enumerable: true,
+  get: function () {
+    return _theme.optionsThemeGenerator;
+  }
+});
+var _v = require("../Options/v2");
+var _Item = require("../Options/v2/Item");
+var _Separator = require("../Options/v2/Separator");
+var _theme = require("../Options/v2/theme");
+var _theme2 = require("../Options/v2/Item/theme");
+var _theme3 = require("../Options/v2/Separator/theme");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -40,17 +40,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "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"
+    },
+    "./v11_6": {
+      "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"
+    },
+    "./v11_7": {
+      "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/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Options/{Item → v1/Item}/index.tsx

@@ -31,7 +31,7 @@ import {
   withDeterministicId
 } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyles from './styles'
 import generateComponentTheme from './theme'

package/src/Options/{Separator → v1/Separator}/index.tsx

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { getElementType, omitProps } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyles from './styles'
 import generateComponentTheme from './theme'

package/src/Options/{index.tsx → v1/index.tsx}

@@ -32,9 +32,9 @@ import {
   withDeterministicId
 } from '@instructure/ui-react-utils'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyles from './styles'
 import generateComponentTheme from './theme'

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

@@ -0,0 +1,180 @@
+/*
+ * 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 {
+  omitProps,
+  getElementType,
+  callRenderProp,
+  withDeterministicId
+} from '@instructure/ui-react-utils'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyles from './styles'
+import type { OptionsItemProps, OptionsItemStyle } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+parent: Options
+id: Options.Item
+---
+**/
+@withDeterministicId()
+@withStyle(generateStyles)
+class Item extends Component<OptionsItemProps> {
+  static readonly componentId = 'Options.Item'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    as: 'span',
+    variant: 'default',
+    role: 'listitem',
+    voiceoverRoleBugWorkaround: false,
+    beforeLabelContentVAlign: 'center',
+    afterLabelContentVAlign: 'center',
+    isSelected: false
+  } as const
+
+  ref: Element | null = null
+
+  private readonly _descriptionId: string
+
+  constructor(props: OptionsItemProps) {
+    super(props)
+
+    this._descriptionId = props.deterministicId!('OptionsItem-description')
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  renderContent(
+    renderLabel:
+      | OptionsItemProps['renderBeforeLabel']
+      | OptionsItemProps['renderAfterLabel'],
+    contentVariant:
+      | OptionsItemStyle['contentBefore']
+      | OptionsItemStyle['contentAfter']
+  ) {
+    const { styles, variant, as, role, children } = this.props
+
+    return (
+      <span
+        css={[styles?.content, contentVariant]}
+        role="presentation"
+        aria-hidden="true"
+      >
+        {callRenderProp(renderLabel, {
+          variant,
+          as,
+          role,
+          children
+        })}
+      </span>
+    )
+  }
+
+  render() {
+    const {
+      as,
+      href,
+      role,
+      styles,
+      description,
+      descriptionRole,
+      renderBeforeLabel,
+      renderAfterLabel,
+      elementRef,
+      children,
+      voiceoverRoleBugWorkaround
+    } = this.props
+
+    const ElementType = getElementType(Item, this.props, () => as!)
+
+    const InnerElementType = href ? 'a' : 'span'
+
+    const passthroughProps = omitProps(this.props, Item.allowedProps)
+
+    const childrenContent = callRenderProp(children)
+    const descriptionContent = callRenderProp(description)
+    const ariaDescribedBy =
+      this.props['aria-describedby'] ||
+      (descriptionContent ? this._descriptionId : undefined)
+
+    return (
+      <ElementType
+        role={voiceoverRoleBugWorkaround ? role : 'none'}
+        data-cid="Options.Item"
+        css={styles?.item}
+        ref={(element: Element | null) => {
+          this.ref = element
+
+          if (typeof elementRef === 'function') {
+            elementRef(element)
+          }
+        }}
+        aria-describedby={
+          voiceoverRoleBugWorkaround ? ariaDescribedBy : undefined
+        }
+      >
+        <InnerElementType
+          {...passthroughProps}
+          css={styles?.container}
+          role={href || voiceoverRoleBugWorkaround ? undefined : role}
+          href={href}
+          aria-describedby={
+            voiceoverRoleBugWorkaround ? undefined : ariaDescribedBy
+          }
+        >
+          {childrenContent}
+          {descriptionContent && (
+            <span
+              css={styles?.description}
+              role={descriptionRole}
+              id={this._descriptionId}
+            >
+              {descriptionContent}
+            </span>
+          )}
+        </InnerElementType>
+        {renderBeforeLabel &&
+          this.renderContent(renderBeforeLabel, styles?.contentBefore)}
+        {renderAfterLabel &&
+          this.renderContent(renderAfterLabel, styles?.contentAfter)}
+      </ElementType>
+    )
+  }
+}
+
+export default Item
+export { Item }

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

@@ -0,0 +1,136 @@
+/*
+ * 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,
+  OptionsItemTheme,
+  OtherHTMLAttributes,
+  Renderable
+} from '@instructure/shared-types'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+type OptionsItemRenderProps = {
+  children?: Renderable
+  /**
+   * Element type to render as. Will be set to `<a>` if href is provided.
+   */
+  as?: AsElementType
+  /**
+   * The style variant of the item
+   */
+  variant?:
+    | 'default'
+    | 'highlighted'
+    | 'selected'
+    | 'disabled'
+    | 'highlighted-disabled'
+    | 'selected-highlighted'
+  /**
+   * The ARIA role of the element
+   */
+  role?: string
+}
+
+type OptionsItemOwnProps = OptionsItemRenderProps & {
+  /**
+   * Content to render before the label
+   * (if you pass a function, it has the `props` as its parameter)
+   */
+  renderBeforeLabel?: Renderable<OptionsItemRenderProps>
+  /**
+   * Content to render after the label
+   * (if you pass a function, it has the `props` as its parameter)
+   */
+  renderAfterLabel?: Renderable<OptionsItemRenderProps>
+  /**
+   * Sets the vAlign of renderBeforeLabel content
+   */
+  beforeLabelContentVAlign?: 'start' | 'center' | 'end'
+  /**
+   * Sets the vAlign of renderAfterLabel content
+   */
+  afterLabelContentVAlign?: 'start' | 'center' | 'end'
+  /**
+   * Additional "secondary" description text
+   */
+  description?: Renderable
+  /**
+   * The ARIA role of the description element
+   */
+  descriptionRole?: string
+  /**
+   * Providing href will render the option as `<a>`.
+   */
+  href?: string
+  /**
+   * Sometimes VoiceOver doesn't announce the role of the highlighted item. This prop forces the role to be on the outer element and should only be used when such an issue arises.
+   */
+  voiceoverRoleBugWorkaround?: boolean
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Whether or not this option is selected
+   */
+  isSelected?: boolean
+}
+
+type PropKeys = keyof OptionsItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type OptionsItemProps = OptionsItemOwnProps &
+  WithStyleProps<OptionsItemTheme, OptionsItemStyle> &
+  WithDeterministicIdProps &
+  OtherHTMLAttributes<OptionsItemOwnProps>
+
+type OptionsItemStyle = ComponentStyle<
+  | 'item'
+  | 'container'
+  | 'content'
+  | 'contentBefore'
+  | 'contentAfter'
+  | 'description'
+>
+const allowedProps: AllowedPropKeys = [
+  'as',
+  'variant',
+  'role',
+  'renderBeforeLabel',
+  'renderAfterLabel',
+  'beforeLabelContentVAlign',
+  'afterLabelContentVAlign',
+  'description',
+  'descriptionRole',
+  'voiceoverRoleBugWorkaround',
+  'href',
+  'elementRef',
+  'children',
+  'isSelected'
+]
+
+export type { OptionsItemProps, OptionsItemStyle, OptionsItemRenderProps }
+export { allowedProps }