@jetbrains/ring-ui-built 8.0.0-beta.3 → 8.0.0-beta.5

package/components/auth/auth.js

@@ -12,8 +12,9 @@ import '../global/get-uid.js';
 import '../alert/alert.js';
 import 'classnames';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
@@ -32,6 +33,11 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import 'react-dom';
 import '../link/link.js';

package/components/auth/down-notification.js

@@ -11,8 +11,9 @@ import '../alert/container.js';
 import 'react-dom';
 import 'classnames';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
@@ -30,6 +31,11 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../_helpers/link.js';
 
 var styles = {"title":"ring-down-notification-title","error":"ring-down-notification-error"};

package/components/auth/iframe-flow.js

@@ -52,8 +52,8 @@ import '../loader-screen/loader-screen.js';
 import '../loader/loader.js';
 import '../_helpers/loader-core.js';
 import './background-flow.js';
-import '../global/url.js';
 import '../_helpers/link.js';
+import '../global/url.js';
 
 class IFrameFlow {
   hideDialog = null;

package/components/auth/storage.js

@@ -6,8 +6,9 @@ import '../alert/alert.js';
 import 'react';
 import 'classnames';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
@@ -27,6 +28,11 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import 'react-dom';
 

package/components/checkbox/checkbox.d.ts

@@ -24,6 +24,6 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
-    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T | null) => void>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T | null) => () => void>;
     render(): import("react").JSX.Element;
 }

package/components/clipboard/clipboard.js

@@ -6,8 +6,9 @@ import '../alert/alert.js';
 import 'react';
 import 'classnames';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
@@ -27,6 +28,11 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import 'react-dom';
 

package/components/collapsible-group/collapsible-group.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface CollapsibleGroupProps {
+    ref?: React.Ref<HTMLDivElement>;
+    avatar?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string | null | undefined;
+    defaultExpanded?: boolean;
+    expanded?: boolean | null | undefined;
+    onChange?: (expanded: boolean) => void;
+    disableAnimation?: boolean;
+    interactive?: boolean;
+    'data-test'?: string | null | undefined;
+}
+declare const CollapsibleGroup: {
+    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
+    displayName: string;
+};
+export default CollapsibleGroup;

package/components/collapsible-group/collapsible-group.js

@@ -0,0 +1,382 @@
+import { c } from 'react/compiler-runtime';
+import { useState, use } from 'react';
+import classNames from 'classnames';
+import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
+import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
+import Icon from '../icon/icon.js';
+import { Collapse } from '../collapse/collapse.js';
+import { CollapseContent } from '../collapse/collapse-content.js';
+import { CollapseContext } from '../collapse/collapse-context.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'util-deprecate';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/memoize.js';
+import '../collapse/consts.js';
+import '../global/data-tests.js';
+import '../global/dom.js';
+import '../collapse/utils.js';
+
+var styles = {"expand":"ring-collapsible-group-expand","collapseRoot":"ring-collapsible-group-collapseRoot","hovered":"ring-collapsible-group-hovered","expanded":"ring-collapsible-group-expanded","focused":"ring-collapsible-group-focused","header":"ring-collapsible-group-header","headerButton":"ring-collapsible-group-headerButton","headerStatic":"ring-collapsible-group-headerStatic","headerContent":"ring-collapsible-group-headerContent","avatarGroup":"ring-collapsible-group-avatarGroup","title":"ring-collapsible-group-title","subtitleGroup":"ring-collapsible-group-subtitleGroup","subtitle":"ring-collapsible-group-subtitle","subtitleChevron":"ring-collapsible-group-subtitleChevron","toggle":"ring-collapsible-group-toggle","toggleIcon":"ring-collapsible-group-toggleIcon","body":"ring-collapsible-group-body"};
+
+function CollapsibleGroupHeaderContent(t0) {
+  const $ = c(16);
+  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
+    for (let $i = 0; $i < 16; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
+  }
+  const {
+    avatar,
+    titleContent,
+    subtitle
+  } = t0;
+  const {
+    collapsed
+  } = use(CollapseContext);
+  let t1;
+  if ($[1] !== titleContent) {
+    t1 = /*#__PURE__*/jsx("span", {
+      className: styles.title,
+      children: titleContent
+    });
+    $[1] = titleContent;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== avatar || $[4] !== t1) {
+    t2 = /*#__PURE__*/jsxs("span", {
+      className: styles.avatarGroup,
+      children: [avatar, t1]
+    });
+    $[3] = avatar;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== subtitle) {
+    t3 = subtitle ? /*#__PURE__*/jsxs("span", {
+      className: styles.subtitleGroup,
+      children: [/*#__PURE__*/jsx(Icon, {
+        className: styles.subtitleChevron,
+        glyph: chevronRightIcon,
+        "aria-hidden": true
+      }), /*#__PURE__*/jsx("span", {
+        className: styles.subtitle,
+        children: subtitle
+      })]
+    }) : null;
+    $[6] = subtitle;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t2 || $[9] !== t3) {
+    t4 = /*#__PURE__*/jsxs("span", {
+      className: styles.headerContent,
+      children: [t2, t3]
+    });
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const t5 = collapsed ? chevronRightIcon : chevron12pxDown;
+  let t6;
+  if ($[11] !== t5) {
+    t6 = /*#__PURE__*/jsx("span", {
+      className: styles.toggle,
+      "aria-hidden": true,
+      children: /*#__PURE__*/jsx(Icon, {
+        className: styles.toggleIcon,
+        glyph: t5
+      })
+    });
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== t4 || $[14] !== t6) {
+    t7 = /*#__PURE__*/jsxs("span", {
+      className: styles.header,
+      children: [t4, t6]
+    });
+    $[13] = t4;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
+}
+function CollapsibleGroupHeader(t0) {
+  const $ = c(16);
+  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
+    for (let $i = 0; $i < 16; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
+  }
+  let avatar;
+  let buttonProps;
+  let subtitle;
+  let titleContent;
+  if ($[1] !== t0) {
+    ({
+      avatar,
+      titleContent,
+      subtitle,
+      ...buttonProps
+    } = t0);
+    $[1] = t0;
+    $[2] = avatar;
+    $[3] = buttonProps;
+    $[4] = subtitle;
+    $[5] = titleContent;
+  } else {
+    avatar = $[2];
+    buttonProps = $[3];
+    subtitle = $[4];
+    titleContent = $[5];
+  }
+  const {
+    setCollapsed,
+    collapsed,
+    id
+  } = use(CollapseContext);
+  const t1 = `collapse-content-${id}`;
+  const t2 = !collapsed;
+  let t3;
+  if ($[6] !== avatar || $[7] !== subtitle || $[8] !== titleContent) {
+    t3 = /*#__PURE__*/jsx(CollapsibleGroupHeaderContent, {
+      avatar: avatar,
+      titleContent: titleContent,
+      subtitle: subtitle
+    });
+    $[6] = avatar;
+    $[7] = subtitle;
+    $[8] = titleContent;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== buttonProps || $[11] !== setCollapsed || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+    t4 = /*#__PURE__*/jsx("button", {
+      type: "button",
+      ...buttonProps,
+      className: styles.headerButton,
+      onClick: setCollapsed,
+      "aria-controls": t1,
+      "aria-expanded": t2,
+      children: t3
+    });
+    $[10] = buttonProps;
+    $[11] = setCollapsed;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
+}
+function CollapsibleGroupHeaderStatic(t0) {
+  const $ = c(5);
+  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
+    for (let $i = 0; $i < 5; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
+  }
+  const {
+    avatar,
+    titleContent,
+    subtitle
+  } = t0;
+  let t1;
+  if ($[1] !== avatar || $[2] !== subtitle || $[3] !== titleContent) {
+    t1 = /*#__PURE__*/jsx("span", {
+      className: styles.headerStatic,
+      children: /*#__PURE__*/jsx(CollapsibleGroupHeaderContent, {
+        avatar: avatar,
+        titleContent: titleContent,
+        subtitle: subtitle
+      })
+    });
+    $[1] = avatar;
+    $[2] = subtitle;
+    $[3] = titleContent;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+const CollapsibleGroup = t0 => {
+  const $ = c(29);
+  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
+    for (let $i = 0; $i < 29; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
+  }
+  const {
+    ref,
+    avatar,
+    title,
+    subtitle,
+    children,
+    className,
+    defaultExpanded: t1,
+    expanded: t2,
+    onChange: t3,
+    disableAnimation: t4,
+    interactive: t5,
+    "data-test": dataTest
+  } = t0;
+  const defaultExpanded = t1 === undefined ? false : t1;
+  const expanded = t2 === undefined ? null : t2;
+  const onChange = t3 === undefined ? _temp : t3;
+  const disableAnimation = t4 === undefined ? false : t4;
+  const interactive = t5 === undefined ? true : t5;
+  const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const isExpanded = expanded !== null && expanded !== void 0 ? expanded : innerExpanded;
+  let t6;
+  if ($[1] !== expanded || $[2] !== onChange) {
+    t6 = collapsed => {
+      const nextExpanded = !collapsed;
+      if (expanded == null) {
+        setInnerExpanded(nextExpanded);
+      }
+      onChange(nextExpanded);
+    };
+    $[1] = expanded;
+    $[2] = onChange;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  const handleChange = t6;
+  let t7;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = event => {
+      const nextTarget = event.relatedTarget;
+      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+        return;
+      }
+      setFocused(false);
+    };
+    $[4] = t7;
+  } else {
+    t7 = $[4];
+  }
+  const onBlur = t7;
+  let t8;
+  if ($[5] !== className || $[6] !== focused || $[7] !== hovered || $[8] !== isExpanded) {
+    t8 = classNames(styles.expand, className, {
+      [styles.hovered]: hovered,
+      [styles.expanded]: isExpanded,
+      [styles.focused]: focused
+    });
+    $[5] = className;
+    $[6] = focused;
+    $[7] = hovered;
+    $[8] = isExpanded;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  const classes = t8;
+  const t9 = !defaultExpanded;
+  const t10 = expanded == null ? null : !expanded;
+  let t11;
+  if ($[10] !== avatar || $[11] !== interactive || $[12] !== subtitle || $[13] !== title) {
+    t11 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
+      avatar: avatar,
+      titleContent: title,
+      subtitle: subtitle,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: onBlur
+    }) : /*#__PURE__*/jsx(CollapsibleGroupHeaderStatic, {
+      avatar: avatar,
+      titleContent: title,
+      subtitle: subtitle
+    });
+    $[10] = avatar;
+    $[11] = interactive;
+    $[12] = subtitle;
+    $[13] = title;
+    $[14] = t11;
+  } else {
+    t11 = $[14];
+  }
+  let t12;
+  if ($[15] !== children) {
+    t12 = /*#__PURE__*/jsx(CollapseContent, {
+      children: /*#__PURE__*/jsx("div", {
+        className: styles.body,
+        children: children
+      })
+    });
+    $[15] = children;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] !== disableAnimation || $[18] !== handleChange || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t9) {
+    t13 = /*#__PURE__*/jsxs(Collapse, {
+      defaultCollapsed: t9,
+      collapsed: t10,
+      onChange: handleChange,
+      disableAnimation: disableAnimation,
+      className: styles.collapseRoot,
+      children: [t11, t12]
+    });
+    $[17] = disableAnimation;
+    $[18] = handleChange;
+    $[19] = t10;
+    $[20] = t11;
+    $[21] = t12;
+    $[22] = t9;
+    $[23] = t13;
+  } else {
+    t13 = $[23];
+  }
+  let t14;
+  if ($[24] !== classes || $[25] !== dataTest || $[26] !== ref || $[27] !== t13) {
+    t14 = /*#__PURE__*/jsx("div", {
+      ref: ref,
+      className: classes,
+      "data-test": dataTest,
+      children: t13
+    });
+    $[24] = classes;
+    $[25] = dataTest;
+    $[26] = ref;
+    $[27] = t13;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  return t14;
+};
+CollapsibleGroup.displayName = 'CollapsibleGroup';
+function _temp() {}
+
+export { CollapsibleGroup as default };

package/components/components/util-stories.js

@@ -1,3 +1,65 @@
+/* eslint-disable no-magic-numbers */
 const hideAddonsPanelParam = 'hideAddonsPanel';
+function createRandom(seed) {
+  const u64Mask = 2n ** 64n - 1n;
+  const u64Range = 2n ** 64n;
+  const scrambleConst = 2685821657736338717n;
+  let x = seed & u64Mask;
+  if (!x) throw new Error('Seed must be non-zero');
+  function nextFractional() {
+    x ^= x >> 12n;
+    x ^= x << 25n & u64Mask;
+    x ^= x >> 27n;
+    const scrambled = x * scrambleConst & u64Mask;
+    return Number(scrambled) / Number(u64Range);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (...args) => {
+    if (!args.length) {
+      return nextFractional();
+    }
+    if (args.length === 1) {
+      const [a] = args;
+      if (typeof a === 'number') {
+        return Math.floor(nextFractional() * a);
+      }
+      if (Array.isArray(a)) {
+        return a[Math.floor(nextFractional() * a.length)];
+      }
+    }
+    if (args.length === 2) {
+      const [a, b] = args;
+      let fromNum;
+      let toNum;
+      let isDate = false;
+      if (typeof a === 'number' && typeof b === 'number') {
+        fromNum = a;
+        toNum = b;
+      }
+      if (a instanceof Date && b instanceof Date) {
+        fromNum = a.getTime();
+        toNum = b.getTime();
+        isDate = true;
+      }
+      if (fromNum != null && toNum != null && fromNum < toNum) {
+        const r = Math.floor(nextFractional() * (toNum - fromNum)) + fromNum;
+        return isDate ? new Date(r) : r;
+      }
+      if (Array.isArray(a) && typeof b === 'number') {
+        const aIndices = Array.from({
+          length: a.length
+        }, (_, i) => i);
+        const sample = [];
+        for (let i = 0; i < b && aIndices.length; i++) {
+          const indexIndex = Math.floor(nextFractional() * aIndices.length);
+          const [aIndex] = aIndices.splice(indexIndex, 1);
+          sample.push(a[aIndex]);
+        }
+        return sample;
+      }
+    }
+    throw new Error(`Bad args: ${JSON.stringify(args)}`);
+  };
+}
 
-export { hideAddonsPanelParam };
+export { createRandom, hideAddonsPanelParam };

package/components/data-list/data-list.js

@@ -10,6 +10,7 @@ import Item, { moreLessButtonStates } from './item.js';
 import { s as styles } from '../_helpers/title.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '../global/compose-refs.js';
+import 'react/compiler-runtime';
 import 'memoize-one';
 import 'core-js/modules/es.array.includes.js';
 import '../shortcuts/core.js';
@@ -32,7 +33,6 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../global/controls-height.js';
 import '../global/configuration.js';

package/components/data-list/title.js

@@ -6,6 +6,7 @@ import '../global/get-uid.js';
 export { T as default } from '../_helpers/title.js';
 import 'react/jsx-runtime';
 import '../global/compose-refs.js';
+import 'react/compiler-runtime';
 import 'memoize-one';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
@@ -13,7 +14,6 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '../global/data-tests.js';

package/components/date-picker/consts.d.ts

@@ -34,6 +34,7 @@ export interface DateInputTranslations {
     addSecondDate?: string;
     addTime?: string;
     selectName?: string;
+    selectDate?: string;
 }
 export interface DateSpecificPopupProps {
     withTime?: false | undefined;

package/components/date-picker/date-input.js

@@ -93,6 +93,7 @@ class DateInput extends React.PureComponent {
       locale
     } = this.props;
     const {
+      messages,
       translate
     } = this.context;
     let displayText = '';
@@ -105,7 +106,7 @@ class DateInput extends React.PureComponent {
     } else if (name === 'time') {
       displayText = time || '';
     }
-    const placeholder = ((_translations$addFirs, _translations$addSeco, _translations$addTime, _translations$selectN) => {
+    const placeholder = ((_translations$addFirs, _translations$addSeco, _translations$addTime, _ref, _ref2, _ref3, _translations$selectD) => {
       switch (name) {
         case 'from':
           return fromPlaceholder || ((_translations$addFirs = translations?.addFirstDate) !== null && _translations$addFirs !== void 0 ? _translations$addFirs : translate('addFirstDate'));
@@ -114,7 +115,7 @@ class DateInput extends React.PureComponent {
         case 'time':
           return timePlaceholder || ((_translations$addTime = translations?.addTime) !== null && _translations$addTime !== void 0 ? _translations$addTime : translate('addTime'));
         default:
-          return ((_translations$selectN = translations?.selectName) !== null && _translations$selectN !== void 0 ? _translations$selectN : translate('selectName')).replace('%name%', name).replace('{{name}}', name);
+          return ((_ref = (_ref2 = (_ref3 = (_translations$selectD = translations?.selectDate) !== null && _translations$selectD !== void 0 ? _translations$selectD : translations?.selectName) !== null && _ref3 !== void 0 ? _ref3 : messages.selectDate) !== null && _ref2 !== void 0 ? _ref2 : messages.selectName) !== null && _ref !== void 0 ? _ref : translate('selectDate')).replace('%name%', name).replace('{{name}}', name);
       }
     })();
     const classes = classNames(styles.filter, name !== 'time' && styles[`${name}Input`], divider && (name === 'from' || name === 'time') && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');

package/components/date-picker/date-popup.js

@@ -47,9 +47,6 @@ import 'date-fns/addDays';
 import 'date-fns/getDate';
 import 'date-fns/isSameDay';
 import 'date-fns/isToday';
-import 'date-fns/add';
-import '../global/sniffer.js';
-import 'sniffr';
 import '../global/intersection-observer-context.js';
 import './scroll-arith.js';
 import './use-scroll-behavior.js';
@@ -61,6 +58,9 @@ import 'date-fns/isThisYear';
 import 'date-fns/setYear';
 import 'date-fns/startOfYear';
 import 'date-fns/setDay';
+import 'date-fns/add';
+import '../global/sniffer.js';
+import 'sniffr';
 import 'date-fns/isThisMonth';
 import '../global/linear-function.js';
 import './month-slider.js';