@cloudscape-design/components 3.0.0

package/internal/components/filtering-token/styles.scoped.css

@@ -0,0 +1,193 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_10m3l_1whe3_97:not(#\9) {
+  display: flex;
+  align-content: stretch;
+}
+
+.awsui_token_10m3l_1whe3_102:not(#\9) {
+  border: 2px solid #0972d3;
+  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
+  display: flex;
+  align-items: stretch;
+  background: #f2f8fd;
+  background: var(--color-background-item-selected-ebt4bi, #f2f8fd);
+  border-radius: 8px;
+  border-radius: var(--border-field-radius-t0kudr, 8px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.awsui_show-operation_10m3l_1whe3_113:not(#\9) {
+  border-left: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.awsui_select_10m3l_1whe3_119:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_token-content_10m3l_1whe3_123:not(#\9) {
+  padding: 4px 12px;
+  padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-89h2yr, 12px);
+}
+
+.awsui_dismiss-button_10m3l_1whe3_127:not(#\9) {
+  width: 30px;
+  margin: 0;
+  border: none;
+  padding: 0 4px;
+  padding: 0 var(--space-xxs-ynfts5, 4px);
+  color: #414d5c;
+  color: var(--color-text-interactive-default-eg5fsa, #414d5c);
+  background-color: transparent;
+  border-left: 2px solid #0972d3;
+  border-left: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
+}
+.awsui_dismiss-button_10m3l_1whe3_127[data-awsui-focus-visible=true]:not(#\9):focus {
+  position: relative;
+}
+.awsui_dismiss-button_10m3l_1whe3_127[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(-5px - 1px);
+  outline-offset: calc(var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px) - 1px);
+}
+.awsui_dismiss-button_10m3l_1whe3_127[data-awsui-focus-visible=true]:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * -5px);
+  left: calc(-1 * var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px));
+  top: calc(-1 * -5px);
+  top: calc(-1 * var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px));
+  width: calc(100% + 2 * -5px);
+  width: calc(100% + 2 * var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px));
+  height: calc(100% + 2 * -5px);
+  height: calc(100% + 2 * var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px));
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_dismiss-button_10m3l_1whe3_127:not(#\9):focus {
+  outline: none;
+  text-decoration: none;
+}
+.awsui_dismiss-button_10m3l_1whe3_127:not(#\9):hover {
+  cursor: pointer;
+  color: #000716;
+  color: var(--color-text-interactive-hover-v3lasm, #000716);
+}
+
+.awsui_token-disabled_10m3l_1whe3_163:not(#\9) {
+  border-color: #d1d5db;
+  border-color: var(--color-border-control-disabled-vx8bco, #d1d5db);
+  background-color: #ffffff;
+  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
+  color: #9ba7b6;
+  color: var(--color-text-disabled-a2nkh4, #9ba7b6);
+  pointer-events: none;
+}
+.awsui_token-disabled_10m3l_1whe3_163 > .awsui_dismiss-button_10m3l_1whe3_127:not(#\9) {
+  color: #9ba7b6;
+  color: var(--color-text-interactive-disabled-3pbb07, #9ba7b6);
+  border-color: #d1d5db;
+  border-color: var(--color-border-control-disabled-vx8bco, #d1d5db);
+}

package/internal/components/filtering-token/styles.selectors.js

@@ -0,0 +1,13 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_10m3l_1whe3_97",
+  "token": "awsui_token_10m3l_1whe3_102",
+  "show-operation": "awsui_show-operation_10m3l_1whe3_113",
+  "select": "awsui_select_10m3l_1whe3_119",
+  "token-content": "awsui_token-content_10m3l_1whe3_123",
+  "dismiss-button": "awsui_dismiss-button_10m3l_1whe3_127",
+  "token-disabled": "awsui_token-disabled_10m3l_1whe3_163"
+};
+  

package/internal/components/live-region/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+export interface LiveRegionProps {
+    assertive?: boolean;
+    delay?: number;
+    children: React.ReactNode;
+}
+declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
+/**
+  The live region is hidden in the layout, but visible for screen readers.
+  It's purpose it to announce changes e.g. when custom navigation logic is used.
+
+  The way live region works differently in different browsers and screen readers and
+  it is recommended to manually test every new implementation.
+
+  If you notice there are different words being merged together,
+  check if there are text nodes not being wrapped in elements, like:
+  <LiveRegion>
+    {title}
+    <span><Details /></span>
+  </LiveRegion>
+
+  To fix, wrap "title" in an element:
+  <LiveRegion>
+    <span>{title}</span>
+    <span><Details /></span>
+  </LiveRegion>
+
+  Or create a single text node if possible:
+  <LiveRegion>
+    {`${title} ${details}`}
+  </LiveRegion>
+
+  The live region is always atomic, because non-atomic regions can be treated by screen readers
+  differently and produce unexpected results. To imitate non-atomic announcements simply use
+  multiple live regions:
+  <>
+    <LiveRegion>{title}</LiveRegion>
+    <LiveRegion><Details /></LiveRegion>
+  </>
+*/
+export default _default;
+declare function LiveRegion({ assertive, delay, children }: LiveRegionProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/internal/components/live-region/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,KAAU,EAAE,QAAQ,EAAE,EAAE,eAAe,eAoD/E"}

package/internal/components/live-region/index.js

@@ -0,0 +1,91 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo, useEffect, useRef } from 'react';
+import styles from './styles.css.js';
+/**
+  The live region is hidden in the layout, but visible for screen readers.
+  It's purpose it to announce changes e.g. when custom navigation logic is used.
+
+  The way live region works differently in different browsers and screen readers and
+  it is recommended to manually test every new implementation.
+
+  If you notice there are different words being merged together,
+  check if there are text nodes not being wrapped in elements, like:
+  <LiveRegion>
+    {title}
+    <span><Details /></span>
+  </LiveRegion>
+
+  To fix, wrap "title" in an element:
+  <LiveRegion>
+    <span>{title}</span>
+    <span><Details /></span>
+  </LiveRegion>
+
+  Or create a single text node if possible:
+  <LiveRegion>
+    {`${title} ${details}`}
+  </LiveRegion>
+
+  The live region is always atomic, because non-atomic regions can be treated by screen readers
+  differently and produce unexpected results. To imitate non-atomic announcements simply use
+  multiple live regions:
+  <>
+    <LiveRegion>{title}</LiveRegion>
+    <LiveRegion><Details /></LiveRegion>
+  </>
+*/
+export default memo(LiveRegion);
+function LiveRegion(_a) {
+    var _b = _a.assertive, assertive = _b === void 0 ? false : _b, _c = _a.delay, delay = _c === void 0 ? 10 : _c, children = _a.children;
+    var sourceRef = useRef(null);
+    var targetRef = useRef(null);
+    /*
+      When React state changes, React often produces too many DOM updates, causing NVDA to
+      issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).
+  
+      The code below imitates a debouncing, scheduling a callback every time new React state
+      update is detected. When a callback resolves, it copies content from a muted element
+      to the live region, which is recognized by screen readers as an update.
+  
+      If the use case requires no announcement to be ignored, use delay = 0, but ensure it
+      does not impact the performance. If it does, prefer using a string as children prop.
+    */
+    useEffect(function () {
+        function updateLiveRegion() {
+            if (targetRef.current && sourceRef.current) {
+                var sourceContent = extractInnerText(sourceRef.current);
+                var targetContent = extractInnerText(targetRef.current);
+                if (targetContent !== sourceContent) {
+                    // The aria-atomic does not work properly in Voice Over, causing
+                    // certain parts of the content to be ignored. To fix that,
+                    // we assign the source text content as a single node.
+                    targetRef.current.innerText = sourceContent;
+                }
+            }
+        }
+        var timeoutId;
+        if (delay) {
+            timeoutId = setTimeout(updateLiveRegion, delay);
+        }
+        else {
+            updateLiveRegion();
+        }
+        return function () {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    });
+    return (React.createElement("div", { className: styles.root },
+        React.createElement("span", { "aria-hidden": "true" },
+            React.createElement("span", { ref: sourceRef }, children)),
+        React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' })));
+}
+// This only extracts text content from the node including all its children which is enough for now.
+// To make it more powerful, it is possible to create a more sophisticated extractor with respect to
+// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
+function extractInnerText(node) {
+    return (node.innerText || '').replace(/\s+/g, ' ').trim();
+}
+//# sourceMappingURL=index.js.map

package/internal/components/live-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAA4D;QAA1D,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA;IAC3D,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD;;;;;;;;;;MAUE;IACF,SAAS,CAAC;QACR,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO;YACL,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,6CAAkB,MAAM;YACtB,8BAAM,GAAG,EAAE,SAAS,IAAG,QAAQ,CAAQ,CAClC;QAEP,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC3F,CACP,CAAC;AACJ,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useEffect, useRef } from 'react';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps {\n  assertive?: boolean;\n  delay?: number;\n  children: React.ReactNode;\n}\n\n/**\n  The live region is hidden in the layout, but visible for screen readers.\n  It's purpose it to announce changes e.g. when custom navigation logic is used.\n\n  The way live region works differently in different browsers and screen readers and\n  it is recommended to manually test every new implementation.\n\n  If you notice there are different words being merged together,\n  check if there are text nodes not being wrapped in elements, like:\n  <LiveRegion>\n    {title}\n    <span><Details /></span>\n  </LiveRegion>\n\n  To fix, wrap \"title\" in an element:\n  <LiveRegion>\n    <span>{title}</span>\n    <span><Details /></span>\n  </LiveRegion>\n\n  Or create a single text node if possible:\n  <LiveRegion>\n    {`${title} ${details}`}\n  </LiveRegion>\n\n  The live region is always atomic, because non-atomic regions can be treated by screen readers\n  differently and produce unexpected results. To imitate non-atomic announcements simply use\n  multiple live regions:\n  <>\n    <LiveRegion>{title}</LiveRegion>\n    <LiveRegion><Details /></LiveRegion>\n  </>\n*/\nexport default memo(LiveRegion);\n\nfunction LiveRegion({ assertive = false, delay = 10, children }: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement>(null);\n  const targetRef = useRef<HTMLSpanElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function updateLiveRegion() {\n      if (targetRef.current && sourceRef.current) {\n        const sourceContent = extractInnerText(sourceRef.current);\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <div className={styles.root}>\n      <span aria-hidden=\"true\">\n        <span ref={sourceRef}>{children}</span>\n      </span>\n\n      <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n    </div>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}

package/internal/components/live-region/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_3bgfn_1yl3y_93"
+};
+  

package/internal/components/live-region/styles.scoped.css

@@ -0,0 +1,97 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_3bgfn_1yl3y_93:not(#\9) {
+  position: absolute !important;
+  top: -9999px !important;
+  left: -9999px !important;
+}

package/internal/components/live-region/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_3bgfn_1yl3y_93"
+};
+  

package/internal/components/masked-input/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import useMask from './use-mask';
+import { MaskedInputProps } from './interfaces';
+declare const MaskedInput: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<MaskedInputProps.Ref>>;
+export { MaskedInputProps, useMask };
+export default MaskedInput;
+//# sourceMappingURL=index.d.ts.map

package/internal/components/masked-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/masked-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAU9D,OAAO,OAAO,MAAM,YAAY,CAAC;AAGjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,QAAA,MAAM,WAAW,+FAkDhB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC;AACrC,eAAe,WAAW,CAAC"}

package/internal/components/masked-input/index.js

@@ -0,0 +1,45 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState, useLayoutEffect } from 'react';
+import { useMergeRefs } from '../../hooks/use-merge-refs';
+import { getBaseProps } from '../../base-component';
+import { fireCancelableEvent, fireNonCancelableEvent } from '../../events';
+import { useFormFieldContext } from '../../context/form-field-context';
+import InternalInput from '../../../input/internal';
+import useMask from './use-mask';
+import MaskFormat from './utils/mask-format';
+var MaskedInput = React.forwardRef(function (_a, ref) {
+    var value = _a.value, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, mask = _a.mask, _b = _a.autofix, autofix = _b === void 0 ? false : _b, _c = _a.disableAutocompleteOnBlur, disableAutocompleteOnBlur = _c === void 0 ? false : _c, rest = __rest(_a, ["value", "onBlur", "onChange", "onKeyDown", "mask", "autofix", "disableAutocompleteOnBlur"]);
+    var baseProps = getBaseProps(rest);
+    var formFieldContext = useFormFieldContext(rest);
+    var inputRef = React.useRef(null);
+    var _d = useState(null), cursorPosition = _d[0], setCursorPosition = _d[1];
+    useLayoutEffect(function () {
+        var _a;
+        if (cursorPosition !== null) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursorPosition, cursorPosition);
+        }
+    }, [cursorPosition, inputRef]);
+    var _e = useMask({
+        format: new MaskFormat(mask),
+        value: value,
+        inputRef: inputRef,
+        autofix: autofix,
+        disableAutocompleteOnBlur: disableAutocompleteOnBlur,
+        onChange: function (value) { return !rest.readOnly && fireNonCancelableEvent(onChange, { value: value }); },
+        onKeyDown: function (event) {
+            return !rest.readOnly && onKeyDown && fireCancelableEvent(onKeyDown, event.detail, event);
+        },
+        onBlur: function () { return fireNonCancelableEvent(onBlur); },
+        setPosition: setCursorPosition
+    }), onPaste = _e.onPaste, maskProps = __rest(_e, ["onPaste"]);
+    var inputProps = __assign(__assign(__assign(__assign({}, rest), baseProps), formFieldContext), maskProps);
+    var mergedRef = useMergeRefs(ref, inputRef);
+    return (React.createElement(InternalInput, __assign({}, inputProps, { ref: mergedRef, __nativeAttributes: {
+            onPaste: onPaste
+        } })));
+});
+export { useMask };
+export default MaskedInput;
+//# sourceMappingURL=index.js.map

package/internal/components/masked-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/masked-input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAO,QAAQ,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAE3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,aAAa,MAAM,yBAAyB,CAAC;AAEpD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAI7C,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,UACE,EASmB,EACnB,GAA8B;IAT5B,IAAA,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,iCAAiC,EAAjC,yBAAyB,mBAAG,KAAK,KAAA,EAC9B,IAAI,cART,4FASC,CADQ;IAIT,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACnD,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,IAAA,KAAsC,QAAQ,CAAgB,IAAI,CAAC,EAAlE,cAAc,QAAA,EAAE,iBAAiB,QAAiC,CAAC;IAE1E,eAAe,CAAC;;QACd,IAAI,cAAc,KAAK,IAAI,EAAE;YAC3B,MAAA,QAAQ,CAAC,OAAO,0CAAE,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;SACrE;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/B,IAAM,KAA4B,OAAO,CAAC;QACxC,MAAM,EAAE,IAAI,UAAU,CAAC,IAAI,CAAC;QAC5B,KAAK,OAAA;QACL,QAAQ,UAAA;QACR,OAAO,SAAA;QACP,yBAAyB,2BAAA;QACzB,QAAQ,EAAE,UAAC,KAAa,IAAK,OAAA,CAAC,IAAI,CAAC,QAAQ,IAAI,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAA7D,CAA6D;QAC1F,SAAS,EAAE,UAAC,KAAkB;YAC5B,OAAA,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;QAAlF,CAAkF;QACpF,MAAM,EAAE,cAAM,OAAA,sBAAsB,CAAC,MAAM,CAAC,EAA9B,CAA8B;QAC5C,WAAW,EAAE,iBAAiB;KAC/B,CAAC,EAXM,OAAO,aAAA,EAAK,SAAS,cAAvB,WAAyB,CAW7B,CAAC;IAEH,IAAM,UAAU,2CAAQ,IAAI,GAAK,SAAS,GAAK,gBAAgB,GAAK,SAAS,CAAE,CAAC;IAChF,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAC9C,OAAO,CACL,oBAAC,aAAa,eACR,UAAU,IACd,GAAG,EAAE,SAAS,EACd,kBAAkB,EAAE;YAClB,OAAO,SAAA;SACR,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAoB,OAAO,EAAE,CAAC;AACrC,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useState, useLayoutEffect } from 'react';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\n\nimport { getBaseProps } from '../../base-component';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../../events';\n\nimport { useFormFieldContext } from '../../context/form-field-context';\n\nimport InternalInput from '../../../input/internal';\n\nimport useMask from './use-mask';\nimport MaskFormat from './utils/mask-format';\n\nimport { MaskedInputProps } from './interfaces';\n\nconst MaskedInput = React.forwardRef(\n  (\n    {\n      value,\n      onBlur,\n      onChange,\n      onKeyDown,\n      mask,\n      autofix = false,\n      disableAutocompleteOnBlur = false,\n      ...rest\n    }: MaskedInputProps,\n    ref: Ref<MaskedInputProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const formFieldContext = useFormFieldContext(rest);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [cursorPosition, setCursorPosition] = useState<number | null>(null);\n\n    useLayoutEffect(() => {\n      if (cursorPosition !== null) {\n        inputRef.current?.setSelectionRange(cursorPosition, cursorPosition);\n      }\n    }, [cursorPosition, inputRef]);\n\n    const { onPaste, ...maskProps } = useMask({\n      format: new MaskFormat(mask),\n      value,\n      inputRef,\n      autofix,\n      disableAutocompleteOnBlur,\n      onChange: (value: string) => !rest.readOnly && fireNonCancelableEvent(onChange, { value }),\n      onKeyDown: (event: CustomEvent) =>\n        !rest.readOnly && onKeyDown && fireCancelableEvent(onKeyDown, event.detail, event),\n      onBlur: () => fireNonCancelableEvent(onBlur),\n      setPosition: setCursorPosition,\n    });\n\n    const inputProps = { ...rest, ...baseProps, ...formFieldContext, ...maskProps };\n    const mergedRef = useMergeRefs(ref, inputRef);\n    return (\n      <InternalInput\n        {...inputProps}\n        ref={mergedRef}\n        __nativeAttributes={{\n          onPaste,\n        }}\n      />\n    );\n  }\n);\n\nexport { MaskedInputProps, useMask };\nexport default MaskedInput;\n"]}

package/internal/components/masked-input/interfaces.d.ts

@@ -0,0 +1,29 @@
+import { BaseChangeDetail } from '../../../input/interfaces';
+import { InternalInputProps } from '../../../input/internal';
+import { BaseComponentProps } from '../../base-component';
+import { FormFieldValidationControlProps } from '../../context/form-field-context';
+import { MaskArgs } from './utils/mask-format';
+export interface MaskedInputProps extends InternalInputProps, FormFieldValidationControlProps, BaseComponentProps {
+    /**
+     * Mask config definition to describe segments and seperators
+     */
+    mask: MaskArgs;
+    /**
+     * Autofixes values provided to the Mask based on the minValue/maxValue specified in the mask.
+     */
+    autofix?: boolean;
+    /**
+     * Disable value autocompletion when input is blurred
+     */
+    disableAutocompleteOnBlur?: boolean;
+}
+export declare namespace MaskedInputProps {
+    type ChangeDetail = BaseChangeDetail;
+    interface Ref {
+        /**
+         * Sets input focus onto the UI control.
+         */
+        focus(): void;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/internal/components/masked-input/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/masked-input/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,+BAA+B,EAAE,kBAAkB;IAC/G;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,YAAY,GAAG,gBAAgB,CAAC;IAC5C,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

package/internal/components/masked-input/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/internal/components/masked-input/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/masked-input/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseChangeDetail } from '../../../input/interfaces';\nimport { InternalInputProps } from '../../../input/internal';\nimport { BaseComponentProps } from '../../base-component';\nimport { FormFieldValidationControlProps } from '../../context/form-field-context';\nimport { MaskArgs } from './utils/mask-format';\n\nexport interface MaskedInputProps extends InternalInputProps, FormFieldValidationControlProps, BaseComponentProps {\n  /**\n   * Mask config definition to describe segments and seperators\n   */\n  mask: MaskArgs;\n\n  /**\n   * Autofixes values provided to the Mask based on the minValue/maxValue specified in the mask.\n   */\n  autofix?: boolean;\n\n  /**\n   * Disable value autocompletion when input is blurred\n   */\n  disableAutocompleteOnBlur?: boolean;\n}\n\nexport namespace MaskedInputProps {\n  export type ChangeDetail = BaseChangeDetail;\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n}\n"]}

package/internal/components/masked-input/keyboard-handler.d.ts

@@ -0,0 +1,26 @@
+import MaskFormat from './utils/mask-format';
+export interface HandlerResult {
+    position: number;
+    value: string;
+}
+/**
+ * Handles character removal
+ *
+ * @param initialValue Current value of input
+ * @param format MaskFormat object
+ * @param selectionStart Starting index value of selection cursor
+ * @param selectionEnd Ending Index value of selection cursor
+ */
+export declare const backspaceHandler: (initialValue: string, format: MaskFormat, selectionStart: number, selectionEnd: number) => HandlerResult;
+/**
+ * Handle key down events
+ *
+ * @param initialValue Current value of input
+ * @param key Key that was pressed
+ * @param format MaskFormat object
+ * @param selectionStart Starting index value of selection cursor
+ * @param selectionEnd Ending Index value of selection cursor
+ */
+export declare const keyHandler: (initialValue: string, key: string, format: MaskFormat, selectionStart: number, selectionEnd: number) => HandlerResult;
+export declare const enterHandler: (value: string, format: MaskFormat) => HandlerResult;
+//# sourceMappingURL=keyboard-handler.d.ts.map

package/internal/components/masked-input/keyboard-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-handler.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/masked-input/keyboard-handler.ts"],"names":[],"mappings":"AAEA,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAE7C,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,iBACb,MAAM,UACZ,UAAU,kBACF,MAAM,gBACR,MAAM,KACnB,aAoCF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,iBACP,MAAM,OACf,MAAM,UACH,UAAU,kBACF,MAAM,gBACR,MAAM,KACnB,aAoBF,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,UAAU,UAAU,KAAG,aAIhE,CAAC"}