Bulk Actions

import { ActionBar, Badge, Button, Table } from '@marigold/components';import { Archive, Tag } from '@marigold/icons';const events = [  {    id: '1',    name: 'Jazz Night',    date: 'Aug 12, 2026',    venue: 'Jazzhaus Freiburg',    status: 'On sale',  },  {    id: '2',    name: 'Open Air Kino',    date: 'Aug 15, 2026',    venue: 'Mensagarten',    status: 'On sale',  },  {    id: '3',    name: 'Poetry Slam',    date: 'Aug 21, 2026',    venue: 'Vorderhaus',    status: 'Draft',  },  {    id: '4',    name: 'Herbstmarkt',    date: 'Sep 5, 2026',    venue: 'Messe Freiburg',    status: 'Draft',  },  {    id: '5',    name: 'Wine Tasting',    date: 'Sep 12, 2026',    venue: 'Alte Wache',    status: 'On sale',  },  {    id: '6',    name: 'Klassik im Park',    date: 'Sep 19, 2026',    venue: 'Stadtgarten',    status: 'On sale',  },];export default () => (  <Table    aria-label="Events"    // These two props are the whole mechanism: the Table owns selection,    // and the bar with the actions rides along in the actionBar prop.    selectionMode="multiple" // [!code highlight]    // [!code highlight:1]    actionBar={() => (      <ActionBar>        <Button onPress={() => alert('Assign category')}>          <Tag />          Assign category        </Button>        <Button onPress={() => alert('Archive')}>          <Archive />          Archive        </Button>      </ActionBar>    )}  >    <Table.Header>      <Table.Column rowHeader>Event</Table.Column>      <Table.Column>Date</Table.Column>      <Table.Column>Venue</Table.Column>      <Table.Column>Status</Table.Column>    </Table.Header>    <Table.Body>      {events.map(event => (        <Table.Row key={event.id} id={event.id}>          <Table.Cell>{event.name}</Table.Cell>          <Table.Cell>{event.date}</Table.Cell>          <Table.Cell>{event.venue}</Table.Cell>          <Table.Cell>            <Badge variant={event.status === 'On sale' ? 'success' : 'info'}>              {event.status}            </Badge>          </Table.Cell>        </Table.Row>      ))}    </Table.Body>  </Table>);

import { useState } from 'react';import type { Selection } from '@marigold/components';import {  ActionBar,  Badge,  Button,  Select,  Stack,  Table,} from '@marigold/components';import { Archive, Tag } from '@marigold/icons';const events = [  {    id: '1',    name: 'Jazz Night',    date: 'Aug 12, 2026',    status: 'On sale',  },  {    id: '2',    name: 'Open Air Kino',    date: 'Aug 15, 2026',    status: 'On sale',  },  {    id: '3',    name: 'Poetry Slam',    date: 'Aug 21, 2026',    status: 'Draft',  },  {    id: '4',    name: 'Herbstmarkt',    date: 'Sep 5, 2026',    status: 'Draft',  },  {    id: '5',    name: 'Wine Tasting',    date: 'Sep 12, 2026',    status: 'On sale',  },];export default () => {  const [status, setStatus] = useState('all');  const [selected, setSelected] = useState<Selection>(new Set());  const visible =    status === 'all' ? events : events.filter(event => event.status === status);  // Clearing here, next to setStatus, is what keeps the selection from  // outliving the view it was made in. One wrapper, so it can't be missed.  const changeFilter = (nextStatus: string) => {    setSelected(new Set()); // [!code highlight]    setStatus(nextStatus);  };  return (    <Stack space={4}>      <Select        label="Status"        value={status}        onChange={key => changeFilter(String(key))}        width={44}      >        <Select.Option id="all">All statuses</Select.Option>        <Select.Option id="On sale">On sale</Select.Option>        <Select.Option id="Draft">Draft</Select.Option>      </Select>      <Table        aria-label="Events"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}        actionBar={() => (          <ActionBar>            <Button onPress={() => alert('Assign category')}>              <Tag />              Assign category            </Button>            <Button onPress={() => alert('Archive')}>              <Archive />              Archive            </Button>          </ActionBar>        )}      >        <Table.Header>          <Table.Column rowHeader>Event</Table.Column>          <Table.Column>Date</Table.Column>          <Table.Column>Status</Table.Column>        </Table.Header>        <Table.Body>          {visible.map(event => (            <Table.Row key={event.id} id={event.id}>              <Table.Cell>{event.name}</Table.Cell>              <Table.Cell>{event.date}</Table.Cell>              <Table.Cell>                <Badge                  variant={event.status === 'On sale' ? 'success' : 'info'}                >                  {event.status}                </Badge>              </Table.Cell>            </Table.Row>          ))}        </Table.Body>      </Table>    </Stack>  );};

import { useState } from 'react';import type { Selection } from '@marigold/components';import {  ActionBar,  Badge,  Button,  Pagination,  Stack,  Table,} from '@marigold/components';import { Archive, Tag } from '@marigold/icons';const pageSize = 4;const events = [  { id: '1', name: 'Jazz Night', date: 'Aug 12, 2026', status: 'On sale' },  { id: '2', name: 'Open Air Kino', date: 'Aug 15, 2026', status: 'On sale' },  { id: '3', name: 'Poetry Slam', date: 'Aug 21, 2026', status: 'Draft' },  { id: '4', name: 'Herbstmarkt', date: 'Sep 5, 2026', status: 'Draft' },  { id: '5', name: 'Wine Tasting', date: 'Sep 12, 2026', status: 'On sale' },  { id: '6', name: 'Krimi Dinner', date: 'Sep 19, 2026', status: 'On sale' },  { id: '7', name: 'Comedy Club', date: 'Sep 26, 2026', status: 'Draft' },  { id: '8', name: 'Filmkonzert', date: 'Oct 3, 2026', status: 'On sale' },  { id: '9', name: 'Lesung am See', date: 'Oct 10, 2026', status: 'Draft' },];export default () => {  const [page, setPage] = useState(1);  const [selected, setSelected] = useState<Selection>(new Set());  const visible = events.slice((page - 1) * pageSize, page * pageSize);  // A page change is a scope change: clearing here keeps the selection from  // silently including rows that are no longer on screen.  const changePage = (nextPage: number) => {    setSelected(new Set()); // [!code highlight]    setPage(nextPage);  };  return (    <Stack space={4}>      <Table        aria-label="Events"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}        actionBar={() => (          <ActionBar>            <Button onPress={() => alert('Assign category')}>              <Tag />              Assign category            </Button>            <Button onPress={() => alert('Archive')}>              <Archive />              Archive            </Button>          </ActionBar>        )}      >        <Table.Header>          <Table.Column rowHeader>Event</Table.Column>          <Table.Column>Date</Table.Column>          <Table.Column>Status</Table.Column>        </Table.Header>        <Table.Body>          {visible.map(event => (            <Table.Row key={event.id} id={event.id}>              <Table.Cell>{event.name}</Table.Cell>              <Table.Cell>{event.date}</Table.Cell>              <Table.Cell>                <Badge                  variant={event.status === 'On sale' ? 'success' : 'info'}                >                  {event.status}                </Badge>              </Table.Cell>            </Table.Row>          ))}        </Table.Body>      </Table>      <Pagination        page={page}        totalItems={events.length}        pageSize={pageSize}        onChange={changePage}      />    </Stack>  );};

import { useState } from 'react';import type { Selection } from '@marigold/components';import {  ActionBar,  Badge,  Button,  Table,  ToastProvider,  useToast,} from '@marigold/components';import { CircleCheck, CirclePause } from '@marigold/icons';interface Event {  id: string;  name: string;  date: string;  status: 'On sale' | 'Paused' | 'Draft';}const initialEvents: Event[] = [  { id: '1', name: 'Jazz Night', date: 'Aug 12, 2026', status: 'Draft' },  { id: '2', name: 'Open Air Kino', date: 'Aug 15, 2026', status: 'Draft' },  { id: '3', name: 'Poetry Slam', date: 'Aug 21, 2026', status: 'On sale' },  { id: '4', name: 'Herbstmarkt', date: 'Sep 5, 2026', status: 'Draft' },  { id: '5', name: 'Wine Tasting', date: 'Sep 12, 2026', status: 'On sale' },];const statusVariants = {  'On sale': 'success',  Paused: 'warning',  Draft: 'info',} as const;export default () => {  const [events, setEvents] = useState(initialEvents);  const [selected, setSelected] = useState<Selection>(new Set());  const { addToast } = useToast();  const applyStatus = (status: Event['status']) => {    // Resolve the selection to a concrete list once, so the count in the    // toast and the records we change can never disagree.    // [!code highlight:2]    const keys =      selected === 'all' ? events.map(event => event.id) : [...selected];    setEvents(current =>      current.map(event =>        keys.includes(event.id) ? { ...event, status } : event      )    );    const scope = keys.length === 1 ? '1 event' : `${keys.length} events`;    addToast({      title: `${scope} ${status === 'On sale' ? 'put on sale' : 'paused'}`,      variant: 'success',    });    setSelected(new Set()); // [!code highlight]  };  return (    <>      {/* The one toast region for this page: the other bulk-actions demos          enqueue into the same global queue and render through it. */}      <ToastProvider position="bottom-right" />      <Table        aria-label="Events"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}        actionBar={() => (          <ActionBar>            <Button onPress={() => applyStatus('On sale')}>              <CircleCheck />              Put on sale            </Button>            <Button onPress={() => applyStatus('Paused')}>              <CirclePause />              Pause sale            </Button>          </ActionBar>        )}      >        <Table.Header>          <Table.Column rowHeader>Event</Table.Column>          <Table.Column>Date</Table.Column>          <Table.Column>Status</Table.Column>        </Table.Header>        <Table.Body>          {events.map(event => (            <Table.Row key={event.id} id={event.id}>              <Table.Cell>{event.name}</Table.Cell>              <Table.Cell>{event.date}</Table.Cell>              <Table.Cell>                <Badge variant={statusVariants[event.status]}>                  {event.status}                </Badge>              </Table.Cell>            </Table.Row>          ))}        </Table.Body>      </Table>    </>  );};

import { useState } from 'react';import type { Selection } from '@marigold/components';import {  ActionBar,  Button,  Inline,  Stack,  Table,  useConfirmation,  useToast,} from '@marigold/components';import { RotateCcw, Trash2 } from '@marigold/icons';interface Event {  id: string;  name: string;  date: string;  reservations: number;}const initialEvents: Event[] = [  { id: '1', name: 'Jazz Night', date: 'Aug 12, 2026', reservations: 47 },  { id: '2', name: 'Open Air Kino', date: 'Aug 15, 2026', reservations: 112 },  { id: '3', name: 'Poetry Slam', date: 'Aug 21, 2026', reservations: 0 },  { id: '4', name: 'Herbstmarkt', date: 'Sep 5, 2026', reservations: 23 },  { id: '5', name: 'Wine Tasting', date: 'Sep 12, 2026', reservations: 65 },];export default () => {  const [events, setEvents] = useState(initialEvents);  const [selected, setSelected] = useState<Selection>(new Set());  const confirm = useConfirmation();  const { addToast } = useToast();  const deleteSelected = async () => {    const keys =      selected === 'all' ? events.map(event => event.id) : [...selected];    const affected = events.filter(event => keys.includes(event.id));    const reservations = affected.reduce(      (sum, event) => sum + event.reservations,      0    );    const scope =      affected.length === 1 ? '1 event' : `${affected.length} events`;    // Name the exact count and the impact, repeat the verb in the confirm    // button, and focus Cancel so a reflexive Enter takes the safe path.    // [!code highlight:8]    const result = await confirm({      variant: 'destructive',      title: `Delete ${scope}?`,      content: `This will cancel ${reservations} ticket reservations and notify the ticket buyers. This action cannot be undone.`,      confirmationLabel: `Delete ${scope}`,      cancelLabel: 'Cancel',      autoFocusButton: 'cancel',    });    if (result === 'confirmed') {      setEvents(current => current.filter(event => !keys.includes(event.id)));      setSelected(new Set());      addToast({        title: `${scope} deleted`,        variant: 'success',      });    }  };  return (    <Stack space={2}>      <Table        aria-label="Events"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}        actionBar={() => (          <ActionBar>            <Button onPress={deleteSelected}>              <Trash2 />              Delete            </Button>          </ActionBar>        )}      >        <Table.Header>          <Table.Column rowHeader>Event</Table.Column>          <Table.Column>Date</Table.Column>          <Table.Column>Reservations</Table.Column>        </Table.Header>        <Table.Body>          {events.map(event => (            <Table.Row key={event.id} id={event.id}>              <Table.Cell>{event.name}</Table.Cell>              <Table.Cell>{event.date}</Table.Cell>              <Table.Cell>{event.reservations}</Table.Cell>            </Table.Row>          ))}        </Table.Body>      </Table>      {events.length < initialEvents.length && (        <Inline alignX="right">          <Button            variant="ghost"            size="small"            onPress={() => setEvents(initialEvents)}          >            <RotateCcw />            Reset demo          </Button>        </Inline>      )}    </Stack>  );};

import { useState } from 'react';import type { Selection } from '@marigold/components';import {  ActionBar,  Button,  Checkbox,  Drawer,  NumberField,  Select,  Stack,  Table,  Text,  useToast,} from '@marigold/components';import { Pencil } from '@marigold/icons';interface Event {  id: string;  name: string;  venue: string;  category: string;  price: number;}const initialEvents: Event[] = [  {    id: '1',    name: 'Jazz Night',    venue: 'Jazzhaus',    category: 'Concert',    price: 24,  },  {    id: '2',    name: 'Blues Session',    venue: 'Vorderhaus',    category: 'Concert',    price: 19,  },  {    id: '3',    name: 'Swing Evening',    venue: 'Alte Wache',    category: 'Concert',    price: 24,  },  {    id: '4',    name: 'Wine Tasting',    venue: 'Alte Wache',    category: 'Culinary',    price: 45,  },];/** The value shared by all records, or `undefined` when values differ. */// [!code highlight:4]const sharedValue = <K extends keyof Event>(records: Event[], field: K) =>  records.every(record => record[field] === records[0]?.[field])    ? records[0]?.[field]    : undefined;const BulkEditForm = ({  affected,  onApply,}: {  affected: Event[];  onApply: (changes: Partial<Event>) => void;}) => {  const sharedVenue = sharedValue(affected, 'venue');  const sharedCategory = sharedValue(affected, 'category');  const sharedPrice = sharedValue(affected, 'price');  const [venue, setVenue] = useState(sharedVenue ?? null);  const [category, setCategory] = useState(sharedCategory ?? null);  const [editPrice, setEditPrice] = useState(false);  const [price, setPrice] = useState(sharedPrice ?? NaN);  // [!code highlight:7]  // Implicit opt-in: a field is only applied when the user changed it.  const changes: Partial<Event> = {};  if (venue !== (sharedVenue ?? null) && venue) changes.venue = String(venue);  if (category !== (sharedCategory ?? null) && category)    changes.category = String(category);  // Explicit opt-in: price only applies while its checkbox is checked.  if (editPrice && !Number.isNaN(price)) changes.price = price;  const changedFields = Object.keys(changes);  const scope = affected.length === 1 ? '1 event' : `${affected.length} events`;  return (    <>      <Drawer.Title>Edit {scope}</Drawer.Title>      <Drawer.Content>        <Stack space={4}>          <Select            label="Venue"            placeholder="Multiple values"            value={venue}            onChange={key => setVenue(String(key))}          >            <Select.Option id="Jazzhaus">Jazzhaus</Select.Option>            <Select.Option id="Vorderhaus">Vorderhaus</Select.Option>            <Select.Option id="Alte Wache">Alte Wache</Select.Option>          </Select>          <Select            label="Category"            placeholder="Multiple values"            value={category}            onChange={key => setCategory(String(key))}          >            <Select.Option id="Concert">Concert</Select.Option>            <Select.Option id="Culinary">Culinary</Select.Option>            <Select.Option id="Theater">Theater</Select.Option>          </Select>          <Stack space={2}>            <Checkbox              label="Change ticket price"              checked={editPrice}              onChange={setEditPrice}            />            <NumberField              label="Ticket price"              disabled={!editPrice}              value={price}              onChange={setPrice}              description={                sharedPrice === undefined                  ? 'Selected events currently have different prices.'                  : undefined              }              formatOptions={{ style: 'currency', currency: 'EUR' }}            />          </Stack>          <Text fontSize="sm" variant="muted" aria-live="polite">            {changedFields.length === 0              ? 'No changes yet. Untouched fields stay as they are.'              : `Will update ${changedFields.join(' and ')} on all selected events.`}          </Text>        </Stack>      </Drawer.Content>      <Drawer.Actions>        <Button slot="close">Cancel</Button>        <Button          slot="close"          variant="primary"          disabled={changedFields.length === 0}          onPress={() => onApply(changes)}        >          Apply to {scope}        </Button>      </Drawer.Actions>    </>  );};export default () => {  const [events, setEvents] = useState(initialEvents);  const [selected, setSelected] = useState<Selection>(new Set(['1', '2', '3']));  const { addToast } = useToast();  const selectedIds =    selected === 'all'      ? events.map(event => event.id)      : [...selected].map(String);  const affected = events.filter(event => selectedIds.includes(event.id));  const applyChanges = (changes: Partial<Event>) => {    setEvents(current =>      current.map(event =>        selectedIds.includes(event.id) ? { ...event, ...changes } : event      )    );    addToast({      title:        affected.length === 1          ? '1 event updated'          : `${affected.length} events updated`,      variant: 'success',    });    setSelected(new Set());  };  return (    <>      <Table        aria-label="Events"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}        actionBar={() => (          <ActionBar>            <Drawer.Trigger>              <Button>                <Pencil />                Edit              </Button>              <Drawer size="medium">                {/* Re-key the form so it derives fresh values per selection. */}                <BulkEditForm                  key={selectedIds.join('-')} // [!code highlight]                  affected={affected}                  onApply={applyChanges}                />              </Drawer>            </Drawer.Trigger>          </ActionBar>        )}      >        <Table.Header>          <Table.Column rowHeader>Event</Table.Column>          <Table.Column>Venue</Table.Column>          <Table.Column>Category</Table.Column>          <Table.Column>Price</Table.Column>        </Table.Header>        <Table.Body>          {events.map(event => (            <Table.Row key={event.id} id={event.id}>              <Table.Cell>{event.name}</Table.Cell>              <Table.Cell>{event.venue}</Table.Cell>              <Table.Cell>{event.category}</Table.Cell>              <Table.Cell>{event.price.toFixed(2)} €</Table.Cell>            </Table.Row>          ))}        </Table.Body>      </Table>    </>  );};

import { useState } from 'react';import type { Selection } from '@marigold/components';import {  ActionBar,  Button,  Inline,  ProgressCircle,  Table,  Text,  useToast,} from '@marigold/components';import { Download, Send } from '@marigold/icons';const events = [  { id: '1', name: 'Jazz Night', tickets: 214 },  { id: '2', name: 'Open Air Kino', tickets: 460 },  { id: '3', name: 'Poetry Slam', tickets: 95 },  { id: '4', name: 'Herbstmarkt', tickets: 310 },  { id: '5', name: 'Wine Tasting', tickets: 58 },  { id: '6', name: 'Klassik im Park', tickets: 127 },];const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));export default () => {  const [selected, setSelected] = useState<Selection>(    new Set(events.map(event => event.id))  );  const [exporting, setExporting] = useState(false);  const [sending, setSending] = useState<{ done: number; total: number }>();  const { addToast } = useToast();  const count = selected === 'all' ? events.length : selected.size;  // A quick operation: the pressed button carries the feedback.  const exportSelected = async () => {    setExporting(true);    await wait(1500);    setExporting(false);    addToast({      title: count === 1 ? '1 event exported' : `${count} events exported`,      variant: 'success',    });    setSelected(new Set());  };  // A longer, per-record operation: the bar reports the running count.  const sendReminders = async () => {    for (let done = 0; done < count; done++) {      setSending({ done, total: count });      await wait(600);    }    setSending(undefined);    addToast({      title: count === 1 ? '1 reminder sent' : `${count} reminders sent`,      variant: 'success',    });    setSelected(new Set());  };  return (    <>      <Table        aria-label="Events"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}        actionBar={() => (          <ActionBar>            {sending ? (              // Longer op: the running count replaces the actions in place,              // announced politely so it is not just a visual change.              // [!code highlight:6]              <Inline space={2} alignY="center">                <ProgressCircle />                <Text aria-live="polite">                  Sending {sending.done + 1} of {sending.total}…                </Text>              </Inline>            ) : (              <>                {/* Quick op: feedback rides on the pressed button. */}                {/* [!code highlight:4] */}                <Button loading={exporting} onPress={exportSelected}>                  <Download />                  Export                </Button>                {/* Disable siblings so two operations can't race. */}                <Button disabled={exporting} onPress={sendReminders}>                  <Send />                  Send reminder                </Button>              </>            )}          </ActionBar>        )}      >        <Table.Header>          <Table.Column rowHeader>Event</Table.Column>          <Table.Column>Tickets sold</Table.Column>        </Table.Header>        <Table.Body>          {events.map(event => (            <Table.Row key={event.id} id={event.id}>              <Table.Cell>{event.name}</Table.Cell>              <Table.Cell>{event.tickets}</Table.Cell>            </Table.Row>          ))}        </Table.Body>      </Table>    </>  );};

import { useState } from 'react';import type { Selection } from '@marigold/components';import {  ActionBar,  Badge,  Button,  Table,  Text,  useToast,} from '@marigold/components';import { CircleCheck } from '@marigold/icons';interface Event {  id: string;  name: string;  status: 'Draft' | 'On sale';  /** Events without a description cannot be published. */  hasDescription: boolean;}const initialEvents: Event[] = [  { id: '1', name: 'Jazz Night', status: 'Draft', hasDescription: true },  { id: '2', name: 'Open Air Kino', status: 'Draft', hasDescription: false },  { id: '3', name: 'Poetry Slam', status: 'Draft', hasDescription: true },  { id: '4', name: 'Herbstmarkt', status: 'Draft', hasDescription: false },  { id: '5', name: 'Wine Tasting', status: 'Draft', hasDescription: true },];export default () => {  const [events, setEvents] = useState(initialEvents);  const [selected, setSelected] = useState<Selection>(    new Set(initialEvents.map(event => event.id))  );  const { addToast } = useToast();  const publishSelected = () => {    const keys =      selected === 'all'        ? events.map(event => event.id)        : [...selected].map(String);    const affected = events.filter(event => keys.includes(event.id));    const succeeded = affected.filter(event => event.hasDescription);    const failed = affected.filter(event => !event.hasDescription);    setEvents(current =>      current.map(event =>        succeeded.some(published => published.id === event.id)          ? { ...event, status: 'On sale' }          : event      )    );    if (failed.length === 0) {      addToast({        title:          succeeded.length === 1            ? '1 event published'            : `${succeeded.length} events published`,        variant: 'success',      });      setSelected(new Set());      return;    }    addToast({      title: `${succeeded.length} of ${affected.length} events published`,      description: `${failed.length} failed: missing description. ${failed.length === 1 ? 'It remains' : 'They remain'} selected for retry.`,      variant: 'warning',    });    // The selection becomes the retry list: drop what succeeded, keep    // what failed, so the next press acts on exactly the leftovers.    setSelected(new Set(failed.map(event => event.id))); // [!code highlight]  };  return (    <>      <Table        aria-label="Events"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}        actionBar={() => (          <ActionBar>            <Button onPress={publishSelected}>              <CircleCheck />              Publish            </Button>          </ActionBar>        )}      >        <Table.Header>          <Table.Column rowHeader>Event</Table.Column>          <Table.Column>Description</Table.Column>          <Table.Column>Status</Table.Column>        </Table.Header>        <Table.Body>          {events.map(event => (            <Table.Row key={event.id} id={event.id}>              <Table.Cell>{event.name}</Table.Cell>              <Table.Cell>                {event.hasDescription ? (                  'Complete'                ) : (                  <Text variant="muted">Missing</Text>                )}              </Table.Cell>              <Table.Cell>                <Badge                  variant={event.status === 'On sale' ? 'success' : 'info'}                >                  {event.status}                </Badge>              </Table.Cell>            </Table.Row>          ))}        </Table.Body>      </Table>    </>  );};