td-stylekit 27.1.1 → 27.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [27.3.0](https://github.com/treasure-data/td-stylekit/compare/v27.2.0...v27.3.0) (2022-09-26)
+
+
+### Features
+
+* **Icons:** Add legacy rts and key icons ([#1334](https://github.com/treasure-data/td-stylekit/issues/1334)) ([f83d98a](https://github.com/treasure-data/td-stylekit/commit/f83d98a))
+
+# [27.2.0](https://github.com/treasure-data/td-stylekit/compare/v27.1.1...v27.2.0) (2022-09-15)
+
+
+### Features
+
+* **CON-10583:** Modal Flyout ([#1325](https://github.com/treasure-data/td-stylekit/issues/1325)) ([1e43329](https://github.com/treasure-data/td-stylekit/commit/1e43329))
+
 ## [27.1.1](https://github.com/treasure-data/td-stylekit/compare/v27.1.0...v27.1.1) (2022-09-13)
 
 

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

@@ -209,6 +209,7 @@ export declare const CategoryInput: typeof Input & StyledComponent<any, {}, {
         bigCentered: string;
         popover: string;
         secondaryNavActiveItem: string;
+        flyout: string;
     };
     readonly sizes: {
         PageHeaderIcon: number;

package/dist/es/GrowthRateChart/GrowthRateChart.d.ts

@@ -44,6 +44,7 @@ declare namespace GrowthRateChart {
                 bigCentered: string;
                 popover: string;
                 secondaryNavActiveItem: string;
+                flyout: string;
             };
             readonly sizes: {
                 PageHeaderIcon: number;

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

@@ -536,6 +536,8 @@ export declare type IconTypes = {
     QueryIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     RealTimeSegment: React.ComponentType<JSX.IntrinsicElements['svg']>;
     RealTimeSegmentIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    RealTimeSegmentLegacy: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    RealTimeSegmentLegacyIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Redo: React.ComponentType<JSX.IntrinsicElements['svg']>;
     RedoIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Refresh: React.ComponentType<JSX.IntrinsicElements['svg']>;
@@ -570,6 +572,8 @@ export declare type IconTypes = {
     SymbolMinusIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Table: React.ComponentType<JSX.IntrinsicElements['svg']>;
     TableIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    ToolKeyStriped: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    ToolKeyStripedIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Train: React.ComponentType<JSX.IntrinsicElements['svg']>;
     TrainIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     TreeNav: React.ComponentType<JSX.IntrinsicElements['svg']>;

package/dist/es/Icon/types.js

@@ -1084,7 +1084,10 @@ React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
   d: "M16.997 10.8l.388.318a.497.497 0 00.067-.532.503.503 0 00-.455-.286v.5zm-4.191 0l-.49-.116a.498.498 0 00.49.616v-.5zm1.504-6.3l.49.115a.499.499 0 00-.264-.562.505.505 0 00-.612.127l.386.32zm-7.307 8.7l-.386-.32a.498.498 0 00-.07.532c.083.176.26.288.456.288v-.5zm4.191 0l.491.108a.498.498 0 00-.491-.608v.5zm-1.397 6.3l-.491-.108a.5.5 0 00.271.558c.21.1.46.046.609-.132l-.389-.318zm7.2-9.2h-4.191v1h4.191v-1zm-3.702.615l1.505-6.3-.98-.23-.492 2.065-1.012 4.234.98.232zm.63-6.735l-7.308 8.7.772.64.69-.82 5.248-6.25 1.37-1.63-.773-.64zM7.002 13.7h4.191v-1H7.003v1zm3.7-.608l-1.397 6.3.982.216.451-2.034.946-4.266-.982-.216zm-.517 6.726l7.2-8.7-.778-.636-.676.818-5.193 6.274-1.33 1.608.777.636z"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M12.411 11.11a.498.498 0 01-.095-.425l1.011-4.235-5.249 6.25h3.116c.152 0 .297.069.392.187a.498.498 0 01.1.42l-.947 4.267 5.193-6.274h-3.126c-.154 0-.3-.07-.395-.19z"
-})),Redo: /*#__PURE__*/
+})),RealTimeSegmentLegacy: /*#__PURE__*/
+React.createElement("path", {
+  d: "M14.636 5.303l.164-.688a.495.495 0 00.006-.203l-.404-.404a.505.505 0 00-.478.172l-.188.223.9.9zM12.768 5.556l.484-.576 1.18 1.18-.205.855-1.46-1.459zM11.8 6.71l.484-.577 1.738 1.739-.204.856-2.019-2.019zM10.831 7.862l.484-.576 2.298 2.298-.17.716h.886l2.043 2.042-.48.58-5.061-5.06zM9.863 9.015l.484-.576 5.064 5.064-.48.58-5.068-5.068zM8.894 10.168l.484-.576 5.073 5.072-.48.58-5.077-5.076zM7.926 11.321l.484-.576 5.08 5.08-.48.58-2.49-2.49.048-.215h-.263l-2.38-2.379zM6.958 12.474l.484-.576L9.244 13.7h-1.06l-1.226-1.226zM9.365 19.124l.193-.868 1.05 1.05-.422.512a.497.497 0 01-.064.063l-.757-.757zM11.089 18.727L9.75 17.388l.193-.868 1.626 1.626-.48.58zM12.53 16.985l-.48.58-1.915-1.913.193-.868 2.202 2.201zM7.123 13.7h-.12a.503.503 0 01-.49-.61l.61.61zM17.332 11.182l-.48.58L15.39 10.3h1.06l.882.882z"
+}),Redo: /*#__PURE__*/
 React.createElement("path", {
   d: "M15.571 4.501a.5.5 0 01.854-.354l3.323 3.324a.5.5 0 010 .707l-3.323 3.323a.5.5 0 01-.854-.353V8.824h-5.285a4.286 4.286 0 100 8.572h2.265a1 1 0 110 2h-2.265a6.286 6.286 0 110-12.572h5.285V4.501z",
   fillRule: "evenodd"
@@ -1212,6 +1215,9 @@ React.createElement("path", {
 React.createElement("path", {
   d: "M11.876 12.992A4.002 4.002 0 014 12a4 4 0 017.876-.992c.04-.005.082-.008.124-.008h7a1 1 0 110 2h-1v1.5a1 1 0 11-2 0V13h-4c-.042 0-.083-.003-.124-.008zM10 12a2 2 0 11-4 0 2 2 0 014 0z",
   fillRule: "evenodd"
+}),ToolKeyStriped: /*#__PURE__*/
+React.createElement("path", {
+  d: "M7.227 15.925a4.004 4.004 0 01-3.152-3.152l3.152 3.152zM8.347 15.985l-4.332-4.332c.026-.306.087-.601.178-.883l1.935 1.935c.202.537.63.965 1.167 1.167l1.935 1.935a3.979 3.979 0 01-.883.178zM10.591 15.047c-.193.165-.402.31-.624.437l-1.531-1.532c.268-.06.516-.173.732-.328l1.423 1.423zM11.536 13.87c-.12.228-.261.442-.421.64l-1.43-1.43c.146-.23.247-.49.291-.77l1.56 1.56zM12.787 13H12c-.042 0-.083-.003-.124-.008-.01.042-.022.083-.034.124l-2.101-2.101a2.01 2.01 0 00-.756-.756L6.884 8.158a3.99 3.99 0 01.908-.153L12.787 13zM13.848 13L8.965 8.117a4.007 4.007 0 012.911 2.89c.04-.004.082-.007.124-.007h.908l2 2h-1.06zM18 13.97v.53a.996.996 0 01-.098.433L16 13.03V13h-.031l-2-2h1.06L18 13.97zM18.09 13l-2-2h1.06l1.99 1.99c-.045.007-.092.01-.14.01h-.91zM19.805 12.594L18.21 11H19c.114 0 .224.02.327.055l.618.618a1 1 0 01-.14.92zM16 14.092l1.346 1.346A1 1 0 0116 14.5v-.408zM7.69 10.024l-1.56-1.56c-.228.12-.442.261-.64.421l1.43 1.43c.23-.146.49-.247.77-.291zM6.376 10.832L4.953 9.41c-.165.193-.31.402-.437.624l1.532 1.531a1.99 1.99 0 01.328-.732z"
 }),ToolPen: /*#__PURE__*/
 React.createElement("path", {
   d: "M14.038 7.301a.5.5 0 00-.707 0l-9.184 9.184A.5.5 0 004 16.84V19.5a.5.5 0 00.5.5h2.662a.5.5 0 00.353-.146L16.7 10.67a.5.5 0 000-.707L14.038 7.3zm5.264-2.603a2.381 2.381 0 00-3.368 0l-.633.633a.5.5 0 000 .707L17.962 8.7a.5.5 0 00.707 0l.633-.634c.93-.93.93-2.438 0-3.368z"

package/dist/es/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { Body, Footer, FooterConfirmation, ModalMessage } from './components';
+import { Body, Footer, FooterConfirmation, ModalMessage, Flyout } from './components';
 import type { DialogOverlayProps } from '@reach/dialog';
 import React, { Component } from 'react';
 export declare type ModalProps = {
@@ -12,6 +12,7 @@ export declare type ModalProps = {
     onHide?: () => void;
     show: boolean;
     size: string;
+    flyout?: React.ReactNode;
 } & DialogOverlayProps;
 declare type ModalState = {
     pageInstrumentation: string;
@@ -73,6 +74,7 @@ export declare class Modal extends Component<ModalProps, ModalState> {
     };
     static Header: ({ closeTitle, id, title, subtitle, dynamite, destructive, onHide, disableCancel, children, ...props }: import("./types").HeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     static Message: typeof ModalMessage;
+    static Flyout: typeof Flyout;
     state: ModalState;
     setPageInstrumentation: (page: string) => void;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/es/Modal/Modal.js

@@ -15,7 +15,7 @@ var _context = require("./context");
 
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
-var _excluded = ["aria-label", "dismissOnOverlayClick", "flex", "onHide", "show", "size", "children", "dialogIdentifier", "data-instrumentation"];
+var _excluded = ["aria-label", "dismissOnOverlayClick", "flex", "onHide", "show", "size", "children", "flyout", "dialogIdentifier", "data-instrumentation"];
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -97,6 +97,7 @@ var Modal = /*#__PURE__*/function (_Component) {
           show = _this$props.show,
           size = _this$props.size,
           children = _this$props.children,
+          flyout = _this$props.flyout,
           dialogIdentifier = _this$props.dialogIdentifier,
           dataInstrumentation = _this$props['data-instrumentation'],
           props = _objectWithoutProperties(_this$props, _excluded);
@@ -115,15 +116,15 @@ var Modal = /*#__PURE__*/function (_Component) {
           onHide: onHide,
           show: show
         }, props), {}, {
-          children: (0, _jsxRuntime.jsx)(_components.ModalDialog, {
-            "data-gs-c": gsC(children),
+          children: (0, _jsxRuntime.jsxs)(_components.ModalDialog, {
             "data-gs": gs("src", "modal", "modal.tsx", "modalcontext-provider", "modal-overlay", "modal-dialog"),
             "aria-label": ariaLabel,
             size: size,
             "data-dialog-id": dialogIdentifier,
             "data-instrumentation": instrumentation,
             flex: flex,
-            children: children
+            flyout: flyout,
+            children: [children, flyout]
           })
         }))
       });
@@ -163,5 +164,7 @@ _defineProperty(Modal, "Header", _components.Header);
 
 _defineProperty(Modal, "Message", _components.ModalMessage);
 
+_defineProperty(Modal, "Flyout", _components.Flyout);
+
 var _default = Modal;
 exports["default"] = _default;

package/dist/es/Modal/components/Flyout.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare type ModalFlyoutProps = {
+    children: ReactNode;
+};
+export default function ModalFlyout({ children }: ModalFlyoutProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Flyout.d.ts.map

package/dist/es/Modal/components/Flyout.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+exports["default"] = ModalFlyout;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _constants = require("../constants");
+
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+
+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 () {};
+var Container = ( /*#__PURE__*/0, _base["default"])('div', process.env.NODE_ENV === "production" ? {
+  target: "e130n3ri0"
+} : {
+  target: "e130n3ri0",
+  label: "Container"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    position: 'absolute',
+    right: -_constants.FLYOUT_WIDTH,
+    top: theme.space[5],
+    bottom: theme.space[5],
+    width: _constants.FLYOUT_WIDTH,
+    padding: theme.space[4],
+    overflow: 'hidden',
+    boxShadow: theme.shadows.flyout,
+    backgroundColor: theme.palette.neutral[2],
+    borderTopRightRadius: theme.radius[2],
+    borderBottomRightRadius: theme.radius[2]
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9Nb2RhbC9jb21wb25lbnRzL0ZseW91dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXlCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9Nb2RhbC9jb21wb25lbnRzL0ZseW91dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBGTFlPVVRfV0lEVEggfSBmcm9tICcuLi9jb25zdGFudHMnXG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2RpdicpKCh7IHRoZW1lIH0pID0+ICh7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICByaWdodDogLUZMWU9VVF9XSURUSCxcbiAgdG9wOiB0aGVtZS5zcGFjZVs1XSxcbiAgYm90dG9tOiB0aGVtZS5zcGFjZVs1XSxcbiAgd2lkdGg6IEZMWU9VVF9XSURUSCxcbiAgcGFkZGluZzogdGhlbWUuc3BhY2VbNF0sXG4gIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgYm94U2hhZG93OiB0aGVtZS5zaGFkb3dzLmZseW91dCxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLm5ldXRyYWxbMl0sXG4gIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiB0aGVtZS5yYWRpdXNbMl0sXG4gIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiB0aGVtZS5yYWRpdXNbMl1cbn0pKVxuXG50eXBlIE1vZGFsRmx5b3V0UHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIE1vZGFsRmx5b3V0KHsgY2hpbGRyZW4gfTogTW9kYWxGbHlvdXRQcm9wcykge1xuICByZXR1cm4gPENvbnRhaW5lcj57Y2hpbGRyZW59PC9Db250YWluZXI+XG59XG4iXX0= */");
+exports.Container = Container;
+
+function ModalFlyout(_ref2) {
+  var children = _ref2.children;
+  return (0, _jsxRuntime.jsx)(Container, {
+    "data-gs-c": gsC(children),
+    "data-gs": gs("src", "modal", "components", "modal-flyout", "container"),
+    children: children
+  });
+}

package/dist/es/Modal/components/elements.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
 import type { BoxProps } from '../../Box';
 import type { HeaderProps } from '../types';
+import type React from 'react';
 export declare const FooterContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & BoxProps & Partial<import("../../mixins").Border & import("../../mixins").Spacing> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
+    as?: React.ElementType<any> | undefined;
+} & BoxProps & Partial<import("../../mixins").Border & import("../../mixins").Spacing> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
@@ -13,14 +13,14 @@ export declare const FooterContainer: import("@emotion/styled").StyledComponent<
 }, {}, {}>;
 export declare const Spacer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ConfirmationLabel: import("@emotion/styled").StyledComponent<any, {}, {}>;
 export declare const HeaderContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("../../Grid/Grid").GridProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
+    as?: React.ElementType<any> | undefined;
+} & import("../../Grid/Grid").GridProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & HeaderProps, {}, {}>;
@@ -32,44 +32,45 @@ export declare const ModalTitle: import("@emotion/styled").StyledComponent<impor
 export declare const ModalSubtitle: import("@emotion/styled").StyledComponent<any, {}, {}>;
 export declare const CloseIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: React.ElementType<any> | undefined;
 } & {
     destructive?: boolean | undefined;
     dynamite?: boolean | undefined;
     disabled: boolean;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 export declare const ModalBody: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: React.ElementType<any> | undefined;
 } & {
     noPadding?: boolean | undefined;
     height?: number | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ModalDialog: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     size: any;
     flex: boolean;
+    flyout?: React.ReactNode;
 }, {}, {}>;
 export declare const ModalBackdrop: import("@emotion/styled").StyledComponent<{
     allowPinchZoom?: boolean | undefined;
-    children?: import("react").ReactNode;
-    initialFocusRef?: import("react").RefObject<any> | undefined;
+    children?: React.ReactNode;
+    initialFocusRef?: React.RefObject<any> | undefined;
     isOpen?: boolean | undefined;
-    onDismiss?: ((event?: import("react").SyntheticEvent<Element, Event> | undefined) => void) | undefined;
+    onDismiss?: ((event?: React.SyntheticEvent<Element, Event> | undefined) => void) | undefined;
     unstable_lockFocusAcrossFrames?: boolean | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement> & {
+} & React.HTMLAttributes<HTMLDivElement> & {
     dangerouslyBypassFocusLock?: boolean | undefined;
     dangerouslyBypassScrollLock?: boolean | undefined;
-} & import("react").RefAttributes<HTMLDivElement> & {
+} & React.RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     backdrop?: boolean | undefined;
     flex?: boolean | undefined;
 }, {}, {}>;
-export declare const SecondaryActionButton: import("@emotion/styled").StyledComponent<Partial<import("../../Button").UnstyledButtonProps> & import("react").RefAttributes<import("../../Button").UnstyledButton> & {
+export declare const SecondaryActionButton: import("@emotion/styled").StyledComponent<Partial<import("../../Button").UnstyledButtonProps> & React.RefAttributes<import("../../Button").UnstyledButton> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 //# sourceMappingURL=elements.d.ts.map