@ultraviolet/ui 1.10.0 → 1.10.1

package/dist/index.d.ts

@@ -1408,6 +1408,10 @@ type ModalState = {
     toggle: () => void;
     visible: boolean;
     modalId: string;
+    /**
+     * @deprecated use onClose
+     */
+    hide: () => void;
 };
 
 type ModalProps = {
@@ -1617,6 +1621,10 @@ type TooltipProps$1 = {
      */
     text?: ReactNode;
     className?: string;
+    /**
+     * It will add `width: 100%` to the tooltip container.
+     */
+    containerFullWidth?: boolean;
     /**
      * It will force display tooltip. This can be useful if you need to always display the tooltip without hover needed.
      */
@@ -2297,7 +2305,7 @@ type ToggleProps = {
 };
 declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
 
-type TooltipProps = Pick<ComponentProps<typeof Popup>, 'id' | 'children' | 'maxWidth' | 'placement' | 'text' | 'className' | 'visible' | 'innerRef' | 'role' | 'data-testid'>;
+type TooltipProps = Pick<ComponentProps<typeof Popup>, 'id' | 'children' | 'maxWidth' | 'placement' | 'text' | 'className' | 'visible' | 'innerRef' | 'role' | 'data-testid' | 'containerFullWidth'>;
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
 
 type VerificationCodeProps = {

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

@@ -260,6 +260,7 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
     const Component = VARIANTS_COMPONENTS[variant].link;
     return jsx(Tooltip, {
       text: tooltip,
+      containerFullWidth: fullWidth,
       children: jsx(Component, {
         role: role,
         className: className,
@@ -289,6 +290,7 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
   const Component = VARIANTS_COMPONENTS[variant].button;
   return jsx(Tooltip, {
     text: tooltip,
+    containerFullWidth: fullWidth,
     children: jsx(Component, {
       role: role,
       className: className,

package/dist/src/components/Modal/Disclosure.js

@@ -23,7 +23,8 @@ const Disclosure = _ref => {
       onClose: handleClose,
       toggle,
       onOpen: handleOpen,
-      modalId: id
+      modalId: id,
+      hide: handleClose
     });
   }
   if ( /*#__PURE__*/isValidElement(disclosure)) {

package/dist/src/components/Modal/Modal.js

@@ -90,7 +90,8 @@ const Modal = _ref3 => {
           onClose: handleClose,
           onOpen: handleOpen,
           toggle: handleToggle,
-          modalId: finalId
+          modalId: finalId,
+          hide: handleClose
         }) : children, jsx(StyledContainer, {
           children: isClosable ? jsx(Button, {
             "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,

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

@@ -9,6 +9,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
     placement = 'auto',
     id,
     className,
+    containerFullWidth,
     maxWidth = 232,
     visible,
     innerRef,
@@ -21,6 +22,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
     role: role,
     "data-testid": dataTestId,
     className: className,
+    containerFullWidth: containerFullWidth,
     maxWidth: maxWidth,
     visible: visible,
     placement: placement,

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

@@ -57,7 +57,7 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
     maxWidth
   } = _ref5;
   return maxWidth;
-}, "px;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
+}, "px;word-break:break-all;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
   let {
     positions
   } = _ref6;
@@ -97,11 +97,11 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
 const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
   target: "efkq4700"
 })(process.env.NODE_ENV === "production" ? {
-  name: "ck88l6",
-  styles: "display:inherit"
+  name: "jhu4ja",
+  styles: "display:inherit;&[data-container-full-width='true']{width:100%;}"
 } : {
-  name: "ck88l6",
-  styles: "display:inherit",
+  name: "jhu4ja",
+  styles: "display:inherit;&[data-container-full-width='true']{width:100%;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
@@ -111,6 +111,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     placement = 'auto',
     id,
     className,
+    containerFullWidth,
     maxWidth = 232,
     visible,
     innerRef,
@@ -250,9 +251,10 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
       ref: childrenRef,
       tabIndex: 0,
       onKeyDown: onKeyDown,
+      "data-container-full-width": containerFullWidth,
       children: children
     });
-  }, [children, generatedId, isControlled, onKeyDown, onPointerEvent]);
+  }, [children, containerFullWidth, generatedId, isControlled, onKeyDown, onPointerEvent]);
   if (!text) {
     if (typeof children === 'function') return null;
     return jsx(Fragment, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -43,9 +43,9 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.8",
+    "@types/react": "18.2.14",
     "@types/react-datepicker": "4.15.0",
-    "@types/react-dom": "18.2.4",
+    "@types/react-dom": "18.2.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },