@instructure/ui-list 10.26.1-snapshot-2 → 10.26.2

package/package.json

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

package/src/InlineList/InlineListItem/index.tsx

@@ -25,6 +25,7 @@
 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'
@@ -32,7 +33,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { InlineListItemProps } from './props'
 
 /**
@@ -42,9 +43,11 @@ 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',
@@ -98,7 +101,6 @@ 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,6 +23,7 @@
  */
 
 import { PropsWithChildren } from 'react'
+import PropTypes from 'prop-types'
 
 import type {
   Spacing,
@@ -30,6 +31,7 @@ import type {
   ComponentStyle
 } from '@instructure/emotion'
 import type {
+  PropValidators,
   InlineListItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -85,6 +87,27 @@ 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',
@@ -96,4 +119,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { InlineListItemProps, InlineListItemStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/InlineList/index.tsx

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

package/src/InlineList/props.ts

@@ -23,8 +23,16 @@
  */
 
 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 } from '@instructure/shared-types'
+import type {
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
 
 type InlineListOwnProps = {
   /**
@@ -66,6 +74,27 @@ 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',
@@ -77,4 +106,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { InlineListProps }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/List/ListItem/index.tsx

@@ -25,6 +25,7 @@
 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'
@@ -32,7 +33,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { ListItemProps } from './props'
 
 /**
@@ -42,9 +43,11 @@ 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',
@@ -95,7 +98,6 @@ class ListItem extends Component<ListItemProps> {
         padding={padding}
         maxWidth="100%"
         elementRef={this.handleRef}
-        data-cid="ListItem"
       >
         {children}
       </View>

package/src/List/ListItem/props.ts

@@ -23,6 +23,7 @@
  */
 
 import { PropsWithChildren } from 'react'
+import PropTypes from 'prop-types'
 
 import type {
   Spacing,
@@ -30,6 +31,7 @@ import type {
   ComponentStyle
 } from '@instructure/emotion'
 import type {
+  PropValidators,
   ListItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -80,6 +82,27 @@ 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',
@@ -91,4 +114,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ListItemProps, ListItemStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/List/index.tsx

@@ -26,6 +26,7 @@ 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'
 
@@ -34,7 +35,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { ListProps } from './props'
 
 /**
@@ -43,9 +44,11 @@ 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',
@@ -101,7 +104,6 @@ class List extends Component<ListProps> {
         margin={margin}
         elementRef={this.handleRef}
         display="block"
-        data-cid="List"
       >
         {this.renderChildren()}
       </View>

package/src/List/props.ts

@@ -23,13 +23,22 @@
  */
 
 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 { ListTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type {
+  PropValidators,
+  ListTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
 
 type ListOwnProps = {
   /**
@@ -80,6 +89,28 @@ 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',
@@ -92,4 +123,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ListProps, ListStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -11,7 +11,9 @@
     { "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" },