@elliemae/ds-data-table 2.0.0-rc.5 → 2.0.0-rc.6

package/cjs/exported-related/FilterPopover.js

@@ -52,6 +52,9 @@ const FilterButton = /*#__PURE__*/styled__default["default"].span.withConfig({
 const Button = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
+const PopperContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-16i88ut-2"
+})(["background-color:'#fff';"]);
 const FilterPopover = _ref2 => {
   var _column$ref$current$o, _column$ref, _column$ref$current;
 
@@ -152,9 +155,20 @@ const FilterPopover = _ref2 => {
       minWidth: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
     }),
     placementOrderPreference: ['bottom-end']
-  }, void 0, /*#__PURE__*/jsxRuntime.jsx("div", {
-    style: {
-      backgroundColor: '#fff'
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(PopperContent, {
+    onKeyDown: e => {
+      if (e.code === 'Tab') {
+        setTimeout(() => {
+          var _popperRef$current;
+
+          if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(document.activeElement))) {
+            patchHeader(columnId, {
+              hideFilterMenu: true,
+              hideFilterButton: false
+            });
+          }
+        });
+      }
     },
     ref: popperRef,
     children: menuContent

package/esm/exported-related/FilterPopover.js

@@ -41,6 +41,9 @@ const FilterButton = /*#__PURE__*/styled.span.withConfig({
 const Button = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
+const PopperContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-16i88ut-2"
+})(["background-color:'#fff';"]);
 const FilterPopover = _ref2 => {
   var _column$ref$current$o, _column$ref, _column$ref$current;
 
@@ -141,9 +144,20 @@ const FilterPopover = _ref2 => {
       minWidth: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
     }),
     placementOrderPreference: ['bottom-end']
-  }, void 0, /*#__PURE__*/jsx("div", {
-    style: {
-      backgroundColor: '#fff'
+  }, void 0, /*#__PURE__*/jsx(PopperContent, {
+    onKeyDown: e => {
+      if (e.code === 'Tab') {
+        setTimeout(() => {
+          var _popperRef$current;
+
+          if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(document.activeElement))) {
+            patchHeader(columnId, {
+              hideFilterMenu: true,
+              hideFilterButton: false
+            });
+          }
+        });
+      }
     },
     ref: popperRef,
     children: menuContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.6",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -634,20 +634,20 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-basic": "2.0.0-rc.5",
-    "@elliemae/ds-button": "2.0.0-rc.5",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.5",
-    "@elliemae/ds-controlled-form": "2.0.0-rc.5",
-    "@elliemae/ds-dropdownmenu": "2.0.0-rc.5",
-    "@elliemae/ds-form": "2.0.0-rc.5",
-    "@elliemae/ds-grid": "2.0.0-rc.5",
-    "@elliemae/ds-icons": "2.0.0-rc.5",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.5",
-    "@elliemae/ds-pagination": "2.0.0-rc.5",
-    "@elliemae/ds-pills": "2.0.0-rc.5",
-    "@elliemae/ds-system": "2.0.0-rc.5",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.5",
-    "@elliemae/ds-utilities": "2.0.0-rc.5",
+    "@elliemae/ds-basic": "2.0.0-rc.6",
+    "@elliemae/ds-button": "2.0.0-rc.6",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.6",
+    "@elliemae/ds-controlled-form": "2.0.0-rc.6",
+    "@elliemae/ds-dropdownmenu": "2.0.0-rc.6",
+    "@elliemae/ds-form": "2.0.0-rc.6",
+    "@elliemae/ds-grid": "2.0.0-rc.6",
+    "@elliemae/ds-icons": "2.0.0-rc.6",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.6",
+    "@elliemae/ds-pagination": "2.0.0-rc.6",
+    "@elliemae/ds-pills": "2.0.0-rc.6",
+    "@elliemae/ds-system": "2.0.0-rc.6",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.6",
+    "@elliemae/ds-utilities": "2.0.0-rc.6",
     "@popperjs/core": "~2.10.2",
     "@reduxjs/toolkit": "~1.6.2",
     "array-move": "~3.0.1",

package/types/addons/Filters/Components/SelectFilter/components.d.ts

@@ -1,6 +1,6 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const MenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VirtualListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const MenuList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const MenuItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const VirtualListWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/parts/FilterBar/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDropdownMenu: import("styled-components").StyledComponent<{
     ({ containerProps, className, contentStyle, options, onSelectMenuItem, onOpenMenu, onClickOutsideMenu, preventOverflow, placement, interactionType, triggerComponent, customMenu, isOpen, selection, menuProps, referenceNode, focusOnOpen, onClose, itemsRenderer, responsiveHeight, singleGroupSelection, onSelectChange, minWidth, maxWidth, zIndex, type, loading, hideIfNotVisible, }: {
         containerProps?: {} | undefined;
@@ -61,4 +61,4 @@ export declare const StyledDropdownMenu: import("styled-components").StyledCompo
         onSelectChange: any;
         singleGroupSelection: any;
     };
-}, any, {}, never>;
+}, import("styled-components").DefaultTheme, {}, never>;

package/types/styled.d.ts

@@ -3,35 +3,35 @@ interface WidthAndHeight {
     width?: string | number;
     height?: string | number;
 }
-export declare const StyledFocusWithin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledDataTableWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight & {
+export declare const StyledFocusWithin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDataTableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WidthAndHeight & {
     noSelectionAllowed: boolean;
 }, never>;
-export declare const StyledTableWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight, never>;
-export declare const StyledTableContentWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight, never>;
-export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight, never>;
-export declare const StyledHeadWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const StyledTableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WidthAndHeight, never>;
+export declare const StyledTableContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WidthAndHeight, never>;
+export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WidthAndHeight, never>;
+export declare const StyledHeadWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     colsLayoutStyle: string;
     totalColumnsWidth: number | string;
 }, never>;
-export declare const StyledHeadTr: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledHeadTh: import("styled-components").StyledComponent<"div", any, any, never>;
-export declare const StyledHeaderRightIconsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledResizer: import("styled-components").StyledComponent<"div", any, {
+export declare const StyledHeadTr: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeadTh: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
+export declare const StyledHeaderRightIconsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledResizer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isResizing: boolean;
 }, never>;
-export declare const StyledActionCell: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledCell: import("styled-components").StyledComponent<"div", any, {
+export declare const StyledActionCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     theme: any;
     column: any;
 }, never>;
-export declare const StyledCellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledPencilIcon: import("styled-components").StyledComponent<(rest: any) => JSX.Element, any, {}, never>;
-export declare const StyledEditableContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledFullsizeGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const GroupHeaderContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {
+export declare const StyledCellContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPencilIcon: import("styled-components").StyledComponent<(rest: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEditableContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFullsizeGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const GroupHeaderContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     padding: string;
 }, never>;
-export declare const GroupHeaderTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledCellContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const GroupHeaderTitle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCellContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export {};