@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/Select.tsx

@@ -24,10 +24,12 @@ import {
   createInteractOutside,
   FocusScope,
   type AriaSelectProps,
+  type AriaListBoxProps,
   type AriaOptionProps,
 } from '@proyecto-viviana/solidaria';
 import {
   createSelectState,
+  type ListState,
   type SelectState,
   type Key,
   type CollectionNode,
@@ -40,6 +42,10 @@ import {
   useRenderProps,
   filterDOMProps,
 } from './utils';
+import {
+  SelectionIndicatorContext,
+  type SelectionIndicatorContextValue,
+} from './SelectionIndicator';
 
 // ============================================
 // TYPES
@@ -73,12 +79,20 @@ export interface SelectProps<T>
   getDisabled?: (item: T) => boolean;
   /** Keys of disabled items. */
   disabledKeys?: Iterable<Key>;
+  /** Selection mode. */
+  selectionMode?: 'single' | 'multiple';
   /** The currently selected key (controlled). */
   selectedKey?: Key | null;
   /** The default selected key (uncontrolled). */
   defaultSelectedKey?: Key | null;
+  /** Currently selected keys (controlled, for multiple selection). */
+  selectedKeys?: 'all' | Iterable<Key>;
+  /** Default selected keys (uncontrolled, for multiple selection). */
+  defaultSelectedKeys?: 'all' | Iterable<Key>;
   /** Handler called when selection changes. */
   onSelectionChange?: (key: Key | null) => void;
+  /** Handler called when selected keys change. */
+  onSelectionChangeKeys?: (keys: 'all' | Set<Key>) => void;
   /** Whether the select is open (controlled). */
   isOpen?: boolean;
   /** Whether the select is open by default (uncontrolled). */
@@ -195,10 +209,12 @@ interface SelectContextValue<T> {
   state: SelectState<T>;
   triggerProps: JSX.HTMLAttributes<HTMLElement>;
   valueProps: JSX.HTMLAttributes<HTMLElement>;
+  labelProps: JSX.HTMLAttributes<HTMLElement>;
   menuProps: JSX.HTMLAttributes<HTMLElement>;
   isOpen: Accessor<boolean>;
   isFocused: Accessor<boolean>;
   isFocusVisible: Accessor<boolean>;
+  isDisabled: Accessor<boolean>;
   placeholder?: string;
   items: T[];
   renderItem?: (item: T) => JSX.Element;
@@ -206,6 +222,7 @@ interface SelectContextValue<T> {
 
 export const SelectContext = createContext<SelectContextValue<unknown> | null>(null);
 export const SelectStateContext = createContext<SelectState<unknown> | null>(null);
+export const SelectValueContext = SelectContext;
 
 // ============================================
 // COMPONENTS
@@ -218,9 +235,17 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
   const [local, stateProps, ariaProps] = splitProps(
     props,
     ['class', 'style', 'slot'],
-    ['items', 'getKey', 'getTextValue', 'getDisabled', 'disabledKeys', 'selectedKey', 'defaultSelectedKey', 'onSelectionChange', 'isOpen', 'defaultOpen', 'onOpenChange', 'name']
+    ['items', 'getKey', 'getTextValue', 'getDisabled', 'disabledKeys', 'selectionMode', 'selectedKey', 'defaultSelectedKey', 'selectedKeys', 'defaultSelectedKeys', 'onSelectionChange', 'onSelectionChangeKeys', 'isOpen', 'defaultOpen', 'onOpenChange', 'name']
   );
 
+  const resolveDisabled = (): boolean => {
+    const disabled = ariaProps.isDisabled;
+    if (typeof disabled === 'function') {
+      return (disabled as () => boolean)();
+    }
+    return !!disabled;
+  };
+
   // Create select state
   const state = createSelectState<T>({
     get items() {
@@ -238,15 +263,27 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     get disabledKeys() {
       return stateProps.disabledKeys;
     },
+    get selectionMode() {
+      return stateProps.selectionMode;
+    },
     get selectedKey() {
       return stateProps.selectedKey;
     },
     get defaultSelectedKey() {
       return stateProps.defaultSelectedKey;
     },
+    get selectedKeys() {
+      return stateProps.selectedKeys;
+    },
+    get defaultSelectedKeys() {
+      return stateProps.defaultSelectedKeys;
+    },
     get onSelectionChange() {
       return stateProps.onSelectionChange;
     },
+    get onSelectionChangeKeys() {
+      return stateProps.onSelectionChangeKeys;
+    },
     get isOpen() {
       return stateProps.isOpen;
     },
@@ -257,7 +294,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       return stateProps.onOpenChange;
     },
     get isDisabled() {
-      return ariaProps.isDisabled;
+      return resolveDisabled();
     },
     get isRequired() {
       return ariaProps.isRequired;
@@ -265,7 +302,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
   });
 
   // Create select aria props
-  const { triggerProps, valueProps, menuProps, isFocused, isFocusVisible, isOpen } = createSelect<T>(
+  const { labelProps, triggerProps, valueProps, menuProps, isFocused, isFocusVisible, isOpen } = createSelect<T>(
     ariaProps,
     state
   );
@@ -273,7 +310,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
   // Create hover for wrapper
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
-      return ariaProps.isDisabled;
+      return resolveDisabled();
     },
   });
 
@@ -282,9 +319,11 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     isOpen: isOpen(),
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
-    isDisabled: !!ariaProps.isDisabled,
+    isDisabled: resolveDisabled(),
     isRequired: !!ariaProps.isRequired,
-    isSelected: state.selectedKey() != null,
+    isSelected: state.selectionMode() === 'multiple'
+      ? state.selectedKeys() === 'all' || (state.selectedKeys() as Set<Key>).size > 0
+      : state.selectedKey() != null,
   }));
 
   // Resolve render props
@@ -308,13 +347,17 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;
     return rest;
   };
+  const cleanLabelProps = () => {
+    const { ref: _ref, ...rest } = labelProps as Record<string, unknown>;
+    return rest;
+  };
 
   // Create hidden select for form submission
   const { containerProps, selectProps: hiddenSelectProps } = createHiddenSelect({
     state,
     name: stateProps.name,
     get isDisabled() {
-      return ariaProps.isDisabled;
+      return resolveDisabled();
     },
   });
 
@@ -324,10 +367,12 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
         state,
         triggerProps,
         valueProps,
+        labelProps,
         menuProps,
         isOpen,
         isFocused,
         isFocusVisible,
+        isDisabled: resolveDisabled,
         placeholder: ariaProps.placeholder,
         items: stateProps.items,
       }}
@@ -341,7 +386,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
           data-open={isOpen() || undefined}
           data-focused={isFocused() || undefined}
           data-focus-visible={isFocusVisible() || undefined}
-          data-disabled={ariaProps.isDisabled || undefined}
+          data-disabled={resolveDisabled() || undefined}
           data-required={ariaProps.isRequired || undefined}
           data-hovered={isHovered() || undefined}
         >
@@ -351,10 +396,23 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
               <option />
               <For each={stateProps.items}>
                 {(item) => {
-                  const key = stateProps.getKey?.(item) ?? (item as any).key ?? (item as any).id;
-                  const textValue = stateProps.getTextValue?.(item) ?? (item as any).textValue ?? (item as any).label ?? String(item);
+                  const itemRecord = isObjectRecord(item) ? item : null;
+                  const fallbackKey = itemRecord != null
+                    ? toKey(itemRecord.key) ?? toKey(itemRecord.id)
+                    : undefined;
+                  const key = stateProps.getKey?.(item) ?? fallbackKey ?? String(item);
+                  const fallbackTextValue = itemRecord != null
+                    ? toTextValue(itemRecord.textValue) ?? toTextValue(itemRecord.label)
+                    : undefined;
+                  const textValue = stateProps.getTextValue?.(item) ?? fallbackTextValue ?? String(item);
+                  const selectedKeys = state.selectedKeys();
+                  const isSelected = state.selectionMode() === 'multiple'
+                    ? selectedKeys === 'all'
+                      ? true
+                      : (selectedKeys as Set<Key>).has(key)
+                    : key === state.selectedKey();
                   return (
-                    <option value={String(key)} selected={key === state.selectedKey()}>
+                    <option value={String(key)} selected={isSelected}>
                       {textValue}
                     </option>
                   );
@@ -362,6 +420,9 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
               </For>
             </select>
           </div>
+          <Show when={ariaProps.label}>
+            <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+          </Show>
           {props.children}
         </div>
       </SelectStateContext.Provider>
@@ -373,7 +434,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
  * The trigger button for a select.
  */
 export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
 
   // Get context
   const context = useContext(SelectContext);
@@ -421,6 +482,7 @@ export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
 
   return (
     <button
+      {...domProps}
       {...cleanTriggerProps()}
       {...cleanHoverProps()}
       type="button"
@@ -446,7 +508,7 @@ function defaultSelectValueChildren<T>(values: SelectValueRenderProps<T>) {
  * Displays the selected value in a select.
  */
 export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot', 'placeholder']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'placeholder', 'children']);
 
   // Get context
   const context = useContext(SelectContext);
@@ -462,10 +524,14 @@ export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
   // Render props values
   const renderValues = createMemo<SelectValueRenderProps<T>>(() => {
     const selectedItem = state.selectedItem();
+    const selectedItems = state.selectedItems();
+    const selectedText = state.selectionMode() === 'multiple'
+      ? selectedItems.map((item) => item.textValue).join(', ')
+      : selectedItem?.textValue ?? null;
     return {
       selectedItem,
-      selectedText: selectedItem?.textValue ?? null,
-      isSelected: selectedItem != null,
+      selectedText,
+      isSelected: state.selectionMode() === 'multiple' ? selectedItems.length > 0 : selectedItem != null,
       placeholder: placeholder(),
     };
   });
@@ -483,6 +549,7 @@ export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
 
   return (
     <span
+      {...domProps}
       {...valueProps}
       class={renderProps.class()}
       style={renderProps.style()}
@@ -497,7 +564,7 @@ export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
  * The listbox popup for a select.
  */
 export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
 
   // Get context
   const context = useContext(SelectContext);
@@ -525,29 +592,13 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
 
   // Create listbox aria props - reuse select's internal list state via collection
   const { listBoxProps } = createListBox(
-    {},
     {
-      collection: state.collection,
-      focusedKey: state.focusedKey,
-      setFocusedKey: state.setFocusedKey,
-      isFocused: state.isFocused,
-      setFocused: state.setFocused,
-      selectedKeys: () => {
-        const key = state.selectedKey();
-        return key != null ? new Set([key]) : new Set();
+      ...(menuProps as unknown as AriaListBoxProps),
+      get isDisabled() {
+        return state.isDisabled;
       },
-      isSelected: (key: Key) => state.selectedKey() === key,
-      isDisabled: state.isKeyDisabled,
-      selectionMode: () => 'single' as const,
-      disallowEmptySelection: () => true,
-      select: (key: Key) => state.setSelectedKey(key),
-      toggleSelection: (key: Key) => state.setSelectedKey(key),
-      replaceSelection: (key: Key) => state.setSelectedKey(key),
-      extendSelection: () => {},
-      selectAll: () => {},
-      clearSelection: () => state.setSelectedKey(null),
-      childFocusStrategy: () => null,
-    } as any
+    },
+    createSelectListStateAdapter(state)
   );
 
   // Render props values
@@ -582,6 +633,7 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
       <FocusScope restoreFocus autoFocus>
         <ul
           ref={(el) => (listBoxRef = el)}
+          {...domProps}
           {...cleanMenuProps()}
           {...cleanListBoxProps()}
           class={renderProps.class()}
@@ -626,49 +678,51 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
     throw new Error('SelectOption must be used within a Select');
   }
   const state = context as SelectState<T>;
+  const selectContext = useContext(SelectContext) as SelectContextValue<T> | null;
 
   // Create option aria props - adapt select state to list state interface
   const optionAria = createOption<T>(
     {
       key: local.id,
       get isDisabled() {
-        return ariaProps.isDisabled;
+        return Boolean(ariaProps.isDisabled || selectContext?.isDisabled());
       },
       get 'aria-label'() {
-        return ariaProps['aria-label'];
+        return ariaProps['aria-label'] ?? local.textValue;
       },
     },
     {
-      collection: state.collection,
-      focusedKey: state.focusedKey,
-      setFocusedKey: state.setFocusedKey,
-      isFocused: state.isFocused,
-      setFocused: state.setFocused,
-      selectedKeys: () => {
-        const key = state.selectedKey();
-        return key != null ? new Set([key]) : new Set();
-      },
-      isSelected: (key: Key) => state.selectedKey() === key,
-      isDisabled: state.isKeyDisabled,
-      selectionMode: () => 'single' as const,
-      disallowEmptySelection: () => true,
+      ...createSelectListStateAdapter(state),
       select: (key: Key) => {
+        if (state.selectionMode() === 'multiple') {
+          const keys = state.selectedKeys();
+          if (keys === 'all') return;
+          state.setSelectedKeys(new Set([...keys, key]));
+          return;
+        }
         state.setSelectedKey(key);
         state.close();
       },
       toggleSelection: (key: Key) => {
+        if (state.selectionMode() === 'multiple') {
+          const keys = state.selectedKeys();
+          if (keys === 'all') return;
+          const next = new Set(keys);
+          if (next.has(key)) next.delete(key);
+          else next.add(key);
+          state.setSelectedKeys(next);
+          return;
+        }
         state.setSelectedKey(key);
         state.close();
       },
       replaceSelection: (key: Key) => {
         state.setSelectedKey(key);
-        state.close();
+        if (state.selectionMode() !== 'multiple') {
+          state.close();
+        }
       },
-      extendSelection: () => {},
-      selectAll: () => {},
-      clearSelection: () => state.setSelectedKey(null),
-      childFocusStrategy: () => null,
-    } as any
+    }
   );
 
   // Create hover
@@ -698,10 +752,24 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
     },
     renderValues
   );
+  const hasPrimitiveLabel = () => {
+    return typeof props.children === 'string' || typeof props.children === 'number';
+  };
+
+  const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
+    isSelected: optionAria.isSelected,
+  }));
 
   // Remove ref from spread props
   const cleanOptionProps = () => {
-    const { ref: _ref1, ...rest } = optionAria.optionProps as Record<string, unknown>;
+    const {
+      ref: _ref1,
+      'aria-describedby': _ariaDescribedby,
+      ...rest
+    } = optionAria.optionProps as Record<string, unknown>;
+    if (!hasPrimitiveLabel() && rest['aria-label'] == null) {
+      delete rest['aria-labelledby'];
+    }
     return rest;
   };
   const cleanHoverProps = () => {
@@ -710,23 +778,103 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
   };
 
   return (
-    <li
-      {...cleanOptionProps()}
-      {...cleanHoverProps()}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-selected={optionAria.isSelected() || undefined}
-      data-focused={optionAria.isFocused() || undefined}
-      data-focus-visible={optionAria.isFocusVisible() || undefined}
-      data-pressed={optionAria.isPressed() || undefined}
-      data-hovered={isHovered() || undefined}
-      data-disabled={optionAria.isDisabled() || undefined}
-    >
-      {renderProps.renderChildren()}
-    </li>
+    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+      <li
+        {...cleanOptionProps()}
+        {...cleanHoverProps()}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-selected={optionAria.isSelected() || undefined}
+        data-focused={optionAria.isFocused() || undefined}
+        data-focus-visible={optionAria.isFocusVisible() || undefined}
+        data-pressed={optionAria.isPressed() || undefined}
+        data-hovered={isHovered() || undefined}
+        data-disabled={optionAria.isDisabled() || undefined}
+      >
+        {hasPrimitiveLabel()
+          ? <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span>
+          : renderProps.renderChildren()}
+      </li>
+    </SelectionIndicatorContext.Provider>
   );
 }
 
+function isObjectRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function toKey(value: unknown): Key | undefined {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value;
+  }
+  return undefined;
+}
+
+function toTextValue(value: unknown): string | undefined {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value);
+  }
+  return undefined;
+}
+
+function createSelectListStateAdapter<T>(state: SelectState<T>): ListState<T> {
+  const selectedKeys = createMemo(() => {
+    const keys = state.selectedKeys();
+    return keys === 'all'
+      ? new Set(Array.from(state.collection()).map((item) => item.key))
+      : keys;
+  });
+
+  const disabledKeys = createMemo(() => {
+    const keys = new Set<Key>();
+    for (const node of state.collection()) {
+      if (node.isDisabled) keys.add(node.key);
+    }
+    return keys;
+  });
+
+  return {
+    collection: state.collection,
+    isFocused: state.isFocused,
+    setFocused: state.setFocused,
+    focusedKey: state.focusedKey,
+    setFocusedKey: (key) => state.setFocusedKey(key ?? null),
+    childFocusStrategy: () => null,
+    selectionMode: () => state.selectionMode(),
+    selectionBehavior: () => 'replace',
+    disallowEmptySelection: () => true,
+    selectedKeys,
+    disabledKeys,
+    disabledBehavior: () => 'all',
+    isEmpty: () => selectedKeys().size === 0,
+    isSelectAll: () => state.selectedKeys() === 'all',
+    isSelected: (key) => selectedKeys().has(key),
+    isDisabled: state.isKeyDisabled,
+    setSelectionBehavior: () => {},
+    toggleSelection: (key) => {
+      if (state.selectionMode() !== 'multiple') {
+        state.setSelectedKey(key);
+        return;
+      }
+      const keys = state.selectedKeys();
+      if (keys === 'all') return;
+      const next = new Set(keys);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      state.setSelectedKeys(next);
+    },
+    replaceSelection: (key) => state.setSelectedKey(key),
+    setSelectedKeys: (keys) => state.setSelectedKeys(keys),
+    selectAll: () => {},
+    clearSelection: () => state.selectionMode() === 'multiple' ? state.setSelectedKeys([]) : state.setSelectedKey(null),
+    toggleSelectAll: () => {},
+    extendSelection: (toKey) => state.setSelectedKey(toKey),
+    select: (key) => state.selectionMode() === 'multiple'
+      ? state.setSelectedKeys([...(state.selectedKeys() === 'all' ? [] : state.selectedKeys() as Set<Key>), key])
+      : state.setSelectedKey(key),
+  };
+}
+
 // Attach sub-components
 Select.Trigger = SelectTrigger;
 Select.Value = SelectValue;

package/src/SelectionIndicator.tsx

@@ -0,0 +1,105 @@
+/**
+ * Shared SelectionIndicator primitive for selected collection items.
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+  Show,
+} from 'solid-js';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+} from './utils';
+import { SharedElement, useHasSharedElementTransitionScope } from './SharedElementTransition';
+
+export interface SelectionIndicatorContextValue {
+  isSelected: () => boolean;
+}
+
+export const SelectionIndicatorContext = createContext<SelectionIndicatorContextValue | null>(null);
+
+export interface SelectionIndicatorRenderProps {
+  /** Whether the parent item is selected. */
+  isSelected: boolean;
+}
+
+export interface SelectionIndicatorProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'class' | 'style' | 'children'> {
+  /** Optional controlled selected state override. */
+  isSelected?: boolean;
+  /** Whether to keep mounted when not selected. */
+  shouldForceMount?: boolean;
+  /** The children content. */
+  children?: RenderChildren<SelectionIndicatorRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<SelectionIndicatorRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<SelectionIndicatorRenderProps>;
+}
+
+/**
+ * SelectionIndicator renders when its parent item is selected.
+ */
+export function SelectionIndicator(props: SelectionIndicatorProps): JSX.Element {
+  const [local, domProps] = splitProps(props, ['isSelected', 'shouldForceMount', 'children', 'class', 'style', 'slot']);
+
+  const context = useContext(SelectionIndicatorContext);
+  const hasSharedElementScope = useHasSharedElementTransitionScope();
+  const isSelected = () => local.isSelected ?? context?.isSelected() ?? false;
+  const isVisible = () => local.shouldForceMount || isSelected();
+
+  const renderValues = createMemo<SelectionIndicatorRenderProps>(() => ({
+    isSelected: isSelected(),
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-SelectionIndicator',
+    },
+    renderValues
+  );
+
+  const sharedElementProps = createMemo(() => {
+    const { ref: _ref, ...rest } = domProps as JSX.HTMLAttributes<HTMLSpanElement> & { ref?: unknown };
+    return rest;
+  });
+
+  if (hasSharedElementScope) {
+    return (
+      <SharedElement
+        {...sharedElementProps()}
+        name="SelectionIndicator"
+        isVisible={isVisible()}
+        aria-hidden="true"
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-selected={isSelected() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </SharedElement>
+    );
+  }
+
+  return (
+    <Show when={isVisible()}>
+      <span
+        {...domProps}
+        aria-hidden="true"
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-selected={isSelected() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </span>
+    </Show>
+  );
+}