@instructure/ui-tree-browser 10.26.1-snapshot-2 → 10.26.2

package/lib/TreeBrowser/index.js

@@ -11,6 +11,7 @@ var _IconFolderLine = require("@instructure/ui-icons/lib/IconFolderLine.js");
 var _IconDocumentLine = require("@instructure/ui-icons/lib/IconDocumentLine.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
 var _TreeCollection = require("./TreeCollection");
 var _TreeButton = require("./TreeButton");
@@ -20,7 +21,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _TreeBrowserContext = _interopRequireDefault(require("./TreeBrowserContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _TreeBrowser;
+var _dec, _dec2, _class, _TreeBrowser;
 /*
  * The MIT License (MIT)
  *
@@ -49,7 +50,7 @@ var _dec, _class, _TreeBrowser;
 category: components
 ---
 **/
-let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeBrowser = class TreeBrowser extends _react.Component {
+let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_TreeBrowser = class TreeBrowser extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -293,12 +294,11 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
           this.ref = el;
         },
         "aria-label": this.props.treeLabel,
-        "data-cid": "TreeBrowser",
         children: this.renderRoot()
       })
     });
   }
-}, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = _props.allowedProps, _TreeBrowser.defaultProps = {
+}, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = _props.allowedProps, _TreeBrowser.propTypes = _props.propTypes, _TreeBrowser.defaultProps = {
   size: 'medium',
   variant: 'folderTree',
   showRootCollection: true,
@@ -313,5 +313,5 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
     return 0;
   },
   animation: true
-}, _TreeBrowser.Node = _TreeNode.TreeNode, _TreeBrowser.Collection = _TreeCollection.TreeCollection, _TreeBrowser.Button = _TreeButton.TreeButton, _TreeBrowser)) || _class);
+}, _TreeBrowser.Node = _TreeNode.TreeNode, _TreeBrowser.Collection = _TreeCollection.TreeCollection, _TreeBrowser.Button = _TreeButton.TreeButton, _TreeBrowser)) || _class) || _class);
 var _default = exports.default = TreeBrowser;

package/lib/TreeBrowser/props.js

@@ -1,9 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
 /*
  * The MIT License (MIT)
  *
@@ -37,4 +40,27 @@ exports.allowedProps = void 0;
 
 // this is a sum type, so CompareObject is one of CompareCollection OR CompareItem
 
+const propTypes = exports.propTypes = {
+  collections: _propTypes.default.object.isRequired,
+  items: _propTypes.default.object.isRequired,
+  rootId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  expanded: (0, _controllable.controllable)(_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])), 'onCollectionToggle'),
+  defaultExpanded: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
+  selectionType: _propTypes.default.oneOf(['none', 'single']),
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  variant: _propTypes.default.oneOf(['folderTree', 'indent']),
+  collectionIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  collectionIconExpanded: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  itemIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  getItemProps: _propTypes.default.func,
+  getCollectionProps: _propTypes.default.func,
+  showRootCollection: _propTypes.default.bool,
+  onCollectionClick: _propTypes.default.func,
+  onCollectionToggle: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
+  treeLabel: _propTypes.default.string,
+  renderContent: _propTypes.default.func,
+  sortOrder: _propTypes.default.func,
+  animation: _propTypes.default.bool
+};
 const allowedProps = exports.allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder', 'animation'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "10.26.1-snapshot-2",
+  "version": "10.26.2",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,29 @@
   },
   "license": "MIT",
   "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"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "10.26.1-snapshot-2",
-    "@instructure/shared-types": "10.26.1-snapshot-2",
-    "@instructure/ui-icons": "10.26.1-snapshot-2",
-    "@instructure/ui-img": "10.26.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-utils": "10.26.1-snapshot-2",
-    "keycode": "^2"
+    "@instructure/emotion": "10.26.2",
+    "@instructure/shared-types": "10.26.2",
+    "@instructure/ui-icons": "10.26.2",
+    "@instructure/ui-img": "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-utils": "10.26.2",
+    "keycode": "^2",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "react": ">=18 <=19"
+    "react": ">=16.14 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/TreeBrowser/TreeButton/index.tsx

@@ -24,6 +24,7 @@
 
 import { Component, ContextType } from 'react'
 
+import { testable } from '@instructure/ui-testable'
 import { Img } from '@instructure/ui-img'
 import { callRenderProp } from '@instructure/ui-react-utils'
 import { withStyle } from '@instructure/emotion'
@@ -31,7 +32,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyles from './styles'
 import generateComponentTheme from './theme'
 import type { TreeBrowserButtonProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TreeBrowserContext from '../TreeBrowserContext'
 
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
@@ -43,10 +44,12 @@ id: TreeBrowser.Button
 ---
 **/
 @withStyle(generateStyles, generateComponentTheme)
+@testable()
 class TreeButton extends Component<TreeBrowserButtonProps> {
   static readonly componentId = 'TreeBrowser.Button'
 
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static contextType = TreeBrowserContext
   declare context: ContextType<typeof TreeBrowserContext>
@@ -148,7 +151,6 @@ class TreeButton extends Component<TreeBrowserButtonProps> {
         tabIndex={-1}
         type="button"
         css={styles?.treeButton}
-        data-cid="TreeButton"
       >
         {buttonContent}
       </button>

package/src/TreeBrowser/TreeButton/props.ts

@@ -23,8 +23,13 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { TreeBrowserButtonTheme } from '@instructure/shared-types'
+import type {
+  PropValidators,
+  TreeBrowserButtonTheme
+} from '@instructure/shared-types'
 import type { TreeBrowserCommonProps } from '../props'
 
 type TreeBrowserButtonOwnProps = {
@@ -64,6 +69,27 @@ type TreeBrowserButtonStyle = ComponentStyle<
   | 'thumbnail'
   | 'node'
 >
+
+const propTypes: PropValidators<PropKeys> = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string,
+  descriptor: PropTypes.string,
+  type: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  variant: PropTypes.oneOf(['folderTree', 'indent']),
+  collectionIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  collectionIconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  thumbnail: PropTypes.string,
+  onClick: PropTypes.func,
+  expanded: PropTypes.bool,
+  selected: PropTypes.bool,
+  focused: PropTypes.bool,
+  level: PropTypes.number,
+  containerRef: PropTypes.func,
+  renderContent: PropTypes.func
+}
+
 const allowedProps: AllowedPropKeys = [
   'id',
   'name',
@@ -85,4 +111,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { TreeBrowserButtonProps, TreeBrowserButtonStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TreeBrowser/TreeCollection/index.tsx

@@ -24,6 +24,7 @@
 
 import { Component, ContextType, ReactElement, SyntheticEvent } from 'react'
 
+import { testable } from '@instructure/ui-testable'
 import { withStyle } from '@instructure/emotion'
 import { safeCloneElement } from '@instructure/ui-react-utils'
 
@@ -33,7 +34,7 @@ import generateStyles from './styles'
 import generateComponentTheme from './theme'
 import type { TreeBrowserCollectionProps, TreeCollectionState } from './props'
 import type { CompareObject } from '../props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import { CollectionItem, CollectionProps, CollectionData } from '../props'
 import TreeBrowserContext from '../TreeBrowserContext'
 
@@ -46,6 +47,7 @@ id: TreeBrowser.Collection
 ---
 **/
 @withStyle(generateStyles, generateComponentTheme)
+@testable()
 class TreeCollection extends Component<
   TreeBrowserCollectionProps,
   TreeCollectionState
@@ -53,6 +55,7 @@ class TreeCollection extends Component<
   static readonly componentId = 'TreeBrowser.Collection'
 
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static contextType = TreeBrowserContext
   declare context: ContextType<typeof TreeBrowserContext>
@@ -210,7 +213,7 @@ class TreeCollection extends Component<
 
   renderCollectionChildren(
     collectionId: string | number | undefined,
-    child: ReactElement<any>,
+    child: ReactElement,
     position: number,
     keyword: 'before' | 'after'
   ) {
@@ -398,7 +401,6 @@ class TreeCollection extends Component<
         onFocus={(e) => this.handleFocus(e, { id: id, type: 'collection' })}
         onBlur={(e) => this.handleBlur(e, { id: id, type: 'collection' })}
         {...ariaSelected}
-        data-cid="TreeCollection"
       >
         <TreeButton {...collectionProps} />
         {expanded && this.childCount > 0 && (

package/src/TreeBrowser/TreeCollection/props.ts

@@ -23,9 +23,17 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
 
+import { Children } from '@instructure/ui-prop-types'
+
+import { TreeNode } from '../TreeNode'
 import type { CollectionData } from '../props'
-import type { TreeBrowserCollectionTheme } from '@instructure/shared-types'
+
+import type {
+  PropValidators,
+  TreeBrowserCollectionTheme
+} from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import { CollectionProps, TreeBrowserBaseProps } from '../props'
 
@@ -50,6 +58,36 @@ type TreeBrowserCollectionProps = TreeBrowserCollectionOwnProps &
 type TreeBrowserCollectionStyle = ComponentStyle<
   'treeCollection' | 'list' | 'item'
 >
+
+const propTypes: PropValidators<PropKeys> = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string,
+  descriptor: PropTypes.string,
+  items: PropTypes.array,
+  collections: PropTypes.array,
+  expanded: PropTypes.bool,
+  selection: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  variant: PropTypes.oneOf(['folderTree', 'indent']),
+  collectionIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  collectionIconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  getItemProps: PropTypes.func,
+  getCollectionProps: PropTypes.func,
+  onItemClick: PropTypes.func,
+  onCollectionClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  numChildren: PropTypes.number,
+  level: PropTypes.number.isRequired,
+  position: PropTypes.number,
+  renderBeforeItems: Children.oneOf([TreeNode]),
+  renderAfterItems: Children.oneOf([TreeNode]),
+  containerRef: PropTypes.func,
+  isCollectionFlattened: PropTypes.bool,
+  renderContent: PropTypes.func,
+  compareFunc: PropTypes.func
+}
+
 const allowedProps: AllowedPropKeys = [
   'id',
   'name',
@@ -85,4 +123,4 @@ export type {
   TreeBrowserCollectionStyle,
   TreeCollectionState
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TreeBrowser/TreeNode/index.tsx

@@ -26,12 +26,13 @@ import { Component, ContextType } from 'react'
 
 import { Img } from '@instructure/ui-img'
 import { callRenderProp } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
 import { withStyle } from '@instructure/emotion'
 
 import generateStyles from '../TreeButton/styles'
 import generateComponentTheme from '../TreeButton/theme'
 import type { TreeBrowserNodeProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TreeBrowserContext from '../TreeBrowserContext'
 
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
@@ -45,10 +46,12 @@ A helper class used to render the :renderBeforeItems and :renderAfterItems
 in the TreeBrowser.
 **/
 @withStyle(generateStyles, generateComponentTheme)
+@testable()
 class TreeNode extends Component<TreeBrowserNodeProps> {
   static readonly componentId = 'TreeBrowser.Node'
 
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static contextType = TreeBrowserContext
   declare context: ContextType<typeof TreeBrowserContext>
@@ -95,12 +98,7 @@ class TreeNode extends Component<TreeBrowserNodeProps> {
   render() {
     const { children, styles } = this.props
     return (
-      <div
-        ref={this.handleRef}
-        tabIndex={-1}
-        css={styles?.treeButton}
-        data-cid="TreeNode"
-      >
+      <div ref={this.handleRef} tabIndex={-1} css={styles?.treeButton}>
         <span css={styles?.layout}>
           {this.renderItemImage()}
           <span css={styles?.node}>{children}</span>

package/src/TreeBrowser/TreeNode/props.ts

@@ -23,7 +23,12 @@
  */
 
 import React from 'react'
-import type { TreeBrowserButtonTheme } from '@instructure/shared-types'
+import PropTypes from 'prop-types'
+
+import type {
+  PropValidators,
+  TreeBrowserButtonTheme
+} from '@instructure/shared-types'
 import type { WithStyleProps } from '@instructure/emotion'
 
 import type {
@@ -58,6 +63,22 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TreeBrowserNodeProps = TreeBrowserNodeOwnProps &
   WithStyleProps<TreeBrowserButtonTheme, TreeBrowserButtonStyle>
+
+const propTypes: PropValidators<PropKeys> = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  variant: PropTypes.oneOf(['folderTree', 'indent']),
+  selected: PropTypes.bool,
+  focused: PropTypes.bool,
+  itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  thumbnail: PropTypes.string,
+  level: PropTypes.number,
+  children: PropTypes.node,
+  containerRef: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onClick: PropTypes.func
+}
+
 const allowedProps: AllowedPropKeys = [
   'id',
   'size',
@@ -74,4 +95,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { TreeBrowserNodeProps }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/TreeBrowser/index.tsx

@@ -28,6 +28,7 @@ import keycode from 'keycode'
 import { IconFolderLine, IconDocumentLine } from '@instructure/ui-icons'
 
 import { omitProps, pickProps } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
 import { withStyle } from '@instructure/emotion'
 
 import { TreeCollection } from './TreeCollection'
@@ -43,7 +44,7 @@ import type {
   TreeBrowserProps,
   TreeBrowserState
 } from './props'
-import { allowedProps } from './props'
+import { allowedProps, propTypes } from './props'
 import TreeBrowserContext from './TreeBrowserContext'
 
 /**
@@ -52,10 +53,12 @@ category: components
 ---
 **/
 @withStyle(generateStyles, generateComponentTheme)
+@testable()
 class TreeBrowser extends Component<TreeBrowserProps, TreeBrowserState> {
   static readonly componentId = 'TreeBrowser'
 
   static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     size: 'medium',
@@ -377,7 +380,6 @@ class TreeBrowser extends Component<TreeBrowserProps, TreeBrowserState> {
             this.ref = el
           }}
           aria-label={this.props.treeLabel}
-          data-cid="TreeBrowser"
         >
           {this.renderRoot()}
         </ul>

package/src/TreeBrowser/props.ts

@@ -22,9 +22,16 @@
  * SOFTWARE.
  */
 
-import type { TreeBrowserTheme } from '@instructure/shared-types'
+import PropTypes from 'prop-types'
+
+import { controllable } from '@instructure/ui-prop-types'
+
+import type {
+  PropValidators,
+  TreeBrowserTheme
+} from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
 import type { TreeBrowserButtonProps } from './TreeButton/props'
 import { Renderable } from '@instructure/shared-types'
 
@@ -108,7 +115,7 @@ type TreeBrowserCommonProps = {
   collectionIcon?: Renderable
   collectionIconExpanded?: Renderable
   itemIcon?: Renderable
-  renderContent?: (props: TreeBrowserButtonProps) => React.JSX.Element
+  renderContent?: (props: TreeBrowserButtonProps) => JSX.Element
 }
 
 type PropKeys = keyof TreeBrowserOwnProps
@@ -173,6 +180,38 @@ type CollectionData = {
   expanded?: boolean
   type: 'child' | 'collection' | 'item'
 }
+
+const propTypes: PropValidators<PropKeys> = {
+  collections: PropTypes.object.isRequired,
+  items: PropTypes.object.isRequired,
+  rootId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  expanded: controllable(
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    ),
+    'onCollectionToggle'
+  ),
+  defaultExpanded: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  ),
+  selectionType: PropTypes.oneOf(['none', 'single']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  variant: PropTypes.oneOf(['folderTree', 'indent']),
+  collectionIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  collectionIconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  getItemProps: PropTypes.func,
+  getCollectionProps: PropTypes.func,
+  showRootCollection: PropTypes.bool,
+  onCollectionClick: PropTypes.func,
+  onCollectionToggle: PropTypes.func,
+  onItemClick: PropTypes.func,
+  treeLabel: PropTypes.string,
+  renderContent: PropTypes.func,
+  sortOrder: PropTypes.func,
+  animation: PropTypes.bool
+}
+
 const allowedProps: AllowedPropKeys = [
   'collections',
   'items',
@@ -216,4 +255,4 @@ export type {
   TreeBrowserBaseProps,
   TreeBrowserCommonProps
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -15,7 +15,9 @@
     { "path": "../shared-types/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-img/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-utils/tsconfig.build.json" }
   ]
 }