@elastic/eui 97.1.0 → 97.2.0

package/es/components/datagrid/utils/col_widths.js

@@ -57,27 +57,21 @@ export var useColumnWidths = function useColumnWidths(_ref) {
     trailingControlColumns = _ref.trailingControlColumns,
     defaultColumnWidth = _ref.defaultColumnWidth,
     onColumnResize = _ref.onColumnResize;
-  var getInitialWidths = useCallback(function (prevColumnWidths) {
-    var columnWidths = _objectSpread({}, prevColumnWidths);
-    columns.filter(doesColumnHaveAnInitialWidth).forEach(function (_ref2) {
-      var id = _ref2.id,
-        initialWidth = _ref2.initialWidth;
-      if (columnWidths[id] == null) {
-        columnWidths[id] = initialWidth;
-      }
-    });
-    return columnWidths;
+  var computeColumnWidths = useCallback(function () {
+    return columns.filter(doesColumnHaveAnInitialWidth).reduce(function (initialWidths, column) {
+      return _objectSpread(_objectSpread({}, initialWidths), {}, _defineProperty({}, column.id, column.initialWidth));
+    }, {});
   }, [columns]);
 
   // Passes initializer function for performance, so computing only runs once on init
   // @see https://react.dev/reference/react/useState#examples-initializer
-  var _useState = useState(getInitialWidths),
+  var _useState = useState(computeColumnWidths),
     _useState2 = _slicedToArray(_useState, 2),
     columnWidths = _useState2[0],
     setColumnWidths = _useState2[1];
   useUpdateEffect(function () {
-    setColumnWidths(getInitialWidths);
-  }, [columns]);
+    setColumnWidths(computeColumnWidths());
+  }, [computeColumnWidths]);
   var setColumnWidth = useCallback(function (columnId, width) {
     setColumnWidths(function (prevColumnWidths) {
       return _objectSpread(_objectSpread({}, prevColumnWidths), {}, _defineProperty({}, columnId, width));

package/es/components/header/header_links/header_links.js

@@ -28,7 +28,7 @@ import { EuiHeaderSectionItemButton } from '../header_section';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
 import { euiHeaderLinksStyles } from './header_links.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var GUTTER_SIZES = ['xs', 's', 'm', 'l'];
+export var GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'];
 export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/es/components/header/header_links/header_links.styles.js

@@ -31,6 +31,7 @@ export var euiHeaderLinksStyles = function euiHeaderLinksStyles(_ref3) {
     euiHeaderLinks: _ref2,
     euiHeaderLinks__list: _ref,
     gutterSizes: {
+      xxs: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:xxs;"),
       xs: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:xs;"),
       s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
       m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),

package/eui.d.ts

@@ -19030,6 +19030,7 @@ declare module '@elastic/eui/src/components/header/header_links/header_links.sty
 	    euiHeaderLinks: import("@emotion/utils").SerializedStyles;
 	    euiHeaderLinks__list: import("@emotion/utils").SerializedStyles;
 	    gutterSizes: {
+	        xxs: import("@emotion/utils").SerializedStyles;
 	        xs: import("@emotion/utils").SerializedStyles;
 	        s: import("@emotion/utils").SerializedStyles;
 	        m: import("@emotion/utils").SerializedStyles;
@@ -19046,7 +19047,7 @@ declare module '@elastic/eui/src/components/header/header_links/header_links' {
 	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
 	import { EuiHeaderSectionItemButtonProps } from '@elastic/eui/src/components/header/header_section';
 	import { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
-	export const GUTTER_SIZES: readonly ["xs", "s", "m", "l"]; type EuiHeaderLinksGutterSize = (typeof GUTTER_SIZES)[number]; type EuiHeaderLinksPopoverButtonProps = Partial<EuiHeaderSectionItemButtonProps> & {
+	export const GUTTER_SIZES: readonly ["xxs", "xs", "s", "m", "l"]; type EuiHeaderLinksGutterSize = (typeof GUTTER_SIZES)[number]; type EuiHeaderLinksPopoverButtonProps = Partial<EuiHeaderSectionItemButtonProps> & {
 	    iconType?: IconType;
 	};
 	export type EuiHeaderLinksProps = CommonProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {

package/i18ntokens.json

@@ -5119,12 +5119,12 @@
       "start": {
         "line": 114,
         "column": 4,
-        "index": 3416
+        "index": 3423
       },
       "end": {
         "line": 114,
         "column": 75,
-        "index": 3487
+        "index": 3494
       }
     },
     "filepath": "src/components/header/header_links/header_links.tsx"
@@ -5137,12 +5137,12 @@
       "start": {
         "line": 131,
         "column": 4,
-        "index": 3915
+        "index": 3922
       },
       "end": {
         "line": 131,
         "column": 69,
-        "index": 3980
+        "index": 3987
       }
     },
     "filepath": "src/components/header/header_links/header_links.tsx"

package/lib/components/datagrid/utils/col_widths.js

@@ -61,27 +61,21 @@ var useColumnWidths = exports.useColumnWidths = function useColumnWidths(_ref) {
     trailingControlColumns = _ref.trailingControlColumns,
     defaultColumnWidth = _ref.defaultColumnWidth,
     onColumnResize = _ref.onColumnResize;
-  var getInitialWidths = (0, _react.useCallback)(function (prevColumnWidths) {
-    var columnWidths = _objectSpread({}, prevColumnWidths);
-    columns.filter(doesColumnHaveAnInitialWidth).forEach(function (_ref2) {
-      var id = _ref2.id,
-        initialWidth = _ref2.initialWidth;
-      if (columnWidths[id] == null) {
-        columnWidths[id] = initialWidth;
-      }
-    });
-    return columnWidths;
+  var computeColumnWidths = (0, _react.useCallback)(function () {
+    return columns.filter(doesColumnHaveAnInitialWidth).reduce(function (initialWidths, column) {
+      return _objectSpread(_objectSpread({}, initialWidths), {}, _defineProperty({}, column.id, column.initialWidth));
+    }, {});
   }, [columns]);
 
   // Passes initializer function for performance, so computing only runs once on init
   // @see https://react.dev/reference/react/useState#examples-initializer
-  var _useState = (0, _react.useState)(getInitialWidths),
+  var _useState = (0, _react.useState)(computeColumnWidths),
     _useState2 = _slicedToArray(_useState, 2),
     columnWidths = _useState2[0],
     setColumnWidths = _useState2[1];
   (0, _services.useUpdateEffect)(function () {
-    setColumnWidths(getInitialWidths);
-  }, [columns]);
+    setColumnWidths(computeColumnWidths());
+  }, [computeColumnWidths]);
   var setColumnWidth = (0, _react.useCallback)(function (columnId, width) {
     setColumnWidths(function (prevColumnWidths) {
       return _objectSpread(_objectSpread({}, prevColumnWidths), {}, _defineProperty({}, columnId, width));

package/lib/components/header/header_links/header_links.js

@@ -37,7 +37,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-var GUTTER_SIZES = exports.GUTTER_SIZES = ['xs', 's', 'm', 'l'];
+var GUTTER_SIZES = exports.GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'];
 var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/lib/components/header/header_links/header_links.styles.js

@@ -35,6 +35,7 @@ var euiHeaderLinksStyles = exports.euiHeaderLinksStyles = function euiHeaderLink
     euiHeaderLinks: _ref2,
     euiHeaderLinks__list: _ref,
     gutterSizes: {
+      xxs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:xxs;"),
       xs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.s, ";;label:xs;"),
       s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),
       m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),

package/optimize/es/components/datagrid/utils/col_widths.js

@@ -46,27 +46,21 @@ export var useColumnWidths = function useColumnWidths(_ref) {
     trailingControlColumns = _ref.trailingControlColumns,
     defaultColumnWidth = _ref.defaultColumnWidth,
     onColumnResize = _ref.onColumnResize;
-  var getInitialWidths = useCallback(function (prevColumnWidths) {
-    var columnWidths = _objectSpread({}, prevColumnWidths);
-    columns.filter(doesColumnHaveAnInitialWidth).forEach(function (_ref2) {
-      var id = _ref2.id,
-        initialWidth = _ref2.initialWidth;
-      if (columnWidths[id] == null) {
-        columnWidths[id] = initialWidth;
-      }
-    });
-    return columnWidths;
+  var computeColumnWidths = useCallback(function () {
+    return columns.filter(doesColumnHaveAnInitialWidth).reduce(function (initialWidths, column) {
+      return _objectSpread(_objectSpread({}, initialWidths), {}, _defineProperty({}, column.id, column.initialWidth));
+    }, {});
   }, [columns]);
 
   // Passes initializer function for performance, so computing only runs once on init
   // @see https://react.dev/reference/react/useState#examples-initializer
-  var _useState = useState(getInitialWidths),
+  var _useState = useState(computeColumnWidths),
     _useState2 = _slicedToArray(_useState, 2),
     columnWidths = _useState2[0],
     setColumnWidths = _useState2[1];
   useUpdateEffect(function () {
-    setColumnWidths(getInitialWidths);
-  }, [columns]);
+    setColumnWidths(computeColumnWidths());
+  }, [computeColumnWidths]);
   var setColumnWidth = useCallback(function (columnId, width) {
     setColumnWidths(function (prevColumnWidths) {
       return _objectSpread(_objectSpread({}, prevColumnWidths), {}, _defineProperty({}, columnId, width));

package/optimize/es/components/header/header_links/header_links.js

@@ -21,7 +21,7 @@ import { EuiHeaderSectionItemButton } from '../header_section';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
 import { euiHeaderLinksStyles } from './header_links.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var GUTTER_SIZES = ['xs', 's', 'm', 'l'];
+export var GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'];
 export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/optimize/es/components/header/header_links/header_links.styles.js

@@ -31,6 +31,7 @@ export var euiHeaderLinksStyles = function euiHeaderLinksStyles(_ref3) {
     euiHeaderLinks: _ref2,
     euiHeaderLinks__list: _ref,
     gutterSizes: {
+      xxs: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:xxs;"),
       xs: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:xs;"),
       s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
       m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),

package/optimize/lib/components/datagrid/utils/col_widths.js

@@ -51,27 +51,21 @@ var useColumnWidths = exports.useColumnWidths = function useColumnWidths(_ref) {
     trailingControlColumns = _ref.trailingControlColumns,
     defaultColumnWidth = _ref.defaultColumnWidth,
     onColumnResize = _ref.onColumnResize;
-  var getInitialWidths = (0, _react.useCallback)(function (prevColumnWidths) {
-    var columnWidths = _objectSpread({}, prevColumnWidths);
-    columns.filter(doesColumnHaveAnInitialWidth).forEach(function (_ref2) {
-      var id = _ref2.id,
-        initialWidth = _ref2.initialWidth;
-      if (columnWidths[id] == null) {
-        columnWidths[id] = initialWidth;
-      }
-    });
-    return columnWidths;
+  var computeColumnWidths = (0, _react.useCallback)(function () {
+    return columns.filter(doesColumnHaveAnInitialWidth).reduce(function (initialWidths, column) {
+      return _objectSpread(_objectSpread({}, initialWidths), {}, (0, _defineProperty2.default)({}, column.id, column.initialWidth));
+    }, {});
   }, [columns]);
 
   // Passes initializer function for performance, so computing only runs once on init
   // @see https://react.dev/reference/react/useState#examples-initializer
-  var _useState = (0, _react.useState)(getInitialWidths),
+  var _useState = (0, _react.useState)(computeColumnWidths),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     columnWidths = _useState2[0],
     setColumnWidths = _useState2[1];
   (0, _services.useUpdateEffect)(function () {
-    setColumnWidths(getInitialWidths);
-  }, [columns]);
+    setColumnWidths(computeColumnWidths());
+  }, [computeColumnWidths]);
   var setColumnWidth = (0, _react.useCallback)(function (columnId, width) {
     setColumnWidths(function (prevColumnWidths) {
       return _objectSpread(_objectSpread({}, prevColumnWidths), {}, (0, _defineProperty2.default)({}, columnId, width));

package/optimize/lib/components/header/header_links/header_links.js

@@ -30,7 +30,7 @@ var _excluded = ["children", "className", "gutterSize", "popoverBreakpoints", "p
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var GUTTER_SIZES = exports.GUTTER_SIZES = ['xs', 's', 'm', 'l'];
+var GUTTER_SIZES = exports.GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'];
 var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/optimize/lib/components/header/header_links/header_links.styles.js

@@ -35,6 +35,7 @@ var euiHeaderLinksStyles = exports.euiHeaderLinksStyles = function euiHeaderLink
     euiHeaderLinks: _ref2,
     euiHeaderLinks__list: _ref,
     gutterSizes: {
+      xxs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:xxs;"),
       xs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.s, ";;label:xs;"),
       s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),
       m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "97.1.0",
+  "version": "97.2.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/datagrid/utils/col_widths.js

@@ -51,27 +51,21 @@ var useColumnWidths = exports.useColumnWidths = function useColumnWidths(_ref) {
     trailingControlColumns = _ref.trailingControlColumns,
     defaultColumnWidth = _ref.defaultColumnWidth,
     onColumnResize = _ref.onColumnResize;
-  var getInitialWidths = (0, _react.useCallback)(function (prevColumnWidths) {
-    var columnWidths = _objectSpread({}, prevColumnWidths);
-    columns.filter(doesColumnHaveAnInitialWidth).forEach(function (_ref2) {
-      var id = _ref2.id,
-        initialWidth = _ref2.initialWidth;
-      if (columnWidths[id] == null) {
-        columnWidths[id] = initialWidth;
-      }
-    });
-    return columnWidths;
+  var computeColumnWidths = (0, _react.useCallback)(function () {
+    return columns.filter(doesColumnHaveAnInitialWidth).reduce(function (initialWidths, column) {
+      return _objectSpread(_objectSpread({}, initialWidths), {}, (0, _defineProperty2.default)({}, column.id, column.initialWidth));
+    }, {});
   }, [columns]);
 
   // Passes initializer function for performance, so computing only runs once on init
   // @see https://react.dev/reference/react/useState#examples-initializer
-  var _useState = (0, _react.useState)(getInitialWidths),
+  var _useState = (0, _react.useState)(computeColumnWidths),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     columnWidths = _useState2[0],
     setColumnWidths = _useState2[1];
   (0, _services.useUpdateEffect)(function () {
-    setColumnWidths(getInitialWidths);
-  }, [columns]);
+    setColumnWidths(computeColumnWidths());
+  }, [computeColumnWidths]);
   var setColumnWidth = (0, _react.useCallback)(function (columnId, width) {
     setColumnWidths(function (prevColumnWidths) {
       return _objectSpread(_objectSpread({}, prevColumnWidths), {}, (0, _defineProperty2.default)({}, columnId, width));

package/test-env/components/header/header_links/header_links.js

@@ -31,7 +31,7 @@ var _excluded = ["children", "className", "gutterSize", "popoverBreakpoints", "p
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var GUTTER_SIZES = exports.GUTTER_SIZES = ['xs', 's', 'm', 'l'];
+var GUTTER_SIZES = exports.GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'];
 var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/test-env/components/header/header_links/header_links.styles.js

@@ -35,6 +35,7 @@ var euiHeaderLinksStyles = exports.euiHeaderLinksStyles = function euiHeaderLink
     euiHeaderLinks: _ref2,
     euiHeaderLinks__list: _ref,
     gutterSizes: {
+      xxs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:xxs;"),
       xs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.s, ";;label:xs;"),
       s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),
       m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),