@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.6

package/esm/core/utils/components/AutoclearingHiddenLiveRegion.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.
  *
@@ -9,4 +9,4 @@
  */
 export declare const AutoclearingHiddenLiveRegion: ({ text }: {
     text?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/esm/core/utils/components/AutoclearingHiddenLiveRegion.js

@@ -14,11 +14,15 @@ import { getWindow } from '../functions/index.js';
  * @private
  */
 export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
-    const [maybeText, setMaybeText] = React.useState(text);
-    React.useEffect(() => {
-        setMaybeText(text);
-        const timeout = getWindow()?.setTimeout(() => setMaybeText(''), 5000);
-        return () => void getWindow()?.clearTimeout(timeout);
-    }, [text]);
-    return (React.createElement(VisuallyHidden, { as: 'div', "aria-live": 'polite', "aria-atomic": 'true' }, maybeText));
+  const [maybeText, setMaybeText] = React.useState(text);
+  React.useEffect(() => {
+    setMaybeText(text);
+    const timeout = getWindow()?.setTimeout(() => setMaybeText(''), 5000);
+    return () => void getWindow()?.clearTimeout(timeout);
+  }, [text]);
+  return React.createElement(
+    VisuallyHidden,
+    { as: 'div', 'aria-live': 'polite', 'aria-atomic': 'true' },
+    maybeText,
+  );
 };

package/esm/core/utils/components/Divider.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
-declare type DividerProps = {
+type DividerProps = {
     /**
      * Sets the orientation of the divider
      * @default 'horizontal'

package/esm/core/utils/components/Divider.js

@@ -9,7 +9,13 @@ import { Box } from './Box.js';
  * Shows a divider
  */
 export const Divider = React.forwardRef((props, ref) => {
-    const { className, orientation = 'horizontal', ...rest } = props;
-    return (React.createElement(Box, { as: 'hr', className: cx('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
+  const { className, orientation = 'horizontal', ...rest } = props;
+  return React.createElement(Box, {
+    as: 'hr',
+    className: cx('iui-divider', className),
+    'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
+    ref: ref,
+    ...rest,
+  });
 });
 export default Divider;

package/esm/core/utils/components/Flex.d.ts

@@ -5,8 +5,8 @@ declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2x
 /**
  * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
  */
-declare type SizeToken = typeof sizeTokens[number];
-declare type FlexOwnProps = {
+type SizeToken = (typeof sizeTokens)[number];
+type FlexOwnProps = {
     /**
      * Value of the `display` property.
      * @default 'flex'
@@ -45,7 +45,7 @@ declare type FlexOwnProps = {
      */
     flexWrap?: React.CSSProperties['flexWrap'];
 };
-declare type FlexSpacerOwnProps = {
+type FlexSpacerOwnProps = {
     /**
      * Value of the `flex` css property.
      *
@@ -56,7 +56,7 @@ declare type FlexSpacerOwnProps = {
      */
     flex?: React.CSSProperties['flex'];
 };
-declare type FlexItemOwnProps = {
+type FlexItemOwnProps = {
     /**
      * Gap before the flex item, if different from the `gap` set on `Flex` component.
      */

package/esm/core/utils/components/Flex.js

@@ -5,63 +5,79 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
-const sizeTokens = [
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-    '2xl',
-    '3xl',
-];
+const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
 const getValueForToken = (token) => {
-    if (sizeTokens.includes(token)) {
-        return `var(--iui-size-${token})`;
-    }
-    return token;
+  if (sizeTokens.includes(token)) {
+    return `var(--iui-size-${token})`;
+  }
+  return token;
 };
 // ----------------------------------------------------------------------------
 // Main Flex component
 const FlexComponent = React.forwardRef((props, ref) => {
-    const { display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-flex', className), style: {
-            '--iui-flex-display': display,
-            '--iui-flex-direction': flexDirection,
-            '--iui-flex-justify': justifyContent,
-            '--iui-flex-align': alignItems,
-            '--iui-flex-gap': getValueForToken(gap),
-            '--iui-flex-wrap': flexWrap,
-            ...style,
-        }, ref: ref, ...rest }));
+  const {
+    display,
+    flexDirection,
+    justifyContent,
+    alignItems,
+    gap,
+    flexWrap,
+    className,
+    style,
+    ...rest
+  } = props;
+  return React.createElement(Box, {
+    className: cx('iui-flex', className),
+    style: {
+      '--iui-flex-display': display,
+      '--iui-flex-direction': flexDirection,
+      '--iui-flex-justify': justifyContent,
+      '--iui-flex-align': alignItems,
+      '--iui-flex-gap': getValueForToken(gap),
+      '--iui-flex-wrap': flexWrap,
+      ...style,
+    },
+    ref: ref,
+    ...rest,
+  });
 });
 FlexComponent.displayName = 'Flex';
 // ----------------------------------------------------------------------------
 // Flex.Spacer component
 const FlexSpacer = React.forwardRef((props, ref) => {
-    const { flex, className, style, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
+  const { flex, className, style, ...rest } = props;
+  return React.createElement(Box, {
+    className: cx('iui-flex-spacer', className),
+    style: { '--iui-flex-spacer-flex': flex, ...style },
+    ref: ref,
+    ...rest,
+  });
 });
 FlexSpacer.displayName = 'Flex.Spacer';
 // ----------------------------------------------------------------------------
 // Flex.Item subcomponent
 const FlexItem = React.forwardRef((props, ref) => {
-    const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
-    const _style = {
-        '--iui-flex-item-flex': flex,
-        '--iui-flex-item-align': alignSelf,
-        '--iui-flex-item-gap-before': getValueForToken(gapBefore),
-        '--iui-flex-item-gap-after': getValueForToken(gapAfter),
-        ...(gapBefore !== undefined && {
-            '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
-        }),
-        ...(gapAfter !== undefined && {
-            '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
-        }),
-        ...style,
-    };
-    return (React.createElement(Box, { className: cx('iui-flex-item', className), ref: ref, style: _style, ...rest }));
+  const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
+    props;
+  const _style = {
+    '--iui-flex-item-flex': flex,
+    '--iui-flex-item-align': alignSelf,
+    '--iui-flex-item-gap-before': getValueForToken(gapBefore),
+    '--iui-flex-item-gap-after': getValueForToken(gapAfter),
+    ...(gapBefore !== undefined && {
+      '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
+    }),
+    ...(gapAfter !== undefined && {
+      '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
+    }),
+    ...style,
+  };
+  return React.createElement(Box, {
+    className: cx('iui-flex-item', className),
+    ref: ref,
+    style: _style,
+    ...rest,
+  });
 });
 FlexItem.displayName = 'Flex.Item';
 // ----------------------------------------------------------------------------
@@ -95,34 +111,34 @@ FlexItem.displayName = 'Flex.Item';
  * </Flex>
  */
 export const Flex = Object.assign(FlexComponent, {
-    /**
-     * Subcomponent that allows customizing flex items through the
-     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
-     *
-     * The `gapBefore`/`gapAfter` props can used to override the gap at an
-     * individual level, for when you need a different gap than the one
-     * set in the parent `Flex`.
-     *
-     * @example
-     * <Flex gap='l'>
-     *   <Flex.Item>...</Flex.Item>
-     *   <Flex.Item>...</Flex.Item>
-     *   <Flex.Item gapBefore='s'>...</Flex.Item>
-     *   <Flex.Item>...</Flex.Item>
-     * </Flex>
-     */
-    Item: FlexItem,
-    /**
-     * Subcomponent that fills up the available space using a really large `flex` value.
-     * Useful when you want to push certain items to one edge.
-     *
-     * @example
-     * <Flex>
-     *   <div>this stays on the left</div>
-     *   <Flex.Spacer /> // this fills up the available empty space
-     *   <div>this gets pushed all the way to the end</div>
-     * </Flex>
-     */
-    Spacer: FlexSpacer,
+  /**
+   * Subcomponent that allows customizing flex items through the
+   * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
+   *
+   * The `gapBefore`/`gapAfter` props can used to override the gap at an
+   * individual level, for when you need a different gap than the one
+   * set in the parent `Flex`.
+   *
+   * @example
+   * <Flex gap='l'>
+   *   <Flex.Item>...</Flex.Item>
+   *   <Flex.Item>...</Flex.Item>
+   *   <Flex.Item gapBefore='s'>...</Flex.Item>
+   *   <Flex.Item>...</Flex.Item>
+   * </Flex>
+   */
+  Item: FlexItem,
+  /**
+   * Subcomponent that fills up the available space using a really large `flex` value.
+   * Useful when you want to push certain items to one edge.
+   *
+   * @example
+   * <Flex>
+   *   <div>this stays on the left</div>
+   *   <Flex.Spacer /> // this fills up the available empty space
+   *   <div>this gets pushed all the way to the end</div>
+   * </Flex>
+   */
+  Spacer: FlexSpacer,
 });
 export default Flex;

package/esm/core/utils/components/FocusTrap.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare type FocusTrapProps = {
+import * as React from 'react';
+export type FocusTrapProps = {
     /**
      * A single child element to trap focus in.
      */
@@ -9,5 +9,5 @@ export declare type FocusTrapProps = {
  * Trap focus within child container.
  * Used for modals and dialogs.
  */
-export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;
+export declare const FocusTrap: (props: FocusTrapProps) => React.JSX.Element;
 export default FocusTrap;

package/esm/core/utils/components/FocusTrap.js

@@ -10,37 +10,46 @@ import { mergeRefs } from '../hooks/useMergedRefs.js';
  * Used for modals and dialogs.
  */
 export const FocusTrap = (props) => {
-    const { children } = props;
-    const childRef = React.useRef();
-    const getFirstLastFocusables = () => {
-        const elements = getTabbableElements(childRef.current);
-        const firstElement = elements[0];
-        const lastElement = elements[(elements.length || 1) - 1];
-        return [firstElement, lastElement];
-    };
-    const onFirstFocus = (event) => {
-        const [firstElement, lastElement] = getFirstLastFocusables();
-        if (event.relatedTarget === firstElement) {
-            lastElement?.focus();
-        }
-        else {
-            firstElement?.focus();
-        }
-    };
-    const onLastFocus = (event) => {
-        const [firstElement, lastElement] = getFirstLastFocusables();
-        if (event.relatedTarget === lastElement) {
-            firstElement?.focus();
-        }
-        else {
-            lastElement?.focus();
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
-        React.cloneElement(children, {
-            ref: mergeRefs(children.ref, childRef),
-        }),
-        React.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
+  const { children } = props;
+  const childRef = React.useRef();
+  const getFirstLastFocusables = () => {
+    const elements = getTabbableElements(childRef.current);
+    const firstElement = elements[0];
+    const lastElement = elements[(elements.length || 1) - 1];
+    return [firstElement, lastElement];
+  };
+  const onFirstFocus = (event) => {
+    const [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === firstElement) {
+      lastElement?.focus();
+    } else {
+      firstElement?.focus();
+    }
+  };
+  const onLastFocus = (event) => {
+    const [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === lastElement) {
+      firstElement?.focus();
+    } else {
+      lastElement?.focus();
+    }
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement('div', {
+      tabIndex: 0,
+      onFocus: onFirstFocus,
+      'aria-hidden': true,
+    }),
+    React.cloneElement(children, {
+      ref: mergeRefs(children.ref, childRef),
+    }),
+    React.createElement('div', {
+      tabIndex: 0,
+      onFocus: onLastFocus,
+      'aria-hidden': true,
+    }),
+  );
 };
 export default FocusTrap;

package/esm/core/utils/components/Icon.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
 import type { PolymorphicForwardRefComponent } from '../props.js';
-export declare type IconProps = {
+export type IconProps = {
     /**
      * Size of the svg.
      *  - 'medium': works well with most text

package/esm/core/utils/components/Icon.js

@@ -6,16 +6,16 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
 const getSizeValue = (size) => {
-    switch (size) {
-        case 'small':
-            return 's';
-        case 'medium':
-            return 'm';
-        case 'large':
-            return 'l';
-        default:
-            return size;
-    }
+  switch (size) {
+    case 'small':
+      return 's';
+    case 'medium':
+      return 'm';
+    case 'large':
+      return 'l';
+    default:
+      return size;
+  }
 };
 /**
  * A utility component to provide size and fill to svgs.
@@ -32,7 +32,14 @@ const getSizeValue = (size) => {
  * </Icon>
  */
 export const Icon = React.forwardRef((props, ref) => {
-    const { size = 'medium', fill = 'default', className, ...rest } = props;
-    return (React.createElement(Box, { as: 'span', className: cx('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+  const { size = 'medium', fill = 'default', className, ...rest } = props;
+  return React.createElement(Box, {
+    as: 'span',
+    className: cx('iui-svg-icon', className),
+    'data-iui-icon-size': getSizeValue(size),
+    'data-iui-icon-color': fill,
+    ref: ref,
+    ...rest,
+  });
 });
 export default Icon;

package/esm/core/utils/components/InputContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
+export type InputContainerProps<T extends React.ElementType = 'div'> = {
     as?: T;
     label?: React.ReactNode;
     disabled?: boolean;
@@ -17,4 +17,4 @@ export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => JSX.Element;
+export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => React.JSX.Element;

package/esm/core/utils/components/InputContainer.js

@@ -10,19 +10,69 @@ import { Box } from './Box.js';
  * @private
  */
 export const InputContainer = (props) => {
-    const { label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-input-container', {
-            'iui-disabled': disabled,
-            [`iui-${status}`]: !!status,
-            'iui-inline-label': isLabelInline,
-            'iui-inline-icon': isIconInline,
-            'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
-        }, className), style: style, ...rest },
-        label && (React.createElement(Box, { as: inputId && props.as !== 'label' ? 'label' : 'div', className: cx('iui-label', {
-                'iui-required': required,
-            }), htmlFor: inputId, id: labelId }, label)),
-        children,
-        statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
-            icon && (React.createElement(Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)),
-            message && !isLabelInline && (React.createElement(Box, { className: 'iui-message' }, message))))));
+  const {
+    label,
+    disabled,
+    required,
+    status,
+    message,
+    icon,
+    isLabelInline,
+    isIconInline,
+    children,
+    className,
+    style,
+    statusMessage,
+    inputId,
+    labelId,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-input-container',
+        {
+          'iui-disabled': disabled,
+          [`iui-${status}`]: !!status,
+          'iui-inline-label': isLabelInline,
+          'iui-inline-icon': isIconInline,
+          'iui-with-message':
+            (!!message || !!icon || !!statusMessage) && !isLabelInline,
+        },
+        className,
+      ),
+      style: style,
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        Box,
+        {
+          as: inputId && props.as !== 'label' ? 'label' : 'div',
+          className: cx('iui-label', {
+            'iui-required': required,
+          }),
+          htmlFor: inputId,
+          id: labelId,
+        },
+        label,
+      ),
+    children,
+    statusMessage
+      ? statusMessage
+      : React.createElement(
+          React.Fragment,
+          null,
+          icon &&
+            React.createElement(
+              Box,
+              { as: 'span', className: 'iui-input-icon', 'aria-hidden': true },
+              icon,
+            ),
+          message &&
+            !isLabelInline &&
+            React.createElement(Box, { className: 'iui-message' }, message),
+        ),
+  );
 };

package/esm/core/utils/components/InputFlexContainer.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
-export declare type InputFlexContainerProps = {
+export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
 };

package/esm/core/utils/components/InputFlexContainer.js

@@ -10,6 +10,17 @@ import { Box } from './Box.js';
  * @private
  */
 export const InputFlexContainer = React.forwardRef((props, ref) => {
-    const { isDisabled, status, children, className, style, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
+  const { isDisabled, status, children, className, style, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-input-flex-container', className),
+      'data-iui-status': status,
+      'data-iui-disabled': isDisabled ? 'true' : undefined,
+      ref: ref,
+      style: style,
+      ...rest,
+    },
+    children,
+  );
 });

package/esm/core/utils/components/MiddleTextTruncation.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { CommonProps } from '../props.js';
-export declare type MiddleTextTruncationProps = {
+export type MiddleTextTruncationProps = {
     /**
      * Text to truncate.
      */
@@ -31,5 +31,5 @@ export declare type MiddleTextTruncationProps = {
  *   )}
  * />
  */
-export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;
 export default MiddleTextTruncation;

package/esm/core/utils/components/MiddleTextTruncation.js

@@ -22,22 +22,32 @@ const ELLIPSIS_CHAR = '…';
  * />
  */
 export const MiddleTextTruncation = (props) => {
-    const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-    const [ref, visibleCount] = useOverflow(text);
-    const truncatedText = React.useMemo(() => {
-        if (visibleCount < text.length) {
-            return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-        }
-        else {
-            return text;
-        }
-    }, [endCharsCount, text, visibleCount]);
-    return (React.createElement("span", { style: {
-            display: 'flex',
-            minWidth: 0,
-            flexGrow: 1,
-            whiteSpace: 'nowrap',
-            ...style,
-        }, ref: ref, ...rest }, textRenderer?.(truncatedText, text) ?? truncatedText));
+  const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+  const [ref, visibleCount] = useOverflow(text);
+  const truncatedText = React.useMemo(() => {
+    if (visibleCount < text.length) {
+      return `${text.substring(
+        0,
+        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
+      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
+    } else {
+      return text;
+    }
+  }, [endCharsCount, text, visibleCount]);
+  return React.createElement(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        minWidth: 0,
+        flexGrow: 1,
+        whiteSpace: 'nowrap',
+        ...style,
+      },
+      ref: ref,
+      ...rest,
+    },
+    textRenderer?.(truncatedText, text) ?? truncatedText,
+  );
 };
 export default MiddleTextTruncation;

package/esm/core/utils/components/Popover.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
-export declare type PopoverInstance = Instance;
-export declare type PopoverProps = {
+export type PopoverInstance = Instance;
+export type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.
      */
@@ -25,7 +25,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "className" | "role" | "offset" | "children" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "theme" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.