@gitlab/ui 72.12.0 → 72.12.1

package/dist/utils/constants.js

@@ -0,0 +1,288 @@
+import { POSITION } from '../components/utilities/truncate/constants';
+
+function appendDefaultOption(options) {
+  return {
+    ...options,
+    default: ''
+  };
+}
+const COMMA = ',';
+const CONTRAST_LEVELS = [{
+  grade: 'F',
+  min: 0,
+  max: 3
+}, {
+  grade: 'AA+',
+  min: 3,
+  max: 4.5
+}, {
+  grade: 'AA',
+  min: 4.5,
+  max: 7
+}, {
+  grade: 'AAA',
+  min: 7,
+  max: 22
+}];
+const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+const LEFT_MOUSE_BUTTON = 0;
+const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
+const variantOptions = {
+  primary: 'primary',
+  secondary: 'secondary',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  info: 'info',
+  light: 'light',
+  dark: 'dark'
+};
+const badgeSizeOptions = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
+const badgeVariantOptions = {
+  muted: 'muted',
+  neutral: 'neutral',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  tier: 'tier'
+};
+const badgeIconSizeOptions = {
+  sm: 12,
+  md: 16
+};
+const variantCssColorMap = {
+  muted: 'gl-text-gray-500',
+  neutral: 'gl-text-blue-100',
+  info: 'gl-text-blue-500',
+  success: 'gl-text-green-500',
+  warning: 'gl-text-orange-500',
+  danger: 'gl-text-red-500'
+};
+const targetOptions = ['_self', '_blank', '_parent', '_top', null];
+const labelSizeOptions = {
+  default: null,
+  sm: 'sm'
+};
+const viewModeOptions = {
+  dark: 'dark',
+  light: 'light'
+};
+const labelColorOptions = {
+  ...viewModeOptions
+};
+const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
+const avatarsInlineSizeOptions = [32, 24, 16];
+const avatarShapeOptions = {
+  circle: 'circle',
+  rect: 'rect'
+};
+const formStateOptions = {
+  default: null,
+  valid: true,
+  invalid: false
+};
+const buttonCategoryOptions = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary'
+};
+const buttonVariantOptions = {
+  default: 'default',
+  confirm: 'confirm',
+  info: 'info (deprecated)',
+  success: 'success (deprecated)',
+  danger: 'danger',
+  dashed: 'dashed',
+  link: 'link',
+  /**
+   * The "reset" variant can be used when customization of GlButton styles is required
+   * (e.g. for the "close" button in GlLabel).
+   * It should be used sparingly and only when other approaches fail.
+   * Prefer supported variants where ever possible.
+   */
+  reset: 'gl-reset'
+};
+const badgeForButtonOptions = {
+  [buttonVariantOptions.default]: badgeVariantOptions.neutral,
+  [buttonVariantOptions.confirm]: badgeVariantOptions.info,
+  [buttonVariantOptions.danger]: badgeVariantOptions.danger
+};
+const dropdownVariantOptions = {
+  default: 'default',
+  confirm: 'confirm',
+  info: 'info (deprecated)',
+  success: 'success (deprecated)',
+  danger: 'danger',
+  link: 'link'
+};
+const dropdownPlacements = {
+  left: 'bottom-start',
+  center: 'bottom',
+  right: 'bottom-end'
+};
+const dropdownAnyCornerPlacement = [dropdownPlacements.left, 'top-start', dropdownPlacements.right, 'top-end'];
+const dropdownAllowedAutoPlacements = {
+  left: dropdownAnyCornerPlacement,
+  center: [dropdownPlacements.center, 'top'],
+  right: dropdownAnyCornerPlacement
+};
+const buttonSizeOptions = {
+  small: 'sm',
+  medium: 'md'
+};
+const datepickerWidthOptionsMap = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl'
+};
+
+// size options all have corresponding styles (e.g. .s12 defined in icon.scss)
+const iconSizeOptions = [8, 12, 14, 16, 24, 32, 48, 72];
+const triggerVariantOptions = {
+  click: 'click',
+  hover: 'hover',
+  focus: 'focus'
+};
+const tooltipPlacements = {
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom'
+};
+
+// in milliseconds
+const tooltipDelay = {
+  show: 500,
+  hide: 0
+};
+const popoverPlacements = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left'
+};
+const columnOptions = {
+  stacked: 'stacked',
+  tiled: 'tiled'
+};
+const alignOptions = {
+  left: 'left',
+  center: 'center',
+  right: 'right',
+  fill: 'fill'
+};
+const alertVariantOptions = {
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  info: 'info',
+  tip: 'tip'
+};
+const alertVariantIconMap = {
+  success: 'check-circle',
+  warning: 'warning',
+  danger: 'error',
+  info: 'information-o',
+  tip: 'bulb'
+};
+const colorThemes = {
+  indigo: 'theme-indigo-900',
+  'light-indigo': 'theme-indigo-700',
+  blue: 'theme-blue-900',
+  'light-blue': 'theme-blue-700',
+  green: 'theme-green-900',
+  'light-green': 'theme-green-700',
+  red: 'theme-red-900',
+  'light-red': 'theme-red-700',
+  dark: 'gray-900',
+  light: 'gray-700'
+};
+const modalButtonDefaults = {
+  actionPrimary: {
+    variant: 'confirm',
+    category: 'primary'
+  },
+  actionSecondary: {
+    variant: 'confirm',
+    category: 'secondary'
+  },
+  actionCancel: {
+    variant: 'default'
+  }
+};
+const tabsButtonDefaults = {
+  actionPrimary: {
+    variant: 'success',
+    category: 'primary'
+  },
+  actionSecondary: {
+    variant: 'default',
+    category: 'secondary'
+  },
+  actionTertiary: {
+    variant: 'default'
+  }
+};
+const tokenVariants = ['default', 'search-type', 'search-value'];
+const resizeDebounceTime = 200;
+const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
+
+// Datetime constants
+const defaultDateFormat = 'YYYY-MM-DD';
+const bannerVariants = ['promotion', 'introduction'];
+const maxZIndex = 10;
+const modalSizeOptions = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
+const focusableTags = ['INPUT', 'TEXTAREA', 'A', 'BUTTON', 'SELECT'];
+const keyboard = {
+  escape: 'Escape',
+  backspace: 'Backspace',
+  delete: 'Delete',
+  left: 'Left',
+  arrowLeft: 'ArrowLeft',
+  right: 'Right',
+  arrowRight: 'ArrowRight',
+  home: 'Home',
+  end: 'End',
+  tab: 'Tab'
+};
+const truncateOptions = POSITION;
+const formInputWidths = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+  '(unset or null)': null
+};
+const toggleLabelPosition = {
+  hidden: 'hidden',
+  left: 'left',
+  top: 'top'
+};
+const tooltipActionEvents = ['open', 'close', 'enable', 'disable'];
+const drawerVariants = {
+  default: 'default',
+  sidebar: 'sidebar'
+};
+const loadingIconSizes = {
+  'sm (16x16)': 'sm',
+  'md (24x24)': 'md',
+  'lg (32x32)': 'lg',
+  'xl (64x64)': 'xl'
+};
+const loadingIconVariants = {
+  spinner: 'spinner',
+  dots: 'dots'
+};
+
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/dist/utils/data_utils.js

@@ -0,0 +1,21 @@
+import curry from 'lodash/fp/curry';
+
+const getRepeatingValue = index => {
+  const values = [100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400, 600, 700];
+  return index < values.length ? values[index] : values[index % values.length];
+};
+const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]);
+
+// takes an element and a list and `intersperses' that element between the elements of the list.
+// (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
+const intersperse = curry((separator, items) => {
+  const [head, ...rest] = items;
+  const separatorFactory = typeof separator === 'function' ? separator : () => separator;
+  return [head, ...rest.flatMap(item => [separatorFactory(), item], rest)];
+});
+
+// inserts a value at a given index into an array
+// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
+const insert = curry((index, newItem, items) => [...items.slice(0, index), newItem, ...items.slice(index)]);
+
+export { generateTimeSeries, insert, intersperse };

package/dist/utils/datetime_utility.js

@@ -0,0 +1,61 @@
+// These utility methods come from the Gitlab repo; app/assets/javascripts/lib/utils/datetime_utility.js
+
+/**
+ * This method allows you to create new Date instance from existing
+ * date instance without keeping the reference.
+ *
+ * @param {Date} date
+ */
+const newDate = date => date instanceof Date ? new Date(date.getTime()) : new Date();
+
+/**
+ * Computes the difference between 2 date objects.
+ *
+ * @param {Date} a the start date
+ * @param {Date} b the end date
+ * @example
+ * // returns 5
+ * getDayDifference(new Date('2020-08-10'), new Date('2020-08-15'));
+ * @returns {Number} Number of days between the 2 dates
+ */
+const getDayDifference = (a, b) => {
+  const millisecondsPerDay = 1000 * 60 * 60 * 24;
+  const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+  const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+  return Math.floor((date2 - date1) / millisecondsPerDay);
+};
+
+/**
+ * Subtracts a given number of days from a given date and returns the new date.
+ *
+ * @param {Date} date the date that we will substract days from
+ * @param {Number} daysInPast number of days that are subtracted from a given date
+ * @example
+ * // returns Mon Aug 10 2020 00:00:00
+ * getDateInPast(new Date('2020-08-15'), 5);
+ * @returns {Date} Date in past as Date object
+ */
+const getDateInPast = (date, daysInPast) => new Date(newDate(date).setDate(date.getDate() - daysInPast));
+
+/**
+ * Adds a given number of days to a given date and returns the new date.
+ *
+ * @param {Date} date the date that we will add days to
+ * @param {Number} daysInFuture number of days that are added to a given date
+ * @example
+ * // returns Mon Aug 15 2020 00:00:00
+ * getDateInFuture(new Date('2020-08-10'), 5);
+ * @returns {Date} Date in future as Date object
+ */
+const getDateInFuture = (date, daysInFuture) => new Date(newDate(date).setDate(date.getDate() + daysInFuture));
+
+/**
+ * Are the given two dates equal
+ *
+ * @param {Date} date1
+ * @param {Date} date2
+ * @returns {Boolean}
+ */
+const areDatesEqual = (date1, date2) => Boolean(date1 && date2 && new Date(date1).getTime() === new Date(date2).getTime());
+
+export { areDatesEqual, getDateInFuture, getDateInPast, getDayDifference, newDate };

package/dist/utils/i18n.js

@@ -0,0 +1,15 @@
+import { i18n } from '../config';
+
+/**
+ * Mark a label as translatable.
+ *
+ * @param {string} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
+ * @param {string} defaultValue A fallback value to be relied on if the consumer doesn't have translation capabilities.
+ * @returns {string} The translated label.
+ */
+const translate = (key, defaultValue) => {
+  var _i18n$key;
+  return (_i18n$key = i18n[key]) !== null && _i18n$key !== void 0 ? _i18n$key : defaultValue;
+};
+
+export { translate };

package/dist/utils/is_slot_empty.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+
+// Fragment will be available only in Vue.js 3
+const {
+  Fragment,
+  Comment
+} = Vue;
+function callIfNeeded(fnOrResult, args) {
+  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
+}
+function isEmpty(vnode) {
+  if (!vnode || Comment && vnode.type === Comment) {
+    return true;
+  }
+  if (Array.isArray(vnode)) {
+    // eslint-disable-next-line unicorn/no-array-callback-reference
+    return vnode.every(isEmpty);
+  }
+  if (Fragment && vnode.type === Fragment) {
+    // Vue.js 3 fragment, check children
+    // eslint-disable-next-line unicorn/no-array-callback-reference
+    return vnode.children.every(isEmpty);
+  }
+  return false;
+}
+function isSlotEmpty(vueInstance, slot, slotArgs) {
+  var _vueInstance$$scopedS, _vueInstance$$scopedS2;
+  const isVue3 = Boolean(Fragment);
+  const slotContent = isVue3 ?
+  // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
+  // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
+  callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs) : (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
+
+  // eslint-disable-next-line unicorn/no-array-callback-reference
+  return isEmpty(slotContent);
+}
+
+export { isSlotEmpty };

package/dist/utils/number_utils.js

@@ -0,0 +1,124 @@
+/**
+ * Adds two numbers together
+ * @param {Number} a
+ * @param {Number} b
+ */
+const addition = (a, b) => a + b;
+
+/**
+ * Returns the sum of all arguments
+ * @param  {...Number} numbers
+ */
+const sum = function () {
+  for (var _len = arguments.length, numbers = new Array(_len), _key = 0; _key < _len; _key++) {
+    numbers[_key] = arguments[_key];
+  }
+  return numbers.reduce(addition);
+}; // eslint-disable-line unicorn/no-array-callback-reference
+
+/**
+ * Returns the average of all arguments
+ * @param  {...Number} numbers
+ */
+const average = function () {
+  return sum(...arguments) / arguments.length;
+};
+
+/**
+ * Returns the modulo of n for a divisor.
+ *
+ * Maps the integer n into the range [0, divisor) when the divisor is positive,
+ * and (divisor, 0] when the divisor is negative.
+ *
+ * This is useful when indexing into an array, to ensure you always stay within
+ * the array bounds.
+ *
+ * See https://2ality.com/2019/08/remainder-vs-modulo.html.
+ *
+ * @param {number} n The number to mod.
+ * @param {number} divisor The divisor (e.g., the length of an array).
+ * @returns {number}
+ */
+function modulo(n, divisor) {
+  const result = (n % divisor + divisor) % divisor;
+  // Never return -0.
+  return result === 0 ? 0 : result;
+}
+
+/**
+ * Convert number to engineering format, using SI suffix
+ * @param {Number|String} value - Number or Number-convertible String
+ * @param {Number} precision
+ * @return {String} number, possibly with a suffix
+ */
+const engineeringNotation = function (value) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  const invalidValues = [NaN, Infinity, -Infinity];
+  const num = Number(value);
+  if (invalidValues.includes(num) || invalidValues.includes(Number(precision))) {
+    return num.toString();
+  }
+  const allYourBase = {
+    '-24': 'y',
+    '-21': 'z',
+    '-18': 'a',
+    '-15': 'f',
+    '-12': 'p',
+    '-9': 'n',
+    '-6': 'μ',
+    '-3': 'm',
+    0: '',
+    3: 'k',
+    6: 'M',
+    9: 'G',
+    12: 'T',
+    15: 'P',
+    18: 'E',
+    21: 'Z',
+    24: 'Y'
+  };
+  const exponentialNotation = num.toExponential(precision);
+  const power = exponentialNotation.split('e').map(Number)[1] || 0;
+  if (power < -24 || power > 24) {
+    return exponentialNotation;
+  }
+  const scaledPower = 3 * Math.floor(power / 3);
+  const scaledMantissa = (exponentialNotation / 10 ** scaledPower
+  // strip trailing decimals from floating point rounding errors
+  ).toFixed(precision)
+  // strip trailing 0s after a decimal point
+  .replace(/\.([1-9]*)0+$/, (_, fractionalDigits) => {
+    if (fractionalDigits) {
+      return `.${fractionalDigits}`;
+    }
+    return '';
+  });
+  return `${scaledMantissa}${allYourBase[scaledPower]}`;
+};
+
+/**
+ * Formats a number as a locale-based string using `Intl.NumberFormat`.
+ *
+ * 2333 -> 2,333
+ * 232324 -> 232,324
+ *
+ * @param {Number|string} value - number to be converted
+ * @param {{}?} options - options to be passed to
+ * `Intl.NumberFormat` such as `unit` and `style`.
+ * @param {String|String[]} locales - If set, forces a different
+ * language code from the one currently in the document.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+ *
+ * @returns {String}
+ */
+const formatNumberToLocale = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let locales = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  if (Number.isNaN(Number(value))) {
+    return value;
+  }
+  return new Intl.NumberFormat(locales, options).format(value);
+};
+
+export { addition, average, engineeringNotation, formatNumberToLocale, modulo, sum };

package/dist/utils/stories_constants.js

@@ -0,0 +1,29 @@
+/**
+ * Arg types subcategories to be used to organize props within arg tables
+ */
+
+const ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL = 'Look & feel';
+const ARG_TYPE_SUBCATEGORY_STATE = 'State';
+const ARG_TYPE_SUBCATEGORY_SEARCH = 'Search';
+const ARG_TYPE_SUBCATEGORY_ACCESSIBILITY = 'Accessibility';
+const ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL = 'Infinite scroll';
+
+/**
+ * These are used to test varying lengths of series names
+ */
+const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
+const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
+const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
+const SERIES_NAME = {
+  [SERIES_NAME_SHORT]: 'Series ',
+  [SERIES_NAME_LONG]: 'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
+  [SERIES_NAME_LONG_WITHOUT_SPACES]: 'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END'
+};
+
+/**
+ * Reused constants for ListBox
+ */
+
+const LISTBOX_CONTAINER_HEIGHT = '370px';
+
+export { ARG_TYPE_SUBCATEGORY_ACCESSIBILITY, ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL, ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL, ARG_TYPE_SUBCATEGORY_SEARCH, ARG_TYPE_SUBCATEGORY_STATE, LISTBOX_CONTAINER_HEIGHT, SERIES_NAME, SERIES_NAME_LONG, SERIES_NAME_LONG_WITHOUT_SPACES, SERIES_NAME_SHORT };

package/dist/utils/stories_utils.js

@@ -0,0 +1,13 @@
+/**
+ * Builds the parameters object disable one or multiple controls.
+ */
+const disableControls = function () {
+  let controls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return Object.fromEntries(controls.map(control => [control, {
+    control: {
+      disable: true
+    }
+  }]));
+};
+
+export { disableControls };

package/dist/utils/story_decorators/container.js

@@ -0,0 +1,16 @@
+/**
+ * Return a story decorator function, which wraps the given story in a `div`
+ * element with the given `style` attributes.
+ *
+ * @param {object} style The style attribute to apply to the container.
+ * @return {function} The story decorator.
+ */
+const makeContainer = style => Story => ({
+  render(h) {
+    return h('div', {
+      style
+    }, [h(Story())]);
+  }
+});
+
+export { makeContainer };

package/dist/utils/string_utils.js

@@ -0,0 +1,69 @@
+import emojiRegexFactory from 'emoji-regex';
+
+/**
+ * Split the given string after each occurrence of each of the given symbols.
+ *
+ * Symbols are strings, and can be of length one or more. Zero-length symbols
+ * are ignored.
+ *
+ * Unlike with `String::split`, the symbol is left in results, with
+ * the split occurring _after_ the symbol.
+ *
+ * For example:
+ *
+ *     splitAfterSymbols(['/'], 'a/b/c')    // ['a/', 'b/', 'c']
+ *     splitAfterSymbols(['foo'], 'foobar') // ['foo', 'bar']
+ *
+ * @param {string[]} symbols The symbols to split the string by.
+ * @param {string} string The string to split.
+ * @returns {string[]} The resulting strings.
+ */
+const splitAfterSymbols = (symbols, string) => {
+  const textParts = [];
+  let textPartStartIndex = 0;
+  if (string.length === 0) {
+    return [string];
+  }
+  for (let i = 0; i < string.length;) {
+    let symbolFound = false;
+    for (let j = 0; j < symbols.length; j += 1) {
+      const symbol = symbols[j];
+      if (!symbol) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      symbolFound = string.slice(i, i + symbol.length) === symbol;
+      if (symbolFound) {
+        const textPartEndIndex = i + symbol.length;
+        const textPart = string.slice(textPartStartIndex, textPartEndIndex);
+        textParts.push(textPart);
+        textPartStartIndex = textPartEndIndex;
+        i = textPartStartIndex;
+        break;
+      }
+    }
+    if (!symbolFound) {
+      i += 1;
+    }
+  }
+  const final = string.slice(textPartStartIndex);
+  if (final) {
+    textParts.push(final);
+  }
+  return textParts;
+};
+const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
+const getAvatarChar = name => {
+  if (name) {
+    // Check if string starts with an emoji (which could be multiple characters and zero-width joined)
+    const match = name.match(startsWithEmojiRegex);
+    if (match) {
+      // Return the first match
+      return match[0];
+    }
+    return name.charAt(0).toUpperCase();
+  }
+  return '';
+};
+
+export { getAvatarChar, splitAfterSymbols };

package/dist/utils/svgs/svg_paths.js

@@ -0,0 +1,7 @@
+const scrollHandleSvgPath = 'path://M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zM6 4a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1z';
+const marqueeSelectionSvgPath = 'path://M-6.251 -7L-7 -7L-7 -4.753A0.749 0.749 0 0 0 -5.502 -4.753L-5.502 -5.502L-4.753 -5.502A0.749 0.749 0 0 0 -4.753 -7L-6.251 -7ZM-6.251 -2.0067A0.749 0.749 0 0 1 -5.502 -1.2577L-5.502 1.239A0.749 0.749 0 1 1 -7 1.239L-7 -1.2577A0.749 0.749 0 0 1 -6.251 -2.0067ZM0.8455 0.8455L2.3505 4.3578L4.3578 2.3505L0.8455 0.8455ZM0.2883 -1.023L5.6251 1.264A0.9987 0.9987 0 0 1 5.9387 2.8888L4.943 3.8835L6.7616 5.703A0.749 0.749 0 1 1 5.703 6.7616L3.8835 4.943L2.8888 5.9387A0.9987 0.9987 0 0 1 1.264 5.6251L-1.023 0.2883C-1.3785 -0.5406 -0.5406 -1.3785 0.2883 -1.023ZM-6.251 6.9813L-7 6.9813L-7 4.7343A0.749 0.749 0 1 1 -5.502 4.7343L-5.502 5.4833L-4.753 5.4833A0.749 0.749 0 1 1 -4.753 6.9813L-6.251 6.9813ZM-2.0067 -6.251A0.749 0.749 0 0 1 -1.2577 -7L1.239 -7A0.749 0.749 0 1 1 1.239 -5.502L-1.2577 -5.502A0.749 0.749 0 0 1 -2.0067 -6.251ZM6.2323 -7L6.9813 -7L6.9813 -4.753A0.749 0.749 0 1 1 5.4833 -4.753L5.4833 -5.502L4.7343 -5.502A0.749 0.749 0 1 1 4.7343 -7L6.2323 -7Z';
+const redoSvgPath = 'path://M1.8332 -6.7552A7.0001 7.0001 0 0 0 -5.6875 -4.082L-5.6875 -5.4689A0.6563 0.6563 0 0 0 -7 -5.4689L-7 -1.7501L-3.2812 -1.7501A0.6563 0.6563 0 0 0 -3.2812 -3.0626L-4.7923 -3.0626A5.6876 5.6876 0 1 1 -5.2526 2.1822A0.6563 0.6563 0 0 0 -6.4645 2.6853A7.0001 7.0001 0 1 0 1.8332 -6.7561Z';
+const clearAllSvgPath = 'path://M-1.8332 -6.7552A7.0001 7.0001 0 0 1 5.6875 -4.082L5.6875 -5.4689A0.6563 0.6563 0 1 1 7 -5.4689L7 -1.7501L3.2812 -1.7501A0.6563 0.6563 0 1 1 3.2812 -3.0626L4.7923 -3.0626A5.6876 5.6876 0 1 0 5.2526 2.1822A0.6563 0.6563 0 1 1 6.4645 2.6853A7.0001 7.0001 0 1 1 -1.8332 -6.7561Z';
+const downloadSvgPath = 'path://M3.78 -0.841A0.75 0.75 0 0 0 2.72 -0.841L0.75 1.129L0.75 -6.25A0.75 0.75 0 0 0 -0.75 -6.25L-0.75 1.129L-2.72 -0.841A0.75 0.75 0 0 0 -3.78 0.219L-0.53 3.469L0 4L0.53 3.47L3.78 0.22A0.75 0.75 0 0 0 3.78 -0.841ZM-5.5 1.75A0.75 0.75 0 0 0 -7 1.75L-7 5A2 2 0 0 0 -5 7L5 7A2 2 0 0 0 7 5L7 1.75A0.75 0.75 0 0 0 5.5 1.75L5.5 5A0.5 0.5 0 0 1 5 5.5L-5 5.5A0.5 0.5 0 0 1 -5.5 5L-5.5 1.75Z';
+
+export { clearAllSvgPath, downloadSvgPath, marqueeSelectionSvgPath, redoSvgPath, scrollHandleSvgPath };