td-stylekit 26.24.2 → 27.0.0

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

@@ -24,4 +24,7 @@ export declare type sortRendererArguments = {
     sortDirection?: keyof typeof SortDirection;
     localeStrings?: LocaleStrings;
 };
+export declare type InternalResizeHandler = (arg0: {
+    x: number;
+}) => void;
 //# sourceMappingURL=types.d.ts.map

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

@@ -4,7 +4,12 @@ export declare function createCollapsedRowList({ list, dataMap, groupBy, expande
     groupBy: any;
     expandedRows: any;
 }): any;
-export declare const FILTER_OPERATOR_LOGIC: any;
+export declare const FILTER_OPERATOR_LOGIC: {
+    [x: string]: ({ value, filter }: {
+        value: any;
+        filter: any;
+    }) => any;
+};
 export declare function filterWithOperator({ operator, value, filter }: {
     operator: any;
     value: any;

package/dist/es/DistributionChart/utils.d.ts

@@ -1,3 +1,3 @@
 /** Approximate calculation for the height of DistributionChart */
-export declare const calculateChartHeight: (dataLength: number, horizontal?: boolean | undefined) => number;
+export declare const calculateChartHeight: (dataLength: number, horizontal?: boolean) => number;
 //# sourceMappingURL=utils.d.ts.map

package/dist/es/Drawer/Drawer.d.ts

@@ -7,8 +7,10 @@ export declare type DrawerProps = {
     children?: React.ReactNode;
     hiddenToggleLabel?: CollapsibleToggleProps['hiddenLabel'];
     isClosed?: boolean;
+    topToggle?: boolean;
     onToggleClick?: CollapsibleToggleProps['onClick'];
     css?: Interpolation<Theme>;
+    openRight?: boolean;
 };
 export declare type DrawerSubComponents = {
     Body: typeof DrawerBody;

package/dist/es/Drawer/Drawer.js

@@ -11,7 +11,7 @@ var _CollapsibleToggle = _interopRequireDefault(require("../CollapsibleToggle"))
 
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
-var _excluded = ["anchor", "children", "isClosed", "hiddenToggleLabel", "onToggleClick"];
+var _excluded = ["anchor", "children", "isClosed", "hiddenToggleLabel", "onToggleClick", "topToggle", "openRight"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -35,6 +35,8 @@ var Drawer = function Drawer(_ref) {
       isClosed = _ref.isClosed,
       hiddenToggleLabel = _ref.hiddenToggleLabel,
       onToggleClick = _ref.onToggleClick,
+      topToggle = _ref.topToggle,
+      openRight = _ref.openRight,
       props = _objectWithoutProperties(_ref, _excluded);
 
   function onClick(e) {
@@ -58,7 +60,9 @@ var Drawer = function Drawer(_ref) {
       id: "DRAWER_TOGGLE",
       hiddenLabel: toggleLabel,
       isClosed: isClosed,
-      onClick: onClick
+      onClick: onClick,
+      topToggle: topToggle,
+      openRight: openRight
     })]
   }));
 };

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

@@ -43,16 +43,20 @@ export declare const LabelWrapper: import("@emotion/styled").StyledComponent<{
     size?: "small" | "medium" | "large" | "xlarge" | undefined;
     labelWidth?: string | number | undefined;
 }, {}, {}>;
-export declare const HintIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+export declare const HintIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
-export declare const WarningIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+}), {}, {}>;
+export declare const WarningIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
+}), {}, {}>;
 export declare const StyledPopover: import("@emotion/styled").StyledComponent<import("../Popover").PopoverProps & {
     children?: import("react").ReactNode;
 } & {

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

@@ -11,26 +11,34 @@ export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ErrorIcon: import("@emotion/styled").StyledComponent<((React.SVGProps<SVGSVGElement> | (React.SVGProps<SVGSVGElement> & {
+export declare const ErrorIcon: import("@emotion/styled").StyledComponent<(React.SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (React.SVGProps<SVGSVGElement> & {
     children?: React.ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
-export declare const WarningIcon: import("@emotion/styled").StyledComponent<((React.SVGProps<SVGSVGElement> | (React.SVGProps<SVGSVGElement> & {
+}), {}, {}>;
+export declare const WarningIcon: import("@emotion/styled").StyledComponent<(React.SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (React.SVGProps<SVGSVGElement> & {
     children?: React.ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
-export declare const DefaultIcon: import("@emotion/styled").StyledComponent<((React.SVGProps<SVGSVGElement> | (React.SVGProps<SVGSVGElement> & {
+}), {}, {}>;
+export declare const DefaultIcon: import("@emotion/styled").StyledComponent<(React.SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (React.SVGProps<SVGSVGElement> & {
     children?: React.ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
-export declare const SuccessIcon: import("@emotion/styled").StyledComponent<((React.SVGProps<SVGSVGElement> | (React.SVGProps<SVGSVGElement> & {
+}), {}, {}>;
+export declare const SuccessIcon: import("@emotion/styled").StyledComponent<(React.SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (React.SVGProps<SVGSVGElement> & {
     children?: React.ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
+}), {}, {}>;
 export declare const ModalMessageContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;

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

@@ -18,11 +18,13 @@ export declare const Counter: import("@emotion/styled").StyledComponent<any, imp
 export declare const SelectSpacer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SelectDivider: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SearchInputWrapper: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SearchIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+export declare const SearchIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
+}), {}, {}>;
 export declare const ClearButton: import("@emotion/styled").StyledComponent<any, {}, {}>;
 export declare const SearchInputStyled: import("@emotion/styled").StyledComponent<any, {}, {
     ref?: import("react").Ref<Input<"number" | ("textarea" | "text" | "url" | "email" | "datetime-local" | "password")>> | undefined;

package/dist/es/Overlay/OverlayHeader.d.ts

@@ -12,11 +12,13 @@ export declare const OverlayHeaderContent: import("@emotion/styled").StyledCompo
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const CloseIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+export declare const CloseIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
+}), {}, {}>;
 export declare const CloseButton: import("@emotion/styled").StyledComponent<Partial<UnstyledButtonProps> & {
     children?: import("react").ReactNode;
 } & {

package/dist/es/PieChart/PieChart.js

@@ -72,11 +72,9 @@ function PieChart(_ref) {
       chartColor = _ref.chartColor,
       _ref$numFormat = _ref.numFormat,
       numFormat = _ref$numFormat === void 0 ? function (x) {
-    return (// @ts-expect-error
-      new Intl.NumberFormat(undefined, {
-        notation: 'compact'
-      }).format(x)
-    );
+    return new Intl.NumberFormat(undefined, {
+      notation: 'compact'
+    }).format(x);
   } : _ref$numFormat;
   width = Math.max(width, 1);
   height = Math.max(height, 1);

package/dist/es/ThemeProvider/v4/DataGrid.d.ts

@@ -7,9 +7,15 @@ declare const _default: {
         theme: any;
     }) => {
         paddingLeft: any;
-    }) | (() => {
+    }) | (() => ((({ indent, theme }: {
+        indent: any;
+        theme: any;
+    }) => any) | (({ isFirst, theme }: {
+        isFirst: any;
+        theme: any;
+    }) => any) | {
         borderRightColor: string;
-    }) | (({ theme }: {
+    })[]) | (({ theme }: {
         theme: any;
     }) => {
         color: any;
@@ -48,7 +54,6 @@ declare const _default: {
             backgroundColor: any;
             color: any;
         };
-        paddingLeft: string;
         '& svg': {
             pointerEvents: string;
         };

package/dist/es/ThemeProvider/v4/DataGrid.js

@@ -51,35 +51,48 @@ var _default = (_Root$CategoryInput$C = {}, _defineProperty(_Root$CategoryInput$
     paddingLeft: theme.space[0]
   };
 }), _defineProperty(_Root$CategoryInput$C, Cell, function () {
-  return {
+  return [{
     borderRightColor: 'inherit'
-  };
-}), _defineProperty(_Root$CategoryInput$C, CollapsibleIcon, function (_ref4) {
-  var theme = _ref4.theme;
+  }, function (_ref4) {
+    var indent = _ref4.indent,
+        theme = _ref4.theme;
+    return indent && {
+      paddingLeft: theme.space[8]
+    };
+  }, function (_ref5) {
+    var isFirst = _ref5.isFirst,
+        theme = _ref5.theme;
+    return isFirst && {
+      paddingLeft: theme.space[2]
+    };
+  }];
+}), _defineProperty(_Root$CategoryInput$C, CollapsibleIcon, function (_ref6) {
+  var theme = _ref6.theme;
   return {
     color: theme.color.Mondo
   };
-}), _defineProperty(_Root$CategoryInput$C, ColumnHeaderPopover, function (_ref5) {
-  var theme = _ref5.theme;
+}), _defineProperty(_Root$CategoryInput$C, ColumnHeaderPopover, function (_ref7) {
+  var theme = _ref7.theme;
   return {
     border: "1px solid ".concat(theme.color.LightDivider),
     borderRadius: 'inherit'
   };
-}), _defineProperty(_Root$CategoryInput$C, ColumnHeaderActionsContainer, function (_ref6) {
-  var theme = _ref6.theme;
+}), _defineProperty(_Root$CategoryInput$C, ColumnHeaderActionsContainer, function (_ref8) {
+  var theme = _ref8.theme;
   return {
     padding: theme.space[3]
   };
-}), _defineProperty(_Root$CategoryInput$C, ColumnHeaderContainer, function (_ref7) {
-  var theme = _ref7.theme,
-      active = _ref7.active;
+}), _defineProperty(_Root$CategoryInput$C, ColumnHeaderContainer, function (_ref9) {
+  var theme = _ref9.theme,
+      active = _ref9.active;
   return {
     color: active ? theme.color.CuriousBlue : theme.color.Flint,
     backgroundColor: theme.color.Solitude,
-    borderRight: "1px solid ".concat(theme.color[borderColor])
+    borderRight: "1px solid ".concat(theme.color[borderColor]),
+    paddingLeft: theme.space[2]
   };
-}), _defineProperty(_Root$CategoryInput$C, ColumnHeaderIcon, function (_ref8) {
-  var theme = _ref8.theme;
+}), _defineProperty(_Root$CategoryInput$C, ColumnHeaderIcon, function (_ref10) {
+  var theme = _ref10.theme;
   return {
     // important to override component selector used for v5
     color: "".concat(theme.color.CuriousBlue, " !important")
@@ -88,32 +101,32 @@ var _default = (_Root$CategoryInput$C = {}, _defineProperty(_Root$CategoryInput$
   return {
     fontWeight: 700
   };
-}), _defineProperty(_Root$CategoryInput$C, FilterButtons, function (_ref9) {
-  var theme = _ref9.theme;
+}), _defineProperty(_Root$CategoryInput$C, FilterButtons, function (_ref11) {
+  var theme = _ref11.theme;
   return {
     justifyContent: 'inherit',
     marginTop: theme.space[3]
   };
-}), _defineProperty(_Root$CategoryInput$C, FilterHeader, function (_ref10) {
-  var theme = _ref10.theme;
+}), _defineProperty(_Root$CategoryInput$C, FilterHeader, function (_ref12) {
+  var theme = _ref12.theme;
   return {
     color: theme.color.LightPrimary,
     marginBottom: theme.space[1],
     textTransform: 'uppercase'
   };
-}), _defineProperty(_Root$CategoryInput$C, FilterSeparator, function (_ref11) {
-  var theme = _ref11.theme;
+}), _defineProperty(_Root$CategoryInput$C, FilterSeparator, function (_ref13) {
+  var theme = _ref13.theme;
   return {
     borderTop: "1px solid ".concat(theme.color.BorderGrey)
   };
-}), _defineProperty(_Root$CategoryInput$C, RightFilterButton, function (_ref12) {
-  var theme = _ref12.theme;
+}), _defineProperty(_Root$CategoryInput$C, RightFilterButton, function (_ref14) {
+  var theme = _ref14.theme;
   return {
     marginLeft: theme.space[3]
   };
-}), _defineProperty(_Root$CategoryInput$C, Row, [function (_ref13) {
-  var theme = _ref13.theme,
-      zebra = _ref13.zebra;
+}), _defineProperty(_Root$CategoryInput$C, Row, [function (_ref15) {
+  var theme = _ref15.theme,
+      zebra = _ref15.zebra;
   return {
     backgroundColor: zebra ? theme.color.Solitude : theme.color.LightBackground,
     borderBottom: '1px solid',
@@ -127,14 +140,13 @@ var _default = (_Root$CategoryInput$C = {}, _defineProperty(_Root$CategoryInput$
       backgroundColor: zebra ? theme.color.Solitude : theme.color.LightBackground,
       color: theme.color.Mondo
     },
-    paddingLeft: 'unset',
     '& svg': {
       pointerEvents: 'unset'
     }
   };
-}, function (_ref14) {
-  var theme = _ref14.theme,
-      selected = _ref14.selected;
+}, function (_ref16) {
+  var theme = _ref16.theme,
+      selected = _ref16.selected;
   return selected && {
     color: theme.color.PrimaryContrast,
     backgroundColor: theme.color.CuriousBlue,
@@ -145,15 +157,15 @@ var _default = (_Root$CategoryInput$C = {}, _defineProperty(_Root$CategoryInput$
       backgroundColor: theme.color.CuriousBlue
     }
   };
-}, function (_ref15) {
-  var selecting = _ref15.selecting;
+}, function (_ref17) {
+  var selecting = _ref17.selecting;
   return selecting && {
     // prevent text from getting selected when using shift +
     // click to select multiple rows
     userSelect: 'none'
   };
-}]), _defineProperty(_Root$CategoryInput$C, SortButton, function (_ref16) {
-  var theme = _ref16.theme;
+}]), _defineProperty(_Root$CategoryInput$C, SortButton, function (_ref18) {
+  var theme = _ref18.theme;
   return {
     backgroundColor: 'transparent',
     borderRadius: 'none',
@@ -165,8 +177,8 @@ var _default = (_Root$CategoryInput$C = {}, _defineProperty(_Root$CategoryInput$
       color: theme.color.CuriousBlue
     }
   };
-}), _defineProperty(_Root$CategoryInput$C, TableContainer, function (_ref17) {
-  var theme = _ref17.theme;
+}), _defineProperty(_Root$CategoryInput$C, TableContainer, function (_ref19) {
+  var theme = _ref19.theme;
   return {
     border: "1px solid ".concat(theme.color[borderColor])
   };

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

@@ -12,34 +12,44 @@ export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ErrorIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+export declare const ErrorIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}), {}, {}>;
+export declare const WarningIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
-export declare const WarningIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}), {}, {}>;
+export declare const DefaultIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
-export declare const DefaultIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}), {}, {}>;
+export declare const SuccessIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
-export declare const SuccessIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
+}), {}, {}>;
 export declare const ToastContent: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ToastText: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ToastTitle: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ToastExitDivider: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ToastExitIconWrapper: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const ToastExitIcon: import("@emotion/styled").StyledComponent<((import("react").SVGProps<SVGSVGElement> | (import("react").SVGProps<SVGSVGElement> & {
+export declare const ToastExitIcon: import("@emotion/styled").StyledComponent<(import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) | (import("react").SVGProps<SVGSVGElement> & {
     children?: import("react").ReactNode;
-})) & {
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-}) & {}, {}, {}>;
+}), {}, {}>;
 //# sourceMappingURL=elements.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "td-stylekit",
-  "version": "26.24.2",
+  "version": "27.0.0",
   "main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",
@@ -49,6 +49,7 @@
     "@reach/dialog": "^0.11.2",
     "@reach/tabs": "^0.10.5",
     "@tippyjs/react": "^4.2.6",
+    "@use-gesture/react": "^10.2.19",
     "classnames": "^2.2.6",
     "color": "^3.1.2",
     "date-fns": "2.23.0",
@@ -210,9 +211,9 @@
     "svg-inline-loader": "^0.8.0",
     "svg-to-jsx": "^1.0.2",
     "svgo": "^1.3.0",
-    "ts-node": "^10.2.1",
+    "ts-node": "^10.9.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.6.2",
+    "typescript": "^4.8.2",
     "webpack": "^4.44.2"
   },
   "peerDependencies": {