@telus-uds/components-base 2.0.0 → 2.0.2

package/src/Responsive/Responsive.jsx

@@ -1,32 +1,62 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { viewports } from '@telus-uds/system-constants'
-import { useResponsiveProp } from '../utils'
+import { useTheme } from '../ThemeProvider'
+import ResponsiveProp from './ResponsiveProp'
+import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleSheet'
 
 /**
  * Responsive conditionally renders children based on whether the viewport matches the provided
  * min and max viewports.
  *
- * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * If enableMediaQueryStyleSheet themeOption is set to false in ThemeProvider, then in SSR,
+ * like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
  * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
  * after hydration. This may cause a layout shift on devices other than the narrowest.
+ *
+ * If enableMediaQueryStyleSheet themeOption is set to true in ThemeProvider, then media query stylesheet
+ * is used to hide and show children of `Responsive` within a View.
  */
 
-const Responsive = ({ min = 'xs', max, children }) => {
-  // Start returning children at the 'min' viewport or greater
-  const byViewports = { [min]: children }
-  if (max && max !== 'xl') {
-    // Stop returning children at the viewport one above 'max' or greater
-    const maxIndex = viewports.keys.indexOf(max)
-    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
-    if (maxPlusOne) byViewports[maxPlusOne] = null
+const Responsive = React.forwardRef(({ min = 'xs', max, inheritedStyles = [], children }, ref) => {
+  const {
+    themeOptions: { enableMediaQueryStyleSheet }
+  } = useTheme()
+  if (enableMediaQueryStyleSheet) {
+    return (
+      <ResponsiveWithMediaQueryStyleSheet
+        inheritedStyles={inheritedStyles}
+        min={min}
+        max={max}
+        ref={ref}
+      >
+        {children}
+      </ResponsiveWithMediaQueryStyleSheet>
+    )
   }
-  return <>{useResponsiveProp(byViewports, null)}</>
-}
+  return (
+    <ResponsiveProp min={min} max={max}>
+      {children}
+    </ResponsiveProp>
+  )
+})
+
+Responsive.displayName = 'Responsive'
 
 Responsive.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
   min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  /**
+   * Styles to be inherited by `Responsive`.
+   * It should be an array of style property names.
+   * Note: This prop is only applicable when `enableMediaQueryStylesheet` is set to true in the `ThemeProvider`.
+   */
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 }
 

package/src/Responsive/ResponsiveProp.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { viewports } from '@telus-uds/system-constants'
+import { useResponsiveProp } from '../utils'
+
+const ResponsiveProp = ({ min = 'xs', max, children }) => {
+  const byViewports = { [min]: children }
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max)
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
+    if (maxPlusOne) byViewports[maxPlusOne] = null
+  }
+  const responsiveProp = useResponsiveProp(byViewports, null)
+  return <>{responsiveProp}</>
+}
+
+ResponsiveProp.displayName = 'Responsive'
+
+ResponsiveProp.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+}
+
+export default ResponsiveProp

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../utils'
+
+function generateResponsiveStyles(min, max) {
+  const viewportsArray = viewports.keys
+  const minIndex = viewportsArray.indexOf(min)
+  const maxIndex = viewportsArray.indexOf(max)
+  let hiddenViewports = []
+
+  if (minIndex !== -1) {
+    hiddenViewports = viewportsArray.slice(0, minIndex)
+  }
+  if (maxIndex !== -1) {
+    hiddenViewports = hiddenViewports.concat(viewportsArray.slice(maxIndex + 1))
+  }
+
+  const styles = {}
+
+  viewportsArray.forEach((viewport) => {
+    if (hiddenViewports.includes(viewport)) {
+      styles[viewport] = { display: 'none' }
+    }
+  })
+  return createMediaQueryStyles(styles, false)
+}
+
+const ResponsiveWithMediaQueryStyleSheet = React.forwardRef(
+  ({ min, max, inheritedStyles = [], children }, ref) => {
+    const { ids, styles } = StyleSheet.create({
+      responsive: {
+        ...inheritedStyles.reduce((acc, prop) => {
+          acc[prop] = 'inherit'
+          return acc
+        }, {}),
+        ...generateResponsiveStyles(min, max)
+      }
+    })
+    return (
+      <BaseView
+        style={styles.responsive}
+        dataSet={ids.responsive && { media: ids.responsive }}
+        ref={ref}
+      >
+        {children}
+      </BaseView>
+    )
+  }
+)
+
+ResponsiveWithMediaQueryStyleSheet.displayName = 'Responsive'
+
+ResponsiveWithMediaQueryStyleSheet.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
+  children: PropTypes.node.isRequired
+}
+
+export default ResponsiveWithMediaQueryStyleSheet

package/src/Search/Search.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -56,7 +56,7 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size:
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = forwardRef(
+const Search = React.forwardRef(
   (
     {
       initialValue,
@@ -71,6 +71,7 @@ const Search = forwardRef(
       copy = 'en',
       tokens,
       variant,
+      nativeSubmitBtnID,
       ...rest
     },
     ref
@@ -81,9 +82,8 @@ const Search = forwardRef(
       onChange
     })
 
-    const themeTokens = useThemeTokens('Search', tokens, variant)
+    const themeTokens = useThemeTokens('Search', tokens, { inactive, ...variant })
     const buttonTokens = useThemeTokens('SearchButton', tokens, variant)
-
     const getThemeTokens = useThemeTokensCallback('Search', tokens, variant)
     const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant)
 
@@ -174,6 +174,7 @@ const Search = forwardRef(
                 tokens={(buttonState) =>
                   selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
                 }
+                nativeID={nativeSubmitBtnID}
               >
                 {(buttonState) => (
                   <SubmitButtonIcon
@@ -243,7 +244,11 @@ Search.propTypes = {
     })
   ]),
   tokens: getTokensPropType('Search'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * ID for Submit button element on web
+   */
+  nativeSubmitBtnID: PropTypes.string
 }
 
 export default Search

package/src/Select/Group.jsx

@@ -3,13 +3,22 @@ import PropTypes from 'prop-types'
 
 import { componentPropType } from '../utils'
 
-const Group = ({ children, label }) => {
-  return <optgroup label={label}>{children}</optgroup>
-}
+const Group = React.forwardRef(({ children, label }, ref) => {
+  return (
+    <optgroup label={label} ref={ref}>
+      {children}
+    </optgroup>
+  )
+})
+
+Group.displayName = 'Group'
 
 export default Group
 
 Group.propTypes = {
   children: componentPropType('Item'),
+  /**
+   * The label for the group.
+   */
   label: PropTypes.string.isRequired
 }

package/src/Select/Group.native.jsx

@@ -10,5 +10,8 @@ export default Group
 
 Group.propTypes = {
   children: componentPropType('Item'),
+  /**
+   * The label for the group.
+   */
   label: PropTypes.string.isRequired
 }

package/src/Select/Item.jsx

@@ -1,11 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Item = ({ children, value }) => <option value={value}>{children}</option>
+const Item = React.forwardRef(({ children, value }, ref) => (
+  <option value={value} ref={ref}>
+    {children}
+  </option>
+))
+
+Item.displayName = 'Item'
 
 export default Item
 
 Item.propTypes = {
   children: PropTypes.string.isRequired,
+  /**
+   * The value of the option
+   */
   value: PropTypes.string.isRequired
 }

package/src/Select/Picker.jsx

@@ -1,9 +1,11 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import PropTypes from 'prop-types'
-import { componentPropType } from '../utils'
+import { componentPropType, selectSystemProps, htmlAttrs } from '../utils'
 
-const Picker = forwardRef(
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const Picker = React.forwardRef(
   (
     {
       value,
@@ -12,6 +14,8 @@ const Picker = forwardRef(
       onBlur,
       onMouseOver,
       onMouseOut,
+      onOpen = () => {},
+      onClose = () => {},
       style,
       inactive,
       children,
@@ -22,24 +26,38 @@ const Picker = forwardRef(
     },
     ref
   ) => {
+    const selectedProps = selectProps(rest)
     const { accessibilityLabel, accessibilityDescribedBy, accessibilityInvalid } = rest
 
     return (
+      /**
+       * The onOpen and onClose methods are to call the new active variant that changes the icon of the select,
+       * onOpen when the select is open and onClose when the select is closed, onOpen is in the event onMousedown
+       * when is selected and oClose is in onMouseOut and onChange when the select is closed.
+       */
       <select
         ref={ref}
         style={style}
         onMouseOver={onMouseOver}
-        onMouseOut={onMouseOut}
+        onMouseOut={() => {
+          onMouseOut?.()
+          onClose?.()
+        }}
         onFocus={onFocus}
         onBlur={onBlur}
+        onMouseDown={onOpen}
         disabled={inactive}
         value={value || (placeholder !== undefined ? placeholder.value : undefined)}
-        onChange={(event) => onChange(event.target.value, event)}
+        onChange={(event) => {
+          onClose()
+          onChange(event.target.value, event)
+        }}
         id={nativeID}
         aria-label={accessibilityLabel}
         aria-describedby={accessibilityDescribedBy}
         aria-invalid={accessibilityInvalid}
         data-testid={testID}
+        {...selectedProps}
       >
         {placeholder !== undefined && (
           <option value={placeholder.value} disabled hidden>
@@ -56,12 +74,21 @@ Picker.displayName = 'Picker'
 export default Picker
 
 Picker.propTypes = {
+  ...selectedSystemPropTypes,
   value: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
+  /**
+   * It executes when the select choices are open
+   */
+  onOpen: PropTypes.func,
+  /**
+   * It executes when the select choices are closed
+   */
+  onClose: PropTypes.func,
   style: PropTypes.object,
   inactive: PropTypes.bool,
   children: componentPropType(['Item', 'Group']),

package/src/Select/Picker.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Children } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
 import NativePicker from 'react-native-picker-select'
@@ -40,10 +40,10 @@ const selectAndroidContainerStyles = ({
   height: rest.height + ANDROID_HEIGHT_OFFSET
 })
 
-const Picker = forwardRef(
+const Picker = React.forwardRef(
   ({ value, onChange, onFocus, onBlur, style, inactive, children, placeholder, ...rest }, ref) => {
     // Ungroup items, since there's no way to support groups on native
-    const flatChildren = Children.toArray(children).flatMap((child) => {
+    const flatChildren = React.Children.toArray(children).flatMap((child) => {
       if (child.type === Group) {
         return child.props.children
       }

package/src/Select/Select.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
@@ -11,7 +11,8 @@ import {
   selectSystemProps,
   useInputValue,
   variantProp,
-  viewProps
+  viewProps,
+  htmlAttrs
 } from '../utils'
 import Picker from './Picker'
 import InputSupports from '../InputSupports'
@@ -21,7 +22,8 @@ import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
   inputSupportsProps,
-  viewProps
+  viewProps,
+  htmlAttrs
 ])
 
 const selectInputStyles = (
@@ -119,7 +121,8 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({
 })
 
 const selectIconContainerStyles = ({ paddingRight, paddingBottom }) => ({
-  paddingRight,
+  paddingRight: paddingRight + 4,
+  marginRight: -4,
   paddingBottom
 })
 
@@ -134,7 +137,7 @@ const selectValidationIconContainerStyles = ({
   paddingRight = 0,
   paddingBottom
 }) => ({
-  paddingRight: icon ? paddingRight + iconSize : paddingRight,
+  paddingRight: icon ? paddingRight + iconSize + 4 : paddingRight,
   ...(Platform.OS === 'android'
     ? {
         paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
@@ -142,6 +145,10 @@ const selectValidationIconContainerStyles = ({
     : { paddingBottom })
 })
 
+const selectCustomFeedbackStyles = ({ feedbackBackgroundColor }) => ({
+  backgroundColor: feedbackBackgroundColor
+})
+
 /**
  * A basic form single-choice select component. Use in forms or individually to receive user's input.
  *
@@ -174,7 +181,7 @@ const selectValidationIconContainerStyles = ({
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-const Select = forwardRef(
+const Select = React.forwardRef(
   (
     {
       value,
@@ -199,20 +206,23 @@ const Select = forwardRef(
       readOnly
     })
 
-    const [isFocused, setIsFocused] = useState(false)
+    const [isFocused, setIsFocused] = React.useState(false)
     const handleFocus = () => setIsFocused(true)
     const handleBlur = () => setIsFocused(false)
 
-    const [isHovered, setIsHovered] = useState(false)
+    const [isHovered, setIsHovered] = React.useState(false)
     const handleMouseOver = () => setIsHovered(true)
     const handleMouseOut = () => setIsHovered(false)
 
+    const [isOpen, setIsOpen] = React.useState(false)
+
     const { supportsProps, ...selectedProps } = selectProps(rest)
 
     const themeTokens = useThemeTokens('Select', tokens, variant, {
       focus: isFocused,
       hover: isHovered,
       inactive,
+      active: isOpen,
       validation
     })
 
@@ -221,7 +231,12 @@ const Select = forwardRef(
     const { themeOptions } = useTheme()
 
     return (
-      <InputSupports {...supportsProps} {...selectedProps} validation={validation}>
+      <InputSupports
+        {...supportsProps}
+        {...selectedProps}
+        validation={validation}
+        feedbackTokens={selectCustomFeedbackStyles(themeTokens)}
+      >
         {({ inputId, ...props }) => (
           <View style={selectOuterBorderStyles(themeTokens)}>
             <Picker
@@ -231,7 +246,9 @@ const Select = forwardRef(
               onBlur={handleBlur}
               onMouseOver={handleMouseOver}
               onMouseOut={handleMouseOut}
-              onChange={setValue}
+              onOpen={() => setIsOpen(true)}
+              onClose={() => setIsOpen(false)}
+              onChange={(e) => setValue(e, null)}
               value={currentValue}
               inactive={inactive}
               placeholder={

package/src/SideNav/Item.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
-import { Pressable } from 'react-native'
+import React from 'react'
+import { Pressable, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import {
   a11yProps,
@@ -46,7 +46,7 @@ function selectItemStyles({
 
  This component can only be accessed as a name-spaced component: `SideNav.Item`.
  */
-const Item = forwardRef(
+const Item = React.forwardRef(
   (
     {
       children,
@@ -76,13 +76,16 @@ const Item = forwardRef(
     })
 
     const getTokens = useThemeTokensCallback('SideNavItem', tokens, variant)
-    const getAppearanceState = ({ hovered }) => ({
+    const getAppearanceState = ({ hovered, focused }) => ({
       hover: hovered,
       active: isActive,
-      expanded: isExpanded
+      expanded: isExpanded,
+      focus: focused
+    })
+    const getPressableStyle = (pressableState) => ({
+      ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+      ...(Platform.OS === 'web' ? { outline: 'none' } : {})
     })
-    const getPressableStyle = (pressableState) =>
-      selectItemStyles(getTokens(getAppearanceState(pressableState)))
 
     return (
       <Pressable
@@ -134,6 +137,8 @@ Item.propTypes = {
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
+  accessibilityRole: PropTypes.string,
+  testID: PropTypes.number,
   tokens: getTokensPropType('SideNavItem'),
   variant: variantProp.propType
 }

package/src/SideNav/ItemContent.jsx

@@ -19,12 +19,20 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = ({ children, tokens }) => (
-  <>
-    <Typography tokens={selectTokens('Typography', tokens)}>{children}</Typography>
-    <View style={[staticStyles.absolute, selectAccentStyles(tokens)]} />
-  </>
-)
+const ItemContent = React.forwardRef(({ children, tokens }, ref) => {
+  const typographyTokens = selectTokens('Typography', tokens)
+
+  return (
+    <>
+      <Typography tokens={typographyTokens} ref={ref}>
+        {children}
+      </Typography>
+      <View style={[staticStyles.absolute, selectAccentStyles(tokens)]} />
+    </>
+  )
+})
+
+ItemContent.displayName = 'ItemContent'
 
 ItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),

package/src/SideNav/ItemsGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import ItemContent from './ItemContent'
@@ -16,7 +16,7 @@ import { useThemeTokensCallback } from '../ThemeProvider'
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
-const ItemsGroup = forwardRef(
+const ItemsGroup = React.forwardRef(
   (
     {
       children,
@@ -37,8 +37,15 @@ const ItemsGroup = forwardRef(
     const getItemAppearance = (appearance) => ({ ...getAppearance(appearance), type: 'parent' })
 
     const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant)
-    const getPanelTokens = (appearance) =>
-      selectTokens('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)))
+    const getPanelTokens = (appearance) => {
+      const { panelBorderColor, ...itemsGroupTokens } = getGroupTokens(getAppearance(appearance))
+      const groupTokens = {
+        ...itemsGroupTokens,
+        borderWidth: 0,
+        marginBottom: 0
+      }
+      return selectTokens('ExpandCollapsePanel', groupTokens)
+    }
 
     const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant)
     const getControlTokens = (appearance) =>
@@ -49,6 +56,7 @@ const ItemsGroup = forwardRef(
 
     const controlContent = (controlState) => {
       const currentItemTokens = getItemTokens(getItemAppearance(controlState))
+
       return <ItemContent tokens={currentItemTokens}>{label}</ItemContent>
     }
 
@@ -101,6 +109,9 @@ ItemsGroup.propTypes = {
   isActive: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNavItemsGroup'),
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
   itemTokens: getTokensPropType('SideNavItem')
 }
 

package/src/SideNav/SideNav.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import ExpandCollapse from '../ExpandCollapse'
@@ -29,10 +29,10 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = forwardRef(
+const SideNav = React.forwardRef(
   ({ children, variant = {}, tokens, accordion = true, itemTokens, groupTokens, ...rest }, ref) => {
     const themeTokens = useThemeTokens('SideNav', tokens, variant)
-    const [active, setActive] = useState({ groupId: undefined, itemId: undefined })
+    const [active, setActive] = React.useState({ groupId: undefined, itemId: undefined })
 
     const onItemPress = (itemId, groupId) => {
       setActive({ itemId, groupId })
@@ -56,6 +56,7 @@ const SideNav = forwardRef(
               onItemPress(...args)
               if (onPress) onPress(...args)
             }
+
             return (
               <Item
                 {...item.props}
@@ -78,6 +79,7 @@ const SideNav = forwardRef(
               const { groupId = `group-${index}` } = child.props
               const isGroupActive = active.itemId !== undefined && active.groupId === groupId
               const handleToggle = (event) => onToggle(groupId, event)
+
               return (
                 <ItemsGroup
                   {...child.props}
@@ -118,7 +120,13 @@ SideNav.propTypes = {
   accordion: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNav'),
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
   itemTokens: getTokensPropType('SideNavItem'),
+  /**
+   * Custom tokens for `SideNavItemsGroup`
+   */
   groupTokens: getTokensPropType('SideNavItemsGroup')
 }