td-stylekit 27.3.1 → 28.0.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [28.0.0](https://github.com/treasure-data/td-stylekit/compare/v27.3.1...v28.0.0) (2022-09-27)
+
+
+### Bug Fixes
+
+* Don't expose Theme type externally ([#1337](https://github.com/treasure-data/td-stylekit/issues/1337)) ([65d64c0](https://github.com/treasure-data/td-stylekit/commit/65d64c0))
+
+
+### BREAKING CHANGES
+
+* getLongestOptionLength no longer accepts Theme. Instead it accepts a style object with fontFamily as the only valid property.
+
 ## [27.3.1](https://github.com/treasure-data/td-stylekit/compare/v27.3.0...v27.3.1) (2022-09-26)
 
 

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

@@ -2,7 +2,10 @@ import type { StylesConfig } from 'react-select';
 import type { Theme } from '../ThemeProvider';
 import type { Options, OptionValue } from './components';
 import type { SelectComponentStyles } from './types';
-export declare function getLongestOptionLength(options: Options, theme: Theme, originalWidth?: number | string): string | number | undefined;
+declare type TextWidthStyles = {
+    fontFamily: string;
+};
+export declare function getLongestOptionLength(options: Options, styles: TextWidthStyles, originalWidth?: number | string): string | number | undefined;
 declare type GetCustomStylesProps = {
     dataGrid?: boolean;
     guessMenuWidth?: boolean;

package/dist/es/Select/utils.js

@@ -42,8 +42,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
 
-function getTextWidth(inputText, theme) {
-  var font = "".concat(_elements.FONT_SIZE, "px ").concat(theme.fontFamily.body);
+function getTextWidth(inputText, styles) {
+  var font = "".concat(_elements.FONT_SIZE, "px ").concat(styles.fontFamily);
   var canvas = document.createElement('canvas');
   var context = canvas.getContext('2d');
 
@@ -70,7 +70,7 @@ function byteLength(str) {
   return s;
 }
 
-function getLongestOptionLength(options, theme, originalWidth) {
+function getLongestOptionLength(options, styles, originalWidth) {
   var maxObj = options.reduce(function (max, option, index) {
     var currSize = byteLength(option && option.label || '');
 
@@ -93,9 +93,9 @@ function getLongestOptionLength(options, theme, originalWidth) {
     var _option = options[maxObj.index];
 
     if (_typeof(_option) === 'object') {
-      return getTextWidth(_option.label, theme);
+      return getTextWidth(_option.label, styles);
     } else {
-      return getTextWidth(_option, theme);
+      return getTextWidth(String(_option), styles);
     }
   }
 }
@@ -177,7 +177,9 @@ function getMultiClearIndicatorStyle() {
 
 function getFixedWidthMenuStyle(theme, options, originalWidth) {
   return {
-    width: "".concat(getLongestOptionLength(options, theme, originalWidth), "px")
+    width: "".concat(getLongestOptionLength(options, {
+      fontFamily: theme.fontFamily.body
+    }, originalWidth), "px")
   };
 }
 

package/package.json

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