nitro-web 0.0.87 → 0.0.89

package/components/partials/element/dropdown.tsx

@@ -0,0 +1,248 @@
+import { css } from 'twin.macro'
+import { forwardRef, cloneElement } from 'react'
+import { getSelectStyle, twMerge } from 'nitro-web'
+import { CheckCircleIcon } from '@heroicons/react/24/solid'
+
+type DropdownProps = {
+  allowOverflow?: boolean
+  animate?: boolean
+  children?: React.ReactNode
+  className?: string
+  css?: string
+  /** The direction of the menu **/
+  dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
+  options?: { label: string|React.ReactNode, onClick?: Function, isSelected?: boolean, icon?: React.ReactNode, className?: string }[]
+  /** Whether the dropdown is hoverable **/
+  isHoverable?: boolean
+  /** The content to render inside the top of the dropdown **/
+  menuContent?: React.ReactNode
+  menuClassName?: string
+  menuOptionClassName?: string
+  menuIsOpen?: boolean
+  menuToggles?: boolean
+  /** The minimum width of the menu **/
+  minWidth?: number | string
+  toggleCallback?: (isActive: boolean) => void
+}
+
+export const Dropdown = forwardRef(function Dropdown({
+  allowOverflow=false,
+  animate=true,
+  children, 
+  className,
+  dir='bottom-left', 
+  options, 
+  isHoverable,
+  menuClassName,
+  menuOptionClassName,
+  menuContent, 
+  menuIsOpen, 
+  menuToggles=true,
+  minWidth,
+  toggleCallback,
+}: DropdownProps, ref) {
+  // https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks
+  isHoverable = isHoverable && !menuIsOpen
+  const dropdownRef = useRef<HTMLDivElement|null>(null)
+  const [isActive, setIsActive] = useState(!!menuIsOpen)
+  const menuStyle = getSelectStyle({ name: 'menu' })
+  const [direction, setDirection] = useState<null | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'>(null)
+  const [ready, setReady] = useState(false)
+
+  // Expose the setIsActive function to the parent component
+  useImperativeHandle(ref, () => ({ setIsActive }))
+
+  useEffect(() => {
+    const pageClick = (event: MouseEvent | FocusEvent) => {
+      try {
+        // If the active element exists and is clicked outside of the dropdown, toggle the dropdown
+        if (dropdownRef.current !== null && !dropdownRef.current.contains(event.target as Node)) setIsActive(!isActive)
+      } catch (_e) {
+        // Errors throw for contains() when the user clicks off the webpage when open
+        setIsActive(!isActive)
+      }
+    }
+    if (isActive && !menuIsOpen) {
+      // Wait for the next event loop in the case of mousedown'ing the dropdown, while loosing click focus from a checkbox  
+      setTimeout(() => {
+        window.addEventListener('mousedown', pageClick)
+        window.addEventListener('focus', pageClick, true) // true needed to capture focus events
+      }, 0)
+    }
+    return () => {
+      window.removeEventListener('mousedown', pageClick)
+      window.removeEventListener('focus', pageClick, true) // true needed to capture focus events
+    }
+  }, [isActive, dropdownRef])
+
+  useEffect(() => {
+    if (toggleCallback) toggleCallback(isActive)
+  }, [isActive])
+
+  useEffect(() => {
+    setReady(false)
+    if (!isActive || !dropdownRef.current) return
+    
+    const ul = dropdownRef.current.querySelector('ul') as HTMLElement
+    if (!ul) return
+  
+    // Temporarily show the ul for measurement
+    const originalMaxHeight = ul.style.maxHeight
+    const originalVisibility = ul.style.visibility
+    const originalOpacity = ul.style.opacity
+    const originalPointerEvents = ul.style.pointerEvents
+  
+    ul.style.maxHeight = 'none'
+    ul.style.visibility = 'hidden'
+    ul.style.opacity = '0'
+    ul.style.pointerEvents = 'none'
+  
+    const dropdownHeight = ul.getBoundingClientRect().height
+  
+    // Revert styles
+    ul.style.maxHeight = originalMaxHeight
+    ul.style.visibility = originalVisibility
+    ul.style.opacity = originalOpacity
+    ul.style.pointerEvents = originalPointerEvents
+  
+    const rect = dropdownRef.current.getBoundingClientRect()
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+  
+    const side = dir.endsWith('right') ? 'right' : 'left'
+  
+    const newDirection = dir.startsWith('bottom')
+      ? `${spaceBelow < dropdownHeight && spaceAbove > dropdownHeight ? 'top' : 'bottom'}-${side}`
+      : `${spaceAbove < dropdownHeight && spaceBelow > dropdownHeight ? 'bottom' : 'top'}-${side}`
+  
+    setDirection(newDirection as 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right')
+  
+    requestAnimationFrame(() => {
+      setReady(true)
+    })
+  }, [isActive, dir])
+
+  function onMouseDown(e: { key: string, preventDefault: Function }) {
+    if (e.key && e.key != 'Enter') return
+    if (e.key) e.preventDefault() // for button, stops buttons firing twice
+    if (!isHoverable && !menuIsOpen && ((menuToggles || e.key) || !isActive)) setIsActive(!isActive)
+  }
+
+  function onClick(option: { onClick?: Function }, e: React.MouseEvent) {
+    if (option.onClick) option.onClick(e)
+    if (!menuIsOpen) setIsActive(!isActive)
+  }
+
+  return (
+    <div 
+      class={
+        `relative is-${direction || dir}` + // until hovered, show the original direction to prevent scrollbars
+        (isHoverable ? ' is-hoverable' : '') +
+        (isActive ? ' is-active' : '') +
+        (!animate ? ' no-animation' : '') +
+        (allowOverflow ? ' is-allowOverflow' : '') +
+        ' nitro-dropdown' +
+        (className ? ` ${className}` : '')
+      }
+      onClick={(e) => e.stopPropagation()} // required for dropdowns inside row links
+      ref={dropdownRef} 
+      css={style}
+    >
+      {
+        (Array.isArray(children) ? children : [children]).map((el, key) => {
+          const onKeyDown = onMouseDown 
+          if (!el.type) throw new Error('Dropdown component requires a valid child element')
+          return cloneElement(el, { key, onMouseDown, onKeyDown }) // adds onClick
+        })
+      }
+      <ul
+        style={{ minWidth }}
+        class={
+          twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
+      >
+        {menuContent}
+        {
+          options && options.map((option, i) => {
+            const optionStyle = getSelectStyle({ name: 'option', usePrefixes: true, isSelected: option.isSelected })
+            return (
+              <li 
+                key={i} 
+                className={twMerge(`${optionStyle} ${option.className} ${menuOptionClassName}`)}
+                onClick={(e: React.MouseEvent) => onClick(option, e)}
+              >
+                <span class="flex-auto">{option.label}</span>
+                { !!option.icon && option.icon }
+                { option.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-0.5" /> }
+              </li>
+            )
+          })
+        }
+      </ul>
+    </div>
+  )
+})
+
+const style = css`
+  &>ul {
+    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease, max-width 0s 0.15s ease, max-height 0s 0.15s ease;
+    max-width: 0; // handy if the dropdown ul exceeds the viewport width
+    max-height: 0; // handy if the dropdown ul exceeds the viewport height
+    pointer-events: none;
+  }
+  &.is-bottom-right,
+  &.is-top-right {
+    ul {
+      left: auto;
+      right: 0;
+    }
+  }
+  &.is-bottom-left,
+  &.is-bottom-right {
+    &>ul {
+      top: 100%;
+      transform: translateY(6px);
+    }
+  }
+  &.is-top-left,
+  &.is-top-right {
+    &>ul {
+      bottom: 100%;
+      transform: translateY(-10px);
+    }
+  }
+  // active submenu
+  &.is-hoverable:hover,
+  &:focus,
+  &.is-active,
+  &>ul>li:hover,
+  &>ul>li:focus,
+  &>ul>li.is-active {
+    &>ul.is-ready {
+      opacity: 1;
+      visibility: visible;
+      transition: transform 0.15s ease, opacity 0.15s ease;
+      max-width: 1000px;
+      max-height: 1000px;
+      pointer-events: auto;
+    }
+    &.is-allowOverflow > ul {
+      overflow: visible;
+    }
+    &.is-bottom-left > ul,
+    &.is-bottom-right > ul {
+      transform: translateY(3px) !important;
+    }
+    &.is-top-left > ul,
+    &.is-top-right > ul {
+      transform: translateY(-7px) !important;
+    }
+  }
+  // no animation
+  &.no-animation {
+    &>ul {
+      transition: none;
+    }
+  }
+`
+
+

package/components/partials/element/filters.tsx

@@ -0,0 +1,194 @@
+import { forwardRef, Dispatch, SetStateAction, useRef, useEffect, useImperativeHandle } from 'react'
+import { Button, Dropdown, Field, Select, type FieldProps, type SelectProps } from 'nitro-web'
+import { camelCaseToTitle, debounce, omit, queryString, queryObject, twMerge } from 'nitro-web/util'
+import { ListFilterIcon } from 'lucide-react'
+
+type CommonProps = {
+  label?: string
+  rowClassName?: string
+}
+export type FilterType = (
+  | FieldProps & CommonProps
+  | ({ type: 'select' } & SelectProps & CommonProps)
+)
+
+type FilterState = {
+  [key: string]: string | true
+}
+
+type FiltersProps = {
+  state?: FilterState
+  setState?: Dispatch<SetStateAction<FilterState>>
+  filters?: FilterType[]
+  elements?: {
+    Button?: typeof Button
+    Dropdown?: typeof Dropdown
+    Field?: typeof Field
+    Select?: typeof Select
+    FilterIcon?: typeof ListFilterIcon
+  }
+  buttonProps?: Partial<React.ComponentProps<typeof Button>>
+  buttonText?: string
+  buttonCounterClassName?: string
+  dropdownProps?: Partial<React.ComponentProps<typeof Dropdown>>
+  dropdownFiltersClassName?: string
+}
+
+export type FiltersHandleType = {
+  submit: (includePagination?: boolean) => void
+}
+
+const debounceTime = 250
+
+export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({ 
+  filters, 
+  setState: setState2,
+  state: state2,
+  buttonProps,
+  buttonCounterClassName,
+  buttonText, 
+  dropdownProps, 
+  dropdownFiltersClassName,
+  elements,
+}, ref) => {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [lastUpdated, setLastUpdated] = useState(0)
+  const [debouncedSubmit] = useState(() => debounce(submit, debounceTime))
+  const [state3, setState3] = useState(() => ({ ...queryObject(location.search) }))
+  const [state, setState] = [state2 || state3, setState2 || setState3]
+  const stateRef = useRef(state)
+  const count = useMemo(() => Object.keys(state).filter((k) => state[k] && filters?.some((f) => f.name === k)).length, [state, filters])
+
+  const Elements = {
+    Button: elements?.Button || Button,
+    Dropdown: elements?.Dropdown || Dropdown,
+    Field: elements?.Field || Field,
+    Select: elements?.Select || Select,
+    FilterIcon: elements?.FilterIcon || ListFilterIcon,
+  }
+
+  useImperativeHandle(ref, () => ({
+    submit: debouncedSubmit,
+  }))
+  
+  useEffect(() => {
+    return () => debouncedSubmit.cancel()
+  }, [])
+  
+  useEffect(() => {
+    stateRef.current = state
+  }, [state])
+
+  useEffect(() => {
+    // Only update the state if the filters haven't been input changed in the last 500ms
+    if (Date.now() - lastUpdated > (debounceTime + 250)) {
+      setState(() => ({
+        ...queryObject(location.search),
+      }))
+    }
+  }, [location.search])
+
+  function reset(e: React.MouseEvent<HTMLAnchorElement>, filter: FilterType) {
+    e.preventDefault()
+    setState((s) => omit(s, [filter.name]) as FilterState)
+    onAfterChange()
+  }
+
+  function resetAll(e: React.MouseEvent<HTMLButtonElement>) {
+    e.preventDefault()
+    setState((s) => omit(s, filters?.map((f) => f.name) || []) as FilterState)
+    onAfterChange()
+  }
+
+  async function onInputChange(e: {target: {name: string, value: unknown}}) {
+    // basic name and value (keeping deep paths intact e.g. 'jobCache.location': '10')
+    setState((s) => ({ ...s, [e.target.name]: e.target.value as string })) 
+    onAfterChange()
+  }
+
+  function onAfterChange() {
+    setLastUpdated(Date.now())
+    debouncedSubmit()
+  }
+
+  // Update the URL by replacing the current entry in the history stack
+  function submit(includePagination?: boolean) {
+    const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
+    navigate(location.pathname + queryStr, { replace: true })
+  }
+
+  return (
+    <Elements.Dropdown 
+      // menuIsOpen={true}
+      dir="bottom-right"
+      allowOverflow={true}
+      {...dropdownProps}
+      menuClassName={twMerge(`min-w-[330px] ${dropdownProps?.menuClassName || ''}`)}
+      menuContent={
+        <div>
+          <div class="flex justify-between items-center border-b p-4 py-3.5">
+            <div class="text-lg font-semibold">Filters</div>
+            <Button color="clear" size="sm" onClick={resetAll}>Reset All</Button>
+          </div>
+          {/* <div class="w-[1330px] bg-red-500 absolute">
+            This div shouldnt produce a page scrollbar when the dropdown is closed.
+            But should be visibile if allowedOverflow is true.
+          </div> */}
+          <div class={twMerge(`flex flex-wrap gap-4 px-4 py-4 pb-6 ${dropdownFiltersClassName || ''}`)}>
+            {
+              filters?.map(({label, rowClassName, ...filter}, i) => (
+                <div key={i} class={twMerge(`w-full ${rowClassName||''}`)}>
+                  <div class="flex justify-between"> 
+                    <label for={filter.id || filter.name}>{label || camelCaseToTitle(filter.name)}</label>
+                    <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>
+                  </div>
+                  {
+                    filter.type === 'select' && 
+                    <Elements.Select
+                      {...filter}
+                      class="!mb-0"
+                      value={state[filter.name] || ''}
+                      onChange={onInputChange}
+                      type={undefined}
+                    />
+                  }
+                  {
+                    filter.type !== 'select' && 
+                    <Elements.Field 
+                      {...filter}
+                      class="!mb-0"
+                      value={(state[filter.name] as string) || ''}
+                      onChange={onInputChange}
+                    />
+                  }
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      }
+    >
+      <Elements.Button 
+        color="white" 
+        IconLeft={<Elements.FilterIcon size={16} />} 
+        {...buttonProps}
+        className={twMerge(`flex gap-x-2.5 ${buttonProps?.className || ''}`)}
+      >
+        <span class="flex items-center gap-x-2.5">
+          { buttonText || 'Filter By' }
+          {
+            !!count && 
+            <span 
+              class={twMerge(`inline-flex items-center justify-center rounded-full text-white bg-primary box-content w-[1em] h-[1em] p-[2px] ${buttonCounterClassName || ''}`)}
+            >
+              <span class="text-xs">{count}</span>
+            </span>
+          }
+        </span>
+      </Elements.Button>
+    </Elements.Dropdown>
+  )
+})
+
+Filters.displayName = 'Filters'

package/components/partials/element/github-link.tsx

@@ -0,0 +1,16 @@
+import GithubIcon from 'nitro-web/client/imgs/github.svg'
+
+export function GithubLink({ filename }: { filename: string }) {
+  const base = 'https://github.com/boycce/nitro-web/blob/master/packages/'
+  // Filenames are relative to the webpack start directory
+  // 1. Remove ../ from filename (i.e. for _example build)
+  // 2. Remove node_modules/nitro-web/ from filename (i.e. for packages using nitro-web)
+  const link = base + filename.replace(/^(\.\.\/|.*node_modules\/nitro-web\/)/, '')
+  
+  return (
+    // <a href={link}>Go to Github</a>
+    <a href={link} className="fixed top-0 right-0 nitro-github">
+      <GithubIcon />
+    </a>
+  )
+}

package/components/partials/element/initials.tsx

@@ -0,0 +1,66 @@
+import { css } from 'twin.macro'
+
+type InitialsProps = {
+  icon?: { initials: string, hex: string }
+  isBig?: boolean
+  isMedium?: boolean
+  isSmall?: boolean
+  isRound?: boolean
+  className?: string
+}
+
+export function Initials({ icon, isBig, isMedium, isSmall, isRound, className }: InitialsProps) {
+  return (
+    <span 
+      css={style} 
+      class={
+        'initials-square' +
+        (isBig ? ' is-big' : '') + 
+        (isMedium ? ' is-medium' : '') + 
+        (isSmall ? ' is-small' : '') + 
+        (isRound ? ' is-round' : '') + 
+        (icon ? '' : ' is-empty') + 
+        ' nitro-initials' +
+        (className ? ' ' + className : '')
+      }
+      style={icon ? {backgroundColor: icon?.hex + '15', color: icon?.hex} : {}}
+    >
+      {icon?.initials}
+    </span>
+  )
+}
+
+const style = css`
+  // seen in input.jsx
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  font-weight: 700;
+  font-size: 11px;
+  width: 24px;
+  height: 24px;
+  // new
+  &.is-medium {
+    width: 30px;
+    height: 30px;
+    font-size: 12px;
+  }
+  // seen in select.jsx
+  &.is-small {
+    width: 22px;
+    height: 22px;
+    font-size: 11px;
+  }
+  &.is-big {
+    width: 48px;
+    height: 48px;
+    font-size: 14px;
+  }
+  &.is-round {
+    border-radius: 50%;
+  }
+  &.is-empty {
+    width: 0;
+  }
+`

package/components/partials/element/message.tsx

@@ -0,0 +1,141 @@
+// Todo: show correct message type, e.g. error, warning, info, success `${store.message.type || 'success'}`
+import { isObject, isString, queryObject } from 'nitro-web/util'
+import { X, CircleCheck } from 'lucide-react'
+import { MessageObject } from 'nitro-web/types'
+import { twMerge } from 'nitro-web'
+
+type MessageProps = {
+  className?: string
+  classNameWrapper?: string
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+}
+/**
+ * Shows a message
+ * Triggered by navigating to a link with a valid query string, or by setting store.message to a string or more explicitly, to an object
+ **/
+export function Message({ className, classNameWrapper, position='top-right' }: MessageProps) {
+  const devDontHide = false
+  const [store, setStore] = useTracked()
+  const [visible, setVisible] = useState(false)
+  const location = useLocation()
+  const messageQueryMap = {
+    'added': { type: 'success', text: 'Added successfully 👍️' },
+    'created': { type: 'success', text: 'Created successfully 👍️' },
+    'error': { type: 'error', text: 'Sorry, there was an error' },
+    'oauth-error': { type: 'error', text: 'There was an error trying to signin, please try again' },
+    'removed': { type: 'success', text: 'Removed' },
+    'signin': { type: 'error', text: 'Please sign in to access this page' },
+    'updated': { type: 'success', text: 'Updated successfully' },
+    'unauth': { type: 'error', text: 'You are unauthorised' },
+  }
+  const colorMap = {
+    'error': 'text-danger',
+    'warning': 'text-warning',
+    'info': 'text-info',
+    'success': 'text-success',
+  }
+  const positionMap = {
+    'top-left': ['sm:items-start sm:justify-start', 'sm:translate-y-0  sm:translate-x-[-0.5rem]'],
+    'top-center': ['sm:items-start sm:justify-center', 'sm:translate-y-[-0.5rem]'],
+    'top-right': ['sm:items-start sm:justify-end', 'sm:translate-y-0 sm:translate-x-1'],
+    'bottom-left': ['sm:items-end sm:justify-start', 'sm:translate-y-0  sm:translate-x-[-0.5rem]'],
+    'bottom-center': ['sm:items-end sm:justify-center', 'sm:translate-y-1'],
+    'bottom-right': ['sm:items-end sm:justify-end', 'sm:translate-y-0 sm:translate-x-1'],
+  }
+  const color = colorMap[(store.message as MessageObject)?.type || 'success']
+  const positionArr = positionMap[(position as keyof typeof positionMap)]
+
+  useEffect(() => {
+    return () => {
+      setStore(s => ({ ...s, message: '' }))
+    }
+  }, [])
+
+  useEffect(() => {
+    // Finds a message in a query string and show it
+    let message
+    const query = queryObject(location.search, true)
+    for (const key in query) {
+      if (!query.hasOwnProperty(key)) continue
+      for (const key2 in messageQueryMap) {
+        if (key != key2) continue
+        // @ts-expect-error
+        message = { ...messageQueryMap[key] }
+        if (query[key] !== true) message.text = decodeURIComponent(query[key])
+      }
+    }
+    if (message) setStore(s => ({ ...s, message: message }))
+  }, [location.search])
+
+  useEffect(() => {
+    // Message detection and autohiding
+    const now = new Date().getTime()
+    const messageObject = store.message as MessageObject
+
+    if (!store.message) {
+      return
+    // Convert a string into a message object
+    } else if (isString(store.message)) {
+      setStore(s => ({ ...s, message: { type: 'success', text: store.message as string, date: now }}))
+    // Add a date to the message
+    } else if (!messageObject.date) {
+      setStore(s => ({ ...s, message: { ...messageObject, date: now }}))
+    // Show message and hide it again after some time. Send back cleanup if store.message changes
+    } else if (messageObject && now - 500 < messageObject.date) {
+      const timeout1 = setTimeout(() => setVisible(true), 50)
+      if (messageObject.timeout !== 0 && !devDontHide) var timeout2 = setTimeout(hide, messageObject.timeout || 5000)
+      return () => {
+        clearTimeout(timeout1)
+        clearTimeout(timeout2)
+      }
+    }
+  }, [JSON.stringify(store.message)])
+
+  function hide() {
+    setVisible(false)
+    setTimeout(() => setStore(s => ({ ...s, message: undefined })), 250)
+  }
+
+  return (
+    <>
+      {/* Global notification live region, render this permanently at the end of the document */}
+      <div
+        aria-live="assertive"
+        className={`${twMerge(`pointer-events-none items-end justify-center fixed inset-0 flex px-4 py-6 sm:p-6 z-[101] nitro-message ${positionArr[0]} ${classNameWrapper || ''}`)}`}
+      >
+        <div className="flex flex-col items-center space-y-4">
+          {isObject(store.message) && (
+            <div className={twMerge(
+              'overflow-hidden translate-y-[0.5rem] opacity-0 pointer-events-auto max-w-[350px] rounded-md bg-white shadow-lg ring-1 ring-black/5 transition text-sm font-medium text-gray-900',
+              positionArr[1],
+              (visible ? 'translate-x-0 translate-y-0 sm:translate-x-0 sm:translate-y-0 opacity-100' : ''),
+              className
+            )}>
+              <div className="p-3">
+                <div className="flex items-start gap-3 leading-[1.4em]">
+                  <div className="flex items-center shrink-0 min-h-[1.4em]">
+                    <CircleCheck aria-hidden="true" size={19} className={`${color}`} />
+                  </div>
+                  <div className="flex flex-1 items-center min-h-[1.4em]">
+                    <p>{typeof store.message === 'object' && store.message?.text}</p>
+                  </div>
+                  <div className="flex items-center shrink-0 min-h-[1.4em]">
+                    <button
+                      type="button"
+                      onClick={hide}
+                      className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 
+                        focus:ring-indigo-500 focus:ring-offset-2"
+                    >
+                      <span className="sr-only">Close</span>
+                      <X aria-hidden="true" size={19} />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}