@instructure/ui-list 10.26.1 → 11.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-list",
-  "version": "10.26.1",
+  "version": "11.0.0",
   "description": "Components for displaying vertical or horizontal lists.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,26 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-prop-types": "10.26.1",
-    "@instructure/ui-react-utils": "10.26.1",
-    "@instructure/ui-testable": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "prop-types": "^15.8.1"
+    "@instructure/console": "11.0.0",
+    "@instructure/emotion": "11.0.0",
+    "@instructure/shared-types": "11.0.0",
+    "@instructure/ui-react-utils": "11.0.0",
+    "@instructure/ui-view": "11.0.0"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
-    "@instructure/ui-color-utils": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.0",
+    "@instructure/ui-babel-preset": "11.0.0",
+    "@instructure/ui-color-utils": "11.0.0",
+    "@instructure/ui-themes": "11.0.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"

package/src/InlineList/InlineListItem/index.tsx

@@ -25,7 +25,6 @@
 import { Component } from 'react'
 
 import { View } from '@instructure/ui-view'
-import { testable } from '@instructure/ui-testable'
 import { passthroughProps } from '@instructure/ui-react-utils'
 
 import { withStyle } from '@instructure/emotion'
@@ -33,7 +32,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { InlineListItemProps } from './props'
 
 /**
@@ -43,11 +42,9 @@ id: InlineList.Item
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class InlineListItem extends Component<InlineListItemProps> {
   static readonly componentId = 'InlineList.Item'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     padding: 'none',
@@ -101,6 +98,7 @@ class InlineListItem extends Component<InlineListItemProps> {
         display="inline-block"
         maxWidth="100%"
         elementRef={this.handleRef}
+        data-cid="InlineListItem"
       >
         {children}
         {!lastPlaceholder && (

package/src/InlineList/InlineListItem/props.ts

@@ -23,7 +23,6 @@
  */
 
 import { PropsWithChildren } from 'react'
-import PropTypes from 'prop-types'
 
 import type {
   Spacing,
@@ -31,7 +30,6 @@ import type {
   ComponentStyle
 } from '@instructure/emotion'
 import type {
-  PropValidators,
   InlineListItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -87,27 +85,6 @@ type InlineListItemProps = InlineListItemOwnProps &
 
 type InlineListItemStyle = ComponentStyle<'inlineListItem' | 'delimiter'>
 
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  delimiter: PropTypes.oneOf(['none', 'pipe', 'slash', 'arrow']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  margin: PropTypes.string,
-  padding: PropTypes.string,
-  spacing: PropTypes.oneOf([
-    'none',
-    'xxx-small',
-    'xx-small',
-    'x-small',
-    'small',
-    'medium',
-    'large',
-    'x-large',
-    'xx-large'
-  ]),
-  elementRef: PropTypes.func,
-  lastPlaceholder: PropTypes.bool
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'delimiter',
@@ -119,4 +96,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { InlineListItemProps, InlineListItemStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/InlineList/index.tsx

@@ -25,11 +25,10 @@ import { Children, Component, ReactElement } from 'react'
 
 import { View } from '@instructure/ui-view'
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
-import { testable } from '@instructure/ui-testable'
 
 import { InlineListItem } from './InlineListItem'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { InlineListProps } from './props'
 
 /**
@@ -38,9 +37,7 @@ category: components
 ---
 
 **/
-@testable()
 class InlineList extends Component<InlineListProps> {
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     itemSpacing: 'none',
@@ -93,6 +90,7 @@ class InlineList extends Component<InlineListProps> {
         padding="0"
         elementRef={this.handleRef}
         display="block"
+        data-cid="InlineList"
       >
         {this.renderChildren()}
       </View>

package/src/InlineList/props.ts

@@ -23,16 +23,8 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
-import { InlineListItem } from './InlineListItem'
-
 import type { Spacing } from '@instructure/emotion'
-import type {
-  OtherHTMLAttributes,
-  PropValidators
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type InlineListOwnProps = {
   /**
@@ -74,27 +66,6 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type InlineListProps = InlineListOwnProps &
   OtherHTMLAttributes<InlineListOwnProps>
-
-const propTypes: PropValidators<PropKeys> = {
-  children: ChildrenPropTypes.oneOf([InlineListItem]),
-  as: PropTypes.oneOf(['ul', 'ol']),
-  margin: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  delimiter: PropTypes.oneOf(['none', 'pipe', 'slash', 'arrow']),
-  itemSpacing: PropTypes.oneOf([
-    'none',
-    'xxx-small',
-    'xx-small',
-    'x-small',
-    'small',
-    'medium',
-    'large',
-    'x-large',
-    'xx-large'
-  ]),
-  elementRef: PropTypes.func
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'as',
@@ -106,4 +77,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { InlineListProps }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/List/ListItem/index.tsx

@@ -25,7 +25,6 @@
 import { Component } from 'react'
 
 import { View } from '@instructure/ui-view'
-import { testable } from '@instructure/ui-testable'
 import { passthroughProps } from '@instructure/ui-react-utils'
 
 import { withStyle } from '@instructure/emotion'
@@ -33,7 +32,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ListItemProps } from './props'
 
 /**
@@ -43,11 +42,9 @@ id: List.Item
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class ListItem extends Component<ListItemProps> {
   static readonly componentId = 'List.Item'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     padding: 'none',
@@ -98,6 +95,7 @@ class ListItem extends Component<ListItemProps> {
         padding={padding}
         maxWidth="100%"
         elementRef={this.handleRef}
+        data-cid="ListItem"
       >
         {children}
       </View>

package/src/List/ListItem/props.ts

@@ -23,7 +23,6 @@
  */
 
 import { PropsWithChildren } from 'react'
-import PropTypes from 'prop-types'
 
 import type {
   Spacing,
@@ -31,7 +30,6 @@ import type {
   ComponentStyle
 } from '@instructure/emotion'
 import type {
-  PropValidators,
   ListItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -82,27 +80,6 @@ type ListItemProps = ListItemOwnProps &
   OtherHTMLAttributes<ListItemOwnProps>
 
 type ListItemStyle = ComponentStyle<'listItem'>
-
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  delimiter: PropTypes.oneOf(['none', 'dashed', 'solid']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  margin: PropTypes.string,
-  padding: PropTypes.string,
-  spacing: PropTypes.oneOf([
-    'none',
-    'xxx-small',
-    'xx-small',
-    'x-small',
-    'small',
-    'medium',
-    'large',
-    'x-large',
-    'xx-large'
-  ]),
-  elementRef: PropTypes.func
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'delimiter',
@@ -114,4 +91,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ListItemProps, ListItemStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/List/index.tsx

@@ -26,7 +26,6 @@ import { Children, Component, ReactElement } from 'react'
 
 import { View } from '@instructure/ui-view'
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
-import { testable } from '@instructure/ui-testable'
 
 import { ListItem } from './ListItem'
 
@@ -35,7 +34,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ListProps } from './props'
 
 /**
@@ -44,11 +43,9 @@ category: components
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class List extends Component<ListProps> {
   static readonly componentId = 'List'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     as: 'ul',
@@ -104,6 +101,7 @@ class List extends Component<ListProps> {
         margin={margin}
         elementRef={this.handleRef}
         display="block"
+        data-cid="List"
       >
         {this.renderChildren()}
       </View>

package/src/List/props.ts

@@ -23,22 +23,13 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
-
-import { ListItem } from './ListItem'
 
 import type {
   Spacing,
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type {
-  PropValidators,
-  ListTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { ListTheme, OtherHTMLAttributes } from '@instructure/shared-types'
 
 type ListOwnProps = {
   /**
@@ -89,28 +80,6 @@ type ListProps = ListOwnProps &
   OtherHTMLAttributes<ListOwnProps>
 
 type ListStyle = ComponentStyle<'list'>
-
-const propTypes: PropValidators<PropKeys> = {
-  children: ChildrenPropTypes.oneOf([ListItem]),
-  as: PropTypes.oneOf(['ul', 'ol']),
-  delimiter: PropTypes.oneOf(['none', 'dashed', 'solid']),
-  isUnstyled: PropTypes.bool,
-  margin: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  itemSpacing: PropTypes.oneOf([
-    'none',
-    'xxx-small',
-    'xx-small',
-    'x-small',
-    'small',
-    'medium',
-    'large',
-    'x-large',
-    'xx-large'
-  ]),
-  elementRef: PropTypes.func
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'as',
@@ -123,4 +92,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ListProps, ListStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -11,9 +11,7 @@
     { "path": "../emotion/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
     { "path": "../ui-axe-check/tsconfig.build.json" },
-    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
-    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" },
     { "path": "../ui-babel-preset/tsconfig.build.json" },
     { "path": "../ui-color-utils/tsconfig.build.json" },