@ultraviolet/ui 1.14.0 → 1.15.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, HTMLAttributes, ElementType, KeyboardEventHandler, TextareaHTMLAttributes } from 'react';
+import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -1758,6 +1758,8 @@ type TooltipProps$1 = {
     'data-testid'?: string;
     hasArrow?: boolean;
     onClose?: () => void;
+    onKeyDown?: KeyboardEventHandler;
+    'aria-haspopup'?: HTMLAttributes<HTMLDivElement>['aria-haspopup'];
 };
 declare const Popup: react.ForwardRefExoticComponent<TooltipProps$1 & react.RefAttributes<HTMLDivElement>>;
 
@@ -1774,7 +1776,7 @@ type PopoverProps = {
     sentiment?: SentimentType;
     visible?: boolean;
     size?: keyof typeof SIZES_WIDTH;
-    onClose: () => void;
+    onClose?: () => void;
     className?: string;
     'data-testid'?: string;
 } & Pick<ComponentProps<typeof Popup>, 'placement'>;

package/dist/src/components/Popover/index.js

@@ -1,5 +1,5 @@
 import _styled from '@emotion/styled/base';
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 import { Button } from '../Button/index.js';
 import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
@@ -62,6 +62,10 @@ const ContentWrapper = _ref5 => {
     children,
     sentiment
   } = _ref5;
+  const buttonRef = useRef(null);
+  useEffect(() => {
+    buttonRef.current?.focus();
+  }, []);
   return jsxs(Stack, {
     gap: 1,
     children: [jsxs(Stack, {
@@ -78,7 +82,8 @@ const ContentWrapper = _ref5 => {
         onClick: onClose,
         size: "small",
         icon: "close",
-        "aria-label": "close"
+        "aria-label": "close",
+        ref: buttonRef
       })]
     }), typeof children === 'string' ? jsx(Text, {
       variant: "bodySmall",
@@ -106,9 +111,16 @@ const Popover = _ref6 => {
     'data-testid': dataTestId
   } = _ref6;
   const ref = useRef(null);
+  const innerRef = useRef(null);
+  const [localVisible, setLocalVisible] = useState(visible);
+
+  // We change local value if visible prop changes
+  useEffect(() => {
+    setLocalVisible(visible);
+  }, [visible]);
   const handleClickOutside = useCallback(event => {
     if (ref.current && !ref.current.contains(event.target)) {
-      onClose();
+      onClose?.();
     }
   }, [onClose]);
   useEffect(() => {
@@ -117,12 +129,28 @@ const Popover = _ref6 => {
       document.removeEventListener('click', handleClickOutside, true);
     };
   }, [handleClickOutside]);
+
+  // When space key is pressed we show the popover
+  const onKeyDownSpace = useCallback(event => {
+    if (event.code === 'Space') {
+      event.preventDefault();
+      event.stopPropagation();
+      setLocalVisible(true);
+    }
+  }, []);
+
+  // When we close we hide the popover and focus the disclosure element
+  const localOnClose = useCallback(() => {
+    setLocalVisible(false);
+    onClose?.();
+    innerRef.current?.focus();
+  }, [onClose]);
   return jsx(StyledPopup, {
-    visible: visible,
+    visible: localVisible,
     placement: placement,
     text: jsx(ContentWrapper, {
       title: title,
-      onClose: onClose,
+      onClose: localOnClose,
       sentiment: sentiment,
       children: content
     }),
@@ -132,6 +160,9 @@ const Popover = _ref6 => {
     size: size,
     role: "dialog",
     ref: ref,
+    innerRef: innerRef,
+    onClose: localOnClose,
+    onKeyDown: onKeyDownSpace,
     children: children
   });
 };

package/dist/src/components/Tooltip/index.js

@@ -1,7 +1,20 @@
+import _styled from '@emotion/styled/base';
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { Popup } from '../../internalComponents/Popup/index.js';
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledPopup = /*#__PURE__*/_styled(Popup, {
+  target: "e1h4zly10"
+})(process.env.NODE_ENV === "production" ? {
+  name: "je8g23",
+  styles: "pointer-events:none"
+} : {
+  name: "je8g23",
+  styles: "pointer-events:none",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
 /**
  * Tooltip component is used to display additional information on hover or focus.
  * It is used to explain the purpose of the element it is attached to.
@@ -20,7 +33,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
     role = 'tooltip',
     'data-testid': dataTestId
   } = _ref;
-  return jsx(Popup, {
+  return jsx(StyledPopup, {
     id: id,
     ref: tooltipRef,
     role: role,

package/dist/src/internalComponents/Popup/index.js

@@ -118,7 +118,9 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     role = 'tooltip',
     'data-testid': dataTestId,
     hasArrow = true,
-    onClose
+    onClose,
+    onKeyDown,
+    'aria-haspopup': ariaHasPopup
   } = _ref13;
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
@@ -235,7 +237,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
       onPointerEvent(visible)();
     }
   }, [isControlled, onPointerEvent, visible]);
-  const onKeyDown = useCallback(event => {
+  const onLocalKeyDown = useCallback(event => {
     if (event.code === 'Escape') {
       unmountTooltip();
     }
@@ -290,11 +292,15 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
       onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
       ref: childrenRef,
       tabIndex: 0,
-      onKeyDown: onKeyDown,
+      onKeyDown: event => {
+        onKeyDown?.(event);
+        onLocalKeyDown(event);
+      },
       "data-container-full-width": containerFullWidth,
+      "aria-haspopup": ariaHasPopup,
       children: children
     });
-  }, [children, containerFullWidth, generatedId, isControlled, onKeyDown, onPointerEvent]);
+  }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onLocalKeyDown, onPointerEvent]);
   if (!text) {
     if (typeof children === 'function') return null;
     return jsx(Fragment, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {