@uniformdev/design-system 18.5.0 → 18.6.0

package/dist/esm/index.js

@@ -219,6 +219,20 @@ var useBreakpoint = createBreakpoint(breakpoints);
 var mq = (size) => `@media (min-width: ${breakpoints[size]}px)`;
 var supports = (cssProp) => `@supports (${cssProp})`;
 
+// src/utils/useOutsideClick.tsx
+import { useEffect } from "react";
+var useOutsideClick = (containerRef, handler) => {
+  useEffect(() => {
+    const outsideClick = (event) => {
+      if ((containerRef == null ? void 0 : containerRef.current) && !containerRef.current.contains(event.target)) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", outsideClick);
+    return () => document.removeEventListener("mousedown", outsideClick);
+  }, [containerRef, handler]);
+};
+
 // src/components/Button/Button.styles.ts
 import { css } from "@emotion/react";
 var button = css`
@@ -605,7 +619,7 @@ var scrollbarStyles = css3`
 import { css as css6 } from "@emotion/react";
 
 // src/components/Shortcuts/ShortcutRevealer.tsx
-import React2, { useContext, useEffect, useState } from "react";
+import React2, { useContext, useEffect as useEffect2, useState } from "react";
 
 // src/components/Shortcuts/ShortcutRevealer.styles.ts
 import { css as css4 } from "@emotion/react";
@@ -670,7 +684,7 @@ var Context = React2.createContext(false);
 var revealHotkey = ["ctrl+F1", "ctrl+shift+/"];
 function ShortcutContext({ children }) {
   const [reveal, setReveal] = useState(false);
-  useEffect(() => {
+  useEffect2(() => {
     if (!loggedHotkeyConsole) {
       loggedHotkeyConsole = true;
       console.log(
@@ -847,7 +861,7 @@ var IconColorCurrent = css7`
 
 // src/components/Icons/IconsProvider.tsx
 import { paramCase } from "param-case";
-import { createContext, useContext as useContext2, useEffect as useEffect2, useState as useState2 } from "react";
+import { createContext, useContext as useContext2, useEffect as useEffect3, useState as useState2 } from "react";
 
 // src/components/Icons/customIcons.tsx
 import { GenIcon } from "react-icons";
@@ -1185,7 +1199,7 @@ function IconsProvider({ children }) {
     setIconsMap({ ...iconMap, ...customIcons });
     setIsLoading(false);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     initializeIconsMap();
   }, []);
   return /* @__PURE__ */ jsx5(IconContext.Provider, { value: { iconsMap, isLoading }, children });
@@ -2764,7 +2778,7 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
 };
 
 // src/components/Drawer/Drawer.tsx
-import React10, { useEffect as useEffect4, useMemo, useRef as useRef2 } from "react";
+import React10, { useEffect as useEffect5, useMemo, useRef as useRef2 } from "react";
 import { CgChevronRight } from "react-icons/cg";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -2915,6 +2929,7 @@ var Drawer = React10.forwardRef(
           tabIndex: -1,
           "aria-labelledby": headerId,
           css: drawerStyles(bgColor),
+          "data-test-id": "side-dialog",
           children: [
             /* @__PURE__ */ jsx30(
               Button,
@@ -2934,7 +2949,7 @@ var Drawer = React10.forwardRef(
         }
       );
     }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
-    useEffect4(() => {
+    useEffect5(() => {
       registerDrawer({
         drawer: {
           id,
@@ -2951,7 +2966,7 @@ var Drawer = React10.forwardRef(
         }
       });
     }, [component, instanceKey, registerDrawer]);
-    useEffect4(() => {
+    useEffect5(() => {
       return () => unregisterDrawer({ id, stackId, instanceKey });
     }, [id, stackId, instanceKey, unregisterDrawer]);
     return null;
@@ -4427,7 +4442,7 @@ var EditTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css46 } from "@emotion/react";
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
 import { jsx as jsx57, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
@@ -4443,7 +4458,7 @@ var IntegrationComingSoon = ({
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -4908,7 +4923,7 @@ var TableCellData = React15.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext4, useContext as useContext5, useEffect as useEffect7 } from "react";
+import { createContext as createContext4, useContext as useContext5, useEffect as useEffect8 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -4952,11 +4967,11 @@ var useCurrentTab = () => {
 };
 var Tabs = ({ children, onSelectedIdChange, ...props }) => {
   const tab = useTabState(props);
-  useEffect7(() => {
+  useEffect8(() => {
     var _a;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
   }, [tab.selectedId, onSelectedIdChange]);
-  useEffect7(() => {
+  useEffect8(() => {
     tab.setSelectedId(props.selectedId);
   }, [props.selectedId]);
   return /* @__PURE__ */ jsx65(CurrentTabContext.Provider, { value: tab, children });
@@ -5164,5 +5179,6 @@ export {
   useDrawer,
   useIconContext,
   useMenuContext,
+  useOutsideClick,
   useShortcut
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, HTMLAttributes } from 'react';
+import React__default, { RefObject, ReactNode, HTMLAttributes } from 'react';
 import * as _emotion_react from '@emotion/react';
 import { SerializedStyles } from '@emotion/react';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
@@ -52,6 +52,8 @@ declare const mq: (size: BreakpointSize) => string;
  */
 declare const supports: (cssProp: string) => string;
 
+declare const useOutsideClick: (containerRef: RefObject<HTMLElement | null>, handler: () => void) => void;
+
 declare const button: _emotion_react.SerializedStyles;
 declare const buttonRippleEffect: (props: {
     hoverColor: string;
@@ -1337,4 +1339,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, StatusBullet, StatusBulletProps, StatusTypeProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, WarningMessage, WarningMessageProps, breakpoints, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, supports, useBreakpoint, useCurrentTab, useDrawer, useIconContext, useMenuContext, useShortcut };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, StatusBullet, StatusBulletProps, StatusTypeProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, WarningMessage, WarningMessageProps, breakpoints, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, supports, useBreakpoint, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useShortcut };