td-stylekit 28.25.0 → 28.26.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [28.26.0](https://github.com/treasure-data/td-stylekit/compare/v28.25.1...v28.26.0) (2023-10-18)
+
+
+### Features
+
+* **CON-14048:** Make DataGrid filter icons always visible ([#1492](https://github.com/treasure-data/td-stylekit/issues/1492)) ([5ed2fee](https://github.com/treasure-data/td-stylekit/commit/5ed2fee))
+
+## [28.25.1](https://github.com/treasure-data/td-stylekit/compare/v28.25.0...v28.25.1) (2023-10-16)
+
+
+### Bug Fixes
+
+* **CON-14162:** Resolve Visual Regression test CI issues ([#1502](https://github.com/treasure-data/td-stylekit/issues/1502)) ([c07f661](https://github.com/treasure-data/td-stylekit/commit/c07f661))
+
 # [28.25.0](https://github.com/treasure-data/td-stylekit/compare/v28.24.1...v28.25.0) (2023-10-11)
 
 

package/dist/es/ChartPrimitives/Defs.js

@@ -37,11 +37,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
-
 /**
  * Sets up reusable SVG definitions for use in charts,
  * like gradients and drop shadows.
  */
+
 var Defs = /*#__PURE__*/function (_React$Component) {
   _inherits(Defs, _React$Component);
 

package/dist/es/ChartPrimitives/Tooltip.js

@@ -155,7 +155,8 @@ var Tooltip = /*#__PURE__*/function (_PureComponent) {
     });
 
     return _this;
-  }
+  } // Required. See docs: https://formidable.com/open-source/victory/guides/tooltips/#wrapping-victorytooltip
+
 
   _createClass(Tooltip, [{
     key: "componentDidMount",

package/dist/es/CollapsibleToggle/CollapsibleToggle.js

@@ -24,8 +24,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
-if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
-// openLeft is used for v4
+if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {}; // openLeft is used for v4
+
 var Highlight = ( /*#__PURE__*/0, _base["default"])('div', process.env.NODE_ENV === "production" ? {
   target: "ezxmtq91"
 } : {

package/dist/es/DataGrid/DataGrid.js

@@ -575,7 +575,9 @@ var DataGrid = /*#__PURE__*/function (_Component) {
     });
 
     return _this;
-  }
+  } // expose sub-components
+  // throttling this so a double click behaves like a single click
+
 
   _createClass(DataGrid, [{
     key: "render",

package/dist/es/DataGrid/components/CategoryFilter.js

@@ -27,6 +27,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+/* eslint-disable td/instrumentation */
+// this level of fine grained instrumentation is not needed
 
 function CategoryFilter(_ref) {
   var _ref$options = _ref.options,

package/dist/es/DataGrid/components/CollapsibleCell.js

@@ -61,6 +61,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+/* eslint-disable td/instrumentation */
+// this level of fine grained instrumentation is not needed
+
 var CollapsibleIcon = ( /*#__PURE__*/0, _base["default"])(_Icon["default"].Medium.SymbolArrowDown, process.env.NODE_ENV === "production" ? {
   target: "e1prc87v2"
 } : {

package/dist/es/DataGrid/components/ColumnHeader.d.ts

@@ -33,7 +33,6 @@ type ColumnHeaderProps = {
     headerContainerStyles?: (theme: Theme) => Interpolation<Theme>;
 };
 type ColumnHeaderState = {
-    hovered: boolean;
     opened: boolean;
     isFiltering: boolean;
 };
@@ -46,13 +45,11 @@ declare class ColumnHeader extends Component<ColumnHeaderProps, ColumnHeaderStat
         sortDescIcon: import("@emotion/react/jsx-runtime").JSX.Element;
     };
     state: {
-        hovered: boolean;
         opened: boolean;
         isFiltering: boolean;
     };
     columnHeaderRef: React.RefObject<HTMLDivElement>;
-    columnHeaderSortIconRef: React.RefObject<HTMLDivElement>;
-    columnHeaderFilterIconRef: React.RefObject<HTMLDivElement>;
+    iconRef: React.RefObject<HTMLDivElement>;
     handleOverlayToggle: (opened: boolean) => void;
     setIsFiltering: (isFiltering: boolean) => void;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/es/DataGrid/components/ColumnHeader.js

@@ -55,6 +55,32 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+/* eslint-disable td/instrumentation */
+// this level of fine grained instrumentation is not needed
+
+function HeaderIcon(_ref) {
+  var isSorted = _ref.isSorted,
+      isActive = _ref.isActive,
+      hasActions = _ref.hasActions,
+      iconRef = _ref.iconRef,
+      sortIcon = _ref.sortIcon;
+  var icon = isSorted ? sortIcon : (0, _jsxRuntime.jsx)(_Icon["default"].Medium.ToolFilledFilter, {
+    "data-gs": gs("src", "datagrid", "components", "header-icon", "icon-medium-tool-filled-filter")
+  });
+
+  if (isSorted || hasActions) {
+    return (0, _jsxRuntime.jsx)(_elements.ColumnHeaderIcon, {
+      "data-gs-c": gsC(icon),
+      "data-gs": gs("src", "datagrid", "components", "header-icon", "column-header-icon"),
+      active: isActive,
+      ref: iconRef,
+      "data-testid": "column-header-icon",
+      children: icon
+    });
+  }
+
+  return null;
+}
 
 /**
  * Component that renders a column header. Responsible for sorting and filtering.
@@ -76,16 +102,13 @@ var ColumnHeader = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      hovered: false,
       opened: false,
       isFiltering: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "columnHeaderRef", /*#__PURE__*/_react["default"].createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "columnHeaderSortIconRef", /*#__PURE__*/_react["default"].createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "columnHeaderFilterIconRef", /*#__PURE__*/_react["default"].createRef());
+    _defineProperty(_assertThisInitialized(_this), "iconRef", /*#__PURE__*/_react["default"].createRef());
 
     _defineProperty(_assertThisInitialized(_this), "handleOverlayToggle", function (opened) {
       _this.setState({
@@ -138,25 +161,14 @@ var ColumnHeader = /*#__PURE__*/function (_Component) {
       var isFiltered = filterValue && _typeof(filterValue) === 'object' ? !(0, _utils.isReallyEmpty)(filterValue.value) : !(0, _utils.isReallyEmpty)(filterValue);
       var hasActions = !!(filterRenderer || sortRenderer);
       var isActive = isSorted || isFiltered;
-      var showPlaceholderFilterIcon = hasActions && !isActive && (this.state.hovered || this.state.opened);
       var header = (0, _jsxRuntime.jsxs)(_elements.ColumnHeaderContainer, {
-        "data-gs-c": gsC(""),
+        "data-gs-c": gsC("", "headericon"),
         "data-gs": gs("src", "datagrid", "components", "column-header-container"),
         active: isActive,
         clickable: hasActions,
         "data-testid": "column-header-container",
         isFirst: isFirst,
         isLast: isLast,
-        onMouseEnter: function onMouseEnter() {
-          return _this2.setState({
-            hovered: true
-          });
-        },
-        onMouseLeave: function onMouseLeave() {
-          return _this2.setState({
-            hovered: false
-          });
-        },
         onClick: function onClick() {
           return _this2.handleOverlayToggle(!_this2.state.opened);
         },
@@ -169,18 +181,13 @@ var ColumnHeader = /*#__PURE__*/function (_Component) {
           "data-gs": gs("src", "datagrid", "components", "column-header-container", "column-header-label"),
           title: label,
           children: label
-        }), isSorted && (0, _jsxRuntime.jsx)(_elements.ColumnHeaderIcon, {
-          "data-gs-c": gsC(sortIcon),
-          "data-gs": gs("src", "datagrid", "components", "column-header-container", "column-header-icon"),
-          ref: this.columnHeaderSortIconRef,
-          children: sortIcon
-        }), (isFiltered || showPlaceholderFilterIcon) && (0, _jsxRuntime.jsx)(_elements.ColumnHeaderIcon, {
-          "data-gs-c": gsC("icon-medium-toolfilledfilter"),
-          "data-gs": gs("src", "datagrid", "components", "column-header-container", "column-header-icon"),
-          ref: this.columnHeaderFilterIconRef,
-          children: (0, _jsxRuntime.jsx)(_Icon["default"].Medium.ToolFilledFilter, {
-            "data-gs": gs("src", "datagrid", "components", "column-header-container", "column-header-icon", "icon-medium-tool-filled-filter")
-          })
+        }), (0, _jsxRuntime.jsx)(HeaderIcon, {
+          "data-gs": gs("src", "datagrid", "components", "column-header-container", "header-icon"),
+          isActive: isActive,
+          isSorted: isSorted,
+          hasActions: hasActions,
+          iconRef: this.iconRef,
+          sortIcon: sortIcon
         }), onResize ? (0, _jsxRuntime.jsx)(_ColumnHeaderDragHandle["default"], {
           "data-gs": gs("src", "datagrid", "components", "column-header-container", "column-header-drag-handle"),
           onResize: onResize
@@ -188,6 +195,7 @@ var ColumnHeader = /*#__PURE__*/function (_Component) {
       });
       var headerOverlay = (0, _jsxRuntime.jsx)(_elements.ColumnHeaderPopover, {
         "data-gs": gs("src", "datagrid", "components", "column-header-popover"),
+        "data-testid": "column-header-popover",
         children: (0, _jsxRuntime.jsx)(_elements.ColumnHeaderActionsContainer, {
           "data-gs": gs("src", "datagrid", "components", "column-header-popover", "column-header-actions-container"),
           children: (0, _jsxRuntime.jsx)(_ColumnHeaderActions["default"], {
@@ -218,20 +226,12 @@ var ColumnHeader = /*#__PURE__*/function (_Component) {
         return header;
       }
 
-      var tooltipTarget = this.columnHeaderRef;
-
-      if (isSorted) {
-        tooltipTarget = this.columnHeaderSortIconRef;
-      } else if (isFiltered || showPlaceholderFilterIcon) {
-        tooltipTarget = this.columnHeaderFilterIconRef;
-      }
-
       return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [(0, _jsxRuntime.jsx)(_TooltipPopover["default"], {
           "data-gs-c": gsC(headerOverlay),
           "data-gs": gs("src", "datagrid", "components", "tooltip-popover"),
           escClose: true,
-          target: tooltipTarget,
+          target: this.iconRef,
           onHide: function onHide() {
             return _this2.state.isFiltering ? false : _this2.handleOverlayToggle(false);
           },

package/dist/es/DataGrid/components/ColumnHeaderActions.js

@@ -49,6 +49,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+/* eslint-disable td/instrumentation */
+// this level of fine grained instrumentation is not needed
 
 /**
  * Component that renders Clear/Apply buttons and calls single child with render

package/dist/es/DataGrid/components/InputCell.js

@@ -47,6 +47,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+/* eslint-disable td/instrumentation */
+// this level of fine grained instrumentation is not needed
+
 var TYPES = {
   NUMBER: 'number',
   SELECT: 'select',

package/dist/es/DataGrid/components/ScrollableTable.js

@@ -51,6 +51,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+/* eslint-disable td/instrumentation */
+// this level of fine grained instrumentation is not needed
 
 /**
  * This mirrors react-virtualized Table component to enable horizontal
@@ -579,6 +581,10 @@ var ScrollableTable = /*#__PURE__*/function (_PureComponent) {
         })
       });
     }
+    /**
+     * Determines the flex-shrink, flex-grow, and width values for a cell (header or column).
+     */
+
   }, {
     key: "getScrollbarWidth",
     value: function getScrollbarWidth() {

package/dist/es/DataGrid/elements.d.ts

@@ -34,6 +34,8 @@ export declare const ColumnHeaderLabel: StyledComponent<{
 export declare const ColumnHeaderIcon: StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    active?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 type CellProps = {
     editable?: boolean;
@@ -82,6 +84,7 @@ type SortButtonProps = {
 export declare const SortButton: StyledComponent<{
     icon: React.ReactNode;
     label: string;
+    active?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & SortButtonProps, {}, {}>;