td-stylekit 25.3.0 → 25.6.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [25.6.0](https://github.com/treasure-data/td-stylekit/compare/v25.5.0...v25.6.0) (2022-02-22)
+
+
+### Features
+
+* **CON-6392:** Update TD logo in console with new blue diamond ([#1224](https://github.com/treasure-data/td-stylekit/issues/1224)) ([a1cc4b1](https://github.com/treasure-data/td-stylekit/commit/a1cc4b1))
+
+# [25.5.0](https://github.com/treasure-data/td-stylekit/compare/v25.4.0...v25.5.0) (2022-02-22)
+
+
+### Features
+
+* **TooltipPopover:** Expose onClickOutside property in TooltipPopover ([#1231](https://github.com/treasure-data/td-stylekit/issues/1231)) ([1e0e53f](https://github.com/treasure-data/td-stylekit/commit/1e0e53f))
+
+# [25.4.0](https://github.com/treasure-data/td-stylekit/compare/v25.3.0...v25.4.0) (2022-02-18)
+
+
+### Features
+
+* **Icon:** Add new eye icon ([#1230](https://github.com/treasure-data/td-stylekit/issues/1230)) ([7e19c89](https://github.com/treasure-data/td-stylekit/commit/7e19c89))
+
 # [25.3.0](https://github.com/treasure-data/td-stylekit/compare/v25.2.1...v25.3.0) (2022-02-17)
 
 

package/dist/es/Icon/staticTypes.d.ts

@@ -68,6 +68,8 @@ export declare type IconTypes = {
     ExclamationIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Exit: React.ComponentType<JSX.IntrinsicElements['svg']>;
     ExitIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    Eye: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    EyeIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Facebook: React.ComponentType<JSX.IntrinsicElements['svg']>;
     FacebookIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Feedback: React.ComponentType<JSX.IntrinsicElements['svg']>;

package/dist/es/Icon/types.js

@@ -127,7 +127,14 @@ React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
 })),Exit: /*#__PURE__*/
 React.createElement("path", {
   d: "M23.052 14.814a.5.5 0 10-.704.71l.704-.71zM25.5 17.95l.352.355a.5.5 0 000-.71l-.352.355zm-3.152 2.427a.5.5 0 10.704.71l-.704-.71zM15.5 17.45a.5.5 0 000 1v-1zM20 15.17a.5.5 0 001 0h-1zm1.1 5.563a.5.5 0 10-1 0h1zm1.248-5.208l2.8 2.781.704-.71-2.8-2.78-.704.709zm2.8 2.072l-2.8 2.781.704.71 2.8-2.782-.704-.71zm-9.648.854h10v-1h-10v1zM21 15.17v-3.576h-1v3.576h1zm0-3.576c0-.876-.727-1.593-1.6-1.593v1c.327 0 .6.276.6.593h1zM19.4 10h-7.8v1h7.8v-1zm-7.8 0c-.873 0-1.6.717-1.6 1.593h1c0-.317.273-.593.6-.593v-1zM10 11.593v12.814h1V11.593h-1zm0 12.814c0 .876.727 1.593 1.6 1.593v-1a.606.606 0 01-.6-.593h-1zM11.6 26h7.9v-1h-7.9v1zm7.9 0c.873 0 1.6-.717 1.6-1.593h-1a.606.606 0 01-.6.593v1zm1.6-1.593v-3.675h-1v3.675h1z"
-}),Facebook: /*#__PURE__*/
+}),Eye: /*#__PURE__*/
+React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  d: "M11.638 19.157a.49.49 0 01.703-.015l2.492 2.456a4.575 4.575 0 006.552 0l2.385-2.448c.194-.2.508-.2.702 0a.52.52 0 010 .722l-2.385 2.448a5.55 5.55 0 01-7.953.004l-2.481-2.446a.52.52 0 01-.015-.721zM21.276 14.414a4.56 4.56 0 00-6.552 0l-3.876 4c-.194.2-.508.2-.702 0a.522.522 0 010-.725l3.875-4a5.531 5.531 0 017.958 0l3.876 4c.194.2.194.525 0 .725-.195.2-.509.2-.703 0l-3.876-4z",
+  fillRule: "evenodd"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M18 16a2 2 0 10-.001 3.999A2 2 0 0018 16zm-3 2a3 3 0 116 0 3 3 0 01-6 0z",
+  fillRule: "evenodd"
+})),Facebook: /*#__PURE__*/
 React.createElement("path", {
   d: "M26 13v10c0 1.7-1.3 3-3 3h-3v-7h2.5l.5-2h-3v-1c0-.5.5-1 1-1h2v-2h-2c-1.7 0-3 1.3-3 3v1h-2v2h2v7h-5c-1.7 0-3-1.3-3-3V13c0-1.6 1.3-3 3-3h10c1.7 0 3 1.4 3 3z"
 }),Feedback: /*#__PURE__*/

package/dist/es/Logo/Logo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type LogoVariants = 'themed' | 'light' | 'dark' | 'v4';
+export declare type LogoVariants = 'themed' | 'light' | 'dark';
 export declare type LogoTDProps = {
     /** CSS class to apply to the overall SVG */
     className?: string;

package/dist/es/Logo/Logo.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _LogoV = _interopRequireDefault(require("./LogoV4"));
-
 var _LogoLight = _interopRequireDefault(require("./LogoLight"));
 
 var _LogoDark = _interopRequireDefault(require("./LogoDark"));
@@ -45,20 +43,12 @@ function LogoTD(_ref) {
         height: height
       });
 
-    case 'v4':
-      return (0, _react2.jsx)(_LogoV["default"], {
-        "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "logo-v4"),
-        className: className,
-        width: width,
-        height: height
-      });
-
     case 'themed':
     default:
       // return a theme specific logo
       if (theme.name === 'v4') {
-        return (0, _react2.jsx)(_LogoV["default"], {
-          "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "logo-v4"),
+        return (0, _react2.jsx)(_LogoDark["default"], {
+          "data-gs": gs("src", "logo", "logo.tsx", "logo-td", "logo-dark"),
           className: className,
           width: width,
           height: height

package/dist/es/TooltipPopover/TooltipPopover.d.ts

@@ -13,7 +13,7 @@ export declare type TooltipPopoverProps = {
     target: DOMContainer;
     escClose?: boolean;
 } & Omit<TippyProps, // https://atomiks.github.io/tippyjs/v6/all-props/
-'allowHTML' | 'arrow' | 'animateFill' | 'content' | 'inlinePositioning' | 'onClickOutside' | 'onHide' | 'placement' | 'plugins' | 'reference' | 'singleton' | 'visible' | 'render'>;
+'allowHTML' | 'arrow' | 'animateFill' | 'content' | 'inlinePositioning' | 'onHide' | 'placement' | 'plugins' | 'reference' | 'singleton' | 'visible' | 'render'>;
 /**
  * A popover handler built on Tippy.js.
  * Compose with the Popover wrapper for popover content.

package/dist/es/TooltipPopover/TooltipPopover.js

@@ -17,7 +17,7 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 
 var _useWaitForDOMRef = require("./useWaitForDOMRef");
 
-var _excluded = ["data-instrumentation", "arrowHidden", "children", "hideOnClick", "interactive", "onHide", "show", "showOnCreate", "target", "trigger", "escClose"];
+var _excluded = ["data-instrumentation", "arrowHidden", "children", "hideOnClick", "interactive", "onHide", "onClickOutside", "show", "showOnCreate", "target", "trigger", "escClose"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -74,6 +74,7 @@ var TooltipPopover = function TooltipPopover(props) {
       _props$interactive = props.interactive,
       interactive = _props$interactive === void 0 ? true : _props$interactive,
       onHide = props.onHide,
+      onClickOutside = props.onClickOutside,
       show = props.show,
       showOnCreate = props.showOnCreate,
       target = props.target,
@@ -138,7 +139,8 @@ var TooltipPopover = function TooltipPopover(props) {
     onHidden: function onHidden() {
       return setMounted(false);
     },
-    reference: triggerTarget
+    reference: triggerTarget,
+    onClickOutside: onClickOutside
     /** Tippy is very strict about the rules of what props are allowed.
      *  An instrumentation plugin adds in `data-gs-c` and `data-gs`.
      * By defining as tippy plugins we can make these props acceptable.  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "td-stylekit",
-  "version": "25.3.0",
+  "version": "25.6.0",
   "main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",

package/dist/es/Logo/LogoV4.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { LogoTDProps } from './Logo';
-declare function LogoV4({ className, width, height }: LogoTDProps): JSX.Element;
-declare namespace LogoV4 {
-    var defaultProps: {
-        width: number;
-        height: number;
-    };
-}
-export default LogoV4;
-//# sourceMappingURL=LogoV4.d.ts.map

package/dist/es/Logo/LogoV4.js

@@ -1,168 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = LogoV4;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@emotion/react");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
-if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
-
-function LogoV4(_ref) {
-  var className = _ref.className,
-      width = _ref.width,
-      height = _ref.height;
-  return (0, _react2.jsx)("svg", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg"),
-    width: width,
-    height: height,
-    className: className,
-    version: "1.1",
-    viewBox: "0 0 30 21",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, (0, _react2.jsx)("defs", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs")
-  }, (0, _react2.jsx)("linearGradient", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient"),
-    id: "SVGID_1_",
-    x1: ".0023621",
-    x2: "353.58",
-    y1: "118.87",
-    y2: "118.87",
-    gradientUnits: "userSpaceOnUse"
-  }, (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#1DAEDA",
-    offset: "0"
-  }), (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#0FA0CB",
-    offset: "1"
-  })), (0, _react2.jsx)("linearGradient", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient"),
-    id: "SVGID_2_",
-    x1: "58.216",
-    x2: "295.93",
-    y1: "51.51",
-    y2: "51.51",
-    gradientUnits: "userSpaceOnUse"
-  }, (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#26B7E3",
-    offset: "0"
-  }), (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#18A9D4",
-    offset: "1"
-  })), (0, _react2.jsx)("linearGradient", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient"),
-    id: "SVGID_3_",
-    x1: "226.51",
-    x2: "353.56",
-    y1: "51.969",
-    y2: "51.969",
-    gradientUnits: "userSpaceOnUse"
-  }, (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#3ECFFB",
-    offset: "0"
-  }), (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#2ABBE6",
-    offset: ".4669"
-  }), (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#12A3CE",
-    offset: ".9249"
-  })), (0, _react2.jsx)("linearGradient", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient"),
-    id: "SVGID_4_",
-    x1: ".032132",
-    x2: "226.51",
-    y1: "51.869",
-    y2: "51.869",
-    gradientUnits: "userSpaceOnUse"
-  }, (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#1DAEDA",
-    offset: "0"
-  }), (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#0FA0CB",
-    offset: "1"
-  })), (0, _react2.jsx)("linearGradient", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient"),
-    id: "SVGID_5_",
-    x1: "177.87",
-    x2: "353.49",
-    y1: "149.24",
-    y2: "149.24",
-    gradientUnits: "userSpaceOnUse"
-  }, (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#10A1CD",
-    offset: "0"
-  }), (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#0798C4",
-    offset: "1"
-  })), (0, _react2.jsx)("linearGradient", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient"),
-    id: "SVGID_6_",
-    x1: "59.804",
-    x2: "212.26",
-    y1: "165.86",
-    y2: "77.836",
-    gradientUnits: "userSpaceOnUse"
-  }, (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#0FA0CC",
-    offset: "0"
-  }), (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#0686AE",
-    offset: ".5867"
-  }), (0, _react2.jsx)("stop", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "defs", "linear-gradient", "stop"),
-    stopColor: "#027BA1",
-    offset: ".9435"
-  }))), (0, _react2.jsx)("g", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "g"),
-    transform: "matrix(.084828 0 0 .084828 .0021202 -.050471)"
-  }, (0, _react2.jsx)("path", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "g", "path"),
-    d: "m53.2 4.4-51.2 51.1c-2.7 2.7-2.7 7.1 0 9.8l169.9 169.9c2.7 2.7 7.1 2.7 9.8 0l169.9-169.9c2.7-2.7 2.7-7.1 0-9.8l-51.2-51.1c-2.5-2.5-5.8-3.8-9.3-3.8h-228.7c-3.4-0.1-6.8 1.3-9.2 3.8z",
-    fill: "url(#SVGID_1_)"
-  }), (0, _react2.jsx)("path", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "g", "path"),
-    d: "m226.5 102.5 69.4-101c-1.5-0.6-3.1-0.9-4.8-0.9h-228.7c-1.5 0-2.9 0.3-4.2 0.7z",
-    fill: "url(#SVGID_2_)"
-  }), (0, _react2.jsx)("path", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "g", "path"),
-    d: "m226.5 102.5 127-41.1c0.3-2.1-0.3-4.3-1.9-5.8l-51.2-51.2c-1.3-1.3-2.8-2.3-4.5-2.9z",
-    fill: "url(#SVGID_3_)"
-  }), (0, _react2.jsx)("path", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "g", "path"),
-    d: "m58.2 1.2c-1.9 0.6-3.6 1.7-5 3.1l-51.2 51.2c-1.5 1.5-2.1 3.5-2 5.4l226.5 41.5z",
-    fill: "url(#SVGID_4_)"
-  }), (0, _react2.jsx)("path", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "g", "path"),
-    d: "m353.5 61.4-127 41.1-48.6 134.6c1.4-0.2 2.7-0.8 3.8-1.9l169.9-169.9c1.1-1.1 1.7-2.5 1.9-3.9z",
-    fill: "url(#SVGID_5_)"
-  }), (0, _react2.jsx)("path", {
-    "data-gs": gs("src", "logo", "logov4.tsx", "logo-v4", "svg", "g", "path"),
-    d: "m0 61c0.1 1.6 0.8 3.1 2 4.4l169.9 169.9c1.6 1.6 3.9 2.3 6 1.9l48.6-134.6z",
-    fill: "url(#SVGID_6_)"
-  })));
-}
-
-LogoV4.defaultProps = {
-  width: 30,
-  height: 21
-};