@teamturing/react-kit 2.17.0 → 2.18.0

package/dist/index.js

@@ -7094,7 +7094,7 @@ const BaseActionList = styled__default.default.ul`
 
   ${sx}
 `;
-var index$c = Object.assign(ActionList, {
+var index$d = Object.assign(ActionList, {
   Item: ActionListItem,
   SectionDivider: ActionListSectionDivider,
   SectionHeader: ActionListSectionHeader
@@ -16365,7 +16365,7 @@ const BaseAvatar = styled__default.default(Image)`
 })}
   ${sx}
 `;
-var index$b = /*#__PURE__*/React.forwardRef(Avatar);
+var index$c = /*#__PURE__*/React.forwardRef(Avatar);
 
 const Tooltip = ({
   children,
@@ -16753,7 +16753,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$a = Object.assign(Breadcrumbs, {
+var index$b = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -17290,7 +17290,7 @@ const BaseCheckbox = styled__default.default(UnstyledCheckbox)`
 
   ${sx}
 `;
-var index$9 = /*#__PURE__*/React.forwardRef(Checkbox);
+var index$a = /*#__PURE__*/React.forwardRef(Checkbox);
 
 const Chip = ({
   children,
@@ -17643,7 +17643,7 @@ const DatagridWrapper = styled__default.default.div`
 const BaseDatagrid = styled__default.default.div`
   width: inherit;
 `;
-var index$8 = Object.assign(Datagrid, {
+var index$9 = Object.assign(Datagrid, {
   Header: DatagridHeader,
   Subheader: DatagridSubheader,
   Body: DatagridBody,
@@ -18750,7 +18750,7 @@ const BaseDialog = styled__default.default.div(() => ({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index$7 = /*#__PURE__*/React.forwardRef(Dialog);
+var index$8 = /*#__PURE__*/React.forwardRef(Dialog);
 
 const useDialogHandler = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -18790,6 +18790,111 @@ const DialogHandler = ({
   });
 };
 
+const EmptyState = ({
+  title,
+  icon: Icon = SvgDocument,
+  description,
+  action,
+  renderAction = ({
+    ...buttonProps
+  }, emptyStateProps) => /*#__PURE__*/jsxRuntimeExports.jsx(Button, {
+    size: emptyStateProps.size,
+    ...buttonProps
+  }),
+  size = 'm',
+  sx
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseEmptyState, {
+    size: size,
+    sx: sx,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+      as: 'p',
+      children: title
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+      children: description
+    }), action ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      children: renderAction(action, {
+        size
+      })
+    }) : null]
+  });
+};
+const BaseEmptyState = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & > svg {
+    color: ${({
+  theme
+}) => theme.colors['icon/neutral']};
+  }
+  & > p {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.bold};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  }
+  & > span {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtler']};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  }
+
+  ${variant({
+  prop: 'size',
+  variants: {
+    m: {
+      '& > svg': {
+        width: 64,
+        height: 64
+      },
+      '& > p': {
+        fontSize: 'm',
+        mt: 2
+      },
+      '& > span': {
+        fontSize: 's',
+        mt: 1
+      },
+      '& > div': {
+        mt: 6
+      }
+    },
+    s: {
+      '& > svg': {
+        width: 32,
+        height: 32
+      },
+      '& > p': {
+        fontSize: 's',
+        mt: 3
+      },
+      '& > span': {
+        fontSize: 'xs',
+        mt: 0.5
+      },
+      '& > div': {
+        mt: 3
+      }
+    }
+  }
+})}
+
+  ${sx}
+`;
+
 const GradientText = styled__default.default(Text)`
   background: ${({
   theme
@@ -18924,11 +19029,9 @@ const Overlay = ({
     }
   }, [handleDismiss, overlayRef]);
   const handleKeyDown = React.useCallback(event => {
-    switch (event.key) {
-      case 'Escape':
-        handleDismiss?.();
-        event.stopPropagation();
-        break;
+    if (event.key === 'Escape') {
+      handleDismiss?.();
+      event.stopPropagation();
     }
   }, [handleDismiss]);
   React.useEffect(() => {
@@ -20312,7 +20415,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-var index$6 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var index$7 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 // Fork of `fast-deep-equal` that only does the comparisons we need and compares
 // functions
@@ -20377,7 +20480,7 @@ function roundByDPR(element, value) {
 
 function useLatestRef(value) {
   const ref = React__namespace.useRef(value);
-  index$6(() => {
+  index$7(() => {
     ref.current = value;
   });
   return ref;
@@ -20462,7 +20565,7 @@ function useFloating(options) {
       }
     });
   }, [latestMiddleware, placement, strategy, platformRef]);
-  index$6(() => {
+  index$7(() => {
     if (open === false && dataRef.current.isPositioned) {
       dataRef.current.isPositioned = false;
       setData(data => ({
@@ -20472,13 +20575,13 @@ function useFloating(options) {
     }
   }, [open]);
   const isMountedRef = React__namespace.useRef(false);
-  index$6(() => {
+  index$7(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  index$6(() => {
+  index$7(() => {
     if (referenceEl) referenceRef.current = referenceEl;
     if (floatingEl) floatingRef.current = floatingEl;
     if (referenceEl && floatingEl) {
@@ -20587,13 +20690,13 @@ const useToggleHandler = ({
 const OverlayPopper = ({
   children: propChildren,
   renderOverlay,
-  overlayProps,
   placement = 'bottom-start',
   focusZoneSettings,
   focusTrapSettings
 }) => {
   const {
     refs,
+    elements,
     floatingStyles,
     isPositioned
   } = useFloating({
@@ -20605,20 +20708,28 @@ const OverlayPopper = ({
   const {
     state: isOpen,
     toggle: toggleOverlay,
+    on: openOverlay,
     off: closeOverlay
   } = useToggleHandler({
     initialState: false
   });
   const handleDismiss = () => {
-    overlayProps?.onDismiss?.();
     closeOverlay();
   };
-  const children = React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
+  const defaultPopperProps = {
     onClick: toggleOverlay,
     tabIndex: 0,
     ...{
       ref: refs.setReference
     }
+  };
+  const children = isFunction(propChildren) ? propChildren({
+    ...defaultPopperProps
+  }, {
+    isOpen,
+    openOverlay
+  }) : React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
+    ...defaultPopperProps
   }));
   useFocusZone({
     containerRef: refs.floating,
@@ -20631,22 +20742,245 @@ const OverlayPopper = ({
     ...focusTrapSettings
   });
   return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-    children: [children, /*#__PURE__*/jsxRuntimeExports.jsx(Overlay$1, {
+    children: [children, renderOverlay({
       ref: refs.setFloating,
-      isOpen: isOpen,
+      isOpen,
       dismissFocusRef: refs.reference,
       ignoreOutsideClickRefs: [refs.reference],
-      ...overlayProps,
-      style: floatingStyles,
-      onDismiss: handleDismiss,
-      children: renderOverlay({
-        isOpen,
-        closeOverlay
-      })
+      style: {
+        ...floatingStyles
+      },
+      onDismiss: handleDismiss
+    }, {
+      isOpen,
+      closeOverlay
+    }, {
+      elements
     })]
   });
 };
 
+const OverlaySelectInput = ({
+  validationStatus,
+  leadingVisual: LeadingVisual,
+  children,
+  ...props
+}, ref) => {
+  const inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const {
+    disabled
+  } = props;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
+    renderOverlay: (overlayProps, _, {
+      elements
+    }) => /*#__PURE__*/jsxRuntimeExports.jsx(Overlay$1, {
+      ...overlayProps,
+      style: {
+        ...overlayProps.style,
+        width: elements?.reference?.getBoundingClientRect().width
+      },
+      children: children
+    }),
+    children: (popperProps, {
+      openOverlay
+    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper$1, {
+      ...popperProps,
+      tabIndex: disabled ? -1 : 0,
+      disabled: disabled,
+      onClick: focusInput,
+      hasLeadingVisual: !isNullable(LeadingVisual),
+      validationStatus: validationStatus,
+      onKeyDown: e => {
+        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+          e.preventDefault();
+          openOverlay();
+        }
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        sx: {
+          'flexShrink': 0,
+          'fontSize': 'xxs',
+          'fontWeight': 'medium',
+          'color': 'text/neutral',
+          '& > svg': {
+            display: 'block',
+            width: 16,
+            height: 16,
+            color: 'icon/neutral/bold'
+          }
+        },
+        children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput$1, {
+        ref: e => {
+          isFunction(ref) ? ref(e) : null;
+          inputRef.current = e;
+        },
+        value: '',
+        onChange: noop$2,
+        ...props,
+        tabIndex: -1,
+        onClick: e => {
+          popperProps.onClick?.(e);
+          props.onClick?.(e);
+        }
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+        sx: {
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          right: 5,
+          pointerEvents: 'none'
+        },
+        icon: SvgChevronDown,
+        color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+        size: 16
+      })]
+    })
+  });
+};
+const TextInputWrapper$1 = styled__default.default.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  border-color: ${({
+  theme
+}) => theme.colors['border/input']};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/input']};
+  cursor: default;
+  input {
+    cursor: default;
+  }
+  display: inline-flex;
+  align-items: center;
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+    pointer-events: none;
+  }
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/hovered']};
+        }
+      }
+    `}
+
+  ${props => props.validationStatus === 'error' && styled.css`
+      &:after {
+        border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+      }
+    `}
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+        }
+      }
+    `}
+
+  ${props => props.disabled && styled.css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
+
+      input::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      input {
+        cursor: not-allowed;
+      }
+    `};
+
+  ${props => props.hasLeadingVisual && styled.css`
+      padding-left: ${forcePixelValue(props.theme.space[5])};
+      input {
+        padding-left: ${forcePixelValue(props.theme.space[2])};
+      }
+    `}
+
+  transition: color 100ms, background-color 100ms;
+  &:after {
+    transition: border-color 100ms;
+  }
+`;
+const UnstyledInput$1 = styled__default.default.input`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
+
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+const BaseInput$1 = styled__default.default(UnstyledInput$1)`
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+`;
+var index$6 = /*#__PURE__*/React.forwardRef(OverlaySelectInput);
+
 const Pagination = ({
   pages: propPages,
   currentPageIndex,
@@ -21073,6 +21407,18 @@ const BasePill = styled__default.default(UnstyledButton)`
 `;
 var index$4 = /*#__PURE__*/React.forwardRef(Pill);
 
+const SelectOption = ({
+  children: propChildren,
+  ...props
+}) => {
+  const children = isNullable(propChildren) ? props.label : propChildren;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSelectOption, {
+    ...props,
+    children: children
+  });
+};
+const BaseSelectOption = styled__default.default.option``;
+
 const Select = ({
   children,
   disabled,
@@ -21289,7 +21635,6 @@ const BaseSelect = styled__default.default(UnstyledSelect)`
   white-space: pre;
   text-overflow: ellipsis;
 `;
-const SelectOption = styled__default.default.option``;
 var index$3 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
   Option: SelectOption
 });
@@ -23368,17 +23713,18 @@ const useOutsideClick = ({
   });
 };
 
-exports.ActionList = index$c;
+exports.ActionList = index$d;
 exports.AnimatePresence = AnimatePresence;
-exports.Avatar = index$b;
-exports.Breadcrumbs = index$a;
+exports.Avatar = index$c;
+exports.Breadcrumbs = index$b;
 exports.Button = Button;
-exports.Checkbox = index$9;
+exports.Checkbox = index$a;
 exports.Chip = Chip;
-exports.Datagrid = index$8;
+exports.Datagrid = index$9;
 exports.DescriptionList = DescriptionList;
-exports.Dialog = index$7;
+exports.Dialog = index$8;
 exports.DialogHandler = DialogHandler;
+exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
 exports.GradientText = GradientText;
 exports.Grid = Grid$1;
@@ -23390,6 +23736,7 @@ exports.ItemList = ItemList;
 exports.MotionView = MotionView;
 exports.Overlay = Overlay$1;
 exports.OverlayPopper = OverlayPopper;
+exports.OverlaySelectInput = index$6;
 exports.Pagination = index$5;
 exports.Pill = index$4;
 exports.Select = index$3;

package/esm/core/EmptyState/index.js

@@ -0,0 +1,117 @@
+import 'react';
+import SvgDocument from '../../packages/icons/esm/Document.js';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import Button from '../Button/index.js';
+import Text from '../Text/index.js';
+import View from '../View/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const EmptyState = ({
+  title,
+  icon: Icon = SvgDocument,
+  description,
+  action,
+  renderAction = ({
+    ...buttonProps
+  }, emptyStateProps) => /*#__PURE__*/jsxRuntimeExports.jsx(Button, {
+    size: emptyStateProps.size,
+    ...buttonProps
+  }),
+  size = 'm',
+  sx
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseEmptyState, {
+    size: size,
+    sx: sx,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+      as: 'p',
+      children: title
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+      children: description
+    }), action ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      children: renderAction(action, {
+        size
+      })
+    }) : null]
+  });
+};
+const BaseEmptyState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & > svg {
+    color: ${({
+  theme
+}) => theme.colors['icon/neutral']};
+  }
+  & > p {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.bold};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  }
+  & > span {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtler']};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  }
+
+  ${variant({
+  prop: 'size',
+  variants: {
+    m: {
+      '& > svg': {
+        width: 64,
+        height: 64
+      },
+      '& > p': {
+        fontSize: 'm',
+        mt: 2
+      },
+      '& > span': {
+        fontSize: 's',
+        mt: 1
+      },
+      '& > div': {
+        mt: 6
+      }
+    },
+    s: {
+      '& > svg': {
+        width: 32,
+        height: 32
+      },
+      '& > p': {
+        fontSize: 's',
+        mt: 3
+      },
+      '& > span': {
+        fontSize: 'xs',
+        mt: 0.5
+      },
+      '& > div': {
+        mt: 3
+      }
+    }
+  }
+})}
+
+  ${sx}
+`;
+
+export { EmptyState as default };

package/esm/core/Overlay/index.js

@@ -35,11 +35,9 @@ const Overlay = ({
     }
   }, [handleDismiss, overlayRef]);
   const handleKeyDown = useCallback(event => {
-    switch (event.key) {
-      case 'Escape':
-        handleDismiss?.();
-        event.stopPropagation();
-        break;
+    if (event.key === 'Escape') {
+      handleDismiss?.();
+      event.stopPropagation();
     }
   }, [handleDismiss]);
   useEffect(() => {