@telus-uds/components-base 1.62.1 → 1.63.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 27 Sep 2023 20:45:15 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Oct 2023 18:37:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.63.0
+
+Wed, 04 Oct 2023 18:37:04 GMT
+
+### Minor changes
+
+- new logic for autocomplete when has nested items (mauricio.batresmontejo@telus.com)
+- update components base imports (evander.owusu@telus.com)
+
 ## 1.62.1
 
-Wed, 27 Sep 2023 20:45:15 GMT
+Wed, 27 Sep 2023 20:47:22 GMT
 
 ### Patches
 

package/lib/Autocomplete/Autocomplete.js

@@ -154,7 +154,8 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 
   const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
 
-  const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems); // We need to store the current value as well to be able to highlight it
+  const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems);
+  const [otherItems, setOtherItems] = (0, _react.useState)(items); // We need to store the current value as well to be able to highlight it
 
   const [currentValue, setCurrentValue] = (0, _react.useState)(value ?? initialValue);
   const inputTokens = {
@@ -164,7 +165,9 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const openOverlayRef = (0, _react.useRef)();
   const [isExpanded, setIsExpanded] = (0, _react.useState)(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
   const [isFocused, setisFocused] = (0, _react.useState)(false);
-  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null);
+  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null); // When it's nested, selected value
+
+  const [nestedSelectedValue, setNestedSelectedValue] = (0, _react.useState)(null);
   const {
     supportsProps,
     ...selectedProps
@@ -262,22 +265,49 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedId);
     const {
       label: newValue,
-      nested
+      nested,
+      title
     } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
       let {
         id
       } = _ref6;
       return id === selectedId;
     });
+    if (title) return;
 
     if (!nested) {
+      setNestedSelectedValue(null);
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
       setIsExpanded(false);
     }
 
     setCurrentValue(newValue);
     if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
+    if (nested) setNestedSelectedValue(newValue);
   };
+  /**
+   * When an item that is nested equal "true" is selected this useEffect is executed.
+   * The nested item is added to the item list at the top, the if validates it doesn't exist
+   * within the list, if doesn't exist the nested item is added to the top of the list,
+   * the nested item is added with an id equal "0"
+   */
+
+
+  (0, _react.useEffect)(() => {
+    if (nestedSelectedValue && !items.find(item => item.id === 0)) {
+      const tmpItems = [...items];
+      tmpItems.unshift({
+        label: nestedSelectedValue,
+        title: true,
+        id: 0
+      });
+      setOtherItems(tmpItems.map(item => {
+        return { ...item,
+          nestedChild: item.id !== 0
+        };
+      }));
+    }
+  }, [nestedSelectedValue, items]);
 
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
@@ -285,6 +315,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setIsExpanded(false);
+        setNestedSelectedValue(null);
       } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
         targetRef.current.focus();
       }
@@ -295,6 +326,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     } else if (_Platform.default.OS === 'web') {
       // needed for dropdown to be collapsed when clicking outside on web
       setIsExpanded(false);
+      setNestedSelectedValue(null);
     }
   };
 
@@ -369,7 +401,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",
-          items: itemsToShow,
+          items: nestedSelectedValue ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor)) : itemsToShow,
           noResults: helpTextToShow,
           onClose: handleClose,
           onSelect: handleSelect,

package/lib/Button/ButtonDropdown.js

@@ -176,6 +176,7 @@ ButtonDropdown.propTypes = { ..._utils.a11yProps.types,
   ..._utils.focusHandlerProps.types,
   ..._propTypes2.default,
   children: _propTypes2.textAndA11yText,
+  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
 
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.

package/lib/Listbox/Listbox.js

@@ -165,6 +165,7 @@ const Listbox = _ref => {
 };
 
 Listbox.propTypes = { ..._utils.withLinkRouter.propTypes,
+  tokens: (0, _utils.getTokensPropType)('Listbox'),
 
   /**
    * Focus will be moved to the item with this ref once within the menu.
@@ -190,8 +191,7 @@ Listbox.propTypes = { ..._utils.withLinkRouter.propTypes,
   /**
    * onClose event
    */
-  onClose: _propTypes.default.func,
-  tokens: (0, _utils.getTokensPropType)('Listbox')
+  onClose: _propTypes.default.func
 };
 Listbox.Overlay = _ListboxOverlay.default;
 var _default = Listbox;

package/lib/Listbox/ListboxItem.js

@@ -37,6 +37,9 @@ const styles = _StyleSheet.default.create({
   },
   childContainer: {
     paddingLeft: 16
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
   }
 });
 
@@ -45,6 +48,7 @@ const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     href,
     label,
     isChild = false,
+    nestedChild,
     onBlur,
     nextItemRef,
     prevItemRef,
@@ -64,7 +68,7 @@ const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isChild
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: [styles.itemContainer, isChild && styles.childContainer],
+    style: [styles.itemContainer, isChild && styles.childContainer, nestedChild && styles.nestedChildContainer],
     role: "option",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableItem.default, {
       href: href,
@@ -89,7 +93,8 @@ ListboxItem.propTypes = { ...selectedSystemPropTypes,
   label: _propTypes.default.node.isRequired,
   nextItemRef: _propTypes.default.object,
   prevItemRef: _propTypes.default.object,
-  onPress: _propTypes.default.func
+  onPress: _propTypes.default.func,
+  nestedChild: _propTypes.default.bool
 };
 
 var _default = (0, _utils.withLinkRouter)(ListboxItem);

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -439,9 +439,9 @@ MultiSelectFilter.propTypes = {
   variant: _utils.variantProp.propType,
 
   /**
-   * Sets the tokens for ButtonDropdown element.
+   * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+  tokens: (0, _utils.getTokensPropType)('MultiSelectFilter'),
 
   /**
    * The options a user may select.

package/lib-module/Autocomplete/Autocomplete.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/require-default-props */
-import React, { forwardRef, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -123,7 +123,8 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
 
   const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
 
-  const [currentItems, setCurrentItems] = useState(initialItems); // We need to store the current value as well to be able to highlight it
+  const [currentItems, setCurrentItems] = useState(initialItems);
+  const [otherItems, setOtherItems] = useState(items); // We need to store the current value as well to be able to highlight it
 
   const [currentValue, setCurrentValue] = useState(value ?? initialValue);
   const inputTokens = {
@@ -133,7 +134,9 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const openOverlayRef = useRef();
   const [isExpanded, setIsExpanded] = useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
   const [isFocused, setisFocused] = useState(false);
-  const [sourceLayout, setSourceLayout] = useState(null);
+  const [sourceLayout, setSourceLayout] = useState(null); // When it's nested, selected value
+
+  const [nestedSelectedValue, setNestedSelectedValue] = useState(null);
   const {
     supportsProps,
     ...selectedProps
@@ -229,22 +232,49 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedId);
     const {
       label: newValue,
-      nested
+      nested,
+      title
     } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
       let {
         id
       } = _ref6;
       return id === selectedId;
     });
+    if (title) return;
 
     if (!nested) {
+      setNestedSelectedValue(null);
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
       setIsExpanded(false);
     }
 
     setCurrentValue(newValue);
     if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
+    if (nested) setNestedSelectedValue(newValue);
   };
+  /**
+   * When an item that is nested equal "true" is selected this useEffect is executed.
+   * The nested item is added to the item list at the top, the if validates it doesn't exist
+   * within the list, if doesn't exist the nested item is added to the top of the list,
+   * the nested item is added with an id equal "0"
+   */
+
+
+  useEffect(() => {
+    if (nestedSelectedValue && !items.find(item => item.id === 0)) {
+      const tmpItems = [...items];
+      tmpItems.unshift({
+        label: nestedSelectedValue,
+        title: true,
+        id: 0
+      });
+      setOtherItems(tmpItems.map(item => {
+        return { ...item,
+          nestedChild: item.id !== 0
+        };
+      }));
+    }
+  }, [nestedSelectedValue, items]);
 
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
@@ -252,6 +282,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setIsExpanded(false);
+        setNestedSelectedValue(null);
       } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
         targetRef.current.focus();
       }
@@ -262,6 +293,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     } else if (Platform.OS === 'web') {
       // needed for dropdown to be collapsed when clicking outside on web
       setIsExpanded(false);
+      setNestedSelectedValue(null);
     }
   };
 
@@ -336,7 +368,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
         }) : /*#__PURE__*/_jsx(Suggestions, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",
-          items: itemsToShow,
+          items: nestedSelectedValue ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor)) : itemsToShow,
           noResults: helpTextToShow,
           onClose: handleClose,
           onSelect: handleSelect,

package/lib-module/Button/ButtonDropdown.js

@@ -6,7 +6,7 @@ import View from "react-native-web/dist/exports/View";
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import ButtonBase from './ButtonBase';
 import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
+import { a11yProps, getTokensPropType, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
 import Icon from '../Icon';
 import { getStackedContent } from '../StackView';
 import { getPressHandlersWithArgs } from '../utils/pressability';
@@ -151,6 +151,7 @@ ButtonDropdown.propTypes = { ...a11yProps.types,
   ...focusHandlerProps.types,
   ...buttonPropTypes,
   children: textAndA11yText,
+  tokens: getTokensPropType('ButtonDropdown'),
 
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.

package/lib-module/Listbox/Listbox.js

@@ -140,6 +140,7 @@ const Listbox = _ref => {
 };
 
 Listbox.propTypes = { ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('Listbox'),
 
   /**
    * Focus will be moved to the item with this ref once within the menu.
@@ -165,8 +166,7 @@ Listbox.propTypes = { ...withLinkRouter.propTypes,
   /**
    * onClose event
    */
-  onClose: PropTypes.func,
-  tokens: getTokensPropType('Listbox')
+  onClose: PropTypes.func
 };
 Listbox.Overlay = DropdownOverlay;
 export default Listbox;

package/lib-module/Listbox/ListboxItem.js

@@ -15,6 +15,9 @@ const styles = StyleSheet.create({
   },
   childContainer: {
     paddingLeft: 16
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
   }
 });
 const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -22,6 +25,7 @@ const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     href,
     label,
     isChild = false,
+    nestedChild,
     onBlur,
     nextItemRef,
     prevItemRef,
@@ -41,7 +45,7 @@ const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     isChild
   });
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.itemContainer, isChild && styles.childContainer],
+    style: [styles.itemContainer, isChild && styles.childContainer, nestedChild && styles.nestedChildContainer],
     role: "option",
     children: /*#__PURE__*/_jsx(PressableItem, {
       href: href,
@@ -66,6 +70,7 @@ ListboxItem.propTypes = { ...selectedSystemPropTypes,
   label: PropTypes.node.isRequired,
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  nestedChild: PropTypes.bool
 };
 export default withLinkRouter(ListboxItem);

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -405,9 +405,9 @@ MultiSelectFilter.propTypes = {
   variant: variantProp.propType,
 
   /**
-   * Sets the tokens for ButtonDropdown element.
+   * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: getTokensPropType('ButtonDropdown'),
+  tokens: getTokensPropType('MultiSelectFilter'),
 
   /**
    * The options a user may select.

package/package.json

@@ -64,15 +64,14 @@
     "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
-    "build": "npm run build:code && npm run build:docs",
+    "build": "npm run build:code",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
-    "build:code": "npm run build:main && npm run build:module",
-    "build:docs": "babel-node --plugins=@telus-uds/babel-plugin-react-docgen generate-component-docs.js"
+    "build:code": "npm run build:main && npm run build:module"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.62.1"
+  "version": "1.63.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/require-default-props */
-import React, { forwardRef, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { Dimensions, Platform, View, StyleSheet } from 'react-native'
 import throttle from 'lodash.throttle'
@@ -118,6 +118,8 @@ const Autocomplete = forwardRef(
     // We need to store current items for uncontrolled usage
     const [currentItems, setCurrentItems] = useState(initialItems)
 
+    const [otherItems, setOtherItems] = useState(items)
+
     // We need to store the current value as well to be able to highlight it
     const [currentValue, setCurrentValue] = useState(value ?? initialValue)
     const inputTokens = { paddingLeft: INPUT_LEFT_PADDING }
@@ -128,6 +130,9 @@ const Autocomplete = forwardRef(
     const [isFocused, setisFocused] = useState(false)
     const [sourceLayout, setSourceLayout] = useState(null)
 
+    // When it's nested, selected value
+    const [nestedSelectedValue, setNestedSelectedValue] = useState(null)
+
     const { supportsProps, ...selectedProps } = selectProps(rest)
     const { hint, label: inputLabel } = supportsProps
     const hintExpansionEnabled = isFocused && helpText && !currentValue
@@ -197,21 +202,49 @@ const Autocomplete = forwardRef(
     }
     const handleSelect = (selectedId) => {
       onSelect?.(selectedId)
-      const { label: newValue, nested } = (isControlled ? items : currentItems)?.find(
-        ({ id }) => id === selectedId
-      )
+      const {
+        label: newValue,
+        nested,
+        title
+      } = (isControlled ? items : currentItems)?.find(({ id }) => id === selectedId)
+      if (title) return
       if (!nested) {
+        setNestedSelectedValue(null)
         onChange?.(newValue)
         setIsExpanded(false)
       }
       setCurrentValue(newValue)
       if (!isControlled && inputRef?.current) inputRef.current.value = newValue
+
+      if (nested) setNestedSelectedValue(newValue)
     }
 
+    /**
+     * When an item that is nested equal "true" is selected this useEffect is executed.
+     * The nested item is added to the item list at the top, the if validates it doesn't exist
+     * within the list, if doesn't exist the nested item is added to the top of the list,
+     * the nested item is added with an id equal "0"
+     */
+    useEffect(() => {
+      if (nestedSelectedValue && !items.find((item) => item.id === 0)) {
+        const tmpItems = [...items]
+        tmpItems.unshift({ label: nestedSelectedValue, title: true, id: 0 })
+        setOtherItems(
+          tmpItems.map((item) => {
+            return {
+              ...item,
+              nestedChild: item.id !== 0
+            }
+          })
+        )
+      }
+    }, [nestedSelectedValue, items])
+
     const handleClose = (event) => {
       if (event.type === 'keydown') {
         if (event.key === 'Escape' || event.key === 27) {
           setIsExpanded(false)
+          setNestedSelectedValue(null)
         } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef?.current) {
           targetRef.current.focus()
         }
@@ -232,6 +265,7 @@ const Autocomplete = forwardRef(
       } else if (Platform.OS === 'web') {
         // needed for dropdown to be collapsed when clicking outside on web
         setIsExpanded(false)
+        setNestedSelectedValue(null)
       }
     }
     const itemsToShow = currentValue
@@ -308,7 +342,11 @@ const Autocomplete = forwardRef(
                 <Suggestions
                   hasResults={getCopy('hasResults')}
                   id="autocomplete"
-                  items={itemsToShow}
+                  items={
+                    nestedSelectedValue
+                      ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor))
+                      : itemsToShow
+                  }
                   noResults={helpTextToShow}
                   onClose={handleClose}
                   onSelect={handleSelect}

package/src/Button/ButtonDropdown.jsx

@@ -6,6 +6,7 @@ import ButtonBase from './ButtonBase'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  getTokensPropType,
   focusHandlerProps,
   resolvePressableState,
   selectTokens,
@@ -153,6 +154,8 @@ ButtonDropdown.propTypes = {
   ...focusHandlerProps.types,
   ...buttonPropTypes,
   children: textAndA11yText,
+  tokens: getTokensPropType('ButtonDropdown'),
+
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.
    */

package/src/Listbox/Listbox.jsx

@@ -136,6 +136,7 @@ const Listbox = ({
 
 Listbox.propTypes = {
   ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('Listbox'),
   /**
    * Focus will be moved to the item with this ref once within the menu.
    */
@@ -156,8 +157,7 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: PropTypes.func,
-  tokens: getTokensPropType('Listbox')
+  onClose: PropTypes.func
 }
 
 Listbox.Overlay = DropdownOverlay

package/src/Listbox/ListboxItem.jsx

@@ -15,6 +15,9 @@ const styles = StyleSheet.create({
   },
   childContainer: {
     paddingLeft: 16
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
   }
 })
 
@@ -24,6 +27,7 @@ const ListboxItem = forwardRef(
       href,
       label,
       isChild = false,
+      nestedChild,
       onBlur,
       nextItemRef,
       prevItemRef,
@@ -41,7 +45,14 @@ const ListboxItem = forwardRef(
 
     const getTokens = useThemeTokensCallback('Listbox', tokens, variant, { isChild })
     return (
-      <View style={[styles.itemContainer, isChild && styles.childContainer]} role="option">
+      <View
+        style={[
+          styles.itemContainer,
+          isChild && styles.childContainer,
+          nestedChild && styles.nestedChildContainer
+        ]}
+        role="option"
+      >
         <PressableItem
           href={href}
           isChild={isChild}
@@ -70,7 +81,8 @@ ListboxItem.propTypes = {
   label: PropTypes.node.isRequired,
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  nestedChild: PropTypes.bool
 }
 
 export default withLinkRouter(ListboxItem)

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -344,9 +344,9 @@ MultiSelectFilter.propTypes = {
    */
   variant: variantProp.propType,
   /**
-   * Sets the tokens for ButtonDropdown element.
+   * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: getTokensPropType('ButtonDropdown'),
+  tokens: getTokensPropType('MultiSelectFilter'),
   /**
    * The options a user may select.
    */