@cloudscape-design/components-themeable 3.0.1238 → 3.0.1240

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  3. package/lib/internal/template/app-layout/index.d.ts.map +1 -1
  4. package/lib/internal/template/app-layout/index.js +3 -15
  5. package/lib/internal/template/app-layout/index.js.map +1 -1
  6. package/lib/internal/template/app-layout/utils/use-aria-labels.d.ts +3 -0
  7. package/lib/internal/template/app-layout/utils/use-aria-labels.d.ts.map +1 -0
  8. package/lib/internal/template/app-layout/utils/use-aria-labels.js +19 -0
  9. package/lib/internal/template/app-layout/utils/use-aria-labels.js.map +1 -0
  10. package/lib/internal/template/app-layout/visual-refresh-toolbar/index.d.ts.map +1 -1
  11. package/lib/internal/template/app-layout/visual-refresh-toolbar/index.js +17 -9
  12. package/lib/internal/template/app-layout/visual-refresh-toolbar/index.js.map +1 -1
  13. package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.d.ts +1 -0
  14. package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.d.ts.map +1 -1
  15. package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.js +1 -0
  16. package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.js.map +1 -1
  17. package/lib/internal/template/app-layout-toolbar/index.d.ts.map +1 -1
  18. package/lib/internal/template/app-layout-toolbar/index.js +1 -16
  19. package/lib/internal/template/app-layout-toolbar/index.js.map +1 -1
  20. package/lib/internal/template/attribute-editor/internal.d.ts.map +1 -1
  21. package/lib/internal/template/attribute-editor/internal.js +7 -1
  22. package/lib/internal/template/attribute-editor/internal.js.map +1 -1
  23. package/lib/internal/template/button/index.d.ts.map +1 -1
  24. package/lib/internal/template/button/index.js +2 -2
  25. package/lib/internal/template/button/index.js.map +1 -1
  26. package/lib/internal/template/button/interfaces.d.ts +4 -0
  27. package/lib/internal/template/button/interfaces.d.ts.map +1 -1
  28. package/lib/internal/template/button/interfaces.js.map +1 -1
  29. package/lib/internal/template/button/internal.d.ts.map +1 -1
  30. package/lib/internal/template/button/internal.js +2 -1
  31. package/lib/internal/template/button/internal.js.map +1 -1
  32. package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
  33. package/lib/internal/template/button-dropdown/internal.js +2 -4
  34. package/lib/internal/template/button-dropdown/internal.js.map +1 -1
  35. package/lib/internal/template/i18n/dynamic.js +1 -1
  36. package/lib/internal/template/i18n/provider.d.ts +4 -12
  37. package/lib/internal/template/i18n/provider.d.ts.map +1 -1
  38. package/lib/internal/template/i18n/provider.js +4 -106
  39. package/lib/internal/template/i18n/provider.js.map +1 -1
  40. package/lib/internal/template/i18n/providers/local-provider.d.ts +9 -0
  41. package/lib/internal/template/i18n/providers/local-provider.d.ts.map +1 -0
  42. package/lib/internal/template/i18n/providers/local-provider.js +56 -0
  43. package/lib/internal/template/i18n/providers/local-provider.js.map +1 -0
  44. package/lib/internal/template/i18n/providers/remote-provider.d.ts +24 -0
  45. package/lib/internal/template/i18n/providers/remote-provider.d.ts.map +1 -0
  46. package/lib/internal/template/i18n/providers/remote-provider.js +42 -0
  47. package/lib/internal/template/i18n/providers/remote-provider.js.map +1 -0
  48. package/lib/internal/template/i18n/utils/i18n-formatter.d.ts +30 -0
  49. package/lib/internal/template/i18n/utils/i18n-formatter.d.ts.map +1 -0
  50. package/lib/internal/template/i18n/utils/i18n-formatter.js +61 -0
  51. package/lib/internal/template/i18n/utils/i18n-formatter.js.map +1 -0
  52. package/lib/internal/template/i18n/utils/locales.d.ts +3 -0
  53. package/lib/internal/template/i18n/utils/locales.d.ts.map +1 -0
  54. package/lib/internal/template/i18n/utils/locales.js +28 -0
  55. package/lib/internal/template/i18n/utils/locales.js.map +1 -0
  56. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  57. package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
  58. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js +4 -2
  59. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map +1 -1
  60. package/lib/internal/template/internal/environment.js +2 -2
  61. package/lib/internal/template/internal/environment.json +2 -2
  62. package/lib/internal/template/internal/widget-exports.d.ts +1 -0
  63. package/lib/internal/template/internal/widget-exports.d.ts.map +1 -1
  64. package/lib/internal/template/internal/widget-exports.js +2 -0
  65. package/lib/internal/template/internal/widget-exports.js.map +1 -1
  66. package/package.json +1 -1
  67. package/lib/internal/template/i18n/get-matchable-locales.d.ts +0 -2
  68. package/lib/internal/template/i18n/get-matchable-locales.d.ts.map +0 -1
  69. package/lib/internal/template/i18n/get-matchable-locales.js +0 -14
  70. package/lib/internal/template/i18n/get-matchable-locales.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"local-provider.js","sourceRoot":"","sources":["../../../../src/i18n/providers/local-provider.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useContext } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalI18nContext } from '../context';\nimport { I18nFormatter, I18nMessages } from '../utils/i18n-formatter';\nimport { determineAppLocale } from '../utils/locales';\n\nexport interface LocalI18nProviderProps {\n messages: ReadonlyArray<I18nMessages>;\n locale?: string;\n children: React.ReactNode;\n}\n\n/**\n * Context to send parent messages down to child I18nProviders. This isn't\n * included in the InternalI18nContext to avoid components from depending on\n * MessageFormatElement types.\n */\nconst I18nMessagesContext = React.createContext<I18nMessages>({});\n\nexport function LocalI18nProvider({\n messages: messagesArray,\n locale: providedLocale,\n children,\n}: LocalI18nProviderProps) {\n if (typeof document === 'undefined' && !providedLocale) {\n warnOnce(\n 'I18nProvider',\n 'An explicit locale was not provided during server rendering. This can lead to a hydration mismatch on the client.'\n );\n }\n\n const locale = determineAppLocale(providedLocale);\n\n // The provider accepts an array of configs. We merge parent messages and\n // flatten the tree early on so that accesses by key are simpler and faster.\n const parentMessages = useContext(I18nMessagesContext);\n const messages = mergeMessages([parentMessages, ...messagesArray]);\n\n // The formatter is recreated on every render to ensure it has access to the\n // latest messages. This is a trade-off between performance and correctness.\n // In practice, this should only happen when the messages change, which is\n // infrequent.\n const formatter = new I18nFormatter(locale, messages);\n\n return (\n <InternalI18nContext.Provider value={{ locale, format: formatter.format.bind(formatter) }}>\n <I18nMessagesContext.Provider value={messages}>{children}</I18nMessagesContext.Provider>\n </InternalI18nContext.Provider>\n );\n}\n\nfunction mergeMessages(sources: ReadonlyArray<I18nMessages>): I18nMessages {\n const result: I18nMessages = {};\n for (const messages of sources) {\n for (const namespace in messages) {\n if (!(namespace in result)) {\n result[namespace] = {};\n }\n for (const casedLocale in messages[namespace]) {\n const locale = casedLocale.toLowerCase();\n if (!(locale in result[namespace])) {\n result[namespace][locale] = {};\n }\n for (const component in messages[namespace][casedLocale]) {\n if (!(component in result[namespace][locale])) {\n result[namespace][locale][component] = {};\n }\n for (const key in messages[namespace][casedLocale][component]) {\n result[namespace][locale][component][key] = messages[namespace][casedLocale][component][key];\n }\n }\n }\n }\n }\n return result;\n}\n"]}
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { FormatFunction } from '../context';
3
+ interface I18nFormatterInterface {
4
+ format: FormatFunction;
5
+ }
6
+ export interface RemoteI18nProviderProps {
7
+ /**
8
+ * A format function, loaded dynamically from the result of this callback. If
9
+ * the callback returns null, it means that the provider isn't available for
10
+ * whatever reason, and nothing happens.
11
+ */
12
+ loadFormatter: (args: {
13
+ locale: string;
14
+ }) => Promise<I18nFormatterInterface | null>;
15
+ children: React.ReactNode;
16
+ }
17
+ /**
18
+ * A lightweight implementation of the I18nProvider context wrapper that expects both the
19
+ * messages and the formatting logic to be provided from a remote source. Explicitly does
20
+ * nothing if it's wrapped by a LocalI18nProvider.
21
+ */
22
+ export default function RemoteI18nProvider({ loadFormatter, children }: RemoteI18nProviderProps): JSX.Element;
23
+ export {};
24
+ //# sourceMappingURL=remote-provider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"remote-provider.d.ts","sourceRoot":"","sources":["../../../../src/i18n/providers/remote-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAuB,MAAM,YAAY,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;IAEpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,uBAAuB,eA+B9F"}
@@ -0,0 +1,42 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import React, { useContext, useEffect, useState } from 'react';
4
+ // NOTE: Ensure that direct or transitive dependencies never pull in
5
+ // intl-messageformat or any `@formatjs` dependencies! Otherwise, it
6
+ // would harm any bundle size improvements this component brings.
7
+ import { InternalI18nContext } from '../context';
8
+ import { determineAppLocale } from '../utils/locales';
9
+ /**
10
+ * A lightweight implementation of the I18nProvider context wrapper that expects both the
11
+ * messages and the formatting logic to be provided from a remote source. Explicitly does
12
+ * nothing if it's wrapped by a LocalI18nProvider.
13
+ */
14
+ export default function RemoteI18nProvider({ loadFormatter, children }) {
15
+ const wrapperContext = useContext(InternalI18nContext);
16
+ const [formatFunction, setFormatFunction] = useState();
17
+ // Ensure that every dependency of the effect below can never change.
18
+ // The locale comes from the document, and the formatter only depends on that,
19
+ // so it should never need to update either.
20
+ const hasWrapperContext = !!wrapperContext;
21
+ const [locale] = useState(() => determineAppLocale());
22
+ const [staticLoadFormatter] = useState(() => loadFormatter);
23
+ useEffect(() => {
24
+ // Translations are already provided from a local provider, so skip.
25
+ if (hasWrapperContext) {
26
+ return;
27
+ }
28
+ staticLoadFormatter({ locale })
29
+ .then(formatter => {
30
+ if (formatter) {
31
+ setFormatFunction(() => formatter.format.bind(formatter));
32
+ }
33
+ // If formatter isn't available, do nothing.
34
+ })
35
+ .catch(() => {
36
+ // Do nothing. Failure in fetching the formatter should not be fatal.
37
+ });
38
+ }, [hasWrapperContext, locale, staticLoadFormatter]);
39
+ const value = wrapperContext || (formatFunction && { locale, format: formatFunction });
40
+ return React.createElement(InternalI18nContext.Provider, { value: value }, children);
41
+ }
42
+ //# sourceMappingURL=remote-provider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"remote-provider.js","sourceRoot":"","sources":["../../../../src/i18n/providers/remote-provider.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,oEAAoE;AACpE,oEAAoE;AACpE,iEAAiE;AACjE,OAAO,EAAkB,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAiBtD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,aAAa,EAAE,QAAQ,EAA2B;IAC7F,MAAM,cAAc,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAA8B,CAAC;IAEnF,qEAAqE;IACrE,8EAA8E;IAC9E,4CAA4C;IAC5C,MAAM,iBAAiB,GAAG,CAAC,CAAC,cAAc,CAAC;IAC3C,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,oEAAoE;QACpE,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;aAC5B,IAAI,CAAC,SAAS,CAAC,EAAE;YAChB,IAAI,SAAS,EAAE,CAAC;gBACd,iBAAiB,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;YAC5D,CAAC;YACD,4CAA4C;QAC9C,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,qEAAqE;QACvE,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAErD,MAAM,KAAK,GAAG,cAAc,IAAI,CAAC,cAAc,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC,CAAC;IACvF,OAAO,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAgC,CAAC;AAC/F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useEffect, useState } from 'react';\n\n// NOTE: Ensure that direct or transitive dependencies never pull in\n// intl-messageformat or any `@formatjs` dependencies! Otherwise, it\n// would harm any bundle size improvements this component brings.\nimport { FormatFunction, InternalI18nContext } from '../context';\nimport { determineAppLocale } from '../utils/locales';\n\ninterface I18nFormatterInterface {\n format: FormatFunction;\n}\n\nexport interface RemoteI18nProviderProps {\n /**\n * A format function, loaded dynamically from the result of this callback. If\n * the callback returns null, it means that the provider isn't available for\n * whatever reason, and nothing happens.\n */\n loadFormatter: (args: { locale: string }) => Promise<I18nFormatterInterface | null>;\n\n children: React.ReactNode;\n}\n\n/**\n * A lightweight implementation of the I18nProvider context wrapper that expects both the\n * messages and the formatting logic to be provided from a remote source. Explicitly does\n * nothing if it's wrapped by a LocalI18nProvider.\n */\nexport default function RemoteI18nProvider({ loadFormatter, children }: RemoteI18nProviderProps) {\n const wrapperContext = useContext(InternalI18nContext);\n const [formatFunction, setFormatFunction] = useState<FormatFunction | undefined>();\n\n // Ensure that every dependency of the effect below can never change.\n // The locale comes from the document, and the formatter only depends on that,\n // so it should never need to update either.\n const hasWrapperContext = !!wrapperContext;\n const [locale] = useState(() => determineAppLocale());\n const [staticLoadFormatter] = useState(() => loadFormatter);\n\n useEffect(() => {\n // Translations are already provided from a local provider, so skip.\n if (hasWrapperContext) {\n return;\n }\n\n staticLoadFormatter({ locale })\n .then(formatter => {\n if (formatter) {\n setFormatFunction(() => formatter.format.bind(formatter));\n }\n // If formatter isn't available, do nothing.\n })\n .catch(() => {\n // Do nothing. Failure in fetching the formatter should not be fatal.\n });\n }, [hasWrapperContext, locale, staticLoadFormatter]);\n\n const value = wrapperContext || (formatFunction && { locale, format: formatFunction });\n return <InternalI18nContext.Provider value={value}>{children}</InternalI18nContext.Provider>;\n}\n"]}
@@ -0,0 +1,30 @@
1
+ import { MessageFormatElement } from '@formatjs/icu-messageformat-parser';
2
+ import { CustomHandler } from '../context';
3
+ /**
4
+ * The expected shape of the fully resolved messages object.
5
+ * Typescript ensures any static imports are properly typed, but since this
6
+ * depends on types from formatjs, it should not be included in any files that
7
+ * need to support older versions of TypeScript (3.7 and up).
8
+ */
9
+ export interface I18nMessages {
10
+ [namespace: string]: {
11
+ [locale: string]: {
12
+ [component: string]: {
13
+ [key: string]: string | MessageFormatElement[];
14
+ };
15
+ };
16
+ };
17
+ }
18
+ /**
19
+ * A stateful container for formatting internal strings. Caches formatters
20
+ * where possible; a new instance must be created if locale or messages may
21
+ * have changed.
22
+ */
23
+ export declare class I18nFormatter {
24
+ private _locale;
25
+ private _messages;
26
+ private _localeFormatterCache;
27
+ constructor(locale: string, messages: I18nMessages);
28
+ format<ReturnValue, FormatFnArgs extends Record<string, string | number>>(namespace: string, component: string, key: string, provided: ReturnValue, customHandler?: CustomHandler<ReturnValue, FormatFnArgs>): ReturnValue;
29
+ }
30
+ //# sourceMappingURL=i18n-formatter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"i18n-formatter.d.ts","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAG1E,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,SAAS,EAAE,MAAM,GAAG;QACnB,CAAC,MAAM,EAAE,MAAM,GAAG;YAChB,CAAC,SAAS,EAAE,MAAM,GAAG;gBACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,oBAAoB,EAAE,CAAC;aAChD,CAAC;SACH,CAAC;KACH,CAAC;CACH;AAED;;;;GAIG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAe;IAMhC,OAAO,CAAC,qBAAqB,CAAwC;gBAEzD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY;IAKlD,MAAM,CAAC,WAAW,EAAE,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EACtE,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,WAAW,EACrB,aAAa,CAAC,EAAE,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,GACvD,WAAW;CA2Cf"}
@@ -0,0 +1,61 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import IntlMessageFormat from 'intl-messageformat';
4
+ import { getMatchableLocales } from './locales';
5
+ /**
6
+ * A stateful container for formatting internal strings. Caches formatters
7
+ * where possible; a new instance must be created if locale or messages may
8
+ * have changed.
9
+ */
10
+ export class I18nFormatter {
11
+ constructor(locale, messages) {
12
+ // Create a per-render cache of messages and IntlMessageFormat instances.
13
+ // Not memoizing it allows us to reset the cache when the component rerenders
14
+ // with potentially different locale or messages. We expect this component to
15
+ // be placed above AppLayout and therefore rerender very infrequently.
16
+ this._localeFormatterCache = new Map();
17
+ this._locale = locale;
18
+ this._messages = messages;
19
+ }
20
+ format(namespace, component, key, provided, customHandler) {
21
+ var _a, _b, _c, _d;
22
+ // A general rule in this library is that undefined is basically
23
+ // treated as "not provided". So even if a user explicitly provides an
24
+ // undefined value, it will default to i18n provider values.
25
+ if (provided !== undefined) {
26
+ return provided;
27
+ }
28
+ const cacheKey = `${namespace}.${component}.${key}`;
29
+ let intlMessageFormat;
30
+ const cachedFormatter = this._localeFormatterCache.get(cacheKey);
31
+ if (cachedFormatter) {
32
+ // If an IntlMessageFormat instance was cached for this locale, just use that.
33
+ intlMessageFormat = cachedFormatter;
34
+ }
35
+ else {
36
+ // Widen the locale string (e.g. en-GB -> en) until we find a locale
37
+ // that contains the message we need.
38
+ let message;
39
+ const matchableLocales = getMatchableLocales(this._locale);
40
+ for (const matchableLocale of matchableLocales) {
41
+ message = (_d = (_c = (_b = (_a = this._messages) === null || _a === void 0 ? void 0 : _a[namespace]) === null || _b === void 0 ? void 0 : _b[matchableLocale]) === null || _c === void 0 ? void 0 : _c[component]) === null || _d === void 0 ? void 0 : _d[key];
42
+ if (message !== undefined) {
43
+ break;
44
+ }
45
+ }
46
+ // If a message wasn't found, exit early.
47
+ if (message === undefined) {
48
+ return provided;
49
+ }
50
+ // Lazily create an IntlMessageFormat object for this key.
51
+ intlMessageFormat = new IntlMessageFormat(message, this._locale);
52
+ this._localeFormatterCache.set(cacheKey, intlMessageFormat);
53
+ }
54
+ if (customHandler) {
55
+ return customHandler(args => intlMessageFormat.format(args));
56
+ }
57
+ // Assuming `ReturnValue extends string` since a customHandler wasn't provided.
58
+ return intlMessageFormat.format();
59
+ }
60
+ }
61
+ //# sourceMappingURL=i18n-formatter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"i18n-formatter.js","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAkBhD;;;;GAIG;AACH,MAAM,OAAO,aAAa;IAUxB,YAAY,MAAc,EAAE,QAAsB;QANlD,yEAAyE;QACzE,6EAA6E;QAC7E,6EAA6E;QAC7E,sEAAsE;QAC9D,0BAAqB,GAAG,IAAI,GAAG,EAA6B,CAAC;QAGnE,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC5B,CAAC;IAED,MAAM,CACJ,SAAiB,EACjB,SAAiB,EACjB,GAAW,EACX,QAAqB,EACrB,aAAwD;;QAExD,gEAAgE;QAChE,sEAAsE;QACtE,4DAA4D;QAC5D,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO,QAAQ,CAAC;QAClB,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,SAAS,IAAI,SAAS,IAAI,GAAG,EAAE,CAAC;QACpD,IAAI,iBAAoC,CAAC;QAEzC,MAAM,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACjE,IAAI,eAAe,EAAE,CAAC;YACpB,8EAA8E;YAC9E,iBAAiB,GAAG,eAAe,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,oEAAoE;YACpE,qCAAqC;YACrC,IAAI,OAAoD,CAAC;YACzD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3D,KAAK,MAAM,eAAe,IAAI,gBAAgB,EAAE,CAAC;gBAC/C,OAAO,GAAG,MAAA,MAAA,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAG,SAAS,CAAC,0CAAG,eAAe,CAAC,0CAAG,SAAS,CAAC,0CAAG,GAAG,CAAC,CAAC;gBAC7E,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;oBAC1B,MAAM;gBACR,CAAC;YACH,CAAC;YAED,yCAAyC;YACzC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC1B,OAAO,QAAQ,CAAC;YAClB,CAAC;YAED,0DAA0D;YAC1D,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACjE,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;QAC9D,CAAC;QAED,IAAI,aAAa,EAAE,CAAC;YAClB,OAAO,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAW,CAAC,CAAC;QACzE,CAAC;QACD,+EAA+E;QAC/E,OAAO,iBAAiB,CAAC,MAAM,EAAiB,CAAC;IACnD,CAAC;CACF","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { MessageFormatElement } from '@formatjs/icu-messageformat-parser';\nimport IntlMessageFormat from 'intl-messageformat';\n\nimport { CustomHandler } from '../context';\nimport { getMatchableLocales } from './locales';\n\n/**\n * The expected shape of the fully resolved messages object.\n * Typescript ensures any static imports are properly typed, but since this\n * depends on types from formatjs, it should not be included in any files that\n * need to support older versions of TypeScript (3.7 and up).\n */\nexport interface I18nMessages {\n [namespace: string]: {\n [locale: string]: {\n [component: string]: {\n [key: string]: string | MessageFormatElement[];\n };\n };\n };\n}\n\n/**\n * A stateful container for formatting internal strings. Caches formatters\n * where possible; a new instance must be created if locale or messages may\n * have changed.\n */\nexport class I18nFormatter {\n private _locale: string;\n private _messages: I18nMessages;\n\n // Create a per-render cache of messages and IntlMessageFormat instances.\n // Not memoizing it allows us to reset the cache when the component rerenders\n // with potentially different locale or messages. We expect this component to\n // be placed above AppLayout and therefore rerender very infrequently.\n private _localeFormatterCache = new Map<string, IntlMessageFormat>();\n\n constructor(locale: string, messages: I18nMessages) {\n this._locale = locale;\n this._messages = messages;\n }\n\n format<ReturnValue, FormatFnArgs extends Record<string, string | number>>(\n namespace: string,\n component: string,\n key: string,\n provided: ReturnValue,\n customHandler?: CustomHandler<ReturnValue, FormatFnArgs>\n ): ReturnValue {\n // A general rule in this library is that undefined is basically\n // treated as \"not provided\". So even if a user explicitly provides an\n // undefined value, it will default to i18n provider values.\n if (provided !== undefined) {\n return provided;\n }\n\n const cacheKey = `${namespace}.${component}.${key}`;\n let intlMessageFormat: IntlMessageFormat;\n\n const cachedFormatter = this._localeFormatterCache.get(cacheKey);\n if (cachedFormatter) {\n // If an IntlMessageFormat instance was cached for this locale, just use that.\n intlMessageFormat = cachedFormatter;\n } else {\n // Widen the locale string (e.g. en-GB -> en) until we find a locale\n // that contains the message we need.\n let message: string | MessageFormatElement[] | undefined;\n const matchableLocales = getMatchableLocales(this._locale);\n for (const matchableLocale of matchableLocales) {\n message = this._messages?.[namespace]?.[matchableLocale]?.[component]?.[key];\n if (message !== undefined) {\n break;\n }\n }\n\n // If a message wasn't found, exit early.\n if (message === undefined) {\n return provided;\n }\n\n // Lazily create an IntlMessageFormat object for this key.\n intlMessageFormat = new IntlMessageFormat(message, this._locale);\n this._localeFormatterCache.set(cacheKey, intlMessageFormat);\n }\n\n if (customHandler) {\n return customHandler(args => intlMessageFormat.format(args) as string);\n }\n // Assuming `ReturnValue extends string` since a customHandler wasn't provided.\n return intlMessageFormat.format() as ReturnValue;\n }\n}\n"]}
@@ -0,0 +1,3 @@
1
+ export declare function getMatchableLocales(ietfLanguageTag: string): string[];
2
+ export declare function determineAppLocale(providedLocale?: string): string;
3
+ //# sourceMappingURL=locales.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../../../../src/i18n/utils/locales.ts"],"names":[],"mappings":"AAGA,wBAAgB,mBAAmB,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,EAAE,CAWrE;AAED,wBAAgB,kBAAkB,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAelE"}
@@ -0,0 +1,28 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ export function getMatchableLocales(ietfLanguageTag) {
4
+ const parts = ietfLanguageTag.split('-');
5
+ if (parts.length === 1) {
6
+ return [ietfLanguageTag];
7
+ }
8
+ const localeStrings = [];
9
+ for (let i = parts.length; i > 0; i--) {
10
+ localeStrings.push(parts.slice(0, i).join('-'));
11
+ }
12
+ return localeStrings;
13
+ }
14
+ export function determineAppLocale(providedLocale) {
15
+ // If a locale is explicitly provided, use the string directly.
16
+ // Locales have a recommended case, but are matched case-insensitively,
17
+ // so we lowercase it internally.
18
+ if (providedLocale) {
19
+ return providedLocale.toLowerCase();
20
+ }
21
+ if (typeof document !== 'undefined' && document.documentElement.lang) {
22
+ // Otherwise, use the value provided in the HTML tag.
23
+ return document.documentElement.lang.toLowerCase();
24
+ }
25
+ // Lastly, fall back to English.
26
+ return 'en';
27
+ }
28
+ //# sourceMappingURL=locales.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"locales.js","sourceRoot":"","sources":["../../../../src/i18n/utils/locales.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,mBAAmB,CAAC,eAAuB;IACzD,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,aAAa,GAAa,EAAE,CAAC;IACnC,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAClD,CAAC;IACD,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,cAAuB;IACxD,+DAA+D;IAC/D,uEAAuE;IACvE,iCAAiC;IACjC,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,cAAc,CAAC,WAAW,EAAE,CAAC;IACtC,CAAC;IAED,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QACrE,qDAAqD;QACrD,OAAO,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrD,CAAC;IAED,gCAAgC;IAChC,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function getMatchableLocales(ietfLanguageTag: string): string[] {\n const parts = ietfLanguageTag.split('-');\n if (parts.length === 1) {\n return [ietfLanguageTag];\n }\n\n const localeStrings: string[] = [];\n for (let i = parts.length; i > 0; i--) {\n localeStrings.push(parts.slice(0, i).join('-'));\n }\n return localeStrings;\n}\n\nexport function determineAppLocale(providedLocale?: string): string {\n // If a locale is explicitly provided, use the string directly.\n // Locales have a recommended case, but are matched case-insensitively,\n // so we lowercase it internally.\n if (providedLocale) {\n return providedLocale.toLowerCase();\n }\n\n if (typeof document !== 'undefined' && document.documentElement.lang) {\n // Otherwise, use the value provided in the HTML tag.\n return document.documentElement.lang.toLowerCase();\n }\n\n // Lastly, fall back to English.\n return 'en';\n}\n"]}
@@ -3816,5 +3816,5 @@ body {
3816
3816
  }
3817
3817
  }
3818
3818
  :root {
3819
- --awsui-version-info-7d1f3038: true;
3819
+ --awsui-version-info-41acf98e: true;
3820
3820
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAkPxB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAoPxB"}
@@ -138,7 +138,9 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
138
138
  // The position needs to be recalculated as the element may animate into its final position.
139
139
  useEffect(() => {
140
140
  if (!showButtons || !dragHandleRef.current) {
141
- setForcedPosition(null);
141
+ if (forcedPosition !== null) {
142
+ setForcedPosition(null);
143
+ }
142
144
  return;
143
145
  }
144
146
  let frameId;
@@ -166,7 +168,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
166
168
  return () => {
167
169
  cancelAnimationFrame(frameId);
168
170
  };
169
- }, [showButtons, visibleDirections]);
171
+ }, [forcedPosition, showButtons, visibleDirections]);
170
172
  return (React.createElement(React.Fragment, null,
171
173
  React.createElement("div", { className: clsx(testUtilsStyles.root, styles.contents), ref: wrapperRef, onFocus: onWrapperFocusIn, onBlur: onWrapperFocusOut },
172
174
  React.createElement("div", { className: styles.contents, onPointerEnter: onTooltipGroupPointerEnter, onPointerLeave: onTooltipGroupPointerLeave },
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// The UAP buttons are forced to top/bottom position if the handle is close to the screen edge.\nconst FORCED_POSITION_PROXIMITY_PX = 50;\n// Approximate UAP button size with margins to decide forced direction.\nconst UAP_BUTTON_SIZE_PX = 40;\nconst DIRECTIONS_ORDER: Direction[] = ['block-end', 'block-start', 'inline-end', 'inline-start'];\n\nexport default function DragHandleWrapper({\n directions,\n tooltipText,\n children,\n onDirectionClick,\n triggerMode = 'focus',\n initialShowButtons = false,\n controlledShowButtons = false,\n wrapperClassName,\n hideButtonsOnDrag,\n clickDragThreshold,\n}: DragHandleWrapperProps) {\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [uncontrolledShowButtons, setUncontrolledShowButtons] = useState(initialShowButtons);\n\n const isPointerDown = useRef(false);\n const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n const didPointerDrag = useRef(false);\n\n // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n // on the handle wouldn't do anything.\n const isDisabled =\n !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n const onWrapperFocusIn: React.FocusEventHandler = event => {\n // The drag handle is focused when it's either tabbed to, or the pointer\n // is pressed on it. We exclude handling the pointer press in this handler,\n // since it could be the start of a drag event - the pointer stuff is\n // handled in the \"pointerup\" listener instead. In cases where focus is moved\n // to the button (by manually calling `.focus()`), the buttons should only appear\n // if the action that triggered the focus move was the result of a keypress.\n if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n setShowTooltip(false);\n if (triggerMode === 'focus') {\n setUncontrolledShowButtons(true);\n }\n }\n };\n\n const onWrapperFocusOut: React.FocusEventHandler = event => {\n // Close the directional buttons when the focus leaves the drag handle.\n // \"focusout\" is also triggered when the user switches to another tab, but\n // since it'll be returned when they switch back anyway, we exclude that\n // case by checking for `document.hasFocus()`.\n if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n setUncontrolledShowButtons(false);\n }\n };\n\n useEffect(() => {\n const controller = new AbortController();\n\n // We need to differentiate between a \"click\" and a \"drag\" action.\n // We can say a \"click\" happens when a \"pointerdown\" is followed by\n // a \"pointerup\" with no \"pointermove\" between the two.\n // However, it would be a poor usability experience if a \"click\" isn't\n // registered because, while pressing my mouse, I moved it by just one\n // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n // `clickDragThreshold` pixels before setting `didPointerDrag` to true.\n document.addEventListener(\n 'pointermove',\n event => {\n if (\n isPointerDown.current &&\n initialPointerPosition.current &&\n (event.clientX > initialPointerPosition.current.x + clickDragThreshold ||\n event.clientX < initialPointerPosition.current.x - clickDragThreshold ||\n event.clientY > initialPointerPosition.current.y + clickDragThreshold ||\n event.clientY < initialPointerPosition.current.y - clickDragThreshold)\n ) {\n didPointerDrag.current = true;\n if (hideButtonsOnDrag) {\n setUncontrolledShowButtons(false);\n }\n }\n },\n { signal: controller.signal }\n );\n\n // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n // can be called for both \"pointercancel\" and \"pointerup\" events.\n const resetPointerDownState = () => {\n isPointerDown.current = false;\n initialPointerPosition.current = undefined;\n };\n\n document.addEventListener(\n 'pointercancel',\n () => {\n resetPointerDownState();\n },\n { signal: controller.signal }\n );\n\n document.addEventListener(\n 'pointerup',\n () => {\n if (isPointerDown.current && !didPointerDrag.current) {\n // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n // Handle this as a \"click\" instead of a \"drag\".\n setUncontrolledShowButtons(true);\n }\n resetPointerDownState();\n },\n { signal: controller.signal }\n );\n\n return () => controller.abort();\n }, [clickDragThreshold, hideButtonsOnDrag]);\n\n const onHandlePointerDown: React.PointerEventHandler = event => {\n // Tooltip behavior: the tooltip should appear on hover, but disappear when\n // the pointer starts dragging (having the tooltip get in the way while\n // you're trying to drag upwards is annoying). Additionally, the tooltip\n // shouldn't reappear when dragging ends, but only when the pointer leaves\n // the drag handle and comes back.\n\n isPointerDown.current = true;\n didPointerDrag.current = false;\n initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n setShowTooltip(false);\n };\n\n // Tooltip behavior: the tooltip should stay open when the cursor moves\n // from the drag handle into the tooltip content itself. This is why the\n // handler is set on the wrapper for both the drag handle and the tooltip.\n const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n if (!isPointerDown.current) {\n setShowTooltip(true);\n }\n };\n const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n setShowTooltip(false);\n };\n\n const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n // For accessibility reasons, pressing escape should always close the floating controls.\n if (event.key === 'Escape') {\n setUncontrolledShowButtons(false);\n } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n setUncontrolledShowButtons(prevShowButtons => !prevShowButtons);\n } else if (\n event.key !== 'Alt' &&\n event.key !== 'Control' &&\n event.key !== 'Meta' &&\n event.key !== 'Shift' &&\n triggerMode === 'focus'\n ) {\n // Pressing any other key will display the focus-visible ring around the\n // drag handle if it's in focus, so we should also show the buttons now.\n setUncontrolledShowButtons(true);\n }\n };\n\n const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;\n\n const [forcedPosition, setForcedPosition] = useState<null | 'top' | 'bottom'>(null);\n const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;\n const visibleDirections = directionsOrder.filter(dir => directions[dir]);\n\n // Continuously monitor position while buttons are shown to handle CSS transitions/animations.\n // The position needs to be recalculated as the element may animate into its final position.\n useEffect(() => {\n if (!showButtons || !dragHandleRef.current) {\n setForcedPosition(null);\n return;\n }\n\n let frameId: number;\n\n const checkPosition = () => {\n if (!dragHandleRef.current) {\n return;\n }\n const rect = getLogicalBoundingClientRect(dragHandleRef.current);\n const conflicts = {\n 'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,\n 'block-end': window.innerHeight - rect.insetBlockEnd < FORCED_POSITION_PROXIMITY_PX,\n 'inline-start': rect.insetInlineStart < FORCED_POSITION_PROXIMITY_PX,\n 'inline-end': window.innerWidth - rect.insetInlineEnd < FORCED_POSITION_PROXIMITY_PX,\n };\n if (visibleDirections.some(direction => conflicts[direction])) {\n const hasEnoughSpaceAbove = rect.insetBlockStart > visibleDirections.length * UAP_BUTTON_SIZE_PX;\n setForcedPosition(hasEnoughSpaceAbove ? 'top' : 'bottom');\n } else {\n setForcedPosition(null);\n }\n frameId = requestAnimationFrame(checkPosition);\n };\n\n frameId = requestAnimationFrame(checkPosition);\n\n return () => {\n cancelAnimationFrame(frameId);\n };\n }, [showButtons, visibleDirections]);\n\n return (\n <>\n {/* Wrapper for focus detection. The buttons are shown when any element inside this wrapper is\n focused, either via the keyboard or a pointer press. The UAP buttons will never receive focus. */}\n <div\n className={clsx(testUtilsStyles.root, styles.contents)}\n ref={wrapperRef}\n onFocus={onWrapperFocusIn}\n onBlur={onWrapperFocusOut}\n >\n {/* Wrapper for pointer detection. Determines whether or not the tooltip should be shown. */}\n <div\n className={styles.contents}\n onPointerEnter={onTooltipGroupPointerEnter}\n onPointerLeave={onTooltipGroupPointerLeave}\n >\n {/* Position tracking wrapper used to position the tooltip and drag buttons accurately.\n Its dimensions must match the inner button's dimensions. */}\n <div\n className={clsx(styles['drag-handle'], wrapperClassName)}\n ref={dragHandleRef}\n onPointerDown={onHandlePointerDown}\n onKeyDown={onDragHandleKeyDown}\n >\n {children}\n </div>\n\n {!isDisabled && !showButtons && showTooltip && tooltipText && (\n // Rendered in a portal but pointerenter/pointerleave events still propagate\n // up the React DOM tree, which is why it's placed in this nested context.\n <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n )}\n </div>\n </div>\n\n <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n {visibleDirections.map(\n (direction, index) =>\n directions[direction] && (\n <DirectionButton\n key={direction}\n show={!isDisabled && showButtons}\n direction={direction}\n state={directions[direction]}\n onClick={() => onDirectionClick?.(direction)}\n forcedPosition={forcedPosition}\n forcedIndex={index}\n />\n )\n )}\n </PortalOverlay>\n </>\n );\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,+FAA+F;AAC/F,MAAM,4BAA4B,GAAG,EAAE,CAAC;AACxC,uEAAuE;AACvE,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,gBAAgB,GAAgB,CAAC,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAEjG,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,GAAG,OAAO,EACrB,kBAAkB,GAAG,KAAK,EAC1B,qBAAqB,GAAG,KAAK,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACK;IACvB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAE3F,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,sBAAsB,GAAG,MAAM,EAAwC,CAAC;IAC9E,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAErC,2EAA2E;IAC3E,sCAAsC;IACtC,MAAM,UAAU,GACd,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAErH,MAAM,gBAAgB,GAA4B,KAAK,CAAC,EAAE;QACxD,wEAAwE;QACxE,2EAA2E;QAC3E,qEAAqE;QACrE,6EAA6E;QAC7E,iFAAiF;QACjF,4EAA4E;QAC5E,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YACtG,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;gBAC5B,0BAA0B,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAA4B,KAAK,CAAC,EAAE;QACzD,uEAAuE;QACvE,0EAA0E;QAC1E,wEAAwE;QACxE,8CAA8C;QAC9C,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YAClF,0BAA0B,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,kEAAkE;QAClE,mEAAmE;QACnE,uDAAuD;QACvD,sEAAsE;QACtE,sEAAsE;QACtE,wEAAwE;QACxE,uEAAuE;QACvE,QAAQ,CAAC,gBAAgB,CACvB,aAAa,EACb,KAAK,CAAC,EAAE;YACN,IACE,aAAa,CAAC,OAAO;gBACrB,sBAAsB,CAAC,OAAO;gBAC9B,CAAC,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,kBAAkB;oBACpE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,kBAAkB;oBACrE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,kBAAkB;oBACrE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,kBAAkB,CAAC,EACxE,CAAC;gBACD,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC9B,IAAI,iBAAiB,EAAE,CAAC;oBACtB,0BAA0B,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC;QACH,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,wEAAwE;QACxE,iEAAiE;QACjE,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;YAC9B,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;QAC7C,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CACvB,eAAe,EACf,GAAG,EAAE;YACH,qBAAqB,EAAE,CAAC;QAC1B,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CACvB,WAAW,EACX,GAAG,EAAE;YACH,IAAI,aAAa,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;gBACrD,qEAAqE;gBACrE,gDAAgD;gBAChD,0BAA0B,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;YACD,qBAAqB,EAAE,CAAC;QAC1B,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5C,MAAM,mBAAmB,GAA8B,KAAK,CAAC,EAAE;QAC7D,2EAA2E;QAC3E,uEAAuE;QACvE,wEAAwE;QACxE,0EAA0E;QAC1E,kCAAkC;QAElC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,sBAAsB,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QACxE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,uEAAuE;IACvE,wEAAwE;IACxE,0EAA0E;IAC1E,MAAM,0BAA0B,GAA8B,GAAG,EAAE;QACjE,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IACF,MAAM,0BAA0B,GAA8B,GAAG,EAAE;QACjE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAA+B,KAAK,CAAC,EAAE;QAC9D,wFAAwF;QACxF,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,0BAA0B,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;aAAM,IAAI,WAAW,KAAK,mBAAmB,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YAC/F,mFAAmF;YACnF,0BAA0B,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC;QAClE,CAAC;aAAM,IACL,KAAK,CAAC,GAAG,KAAK,KAAK;YACnB,KAAK,CAAC,GAAG,KAAK,SAAS;YACvB,KAAK,CAAC,GAAG,KAAK,MAAM;YACpB,KAAK,CAAC,GAAG,KAAK,OAAO;YACrB,WAAW,KAAK,OAAO,EACvB,CAAC;YACD,wEAAwE;YACxE,wEAAwE;YACxE,0BAA0B,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAEnG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACpF,MAAM,eAAe,GAAG,cAAc,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;IACzG,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;IAEzE,8FAA8F;IAC9F,4FAA4F;IAC5F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YAC3C,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;gBAC5B,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,OAAe,CAAC;QAEpB,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,MAAM,IAAI,GAAG,4BAA4B,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACjE,MAAM,SAAS,GAAG;gBAChB,aAAa,EAAE,IAAI,CAAC,eAAe,GAAG,4BAA4B;gBAClE,WAAW,EAAE,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,4BAA4B;gBACnF,cAAc,EAAE,IAAI,CAAC,gBAAgB,GAAG,4BAA4B;gBACpE,YAAY,EAAE,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,GAAG,4BAA4B;aACrF,CAAC;YACF,IAAI,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;gBAC9D,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,GAAG,iBAAiB,CAAC,MAAM,GAAG,kBAAkB,CAAC;gBACjG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC5D,CAAC;iBAAM,CAAC;gBACN,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;YACD,OAAO,GAAG,qBAAqB,CAAC,aAAa,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,OAAO,GAAG,qBAAqB,CAAC,aAAa,CAAC,CAAC;QAE/C,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErD,OAAO,CACL;QAGE,6BACE,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,EACtD,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,iBAAiB;YAGzB,6BACE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,cAAc,EAAE,0BAA0B,EAC1C,cAAc,EAAE,0BAA0B;gBAI1C,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAC,EACxD,GAAG,EAAE,aAAa,EAClB,aAAa,EAAE,mBAAmB,EAClC,SAAS,EAAE,mBAAmB,IAE7B,QAAQ,CACL;gBAEL,CAAC,UAAU,IAAI,CAAC,WAAW,IAAI,WAAW,IAAI,WAAW,IAAI;gBAC5D,4EAA4E;gBAC5E,0EAA0E;gBAC1E,oBAAC,OAAO,IAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,GAAI,CACjG,CACG,CACF;QAEN,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,WAAW,IAC1D,iBAAiB,CAAC,GAAG,CACpB,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CACnB,UAAU,CAAC,SAAS,CAAC,IAAI,CACvB,oBAAC,eAAe,IACd,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,CAAC,UAAU,IAAI,WAAW,EAChC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,SAAS,CAAC,EAC5C,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,KAAK,GAClB,CACH,CACJ,CACa,CACf,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// The UAP buttons are forced to top/bottom position if the handle is close to the screen edge.\nconst FORCED_POSITION_PROXIMITY_PX = 50;\n// Approximate UAP button size with margins to decide forced direction.\nconst UAP_BUTTON_SIZE_PX = 40;\nconst DIRECTIONS_ORDER: Direction[] = ['block-end', 'block-start', 'inline-end', 'inline-start'];\n\nexport default function DragHandleWrapper({\n directions,\n tooltipText,\n children,\n onDirectionClick,\n triggerMode = 'focus',\n initialShowButtons = false,\n controlledShowButtons = false,\n wrapperClassName,\n hideButtonsOnDrag,\n clickDragThreshold,\n}: DragHandleWrapperProps) {\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [uncontrolledShowButtons, setUncontrolledShowButtons] = useState(initialShowButtons);\n\n const isPointerDown = useRef(false);\n const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n const didPointerDrag = useRef(false);\n\n // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n // on the handle wouldn't do anything.\n const isDisabled =\n !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n const onWrapperFocusIn: React.FocusEventHandler = event => {\n // The drag handle is focused when it's either tabbed to, or the pointer\n // is pressed on it. We exclude handling the pointer press in this handler,\n // since it could be the start of a drag event - the pointer stuff is\n // handled in the \"pointerup\" listener instead. In cases where focus is moved\n // to the button (by manually calling `.focus()`), the buttons should only appear\n // if the action that triggered the focus move was the result of a keypress.\n if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n setShowTooltip(false);\n if (triggerMode === 'focus') {\n setUncontrolledShowButtons(true);\n }\n }\n };\n\n const onWrapperFocusOut: React.FocusEventHandler = event => {\n // Close the directional buttons when the focus leaves the drag handle.\n // \"focusout\" is also triggered when the user switches to another tab, but\n // since it'll be returned when they switch back anyway, we exclude that\n // case by checking for `document.hasFocus()`.\n if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n setUncontrolledShowButtons(false);\n }\n };\n\n useEffect(() => {\n const controller = new AbortController();\n\n // We need to differentiate between a \"click\" and a \"drag\" action.\n // We can say a \"click\" happens when a \"pointerdown\" is followed by\n // a \"pointerup\" with no \"pointermove\" between the two.\n // However, it would be a poor usability experience if a \"click\" isn't\n // registered because, while pressing my mouse, I moved it by just one\n // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n // `clickDragThreshold` pixels before setting `didPointerDrag` to true.\n document.addEventListener(\n 'pointermove',\n event => {\n if (\n isPointerDown.current &&\n initialPointerPosition.current &&\n (event.clientX > initialPointerPosition.current.x + clickDragThreshold ||\n event.clientX < initialPointerPosition.current.x - clickDragThreshold ||\n event.clientY > initialPointerPosition.current.y + clickDragThreshold ||\n event.clientY < initialPointerPosition.current.y - clickDragThreshold)\n ) {\n didPointerDrag.current = true;\n if (hideButtonsOnDrag) {\n setUncontrolledShowButtons(false);\n }\n }\n },\n { signal: controller.signal }\n );\n\n // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n // can be called for both \"pointercancel\" and \"pointerup\" events.\n const resetPointerDownState = () => {\n isPointerDown.current = false;\n initialPointerPosition.current = undefined;\n };\n\n document.addEventListener(\n 'pointercancel',\n () => {\n resetPointerDownState();\n },\n { signal: controller.signal }\n );\n\n document.addEventListener(\n 'pointerup',\n () => {\n if (isPointerDown.current && !didPointerDrag.current) {\n // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n // Handle this as a \"click\" instead of a \"drag\".\n setUncontrolledShowButtons(true);\n }\n resetPointerDownState();\n },\n { signal: controller.signal }\n );\n\n return () => controller.abort();\n }, [clickDragThreshold, hideButtonsOnDrag]);\n\n const onHandlePointerDown: React.PointerEventHandler = event => {\n // Tooltip behavior: the tooltip should appear on hover, but disappear when\n // the pointer starts dragging (having the tooltip get in the way while\n // you're trying to drag upwards is annoying). Additionally, the tooltip\n // shouldn't reappear when dragging ends, but only when the pointer leaves\n // the drag handle and comes back.\n\n isPointerDown.current = true;\n didPointerDrag.current = false;\n initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n setShowTooltip(false);\n };\n\n // Tooltip behavior: the tooltip should stay open when the cursor moves\n // from the drag handle into the tooltip content itself. This is why the\n // handler is set on the wrapper for both the drag handle and the tooltip.\n const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n if (!isPointerDown.current) {\n setShowTooltip(true);\n }\n };\n const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n setShowTooltip(false);\n };\n\n const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n // For accessibility reasons, pressing escape should always close the floating controls.\n if (event.key === 'Escape') {\n setUncontrolledShowButtons(false);\n } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n setUncontrolledShowButtons(prevShowButtons => !prevShowButtons);\n } else if (\n event.key !== 'Alt' &&\n event.key !== 'Control' &&\n event.key !== 'Meta' &&\n event.key !== 'Shift' &&\n triggerMode === 'focus'\n ) {\n // Pressing any other key will display the focus-visible ring around the\n // drag handle if it's in focus, so we should also show the buttons now.\n setUncontrolledShowButtons(true);\n }\n };\n\n const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;\n\n const [forcedPosition, setForcedPosition] = useState<null | 'top' | 'bottom'>(null);\n const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;\n const visibleDirections = directionsOrder.filter(dir => directions[dir]);\n\n // Continuously monitor position while buttons are shown to handle CSS transitions/animations.\n // The position needs to be recalculated as the element may animate into its final position.\n useEffect(() => {\n if (!showButtons || !dragHandleRef.current) {\n if (forcedPosition !== null) {\n setForcedPosition(null);\n }\n return;\n }\n\n let frameId: number;\n\n const checkPosition = () => {\n if (!dragHandleRef.current) {\n return;\n }\n const rect = getLogicalBoundingClientRect(dragHandleRef.current);\n const conflicts = {\n 'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,\n 'block-end': window.innerHeight - rect.insetBlockEnd < FORCED_POSITION_PROXIMITY_PX,\n 'inline-start': rect.insetInlineStart < FORCED_POSITION_PROXIMITY_PX,\n 'inline-end': window.innerWidth - rect.insetInlineEnd < FORCED_POSITION_PROXIMITY_PX,\n };\n if (visibleDirections.some(direction => conflicts[direction])) {\n const hasEnoughSpaceAbove = rect.insetBlockStart > visibleDirections.length * UAP_BUTTON_SIZE_PX;\n setForcedPosition(hasEnoughSpaceAbove ? 'top' : 'bottom');\n } else {\n setForcedPosition(null);\n }\n frameId = requestAnimationFrame(checkPosition);\n };\n\n frameId = requestAnimationFrame(checkPosition);\n\n return () => {\n cancelAnimationFrame(frameId);\n };\n }, [forcedPosition, showButtons, visibleDirections]);\n\n return (\n <>\n {/* Wrapper for focus detection. The buttons are shown when any element inside this wrapper is\n focused, either via the keyboard or a pointer press. The UAP buttons will never receive focus. */}\n <div\n className={clsx(testUtilsStyles.root, styles.contents)}\n ref={wrapperRef}\n onFocus={onWrapperFocusIn}\n onBlur={onWrapperFocusOut}\n >\n {/* Wrapper for pointer detection. Determines whether or not the tooltip should be shown. */}\n <div\n className={styles.contents}\n onPointerEnter={onTooltipGroupPointerEnter}\n onPointerLeave={onTooltipGroupPointerLeave}\n >\n {/* Position tracking wrapper used to position the tooltip and drag buttons accurately.\n Its dimensions must match the inner button's dimensions. */}\n <div\n className={clsx(styles['drag-handle'], wrapperClassName)}\n ref={dragHandleRef}\n onPointerDown={onHandlePointerDown}\n onKeyDown={onDragHandleKeyDown}\n >\n {children}\n </div>\n\n {!isDisabled && !showButtons && showTooltip && tooltipText && (\n // Rendered in a portal but pointerenter/pointerleave events still propagate\n // up the React DOM tree, which is why it's placed in this nested context.\n <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n )}\n </div>\n </div>\n\n <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n {visibleDirections.map(\n (direction, index) =>\n directions[direction] && (\n <DirectionButton\n key={direction}\n show={!isDisabled && showButtons}\n direction={direction}\n state={directions[direction]}\n onClick={() => onDirectionClick?.(direction)}\n forcedPosition={forcedPosition}\n forcedIndex={index}\n />\n )\n )}\n </PortalOverlay>\n </>\n );\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (7d1f3038)";
3
- export var GIT_SHA = "7d1f3038";
2
+ export var PACKAGE_VERSION = "3.0.0 (41acf98e)";
3
+ export var GIT_SHA = "41acf98e";
4
4
  export var THEME = "open-source-visual-refresh";
5
5
  export var SYSTEM = "core";
6
6
  export var ALWAYS_VISUAL_REFRESH = true;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (7d1f3038)",
4
- "GIT_SHA": "7d1f3038",
3
+ "PACKAGE_VERSION": "3.0.0 (41acf98e)",
4
+ "GIT_SHA": "41acf98e",
5
5
  "THEME": "default",
6
6
  "SYSTEM": "core",
7
7
  "ALWAYS_VISUAL_REFRESH": false
@@ -15,4 +15,5 @@ export { DrawerImplementation as Drawer } from '../drawer/implementation';
15
15
  export { FlashbarImplementation as Flashbar } from '../flashbar/implementation';
16
16
  export { SideNavigationImplementation as SideNavigation } from '../side-navigation/implementation';
17
17
  export { HelpPanelImplementation as HelpPanel } from '../help-panel/implementation';
18
+ export { I18nFormatter } from '../i18n/utils/i18n-formatter';
18
19
  //# sourceMappingURL=widget-exports.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"widget-exports.d.ts","sourceRoot":"","sources":["../../../src/internal/widget-exports.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAC3H,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACpI,OAAO,EACL,6CAA6C,IAAI,yBAAyB,EAC1E,2CAA2C,IAAI,uBAAuB,GACvE,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAGlH,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,2BAA2B,IAAI,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAC1I,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,+BAA+B,IAAI,0BAA0B,EAAE,MAAM,uEAAuE,CAAC;AACtJ,OAAO,EAAE,sBAAsB,IAAI,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEhH,OAAO,EAAE,wBAAwB,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,6BAA6B,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACtG,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,sBAAsB,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,4BAA4B,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC"}
1
+ {"version":3,"file":"widget-exports.d.ts","sourceRoot":"","sources":["../../../src/internal/widget-exports.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAC3H,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACpI,OAAO,EACL,6CAA6C,IAAI,yBAAyB,EAC1E,2CAA2C,IAAI,uBAAuB,GACvE,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAGlH,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,2BAA2B,IAAI,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAC1I,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,+BAA+B,IAAI,0BAA0B,EAAE,MAAM,uEAAuE,CAAC;AACtJ,OAAO,EAAE,sBAAsB,IAAI,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEhH,OAAO,EAAE,wBAAwB,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,6BAA6B,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACtG,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,sBAAsB,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,4BAA4B,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC"}
@@ -19,4 +19,6 @@ export { DrawerImplementation as Drawer } from '../drawer/implementation';
19
19
  export { FlashbarImplementation as Flashbar } from '../flashbar/implementation';
20
20
  export { SideNavigationImplementation as SideNavigation } from '../side-navigation/implementation';
21
21
  export { HelpPanelImplementation as HelpPanel } from '../help-panel/implementation';
22
+ // Widgetized non-component exports
23
+ export { I18nFormatter } from '../i18n/utils/i18n-formatter';
22
24
  //# sourceMappingURL=widget-exports.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"widget-exports.js","sourceRoot":"","sources":["../../../src/internal/widget-exports.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,0BAA0B;AAC1B,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAC3H,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACpI,OAAO,EACL,6CAA6C,IAAI,yBAAyB,EAC1E,2CAA2C,IAAI,uBAAuB,GACvE,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAElH,8BAA8B;AAC9B,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,2BAA2B,IAAI,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAC1I,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,+BAA+B,IAAI,0BAA0B,EAAE,MAAM,uEAAuE,CAAC;AACtJ,OAAO,EAAE,sBAAsB,IAAI,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEhH,OAAO,EAAE,wBAAwB,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,6BAA6B,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACtG,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,sBAAsB,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,4BAA4B,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport { PACKAGE_VERSION } from './environment';\n\n// Legacy widgetized parts\nexport {\n AppLayoutDrawerImplementation as AppLayoutDrawer,\n AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers,\n} from '../app-layout/visual-refresh-toolbar/drawer';\nexport { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../app-layout/visual-refresh-toolbar/navigation';\nexport { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../app-layout/visual-refresh-toolbar/notifications';\nexport {\n AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom,\n AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide,\n} from '../app-layout/visual-refresh-toolbar/split-panel';\nexport { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../app-layout/visual-refresh-toolbar/toolbar';\n\n// Refactored widgetized parts\nexport { BeforeMainSlotImplementation as AppLayoutBeforeMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/before-main-slot';\nexport { AfterMainSlotImplementation as AppLayoutAfterMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/after-main-slot';\nexport { TopContentSlotImplementation as AppLayoutTopContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/top-content-slot';\nexport { BottomContentSlotImplementation as AppLayoutBottomContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot';\nexport { AppLayoutStateProvider as AppLayoutWidgetizedState } from '../app-layout/visual-refresh-toolbar/state';\n\nexport { SplitPanelImplementation as SplitPanel } from '../split-panel/implementation';\nexport { BreadcrumbGroupImplementation as BreadcrumbGroup } from '../breadcrumb-group/implementation';\nexport { DrawerImplementation as Drawer } from '../drawer/implementation';\nexport { FlashbarImplementation as Flashbar } from '../flashbar/implementation';\nexport { SideNavigationImplementation as SideNavigation } from '../side-navigation/implementation';\nexport { HelpPanelImplementation as HelpPanel } from '../help-panel/implementation';\n"]}
1
+ {"version":3,"file":"widget-exports.js","sourceRoot":"","sources":["../../../src/internal/widget-exports.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,0BAA0B;AAC1B,OAAO,EACL,6BAA6B,IAAI,eAAe,EAChD,oCAAoC,IAAI,sBAAsB,GAC/D,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAC3H,OAAO,EAAE,oCAAoC,IAAI,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACpI,OAAO,EACL,6CAA6C,IAAI,yBAAyB,EAC1E,2CAA2C,IAAI,uBAAuB,GACvE,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAElH,8BAA8B;AAC9B,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,2BAA2B,IAAI,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAC1I,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7I,OAAO,EAAE,+BAA+B,IAAI,0BAA0B,EAAE,MAAM,uEAAuE,CAAC;AACtJ,OAAO,EAAE,sBAAsB,IAAI,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEhH,OAAO,EAAE,wBAAwB,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,6BAA6B,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACtG,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,sBAAsB,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,4BAA4B,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEpF,mCAAmC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport { PACKAGE_VERSION } from './environment';\n\n// Legacy widgetized parts\nexport {\n AppLayoutDrawerImplementation as AppLayoutDrawer,\n AppLayoutGlobalDrawersImplementation as AppLayoutGlobalDrawers,\n} from '../app-layout/visual-refresh-toolbar/drawer';\nexport { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../app-layout/visual-refresh-toolbar/navigation';\nexport { AppLayoutNotificationsImplementation as AppLayoutNotifications } from '../app-layout/visual-refresh-toolbar/notifications';\nexport {\n AppLayoutSplitPanelDrawerBottomImplementation as AppLayoutSplitPanelBottom,\n AppLayoutSplitPanelDrawerSideImplementation as AppLayoutSplitPanelSide,\n} from '../app-layout/visual-refresh-toolbar/split-panel';\nexport { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../app-layout/visual-refresh-toolbar/toolbar';\n\n// Refactored widgetized parts\nexport { BeforeMainSlotImplementation as AppLayoutBeforeMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/before-main-slot';\nexport { AfterMainSlotImplementation as AppLayoutAfterMainSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/after-main-slot';\nexport { TopContentSlotImplementation as AppLayoutTopContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/top-content-slot';\nexport { BottomContentSlotImplementation as AppLayoutBottomContentSlot } from '../app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot';\nexport { AppLayoutStateProvider as AppLayoutWidgetizedState } from '../app-layout/visual-refresh-toolbar/state';\n\nexport { SplitPanelImplementation as SplitPanel } from '../split-panel/implementation';\nexport { BreadcrumbGroupImplementation as BreadcrumbGroup } from '../breadcrumb-group/implementation';\nexport { DrawerImplementation as Drawer } from '../drawer/implementation';\nexport { FlashbarImplementation as Flashbar } from '../flashbar/implementation';\nexport { SideNavigationImplementation as SideNavigation } from '../side-navigation/implementation';\nexport { HelpPanelImplementation as HelpPanel } from '../help-panel/implementation';\n\n// Widgetized non-component exports\nexport { I18nFormatter } from '../i18n/utils/i18n-formatter';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/components-themeable",
3
- "version": "3.0.1238",
3
+ "version": "3.0.1240",
4
4
  "files": [
5
5
  "lib"
6
6
  ],
@@ -1,2 +0,0 @@
1
- export declare function getMatchableLocales(ietfLanguageTag: string): string[];
2
- //# sourceMappingURL=get-matchable-locales.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"get-matchable-locales.d.ts","sourceRoot":"","sources":["../../../src/i18n/get-matchable-locales.ts"],"names":[],"mappings":"AAGA,wBAAgB,mBAAmB,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,EAAE,CAWrE"}
@@ -1,14 +0,0 @@
1
- // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
- // SPDX-License-Identifier: Apache-2.0
3
- export function getMatchableLocales(ietfLanguageTag) {
4
- const parts = ietfLanguageTag.split('-');
5
- if (parts.length === 1) {
6
- return [ietfLanguageTag];
7
- }
8
- const localeStrings = [];
9
- for (let i = parts.length; i > 0; i--) {
10
- localeStrings.push(parts.slice(0, i).join('-'));
11
- }
12
- return localeStrings;
13
- }
14
- //# sourceMappingURL=get-matchable-locales.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"get-matchable-locales.js","sourceRoot":"","sources":["../../../src/i18n/get-matchable-locales.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,mBAAmB,CAAC,eAAuB;IACzD,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,aAAa,GAAa,EAAE,CAAC;IACnC,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAClD,CAAC;IACD,OAAO,aAAa,CAAC;AACvB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function getMatchableLocales(ietfLanguageTag: string): string[] {\n const parts = ietfLanguageTag.split('-');\n if (parts.length === 1) {\n return [ietfLanguageTag];\n }\n\n const localeStrings: string[] = [];\n for (let i = parts.length; i > 0; i--) {\n localeStrings.push(parts.slice(0, i).join('-'));\n }\n return localeStrings;\n}\n"]}