@skbkontur/react-ui 0.0.0-d4e280859d → 0.0.0-d99038a7ec

package/components/ComboBox/__creevey__/ComboBox.creevey.mts

@@ -0,0 +1,541 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+import { CustomComboBoxDataTids } from '../../../internal/CustomComboBox/tids';
+
+kind('ComboBox', () => {
+  story('SimpleComboboxStory', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+
+    test('hovered', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-comp-name~="MenuItem"]:nth-of-type(4)',
+          }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hovered');
+    });
+
+    test('selected', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-comp-name~="MenuItem"]:nth-of-type(4)',
+          }),
+        })
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .press()
+        .release()
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'selected');
+    });
+
+    test('search result', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys('Second')
+        .perform();
+      await delay(500);
+      await context.matchImage(await context.takeScreenshot(), 'search result');
+    });
+
+    test('selcted', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys('Second')
+        .pause(1000)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'selcted');
+    });
+
+    test('opened again', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys('Second')
+        .pause(1000)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Input"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'opened again');
+    });
+
+    test('search result_0', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys('Такого точно нету')
+        .perform();
+      await delay(500);
+      await context.matchImage(await context.takeScreenshot(), 'search result_0');
+    });
+
+    test('select', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ARROW_DOWN)
+        .sendKeys(Key.ARROW_DOWN)
+        .sendKeys(Key.ARROW_DOWN)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'select');
+    });
+
+    test('submit', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .pause(1000)
+        .sendKeys(Key.ARROW_DOWN)
+        .sendKeys(Key.ARROW_DOWN)
+        .sendKeys(Key.ARROW_DOWN)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'submit');
+    });
+
+    test('select_1', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .pause(500)
+        .sendKeys('Second')
+        .pause(500)
+        .move({ origin: context.webdriver.findElement({ css: 'body' }) })
+        .pause(1000)
+        .press()
+        .release()
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'select_1');
+    });
+
+    test('selected_2', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .pause(1000)
+        .sendKeys('Second')
+        .pause(500)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'selected_2');
+    });
+  });
+
+  story('OpenToTop', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      const element = await context.webdriver.findElement({
+        css: '[data-tid="container"]',
+      });
+      await context.matchImage(await element.takeScreenshot(), 'plain');
+    });
+
+    test('opened', async (context) => {
+      const element = await context.webdriver.findElement({
+        css: '[data-tid="container"]',
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.matchImage(await element.takeScreenshot(), 'opened');
+    });
+
+    test('hovered', async (context) => {
+      const element = await context.webdriver.findElement({
+        css: '[data-tid="container"]',
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-comp-name~="MenuItem"]:nth-of-type(4)',
+          }),
+        })
+        .perform();
+      await context.matchImage(await element.takeScreenshot(), 'hovered');
+    });
+
+    test('selected', async (context) => {
+      const element = await context.webdriver.findElement({
+        css: '[data-tid="container"]',
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-comp-name~="MenuItem"]:nth-of-type(4)',
+          }),
+        })
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .press()
+        .release()
+        .perform();
+      await context.matchImage(await element.takeScreenshot(), 'selected');
+    });
+  });
+
+  story('AlwaysReject', () => {
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('ToogleError', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['plain again', 'with error'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('with error', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: "[data-comp-name~='Toggle']" }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.takeScreenshot(), 'with error');
+    });
+
+    test('plain again', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: "[data-comp-name~='Toggle']" }))
+        .pause(200)
+        .click(context.webdriver.findElement({ css: "[data-comp-name~='Toggle']" }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.takeScreenshot(), 'plain again');
+    });
+  });
+
+  story('WithExternalValue', () => {
+    test('initial value', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'initial value');
+    });
+
+    test('reset value', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="resetBtn"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'reset value');
+    });
+
+    test('set value', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="resetBtn"]' }))
+        .click(context.webdriver.findElement({ css: '[data-tid="setValueBtn"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'set value');
+    });
+  });
+
+  story('FocusFlow', () => {
+    test('before', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'before');
+    });
+
+    test('after Enter on Item', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'after Enter on Item');
+    });
+
+    test('after tab to the next field', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'after tab to the next field');
+    });
+  });
+
+  story('WithTooltip', () => {
+    test('show and hide Tooltip', async (context) => {
+      const body = await context.webdriver.findElement({ css: 'body' });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="InputLikeText__input"]' }))
+        .perform();
+      await delay(1000);
+      const showTooltip = await body.takeScreenshot();
+      await context.webdriver.actions({ bridge: true }).click(body).pause(1000).perform();
+      const hideTooltip = await body.takeScreenshot();
+      await context.matchImages({ showTooltip, hideTooltip });
+    });
+  });
+
+  story('MobileSimple', () => {
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="${CustomComboBoxDataTids.comboBoxView}"]` }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+
+    test('opened top with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top with portal');
+    });
+
+    test('opened bottom with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom with portal');
+    });
+
+    test('opened top without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top without portal');
+    });
+
+    test('opened bottom without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="InputLikeText"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom without portal');
+    });
+  });
+
+  story('Size', () => {
+    test('clicked all', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="open-all"]' }))
+        .perform();
+      await delay(500);
+      await context.webdriver.executeScript(function () {
+        const containers = document.querySelectorAll('[data-tid~="ScrollContainer__inner"]');
+        for (let i = 0; i < containers.length; i++) {
+          containers[i].scrollTop += 300;
+        }
+      });
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'ClickedAll');
+    });
+  });
+});

package/components/CurrencyInput/__creevey__/CurrencyInput.creevey.mts

@@ -0,0 +1,81 @@
+import { story, kind, test } from 'creevey';
+
+kind('CurrencyInput', () => {
+  story('SampleStory', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'flacky visible(?!) cursor': {
+          in: ['chromeDark'],
+          tests: ['Focus', 'Input value', 'External focus and input'],
+        },
+        'flaky pixels in the bottom left corner': {
+          in: ['chrome2022'],
+          tests: ['External focus and input'],
+        },
+      },
+    });
+
+    test('Plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name*="CurrencyInput"] input',
+          }),
+        )
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Focus');
+    });
+
+    test('Input value', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name*="CurrencyInput"] input',
+          }),
+        )
+        .sendKeys('1')
+        .pause(500)
+        .sendKeys('2')
+        .pause(500)
+        .sendKeys('3')
+        .pause(500)
+        .sendKeys('4')
+        .pause(500)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Input value');
+    });
+
+    test('External focus and input', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="focus-input"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys('1')
+        .pause(500)
+        .sendKeys('2')
+        .pause(500)
+        .sendKeys('3')
+        .pause(500)
+        .sendKeys('4')
+        .pause(500)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'External focus and input');
+    });
+  });
+});

package/components/DateInput/DateFragmentsView.styles/DateFragmentsView.styles.js

@@ -1,20 +1,35 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      cursor: text;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "1jbm2s3",
+      styles: "cursor:text"
+    } : {
+      name: "nhuf8i-root",
+      styles: "cursor:text;label:root;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   selected: function selected(t) {
     var getSelection = function getSelection(background, color) {
       return (background || color) && "& ::selection {\n      background: " + background + ";\n      color: " + color + ";\n    }";
     };
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: text;\n\n      ", "\n    "])), getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor));
+    return /*#__PURE__*/css("cursor:text;", getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:selected;"));
   },
   mask: function mask(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.dateInputMaskColor);
+    return /*#__PURE__*/css("color:", t.dateInputMaskColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:mask;"));
   },
   delimiterFilled: function delimiterFilled() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: inherit;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "opde7s",
+      styles: "color:inherit"
+    } : {
+      name: "3rd1uo-delimiterFilled",
+      styles: "color:inherit;label:delimiterFilled;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   }
 });

package/components/DateInput/DateFragmentsView.styles/DateFragmentsView.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","selected","t","getSelection","background","color","_templateObject2","dateInputComponentSelectedBgColor","dateInputComponentSelectedTextColor","mask","_templateObject3","dateInputMaskColor","delimiterFilled","_templateObject4"],"sources":["DateFragmentsView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      cursor: text;\n    `;\n  },\n\n  selected(t: Theme) {\n    const getSelection = (background: string, color: string) =>\n      (background || color) &&\n      `& ::selection {\n      background: ${background};\n      color: ${color};\n    }`;\n\n    return css`\n      cursor: text;\n\n      ${getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor)}\n    `;\n  },\n\n  mask(t: Theme) {\n    return css`\n      color: ${t.dateInputMaskColor};\n    `;\n  },\n\n  delimiterFilled() {\n    return css`\n      color: inherit;\n    `;\n  },\n});\n"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;;EAEDC,QAAQ,WAAAA,SAACC,CAAQ,EAAE;IACjB,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAIC,UAAkB,EAAEC,KAAa;QACrD,CAACD,UAAU,IAAIC,KAAK;;QAEND,UAAU;QACfC,KAAK,aACd;;;IAEF,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;IAGNG,YAAY,CAACD,CAAC,CAACK,iCAAiC,EAAEL,CAAC,CAACM,mCAAmC,CAAC;;EAE9F,CAAC;;EAEDC,IAAI,WAAAA,KAACP,CAAQ,EAAE;IACb,OAAOP,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;IACCE,CAAC,CAACS,kBAAkB;;EAEjC,CAAC;;EAEDC,eAAe,WAAAA,gBAAA,EAAG;IAChB,OAAOjB,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","process","env","NODE_ENV","name","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","selected","t","getSelection","background","color","dateInputComponentSelectedBgColor","dateInputComponentSelectedTextColor","mask","dateInputMaskColor","delimiterFilled"],"sources":["DateFragmentsView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      cursor: text;\n    `;\n  },\n\n  selected(t: Theme) {\n    const getSelection = (background: string, color: string) =>\n      (background || color) &&\n      `& ::selection {\n      background: ${background};\n      color: ${color};\n    }`;\n\n    return css`\n      cursor: text;\n\n      ${getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor)}\n    `;\n  },\n\n  mask(t: Theme) {\n    return css`\n      color: ${t.dateInputMaskColor};\n    `;\n  },\n\n  delimiterFilled() {\n    return css`\n      color: inherit;\n    `;\n  },\n});\n"],"mappings":"uRAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,oBAAOH,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,aAAAL,MAAA,sBAAAK,IAAA,iBAAAL,MAAA,6BAAAM,QAAA,EAAAC,gCAAA;;;EAGZ,CAAC;;EAEDC,QAAQ,WAAAA,SAACC,CAAQ,EAAE;IACjB,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAIC,UAAkB,EAAEC,KAAa;QACrD,CAACD,UAAU,IAAIC,KAAK;;QAEND,UAAU;QACfC,KAAK,aACd;;;IAEF,oBAAOd,GAAG;;;IAGNY,YAAY,CAACD,CAAC,CAACI,iCAAiC,EAAEJ,CAAC,CAACK,mCAAmC,CAAC,SAAAZ,OAAA,CAAAC,GAAA,CAAAC,QAAA;;EAE9F,CAAC;;EAEDW,IAAI,WAAAA,KAACN,CAAQ,EAAE;IACb,oBAAOX,GAAG;IACCW,CAAC,CAACO,kBAAkB,SAAAd,OAAA,CAAAC,GAAA,CAAAC,QAAA;;EAEjC,CAAC;;EAEDa,eAAe,WAAAA,gBAAA,EAAG;IAChB,oBAAOnB,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,YAAAL,MAAA,wBAAAK,IAAA,4BAAAL,MAAA,0CAAAM,QAAA,EAAAC,gCAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}

package/components/DateInput/DateInput/DateInput.js

@@ -396,7 +396,10 @@ export var DateInput = (_dec = locale('DatePicker', DatePickerLocaleHelper), roo
       onMouseDragEnd: this.handleMouseDragEnd,
       value: this.iDateMediator.getInternalString(),
       inputMode: 'numeric',
-      takeContentWidth: true
+      takeContentWidth: true,
+      "aria-describedby": this.props['aria-describedby'],
+      "aria-label": this.props['aria-label'],
+      "aria-labelledby": this.props['aria-labelledby']
     }, /*#__PURE__*/React.createElement("span", {
       className: cx(styles.value(), (_cx2 = {}, _cx2[styles.valueVisible()] = showValue, _cx2))
     }, /*#__PURE__*/React.createElement(DateFragmentsView, {