@primer/components 0.0.0-2021983515 → 0.0.0-2022530194733

package/lib-esm/stories/useFocusZone.stories.js

@@ -0,0 +1,445 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import React, { useCallback, useRef, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import { Absolute, BaseStyles, BorderBox, Button, Flash, Grid, theme, ThemeProvider } from '..';
+import { FocusKeys } from '../behaviors/focusZone';
+import Flex from '../Flex';
+import { themeGet } from '@styled-system/theme-get';
+import { useFocusZone } from '../hooks/useFocusZone';
+import { useTheme } from '../ThemeProvider';
+import { ButtonDanger, ButtonPrimary } from '../Button';
+export default {
+  title: 'Hooks/useFocusZone',
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }]
+}; // NOTE: the below styles are solely intended as a visual aid for
+// this Storybook story, but they're not recommended for a real site!
+
+const HelperGlobalStyling = createGlobalStyle`
+  *:focus {
+    outline: 2px solid ${themeGet('colors.border.info')} !important;
+  }
+`;
+const MarginButton = styled(Button).withConfig({
+  displayName: "useFocusZonestories__MarginButton",
+  componentId: "e94kdz-0"
+})(["margin:", ";"], themeGet('space.1'));
+export const BasicFocusZone = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const [fzEnabled, setFzEnabled] = useState(true);
+  const {
+    containerRef
+  } = useFocusZone({
+    disabled: !fzEnabled
+  }, [fzEnabled]);
+  const ToggleButton = fzEnabled ? ButtonDanger : ButtonPrimary;
+  const toggleFz = useCallback(() => {
+    setFzEnabled(!fzEnabled);
+  }, [fzEnabled]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(ToggleButton, {
+    mb: 3,
+    onClick: toggleFz
+  }, fzEnabled ? 'Disable' : 'Enable', " Focus Zone"), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "Use Up Arrow, Down Arrow, Home, and End to move focus within this box."), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+export const FocusOutBehavior = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: containerRef1
+  } = useFocusZone({
+    focusOutBehavior: 'stop',
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
+  });
+  const {
+    containerRef: containerRef2
+  } = useFocusZone({
+    focusOutBehavior: 'wrap',
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef1,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends."), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef2,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular."), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"))), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+
+function getSiblingIndex(element) {
+  let child = element;
+  let i = 0;
+
+  while ((child = child.previousElementSibling) != null) {
+    ++i;
+  }
+
+  return i;
+}
+
+export const CustomFocusMovement = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const containerRef = useRef(null);
+  const getNextFocusable = useCallback((direction, from, event) => {
+    const toEnd = direction === 'start' || direction === 'end';
+
+    if (from && containerRef.current) {
+      const currentIndex = getSiblingIndex(from);
+      let nextIndex = currentIndex;
+
+      if (['End', 'ArrowRight'].includes(event.key)) {
+        while (nextIndex % 3 !== 2) {
+          nextIndex += 1;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (['Home', 'ArrowLeft'].includes(event.key)) {
+        while (nextIndex % 3 !== 0) {
+          nextIndex -= 1;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (event.key === 'ArrowUp') {
+        while (nextIndex - 3 >= 0) {
+          nextIndex -= 3;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (event.key === 'ArrowDown') {
+        while (nextIndex + 3 < 9) {
+          nextIndex += 3;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      return containerRef.current.children[nextIndex];
+    }
+  }, [containerRef]);
+  useFocusZone({
+    containerRef,
+    getNextFocusable
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "Use arrow keys to move focus within this box."), /*#__PURE__*/React.createElement(Grid, {
+    ref: containerRef,
+    gridTemplateRows: "1fr 1fr 1fr",
+    gridTemplateColumns: "1fr 1fr 1fr"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"))), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+export const FocusInStrategy = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: firstContainerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusInStrategy: 'first'
+  });
+  const {
+    containerRef: prevContainerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusInStrategy: 'previous'
+  });
+  const customContainerRef = useRef(null);
+  const customStrategy = React.useCallback(() => {
+    if (customContainerRef.current) {
+      const buttons = Array.from(customContainerRef.current.querySelectorAll('button'));
+      return buttons[Math.floor(Math.random() * 3)];
+    }
+  }, [customContainerRef]);
+  useFocusZone({
+    containerRef: customContainerRef,
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusInStrategy: customStrategy
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: firstContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "\u201CFirst\u201D strategy (focus first focusable element)"), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(MarginButton, null, "Durian"))), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: prevContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "\u201CPrevious\u201D strategy (most recently focused element)"), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"))), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: customContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "\u201CCustom\u201D strategy (choose randomly for this example)"), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"))), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+export const SpecialSituations = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: vContainerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowVertical | FocusKeys.JK | FocusKeys.WS | FocusKeys.Tab | FocusKeys.PageUpDown | FocusKeys.HomeAndEnd
+  });
+  const {
+    containerRef: hContainerRef
+  } = useFocusZone({
+    focusOutBehavior: 'wrap',
+    bindKeys: FocusKeys.ArrowHorizontal
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Flash, {
+    mb: 3
+  }, "This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in different situations. Focus treatment within your component should be evaluated for your particular UX using the ", /*#__PURE__*/React.createElement("a", {
+    href: "https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard"
+  }, "ARIA guidelines"), "."), /*#__PURE__*/React.createElement(Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: vContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab"), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement("input", {
+    style: {
+      width: '250px'
+    },
+    type: "text",
+    defaultValue: "Printable characters won't move focus"
+  }), /*#__PURE__*/React.createElement(MarginButton, null, "Regular button"), /*#__PURE__*/React.createElement("select", null, /*#__PURE__*/React.createElement("option", null, "Down arrow invokes dropdown"), /*#__PURE__*/React.createElement("option", null, "Unless Cmd (mac)/Ctrl (Windows)"), /*#__PURE__*/React.createElement("option", null, "Is held")), /*#__PURE__*/React.createElement("textarea", {
+    style: {
+      width: '250px',
+      height: '95px'
+    },
+    defaultValue: "Up/Down only works when at beginning/end. PageUp and PageDown completely disabled. Printable characters will never move focus."
+  }))), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: hContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "Use Left Arrow and Right Arrow to move focus within this box. Focus is circular."), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement("input", {
+    style: {
+      width: '300px'
+    },
+    type: "text",
+    defaultValue: "Left/Right only work at beginning/end of input."
+  }), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"))), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+export const ChangingSubtree = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowVertical
+  });
+  const [buttonCount, setButtonCount] = useState(3);
+  const removeButton = useCallback(() => {
+    setButtonCount(buttonCount - 1);
+  }, [setButtonCount, buttonCount]);
+  const addButton = useCallback(() => {
+    setButtonCount(buttonCount + 1);
+  }, [setButtonCount, buttonCount]);
+  const buttons = [];
+
+  for (let i = 0; i < buttonCount; ++i) {
+    buttons.push( /*#__PURE__*/React.createElement(MarginButton, {
+      key: 'button' + i
+    }, i + 1));
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Flash, {
+    mb: 3
+  }, "This story demonstrates that focusZone is consistent even when the container\u2019s subtree changes."), /*#__PURE__*/React.createElement(Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, buttons)), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "row"
+  }, /*#__PURE__*/React.createElement(MarginButton, {
+    onClick: removeButton
+  }, "Remove Button"), /*#__PURE__*/React.createElement(MarginButton, {
+    onClick: addButton
+  }, "Add Button"))));
+};
+export const ActiveDescendant = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const containerRef = useRef(null);
+  const controllingElementRef = useRef(null);
+  const {
+    theme
+  } = useTheme(); // We set up two arrow focus behaviors on the same container!
+  // 1. Handles the active descendant treatment when the <input> element is focused
+  // 2. Handles regular focus treatment when the container itself is focused.
+
+  useFocusZone({
+    containerRef,
+    activeDescendantFocus: controllingElementRef,
+    bindKeys: FocusKeys.ArrowVertical,
+    onActiveDescendantChanged: (current, previous) => {
+      if (current) {
+        current.style.outline = `2px solid ${theme.colors.border.info}`;
+      }
+
+      if (previous) {
+        previous.style.outline = '';
+      }
+    },
+    focusableElementFilter: elem => elem instanceof HTMLButtonElement
+  });
+  useFocusZone({
+    containerRef,
+    bindKeys: FocusKeys.ArrowVertical,
+    getNextFocusable: (direction, from) => {
+      if (direction === 'previous' && from && from === containerRef.current) {
+        var _controllingElementRe;
+
+        return (_controllingElementRe = controllingElementRef.current) !== null && _controllingElementRe !== void 0 ? _controllingElementRe : undefined;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Flash, {
+    mb: 3
+  }, "This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an active element. Below, you can focus the input box then use the up/down arrow keys to change the active descendant (dark blue outline). Furthermore, this story shows how to simultaneously set up a regular arrow key focus treatment on the buttons. This pattern is used in a select menu with a filter box."), /*#__PURE__*/React.createElement(Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(BorderBox, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/React.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: controllingElementRef,
+    type: "text",
+    defaultValue: "Focus remains here.",
+    "aria-controls": "list"
+  }), /*#__PURE__*/React.createElement(Flex, {
+    id: "list",
+    tabIndex: 0,
+    flexDirection: "column",
+    alignItems: "flex-start",
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit")))), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi")));
+};