@cloudscape-design/components 3.0.1080 → 3.0.1082

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 (51) hide show
  1. package/badge/index.d.ts.map +1 -1
  2. package/badge/index.js +1 -1
  3. package/badge/interfaces.d.ts +15 -0
  4. package/badge/interfaces.d.ts.map +1 -1
  5. package/badge/interfaces.js.map +1 -1
  6. package/badge/internal-do-not-use-core.js +3 -2
  7. package/badge/internal-do-not-use-core.js.map +1 -1
  8. package/button-dropdown/utils/create-items-tree.d.ts +1 -1
  9. package/button-dropdown/utils/create-items-tree.d.ts.map +1 -1
  10. package/button-dropdown/utils/create-items-tree.js +11 -2
  11. package/button-dropdown/utils/create-items-tree.js.map +1 -1
  12. package/button-dropdown/utils/use-button-dropdown.d.ts.map +1 -1
  13. package/button-dropdown/utils/use-button-dropdown.js +14 -7
  14. package/button-dropdown/utils/use-button-dropdown.js.map +1 -1
  15. package/button-dropdown/utils/use-highlighted-menu.d.ts +1 -1
  16. package/button-dropdown/utils/use-highlighted-menu.d.ts.map +1 -1
  17. package/button-dropdown/utils/use-highlighted-menu.js +2 -2
  18. package/button-dropdown/utils/use-highlighted-menu.js.map +1 -1
  19. package/checkbox/index.js +1 -1
  20. package/checkbox/interfaces.d.ts +15 -0
  21. package/checkbox/interfaces.d.ts.map +1 -1
  22. package/checkbox/interfaces.js.map +1 -1
  23. package/checkbox/internal.d.ts.map +1 -1
  24. package/checkbox/internal.js +3 -2
  25. package/checkbox/internal.js.map +1 -1
  26. package/icon/index.js +13 -10
  27. package/icon/interfaces.d.ts +14 -0
  28. package/icon/interfaces.d.ts.map +1 -1
  29. package/icon/interfaces.js.map +1 -1
  30. package/icon/internal-do-not-use-core.js +15 -0
  31. package/icon/internal.d.ts +1 -0
  32. package/icon/internal.d.ts.map +1 -1
  33. package/icon/internal.js +5 -4
  34. package/icon/internal.js.map +1 -1
  35. package/internal/base-component/styles.scoped.css +1 -1
  36. package/internal/environment.js +2 -2
  37. package/internal/environment.json +2 -2
  38. package/internal/manifest.json +1 -1
  39. package/multiselect/use-multiselect.d.ts +1 -1
  40. package/package.json +1 -1
  41. package/spinner/index.js +13 -12
  42. package/spinner/interfaces.d.ts +15 -0
  43. package/spinner/interfaces.d.ts.map +1 -1
  44. package/spinner/interfaces.js.map +1 -1
  45. package/spinner/internal-do-not-use-core.js +17 -0
  46. package/spinner/internal.d.ts +1 -0
  47. package/spinner/internal.d.ts.map +1 -1
  48. package/spinner/internal.js +3 -2
  49. package/spinner/internal.js.map +1 -1
  50. /package/icon/{index.js.map → internal-do-not-use-core.js.map} +0 -0
  51. /package/spinner/{index.js.map → internal-do-not-use-core.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,eAWrF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,eAkBvG"}
package/badge/index.js CHANGED
@@ -9,7 +9,7 @@ import { validateProps } from '@cloudscape-design/component-toolkit/internal';
9
9
 
10
10
 
11
11
  const Badge = (props) => {
12
- validateProps('Badge', props, ["style"], {}, 'console');
12
+ validateProps('Badge', props, ["nativeAttributes","style"], {}, 'console');
13
13
  return React.createElement(CoreComponent, props);
14
14
  };
15
15
 
@@ -1,5 +1,9 @@
1
1
  import React from 'react';
2
2
  import { BaseComponentProps } from '../internal/base-component';
3
+ /**
4
+ * @awsuiSystem core
5
+ */
6
+
3
7
  export interface BadgeProps extends BaseComponentProps {
4
8
  /**
5
9
  * Specifies the badge color.
@@ -12,6 +16,17 @@ export interface BadgeProps extends BaseComponentProps {
12
16
  /**
13
17
  * @awsuiSystem core
14
18
  */
19
+
20
+ /**
21
+ * Attributes to add to the native element.
22
+ * Some attributes will be automatically combined with internal attribute values:
23
+ * - `className` will be appended.
24
+ * - Event handlers will be chained, unless the default is prevented.
25
+ *
26
+ * We do not support using this attribute to apply custom styling.
27
+ *
28
+ * @awsuiSystem core
29
+ */
15
30
  }
16
31
  export declare namespace BadgeProps {
17
32
  interface Style {
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/badge/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,KAAK,CAAC,EACF,MAAM,GACN,MAAM,GACN,OAAO,GACP,KAAK,GACL,mBAAmB,GACnB,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;KACH;CACF"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/badge/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,KAAK,CAAC,EACF,MAAM,GACN,MAAM,GACN,OAAO,GACP,KAAK,GACL,mBAAmB,GACnB,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC;IAEzB;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACxE;AAED,yBAAiB,UAAU,CAAC;IAC1B,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;KACH;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/badge/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface BadgeProps extends BaseComponentProps {\n /**\n * Specifies the badge color.\n */\n color?:\n | 'blue'\n | 'grey'\n | 'green'\n | 'red'\n | 'severity-critical'\n | 'severity-high'\n | 'severity-medium'\n | 'severity-low'\n | 'severity-neutral';\n\n /**\n * Text displayed inside the badge.\n */\n children?: React.ReactNode;\n\n /**\n * @awsuiSystem core\n */\n style?: BadgeProps.Style;\n}\n\nexport namespace BadgeProps {\n export interface Style {\n root?: {\n background?: string;\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n color?: string;\n paddingBlock?: string;\n paddingInline?: string;\n };\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/badge/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface BadgeProps extends BaseComponentProps {\n /**\n * Specifies the badge color.\n */\n color?:\n | 'blue'\n | 'grey'\n | 'green'\n | 'red'\n | 'severity-critical'\n | 'severity-high'\n | 'severity-medium'\n | 'severity-low'\n | 'severity-neutral';\n\n /**\n * Text displayed inside the badge.\n */\n children?: React.ReactNode;\n\n /**\n * @awsuiSystem core\n */\n style?: BadgeProps.Style;\n\n /**\n * Attributes to add to the native element.\n * Some attributes will be automatically combined with internal attribute values:\n * - `className` will be appended.\n * - Event handlers will be chained, unless the default is prevented.\n *\n * We do not support using this attribute to apply custom styling.\n *\n * @awsuiSystem core\n */\n nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace BadgeProps {\n export interface Style {\n root?: {\n background?: string;\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n color?: string;\n paddingBlock?: string;\n paddingInline?: string;\n };\n }\n}\n"]}
@@ -7,14 +7,15 @@ import clsx from 'clsx';
7
7
  import { getBaseProps } from '../internal/base-component';
8
8
  import useBaseComponent from '../internal/hooks/use-base-component';
9
9
  import { applyDisplayName } from '../internal/utils/apply-display-name';
10
+ import WithNativeAttributes from '../internal/utils/with-native-attributes';
10
11
  import { getBadgeStyles } from './style';
11
12
  import styles from './styles.css.js';
12
13
  export default function Badge(_a) {
13
- var { color = 'grey', children, style } = _a, rest = __rest(_a, ["color", "children", "style"]);
14
+ var { color = 'grey', children, style, nativeAttributes } = _a, rest = __rest(_a, ["color", "children", "style", "nativeAttributes"]);
14
15
  const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });
15
16
  const baseProps = getBaseProps(rest);
16
17
  const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);
17
- return (React.createElement("span", Object.assign({}, baseProps, { className }, { ref: __internalRootRef, style: getBadgeStyles(style) }), children));
18
+ return (React.createElement(WithNativeAttributes, Object.assign({}, baseProps, { tag: "span", nativeAttributes: nativeAttributes, className: className, ref: __internalRootRef, style: getBadgeStyles(style) }), children));
18
19
  }
19
20
  applyDisplayName(Badge, 'Badge');
20
21
  //# sourceMappingURL=internal-do-not-use-core.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAwD;QAAxD,EAAE,KAAK,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,OAAuB,EAAlB,IAAI,cAA1C,8BAA4C,CAAF;IACtE,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,eAAe,KAAK,EAAE,CAAC,CAAC,CAAC;IAE1F,OAAO,CACL,8CAAU,SAAS,EAAM,EAAE,SAAS,EAAE,IAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KACzF,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { BadgeProps } from './interfaces';\nimport { getBadgeStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport { BadgeProps };\n\nexport default function Badge({ color = 'grey', children, style, ...rest }: BadgeProps) {\n const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });\n const baseProps = getBaseProps(rest);\n\n const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);\n\n return (\n <span {...baseProps} {...{ className }} ref={__internalRootRef} style={getBadgeStyles(style)}>\n {children}\n </span>\n );\n}\n\napplyDisplayName(Badge, 'Badge');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAA0E;QAA1E,EAAE,KAAK,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,OAAuB,EAAlB,IAAI,cAA5D,kDAA8D,CAAF;IACxF,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,eAAe,KAAK,EAAE,CAAC,CAAC,CAAC;IAE1F,OAAO,CACL,oBAAC,oBAAoB,oBACf,SAAS,IACb,GAAG,EAAC,MAAM,EACV,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAE3B,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { BadgeProps } from './interfaces';\nimport { getBadgeStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport { BadgeProps };\n\nexport default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }: BadgeProps) {\n const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });\n const baseProps = getBaseProps(rest);\n\n const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);\n\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n nativeAttributes={nativeAttributes}\n className={className}\n ref={__internalRootRef}\n style={getBadgeStyles(style)}\n >\n {children}\n </WithNativeAttributes>\n );\n}\n\napplyDisplayName(Badge, 'Badge');\n"]}
@@ -3,7 +3,7 @@ export type TreeIndex = number[];
3
3
  interface ItemsTreeApi {
4
4
  getItem: (index: TreeIndex) => ButtonDropdownProps.ItemOrGroup | null;
5
5
  getItemIndex: (item: ButtonDropdownProps.ItemOrGroup) => TreeIndex;
6
- getSequentialIndex: (index: TreeIndex, direction: -1 | 1) => TreeIndex | null;
6
+ getSequentialIndex: (index: TreeIndex, direction: -1 | 1, loop?: boolean) => TreeIndex | null;
7
7
  getParentIndex: (item: ButtonDropdownProps.ItemOrGroup) => TreeIndex | null;
8
8
  }
9
9
  export default function createItemsTree(items: ButtonDropdownProps.Items): ItemsTreeApi;
@@ -1 +1 @@
1
- {"version":3,"file":"create-items-tree.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/create-items-tree.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAOpD,MAAM,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;AAEjC,UAAU,YAAY;IAEpB,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,mBAAmB,CAAC,WAAW,GAAG,IAAI,CAAC;IAGtE,YAAY,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,WAAW,KAAK,SAAS,CAAC;IAEnE,kBAAkB,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,SAAS,GAAG,IAAI,CAAC;IAE9E,cAAc,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,WAAW,KAAK,SAAS,GAAG,IAAI,CAAC;CAC7E;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,mBAAmB,CAAC,KAAK,GAAG,YAAY,CAwDtF;AAED,wBAAgB,aAAa,CAC3B,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAChC,GAAG,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,EACtE,WAAW,GAAE,SAAc,QAU5B"}
1
+ {"version":3,"file":"create-items-tree.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/create-items-tree.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAOpD,MAAM,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;AAEjC,UAAU,YAAY;IAEpB,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,mBAAmB,CAAC,WAAW,GAAG,IAAI,CAAC;IAGtE,YAAY,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,WAAW,KAAK,SAAS,CAAC;IAEnE,kBAAkB,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,SAAS,GAAG,IAAI,CAAC;IAE9F,cAAc,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,WAAW,KAAK,SAAS,GAAG,IAAI,CAAC;CAC7E;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,mBAAmB,CAAC,KAAK,GAAG,YAAY,CAgEtF;AAED,wBAAgB,aAAa,CAC3B,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAChC,GAAG,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,EACtE,WAAW,GAAE,SAAc,QAU5B"}
@@ -21,10 +21,19 @@ export default function createItemsTree(items) {
21
21
  }
22
22
  return parseIndex(indexKey);
23
23
  },
24
- getSequentialIndex: (index, direction) => {
24
+ getSequentialIndex: (index, direction, loop = false) => {
25
25
  const indexKey = stringifyIndex(index);
26
26
  const position = flatIndices.indexOf(indexKey);
27
- const nextIndexKey = flatIndices[position + direction];
27
+ let nextIndex = position + direction;
28
+ if (loop) {
29
+ if (nextIndex < 0) {
30
+ nextIndex = flatIndices.length - 1;
31
+ }
32
+ else if (nextIndex >= flatIndices.length) {
33
+ nextIndex = 0;
34
+ }
35
+ }
36
+ const nextIndexKey = flatIndices[nextIndex];
28
37
  if (!nextIndexKey) {
29
38
  return null;
30
39
  }
@@ -1 +1 @@
1
- {"version":3,"file":"create-items-tree.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/create-items-tree.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonDropdownProps } from '../interfaces';\nimport { isItemGroup } from './utils';\n\n// The function turns a tree of items into a structure optimized for lookup of\n// items and corresponding indices as well as iteration on indices in the given order.\n\n// As trees are multidimensional, the index is represented as an array\nexport type TreeIndex = number[];\n\ninterface ItemsTreeApi {\n // Returns an item for the given tree index or null if not found\n getItem: (index: TreeIndex) => ButtonDropdownProps.ItemOrGroup | null;\n // Returns the tree index of the given item. The item must be present\n // in the tree (referential comparison), or an error will be thrown\n getItemIndex: (item: ButtonDropdownProps.ItemOrGroup) => TreeIndex;\n // Returns the index of next or previous sequential node or null if out of bounds\n getSequentialIndex: (index: TreeIndex, direction: -1 | 1) => TreeIndex | null;\n // Returns parent tree index of a given item or null if no parent is present\n getParentIndex: (item: ButtonDropdownProps.ItemOrGroup) => TreeIndex | null;\n}\n\nexport default function createItemsTree(items: ButtonDropdownProps.Items): ItemsTreeApi {\n const itemToIndex = new Map<ButtonDropdownProps.ItemOrGroup, string>();\n const indexToItem = new Map<string, ButtonDropdownProps.ItemOrGroup>();\n const flatIndices: string[] = [];\n\n traverseItems(items, (item, index) => {\n const indexKey = stringifyIndex(index);\n itemToIndex.set(item, indexKey);\n indexToItem.set(indexKey, item);\n flatIndices.push(indexKey);\n });\n\n return {\n getItem: (index: TreeIndex): ButtonDropdownProps.ItemOrGroup | null => {\n const indexKey = stringifyIndex(index);\n\n return indexToItem.get(indexKey) || null;\n },\n getItemIndex: (item: ButtonDropdownProps.ItemOrGroup): TreeIndex => {\n const indexKey = itemToIndex.get(item);\n\n if (!indexKey) {\n throw new Error('Invariant violation: item is not found.');\n }\n\n return parseIndex(indexKey);\n },\n getSequentialIndex: (index: TreeIndex, direction: -1 | 1): TreeIndex | null => {\n const indexKey = stringifyIndex(index);\n const position = flatIndices.indexOf(indexKey);\n\n const nextIndexKey = flatIndices[position + direction];\n\n if (!nextIndexKey) {\n return null;\n }\n\n return parseIndex(nextIndexKey);\n },\n getParentIndex: (item: ButtonDropdownProps.ItemOrGroup): TreeIndex | null => {\n const indexKey = itemToIndex.get(item);\n\n if (!indexKey) {\n throw new Error('Invariant violation: item is not found.');\n }\n\n const index = parseIndex(indexKey);\n\n // No parent\n if (index.length === 1) {\n return null;\n }\n\n return index.slice(0, index.length - 1);\n },\n };\n}\n\nexport function traverseItems(\n items: ButtonDropdownProps.Items,\n act: (item: ButtonDropdownProps.ItemOrGroup, index: TreeIndex) => void,\n parentIndex: TreeIndex = []\n) {\n items.forEach((item, index) => {\n const itemIndex = [...parentIndex, index];\n act(item, itemIndex);\n\n if (isItemGroup(item)) {\n traverseItems(item.items, act, itemIndex);\n }\n });\n}\n\nfunction stringifyIndex(index: TreeIndex): string {\n return index.join('-');\n}\n\nfunction parseIndex(index: string): TreeIndex {\n return index.split('-').map(it => parseInt(it));\n}\n"]}
1
+ {"version":3,"file":"create-items-tree.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/create-items-tree.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAoBtC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAgC;IACtE,MAAM,WAAW,GAAG,IAAI,GAAG,EAA2C,CAAC;IACvE,MAAM,WAAW,GAAG,IAAI,GAAG,EAA2C,CAAC;IACvE,MAAM,WAAW,GAAa,EAAE,CAAC;IAEjC,aAAa,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACvC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAChC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAChC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,OAAO,EAAE,CAAC,KAAgB,EAA0C,EAAE;YACpE,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YAEvC,OAAO,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC;QAC3C,CAAC;QACD,YAAY,EAAE,CAAC,IAAqC,EAAa,EAAE;YACjE,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAEvC,IAAI,CAAC,QAAQ,EAAE;gBACb,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;aAC5D;YAED,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;QACD,kBAAkB,EAAE,CAAC,KAAgB,EAAE,SAAiB,EAAE,IAAI,GAAG,KAAK,EAAoB,EAAE;YAC1F,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YACvC,MAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAE/C,IAAI,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;YACrC,IAAI,IAAI,EAAE;gBACR,IAAI,SAAS,GAAG,CAAC,EAAE;oBACjB,SAAS,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;iBACpC;qBAAM,IAAI,SAAS,IAAI,WAAW,CAAC,MAAM,EAAE;oBAC1C,SAAS,GAAG,CAAC,CAAC;iBACf;aACF;YACD,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;YAE5C,IAAI,CAAC,YAAY,EAAE;gBACjB,OAAO,IAAI,CAAC;aACb;YAED,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;QAClC,CAAC;QACD,cAAc,EAAE,CAAC,IAAqC,EAAoB,EAAE;YAC1E,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAEvC,IAAI,CAAC,QAAQ,EAAE;gBACb,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;aAC5D;YAED,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;YAEnC,YAAY;YACZ,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,OAAO,IAAI,CAAC;aACb;YAED,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC1C,CAAC;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,KAAgC,EAChC,GAAsE,EACtE,cAAyB,EAAE;IAE3B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,CAAC,GAAG,WAAW,EAAE,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QAErB,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE;YACrB,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;SAC3C;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,cAAc,CAAC,KAAgB;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,CAAC;AAED,SAAS,UAAU,CAAC,KAAa;IAC/B,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;AAClD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonDropdownProps } from '../interfaces';\nimport { isItemGroup } from './utils';\n\n// The function turns a tree of items into a structure optimized for lookup of\n// items and corresponding indices as well as iteration on indices in the given order.\n\n// As trees are multidimensional, the index is represented as an array\nexport type TreeIndex = number[];\n\ninterface ItemsTreeApi {\n // Returns an item for the given tree index or null if not found\n getItem: (index: TreeIndex) => ButtonDropdownProps.ItemOrGroup | null;\n // Returns the tree index of the given item. The item must be present\n // in the tree (referential comparison), or an error will be thrown\n getItemIndex: (item: ButtonDropdownProps.ItemOrGroup) => TreeIndex;\n // Returns the index of next or previous sequential node or null if out of bounds\n getSequentialIndex: (index: TreeIndex, direction: -1 | 1, loop?: boolean) => TreeIndex | null;\n // Returns parent tree index of a given item or null if no parent is present\n getParentIndex: (item: ButtonDropdownProps.ItemOrGroup) => TreeIndex | null;\n}\n\nexport default function createItemsTree(items: ButtonDropdownProps.Items): ItemsTreeApi {\n const itemToIndex = new Map<ButtonDropdownProps.ItemOrGroup, string>();\n const indexToItem = new Map<string, ButtonDropdownProps.ItemOrGroup>();\n const flatIndices: string[] = [];\n\n traverseItems(items, (item, index) => {\n const indexKey = stringifyIndex(index);\n itemToIndex.set(item, indexKey);\n indexToItem.set(indexKey, item);\n flatIndices.push(indexKey);\n });\n\n return {\n getItem: (index: TreeIndex): ButtonDropdownProps.ItemOrGroup | null => {\n const indexKey = stringifyIndex(index);\n\n return indexToItem.get(indexKey) || null;\n },\n getItemIndex: (item: ButtonDropdownProps.ItemOrGroup): TreeIndex => {\n const indexKey = itemToIndex.get(item);\n\n if (!indexKey) {\n throw new Error('Invariant violation: item is not found.');\n }\n\n return parseIndex(indexKey);\n },\n getSequentialIndex: (index: TreeIndex, direction: -1 | 1, loop = false): TreeIndex | null => {\n const indexKey = stringifyIndex(index);\n const position = flatIndices.indexOf(indexKey);\n\n let nextIndex = position + direction;\n if (loop) {\n if (nextIndex < 0) {\n nextIndex = flatIndices.length - 1;\n } else if (nextIndex >= flatIndices.length) {\n nextIndex = 0;\n }\n }\n const nextIndexKey = flatIndices[nextIndex];\n\n if (!nextIndexKey) {\n return null;\n }\n\n return parseIndex(nextIndexKey);\n },\n getParentIndex: (item: ButtonDropdownProps.ItemOrGroup): TreeIndex | null => {\n const indexKey = itemToIndex.get(item);\n\n if (!indexKey) {\n throw new Error('Invariant violation: item is not found.');\n }\n\n const index = parseIndex(indexKey);\n\n // No parent\n if (index.length === 1) {\n return null;\n }\n\n return index.slice(0, index.length - 1);\n },\n };\n}\n\nexport function traverseItems(\n items: ButtonDropdownProps.Items,\n act: (item: ButtonDropdownProps.ItemOrGroup, index: TreeIndex) => void,\n parentIndex: TreeIndex = []\n) {\n items.forEach((item, index) => {\n const itemIndex = [...parentIndex, index];\n act(item, itemIndex);\n\n if (isItemGroup(item)) {\n traverseItems(item.items, act, itemIndex);\n }\n });\n}\n\nfunction stringifyIndex(index: TreeIndex): string {\n return index.join('-');\n}\n\nfunction parseIndex(index: string): TreeIndex {\n return index.split('-').map(it => parseInt(it));\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"use-button-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,sBAAsB,EAAyC,MAAM,uBAAuB,CAAC;AAEtG,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAIvH,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,YAAY,CAAC;IAC7B,aAAa,EAAE,WAAW,CAAC;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,kBAA0B,EAC1B,gBAAwB,GACzB,EAAE,wBAAwB,GAAG,oBAAoB,CAwKjD"}
1
+ {"version":3,"file":"use-button-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,sBAAsB,EAAyC,MAAM,uBAAuB,CAAC;AAEtG,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAIvH,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC5E,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,YAAY,CAAC;IAC7B,aAAa,EAAE,WAAW,CAAC;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,kBAA0B,EAC1B,gBAAwB,GACzB,EAAE,wBAAwB,GAAG,oBAAoB,CA4KjD"}
@@ -39,11 +39,6 @@ export function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFo
39
39
  }
40
40
  closeDropdown();
41
41
  };
42
- const doVerticalNavigation = (direction) => {
43
- if (isOpen) {
44
- moveHighlight(direction);
45
- }
46
- };
47
42
  const openAndSelectFirst = (event) => {
48
43
  toggleDropdown();
49
44
  event.preventDefault();
@@ -80,12 +75,24 @@ export function useButtonDropdown({ items, onItemClick, onItemFollow, onReturnFo
80
75
  setIsUsingMouse(false);
81
76
  switch (event.keyCode) {
82
77
  case KeyCode.down: {
83
- doVerticalNavigation(1);
78
+ if (!isOpen) {
79
+ toggleDropdown();
80
+ moveHighlight(1, true);
81
+ }
82
+ else {
83
+ moveHighlight(1);
84
+ }
84
85
  event.preventDefault();
85
86
  break;
86
87
  }
87
88
  case KeyCode.up: {
88
- doVerticalNavigation(-1);
89
+ if (!isOpen) {
90
+ toggleDropdown();
91
+ moveHighlight(-1, true);
92
+ }
93
+ else {
94
+ moveHighlight(-1);
95
+ }
89
96
  event.preventDefault();
90
97
  break;
91
98
  }
@@ -1 +1 @@
1
- {"version":3,"file":"use-button-dropdown.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { CancelableEventHandler, fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport useHighlightedMenu from './use-highlighted-menu';\nimport { getItemTarget, isCheckboxItem, isItemGroup, isLinkItem } from './utils';\n\ninterface UseButtonDropdownOptions extends ButtonDropdownSettings {\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onReturnFocus: () => void;\n expandToViewport?: boolean;\n}\n\ninterface UseButtonDropdownApi extends HighlightProps {\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onKeyUp: (event: React.KeyboardEvent) => void;\n onItemActivate: ItemActivate;\n onGroupToggle: GroupToggle;\n toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n closeDropdown: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport function useButtonDropdown({\n items,\n onItemClick,\n onItemFollow,\n onReturnFocus,\n hasExpandableGroups,\n isInRestrictedView = false,\n expandToViewport = false,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\n const {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n moveHighlight,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n } = useHighlightedMenu({\n items,\n hasExpandableGroups,\n isInRestrictedView,\n });\n\n const { isOpen, closeDropdown, ...openStateProps } = useOpenState({ onClose: reset });\n const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n if (!isOpen && moveHighlightOnOpen) {\n moveHighlight(1);\n }\n openStateProps.toggleDropdown();\n };\n\n const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n const onItemActivate: ItemActivate = (item, event) => {\n const isCheckbox = isCheckboxItem(item);\n const isLink = isLinkItem(item);\n const details = {\n id: item.id || 'undefined',\n href: isLink ? item.href : undefined,\n external: isLink ? item.external : undefined,\n target: isLink ? getItemTarget(item) : undefined,\n checked: isCheckbox ? !item.checked : undefined,\n };\n onReturnFocus();\n if (onItemFollow && isLink && isPlainLeftClick(event)) {\n fireCancelableEvent(onItemFollow, details, event);\n }\n if (onItemClick) {\n fireCancelableEvent(onItemClick, details, event);\n }\n closeDropdown();\n };\n\n const doVerticalNavigation = (direction: -1 | 1) => {\n if (isOpen) {\n moveHighlight(direction);\n }\n };\n\n const openAndSelectFirst = (event: React.KeyboardEvent) => {\n toggleDropdown();\n event.preventDefault();\n };\n\n const actOnParentDropdown = (event: React.KeyboardEvent) => {\n // if there is no highlighted item we act on the trigger by opening or closing dropdown\n if (!targetItem) {\n if (isOpen && !isInRestrictedView) {\n toggleDropdown();\n } else {\n openAndSelectFirst(event);\n }\n } else {\n if (isItemGroup(targetItem)) {\n onGroupToggle(targetItem, event);\n } else {\n onItemActivate(targetItem, event);\n }\n }\n };\n\n const activate = (event: React.KeyboardEvent, isEnter?: boolean) => {\n setIsUsingMouse(false);\n\n // if item is a link we rely on default behavior of an anchor, no need to prevent\n if (targetItem && isLinkItem(targetItem) && isEnter) {\n return;\n }\n\n event.preventDefault();\n actOnParentDropdown(event);\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n setIsUsingMouse(false);\n switch (event.keyCode) {\n case KeyCode.down: {\n doVerticalNavigation(1);\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n doVerticalNavigation(-1);\n event.preventDefault();\n break;\n }\n case KeyCode.space: {\n // Prevent scrolling the list of items and highlighting the trigger\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (!targetItem?.disabled) {\n activate(event, true);\n }\n break;\n }\n case KeyCode.left:\n case KeyCode.right: {\n if (targetItem && !targetItem.disabled && isItemGroup(targetItem) && !isExpanded(targetItem)) {\n expandGroup();\n } else if (hasExpandableGroups) {\n collapseGroup();\n }\n\n event.preventDefault();\n break;\n }\n case KeyCode.escape: {\n onReturnFocus();\n closeDropdown();\n event.preventDefault();\n if (isOpen) {\n event.stopPropagation();\n }\n break;\n }\n case KeyCode.tab: {\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n if (expandToViewport) {\n onReturnFocus();\n }\n closeDropdown();\n break;\n }\n }\n };\n const onKeyUp = (event: React.KeyboardEvent) => {\n // We need to handle activating items with Space separately because there is a bug\n // in Firefox where changing the focus during a Space keydown event it will trigger\n // unexpected click events on the new element: https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n if (event.keyCode === KeyCode.space && !targetItem?.disabled) {\n activate(event);\n }\n };\n\n return {\n isOpen,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n onKeyDown,\n onKeyUp,\n onItemActivate,\n onGroupToggle,\n toggleDropdown,\n closeDropdown,\n setIsUsingMouse,\n };\n}\n"]}
1
+ {"version":3,"file":"use-button-dropdown.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-button-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { CancelableEventHandler, fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport useHighlightedMenu from './use-highlighted-menu';\nimport { getItemTarget, isCheckboxItem, isItemGroup, isLinkItem } from './utils';\n\ninterface UseButtonDropdownOptions extends ButtonDropdownSettings {\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n onReturnFocus: () => void;\n expandToViewport?: boolean;\n}\n\ninterface UseButtonDropdownApi extends HighlightProps {\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onKeyUp: (event: React.KeyboardEvent) => void;\n onItemActivate: ItemActivate;\n onGroupToggle: GroupToggle;\n toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n closeDropdown: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport function useButtonDropdown({\n items,\n onItemClick,\n onItemFollow,\n onReturnFocus,\n hasExpandableGroups,\n isInRestrictedView = false,\n expandToViewport = false,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\n const {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n moveHighlight,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n } = useHighlightedMenu({\n items,\n hasExpandableGroups,\n isInRestrictedView,\n });\n\n const { isOpen, closeDropdown, ...openStateProps } = useOpenState({ onClose: reset });\n const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n if (!isOpen && moveHighlightOnOpen) {\n moveHighlight(1);\n }\n openStateProps.toggleDropdown();\n };\n\n const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n const onItemActivate: ItemActivate = (item, event) => {\n const isCheckbox = isCheckboxItem(item);\n const isLink = isLinkItem(item);\n const details = {\n id: item.id || 'undefined',\n href: isLink ? item.href : undefined,\n external: isLink ? item.external : undefined,\n target: isLink ? getItemTarget(item) : undefined,\n checked: isCheckbox ? !item.checked : undefined,\n };\n onReturnFocus();\n if (onItemFollow && isLink && isPlainLeftClick(event)) {\n fireCancelableEvent(onItemFollow, details, event);\n }\n if (onItemClick) {\n fireCancelableEvent(onItemClick, details, event);\n }\n closeDropdown();\n };\n\n const openAndSelectFirst = (event: React.KeyboardEvent) => {\n toggleDropdown();\n event.preventDefault();\n };\n\n const actOnParentDropdown = (event: React.KeyboardEvent) => {\n // if there is no highlighted item we act on the trigger by opening or closing dropdown\n if (!targetItem) {\n if (isOpen && !isInRestrictedView) {\n toggleDropdown();\n } else {\n openAndSelectFirst(event);\n }\n } else {\n if (isItemGroup(targetItem)) {\n onGroupToggle(targetItem, event);\n } else {\n onItemActivate(targetItem, event);\n }\n }\n };\n\n const activate = (event: React.KeyboardEvent, isEnter?: boolean) => {\n setIsUsingMouse(false);\n\n // if item is a link we rely on default behavior of an anchor, no need to prevent\n if (targetItem && isLinkItem(targetItem) && isEnter) {\n return;\n }\n\n event.preventDefault();\n actOnParentDropdown(event);\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n setIsUsingMouse(false);\n switch (event.keyCode) {\n case KeyCode.down: {\n if (!isOpen) {\n toggleDropdown();\n moveHighlight(1, true);\n } else {\n moveHighlight(1);\n }\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n if (!isOpen) {\n toggleDropdown();\n moveHighlight(-1, true);\n } else {\n moveHighlight(-1);\n }\n event.preventDefault();\n break;\n }\n case KeyCode.space: {\n // Prevent scrolling the list of items and highlighting the trigger\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (!targetItem?.disabled) {\n activate(event, true);\n }\n break;\n }\n case KeyCode.left:\n case KeyCode.right: {\n if (targetItem && !targetItem.disabled && isItemGroup(targetItem) && !isExpanded(targetItem)) {\n expandGroup();\n } else if (hasExpandableGroups) {\n collapseGroup();\n }\n\n event.preventDefault();\n break;\n }\n case KeyCode.escape: {\n onReturnFocus();\n closeDropdown();\n event.preventDefault();\n if (isOpen) {\n event.stopPropagation();\n }\n break;\n }\n case KeyCode.tab: {\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n if (expandToViewport) {\n onReturnFocus();\n }\n closeDropdown();\n break;\n }\n }\n };\n const onKeyUp = (event: React.KeyboardEvent) => {\n // We need to handle activating items with Space separately because there is a bug\n // in Firefox where changing the focus during a Space keydown event it will trigger\n // unexpected click events on the new element: https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n if (event.keyCode === KeyCode.space && !targetItem?.disabled) {\n activate(event);\n }\n };\n\n return {\n isOpen,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n onKeyDown,\n onKeyUp,\n onItemActivate,\n onGroupToggle,\n toggleDropdown,\n closeDropdown,\n setIsUsingMouse,\n };\n}\n"]}
@@ -5,7 +5,7 @@ interface UseHighlightedMenuOptions {
5
5
  isInRestrictedView?: boolean;
6
6
  }
7
7
  interface UseHighlightedMenuApi extends HighlightProps {
8
- moveHighlight: (direction: -1 | 1) => void;
8
+ moveHighlight: (direction: -1 | 1, loop?: boolean) => void;
9
9
  expandGroup: (group?: ButtonDropdownProps.ItemGroup) => void;
10
10
  collapseGroup: () => void;
11
11
  reset: () => void;
@@ -1 +1 @@
1
- {"version":3,"file":"use-highlighted-menu.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-highlighted-menu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAKpE,UAAU,yBAAyB;IACjC,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,qBAAsB,SAAQ,cAAc;IACpD,aAAa,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,CAAC,KAAK,CAAC,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,mBAAmB,EACnB,kBAA0B,GAC3B,EAAE,yBAAyB,GAAG,qBAAqB,CA6GnD"}
1
+ {"version":3,"file":"use-highlighted-menu.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-highlighted-menu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAKpE,UAAU,yBAAyB;IACjC,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,qBAAsB,SAAQ,cAAc;IACpD,aAAa,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,KAAK,CAAC,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,mBAAmB,EACnB,kBAA0B,GAC3B,EAAE,yBAAyB,GAAG,qBAAqB,CA6GnD"}
@@ -23,9 +23,9 @@ export default function useHighlightedMenu({ items, hasExpandableGroups, isInRes
23
23
  const index = getItemIndex(group);
24
24
  return indexIncludes(index, expandedIndex);
25
25
  }, [expandedIndex, getItemIndex]);
26
- const moveHighlight = useCallback((direction) => {
26
+ const moveHighlight = useCallback((direction, loop) => {
27
27
  const getNext = (index) => {
28
- const nextIndex = getSequentialIndex(index, direction);
28
+ const nextIndex = getSequentialIndex(index, direction, loop);
29
29
  const item = getItem(nextIndex || [-1]);
30
30
  if (!nextIndex || !item) {
31
31
  return null;
@@ -1 +1 @@
1
- {"version":3,"file":"use-highlighted-menu.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-highlighted-menu.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useMemo, useState } from 'react';\n\nimport { ButtonDropdownProps, HighlightProps } from '../interfaces';\nimport createItemsTree, { TreeIndex } from './create-items-tree';\nimport moveHighlightOneStep from './move-highlight';\nimport { indexEquals, indexIncludes } from './utils';\n\ninterface UseHighlightedMenuOptions {\n items: ButtonDropdownProps.Items;\n hasExpandableGroups: boolean;\n isInRestrictedView?: boolean;\n}\n\ninterface UseHighlightedMenuApi extends HighlightProps {\n moveHighlight: (direction: -1 | 1) => void;\n expandGroup: (group?: ButtonDropdownProps.ItemGroup) => void;\n collapseGroup: () => void;\n reset: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport default function useHighlightedMenu({\n items,\n hasExpandableGroups,\n isInRestrictedView = false,\n}: UseHighlightedMenuOptions): UseHighlightedMenuApi {\n const [targetIndex, setTargetIndex] = useState<TreeIndex>([]);\n const [expandedIndex, setExpandedIndex] = useState<TreeIndex>([]);\n const [isUsingMouse, setIsUsingMouse] = useState<boolean>(true);\n\n const { getItem, getItemIndex, getSequentialIndex, getParentIndex } = useMemo(() => createItemsTree(items), [items]);\n\n const targetItem = useMemo(() => getItem(targetIndex), [targetIndex, getItem]);\n\n const isHighlighted = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n const index = getItemIndex(item);\n return indexIncludes(index, targetIndex);\n },\n [targetIndex, getItemIndex]\n );\n\n // check if keyboard focus is on the element\n const isKeyboardHighlight = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n const index = getItemIndex(item);\n return !isUsingMouse && indexEquals(index, targetIndex);\n },\n [targetIndex, getItemIndex, isUsingMouse]\n );\n\n const isExpanded = useCallback(\n (group: ButtonDropdownProps.ItemGroup) => {\n const index = getItemIndex(group);\n\n return indexIncludes(index, expandedIndex);\n },\n [expandedIndex, getItemIndex]\n );\n\n const moveHighlight = useCallback(\n (direction: -1 | 1) => {\n const getNext = (index: TreeIndex) => {\n const nextIndex = getSequentialIndex(index, direction);\n const item = getItem(nextIndex || [-1]);\n\n if (!nextIndex || !item) {\n return null;\n }\n\n const parentIndex = getParentIndex(item);\n const parentItem = parentIndex && getItem(parentIndex);\n\n return { index: nextIndex, item, parent: parentItem || undefined };\n };\n\n const nextIndex = moveHighlightOneStep({\n startIndex: targetIndex,\n expandedIndex,\n getNext,\n hasExpandableGroups,\n isInRestrictedView,\n });\n\n if (nextIndex) {\n setTargetIndex(nextIndex);\n }\n },\n [targetIndex, expandedIndex, getItem, getSequentialIndex, getParentIndex, hasExpandableGroups, isInRestrictedView]\n );\n\n const highlightItem = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n setTargetIndex(getItemIndex(item));\n },\n [getItemIndex]\n );\n\n const expandGroup = useCallback(\n (group?: ButtonDropdownProps.ItemGroup) => {\n const groupIndex = group ? getItemIndex(group) : targetIndex;\n const firstChildIndex = [...groupIndex, 0];\n\n // move to the first child item unless in restricted mode\n setTargetIndex(isInRestrictedView ? groupIndex : firstChildIndex);\n setExpandedIndex(groupIndex);\n },\n [targetIndex, getItemIndex, isInRestrictedView]\n );\n\n const collapseGroup = useCallback(() => {\n if (expandedIndex.length > 0) {\n setTargetIndex(expandedIndex);\n setExpandedIndex(expandedIndex.slice(0, -1));\n }\n }, [expandedIndex]);\n\n const reset = useCallback(() => {\n setTargetIndex([]);\n setExpandedIndex([]);\n }, []);\n\n return {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n moveHighlight,\n highlightItem,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n };\n}\n"]}
1
+ {"version":3,"file":"use-highlighted-menu.js","sourceRoot":"","sources":["../../../../src/button-dropdown/utils/use-highlighted-menu.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useMemo, useState } from 'react';\n\nimport { ButtonDropdownProps, HighlightProps } from '../interfaces';\nimport createItemsTree, { TreeIndex } from './create-items-tree';\nimport moveHighlightOneStep from './move-highlight';\nimport { indexEquals, indexIncludes } from './utils';\n\ninterface UseHighlightedMenuOptions {\n items: ButtonDropdownProps.Items;\n hasExpandableGroups: boolean;\n isInRestrictedView?: boolean;\n}\n\ninterface UseHighlightedMenuApi extends HighlightProps {\n moveHighlight: (direction: -1 | 1, loop?: boolean) => void;\n expandGroup: (group?: ButtonDropdownProps.ItemGroup) => void;\n collapseGroup: () => void;\n reset: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport default function useHighlightedMenu({\n items,\n hasExpandableGroups,\n isInRestrictedView = false,\n}: UseHighlightedMenuOptions): UseHighlightedMenuApi {\n const [targetIndex, setTargetIndex] = useState<TreeIndex>([]);\n const [expandedIndex, setExpandedIndex] = useState<TreeIndex>([]);\n const [isUsingMouse, setIsUsingMouse] = useState<boolean>(true);\n\n const { getItem, getItemIndex, getSequentialIndex, getParentIndex } = useMemo(() => createItemsTree(items), [items]);\n\n const targetItem = useMemo(() => getItem(targetIndex), [targetIndex, getItem]);\n\n const isHighlighted = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n const index = getItemIndex(item);\n return indexIncludes(index, targetIndex);\n },\n [targetIndex, getItemIndex]\n );\n\n // check if keyboard focus is on the element\n const isKeyboardHighlight = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n const index = getItemIndex(item);\n return !isUsingMouse && indexEquals(index, targetIndex);\n },\n [targetIndex, getItemIndex, isUsingMouse]\n );\n\n const isExpanded = useCallback(\n (group: ButtonDropdownProps.ItemGroup) => {\n const index = getItemIndex(group);\n\n return indexIncludes(index, expandedIndex);\n },\n [expandedIndex, getItemIndex]\n );\n\n const moveHighlight = useCallback(\n (direction: -1 | 1, loop?: boolean) => {\n const getNext = (index: TreeIndex) => {\n const nextIndex = getSequentialIndex(index, direction, loop);\n const item = getItem(nextIndex || [-1]);\n\n if (!nextIndex || !item) {\n return null;\n }\n\n const parentIndex = getParentIndex(item);\n const parentItem = parentIndex && getItem(parentIndex);\n\n return { index: nextIndex, item, parent: parentItem || undefined };\n };\n\n const nextIndex = moveHighlightOneStep({\n startIndex: targetIndex,\n expandedIndex,\n getNext,\n hasExpandableGroups,\n isInRestrictedView,\n });\n\n if (nextIndex) {\n setTargetIndex(nextIndex);\n }\n },\n [targetIndex, expandedIndex, getItem, getSequentialIndex, getParentIndex, hasExpandableGroups, isInRestrictedView]\n );\n\n const highlightItem = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n setTargetIndex(getItemIndex(item));\n },\n [getItemIndex]\n );\n\n const expandGroup = useCallback(\n (group?: ButtonDropdownProps.ItemGroup) => {\n const groupIndex = group ? getItemIndex(group) : targetIndex;\n const firstChildIndex = [...groupIndex, 0];\n\n // move to the first child item unless in restricted mode\n setTargetIndex(isInRestrictedView ? groupIndex : firstChildIndex);\n setExpandedIndex(groupIndex);\n },\n [targetIndex, getItemIndex, isInRestrictedView]\n );\n\n const collapseGroup = useCallback(() => {\n if (expandedIndex.length > 0) {\n setTargetIndex(expandedIndex);\n setExpandedIndex(expandedIndex.slice(0, -1));\n }\n }, [expandedIndex]);\n\n const reset = useCallback(() => {\n setTargetIndex([]);\n setExpandedIndex([]);\n }, []);\n\n return {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n moveHighlight,\n highlightItem,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n };\n}\n"]}
package/checkbox/index.js CHANGED
@@ -9,7 +9,7 @@ import { validateProps } from '@cloudscape-design/component-toolkit/internal';
9
9
 
10
10
 
11
11
  const Checkbox = React.forwardRef((props, ref) => {
12
- validateProps('Checkbox', props, ["style"], {}, 'console');
12
+ validateProps('Checkbox', props, ["nativeInputAttributes","style"], {}, 'console');
13
13
  return React.createElement(CoreComponent, {ref,...props});
14
14
  });
15
15
 
@@ -1,5 +1,9 @@
1
1
  import React from 'react';
2
2
  import { NonCancelableEventHandler } from '../internal/events';
3
+ /**
4
+ * @awsuiSystem core
5
+ */
6
+
3
7
  import { BaseCheckboxProps } from './base-checkbox';
4
8
  export interface CheckboxProps extends BaseCheckboxProps {
5
9
  /**
@@ -24,6 +28,17 @@ export interface CheckboxProps extends BaseCheckboxProps {
24
28
  /**
25
29
  * @awsuiSystem core
26
30
  */
31
+
32
+ /**
33
+ * Attributes to add to the native `input` element.
34
+ * Some attributes will be automatically combined with internal attribute values:
35
+ * - `className` will be appended.
36
+ * - Event handlers will be chained, unless the default is prevented.
37
+ *
38
+ * We do not support using this attribute to apply custom styling.
39
+ *
40
+ * @awsuiSystem core
41
+ */
27
42
  }
28
43
  export declare namespace CheckboxProps {
29
44
  interface Ref {
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/checkbox/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEjE;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC;CAC7B;AAED,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,OAAO,EAAE,OAAO,CAAC;QACjB,aAAa,EAAE,KAAK,CAAC;KACtB;IAED,UAAiB,KAAK;QACpB,KAAK,CAAC,EAAE;YACN,IAAI,CAAC,EAAE;gBACL,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,KAAK,CAAC,EAAE;gBACN,MAAM,CAAC,EAAE;oBACP,OAAO,CAAC,EAAE,MAAM,CAAC;oBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;oBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;oBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;iBACnB,CAAC;aACH,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;QACF,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;KACH;CACF"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/checkbox/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEjE;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC;IAE5B;;;;;;;;;OASG;IACH,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC;CACvF;AAED,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,OAAO,EAAE,OAAO,CAAC;QACjB,aAAa,EAAE,KAAK,CAAC;KACtB;IAED,UAAiB,KAAK;QACpB,KAAK,CAAC,EAAE;YACN,IAAI,CAAC,EAAE;gBACL,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,KAAK,CAAC,EAAE;gBACN,MAAM,CAAC,EAAE;oBACP,OAAO,CAAC,EAAE,MAAM,CAAC;oBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;oBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;oBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;iBACnB,CAAC;aACH,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;QACF,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;KACH;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/checkbox/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseCheckboxProps } from './base-checkbox';\n\nexport interface CheckboxProps extends BaseCheckboxProps {\n /**\n * The control's label that's displayed next to the checkbox. A state change occurs when a user clicks on it.\n * @displayname label\n */\n children?: React.ReactNode;\n\n /**\n * Specifies that the component is in an indeterminate state. The behavior of this property replicates\n * the behavior of [the respective property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)\n * in the native control.\n */\n indeterminate?: boolean;\n\n /**\n * Called when the user changes the component state. The event `detail` contains the current value for the `checked` property.\n */\n onChange?: NonCancelableEventHandler<CheckboxProps.ChangeDetail>;\n\n /**\n * Specifies whether to add `aria-required` to the native control.\n */\n ariaRequired?: boolean;\n\n /**\n * @awsuiSystem core\n */\n style?: CheckboxProps.Style;\n}\n\nexport namespace CheckboxProps {\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n\n export interface ChangeDetail {\n checked: boolean;\n indeterminate: false;\n }\n\n export interface Style {\n input?: {\n fill?: {\n checked?: string;\n default?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n stroke?: {\n checked?: string;\n default?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n check?: {\n stroke?: {\n checked?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n label?: {\n color?: {\n checked?: string;\n default?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n };\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/checkbox/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { NonCancelableEventHandler } from '../internal/events';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\nimport { BaseCheckboxProps } from './base-checkbox';\n\nexport interface CheckboxProps extends BaseCheckboxProps {\n /**\n * The control's label that's displayed next to the checkbox. A state change occurs when a user clicks on it.\n * @displayname label\n */\n children?: React.ReactNode;\n\n /**\n * Specifies that the component is in an indeterminate state. The behavior of this property replicates\n * the behavior of [the respective property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)\n * in the native control.\n */\n indeterminate?: boolean;\n\n /**\n * Called when the user changes the component state. The event `detail` contains the current value for the `checked` property.\n */\n onChange?: NonCancelableEventHandler<CheckboxProps.ChangeDetail>;\n\n /**\n * Specifies whether to add `aria-required` to the native control.\n */\n ariaRequired?: boolean;\n\n /**\n * @awsuiSystem core\n */\n style?: CheckboxProps.Style;\n\n /**\n * Attributes to add to the native `input` element.\n * Some attributes will be automatically combined with internal attribute values:\n * - `className` will be appended.\n * - Event handlers will be chained, unless the default is prevented.\n *\n * We do not support using this attribute to apply custom styling.\n *\n * @awsuiSystem core\n */\n nativeInputAttributes?: NativeAttributes<React.InputHTMLAttributes<HTMLInputElement>>;\n}\n\nexport namespace CheckboxProps {\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n\n export interface ChangeDetail {\n checked: boolean;\n indeterminate: false;\n }\n\n export interface Style {\n input?: {\n fill?: {\n checked?: string;\n default?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n stroke?: {\n checked?: string;\n default?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n check?: {\n stroke?: {\n checked?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n label?: {\n color?: {\n checked?: string;\n default?: string;\n disabled?: string;\n indeterminate?: string;\n readOnly?: string;\n };\n };\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,UAAU,aAAc,SAAQ,aAAa,EAAE,0BAA0B;IACvE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,gBAAgB,yFA6GrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,UAAU,aAAc,SAAQ,aAAa,EAAE,0BAA0B;IACvE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,gBAAgB,yFAgHrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -11,10 +11,11 @@ import CheckboxIcon from '../internal/components/checkbox-icon';
11
11
  import { useFormFieldContext } from '../internal/context/form-field-context';
12
12
  import { fireNonCancelableEvent } from '../internal/events';
13
13
  import useForwardFocus from '../internal/hooks/forward-focus';
14
+ import WithNativeAttributes from '../internal/utils/with-native-attributes';
14
15
  import { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';
15
16
  import styles from './styles.css.js';
16
17
  const InternalCheckbox = React.forwardRef((_a, ref) => {
17
- var { controlId, name, checked, disabled, readOnly, ariaRequired, indeterminate, children, description, ariaLabel, onFocus, onBlur, onChange, tabIndex: explicitTabIndex, showOutline, ariaControls, style, __internalRootRef, __injectAnalyticsComponentMetadata = false } = _a, rest = __rest(_a, ["controlId", "name", "checked", "disabled", "readOnly", "ariaRequired", "indeterminate", "children", "description", "ariaLabel", "onFocus", "onBlur", "onChange", "tabIndex", "showOutline", "ariaControls", "style", "__internalRootRef", "__injectAnalyticsComponentMetadata"]);
18
+ var { controlId, name, checked, disabled, readOnly, ariaRequired, indeterminate, children, description, ariaLabel, onFocus, onBlur, onChange, tabIndex: explicitTabIndex, showOutline, ariaControls, style, nativeInputAttributes, __internalRootRef, __injectAnalyticsComponentMetadata = false } = _a, rest = __rest(_a, ["controlId", "name", "checked", "disabled", "readOnly", "ariaRequired", "indeterminate", "children", "description", "ariaLabel", "onFocus", "onBlur", "onChange", "tabIndex", "showOutline", "ariaControls", "style", "nativeInputAttributes", "__internalRootRef", "__injectAnalyticsComponentMetadata"]);
18
19
  const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
19
20
  const baseProps = getBaseProps(rest);
20
21
  const checkboxRef = useRef(null);
@@ -39,7 +40,7 @@ const InternalCheckbox = React.forwardRef((_a, ref) => {
39
40
  if (!disabled && !readOnly) {
40
41
  analyticsMetadata.action = !checked ? 'select' : 'deselect';
41
42
  }
42
- return (React.createElement(AbstractSwitch, Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, showOutline: showOutline, nativeControl: nativeControlProps => (React.createElement("input", Object.assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-required": ariaRequired ? 'true' : undefined, "aria-disabled": readOnly && !disabled ? 'true' : undefined, tabIndex: tabIndex, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
43
+ return (React.createElement(AbstractSwitch, Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, showOutline: showOutline, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, Object.assign({}, nativeControlProps, { tag: "input", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-required": ariaRequired ? 'true' : undefined, "aria-disabled": readOnly && !disabled ? 'true' : undefined, tabIndex: tabIndex, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
43
44
  // empty handler to suppress React controllability warning
44
45
  onChange: () => { } }))), onClick: () => {
45
46
  var _a;
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.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\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { GeneratedAnalyticsMetadataCheckboxComponent } from './analytics-metadata/interfaces';\nimport { CheckboxProps } from './interfaces';\nimport { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n tabIndex?: -1;\n showOutline?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n (\n {\n controlId,\n name,\n checked,\n disabled,\n readOnly,\n ariaRequired,\n indeterminate,\n children,\n description,\n ariaLabel,\n onFocus,\n onBlur,\n onChange,\n tabIndex: explicitTabIndex,\n showOutline,\n ariaControls,\n style,\n __internalRootRef,\n __injectAnalyticsComponentMetadata = false,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = Boolean(indeterminate);\n }\n });\n\n const { tabIndex } = useSingleTabStopNavigation(checkboxRef, { tabIndex: explicitTabIndex });\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataCheckboxComponent = {\n name: 'awsui.Checkbox',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={styles['checkbox-control']}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n showOutline={showOutline}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-required={ariaRequired ? 'true' : undefined}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n tabIndex={tabIndex}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(\n onChange,\n // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n );\n }}\n styledControl={\n <CheckboxIcon\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n readOnly={readOnly}\n style={getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalCheckbox;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.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\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataCheckboxComponent } from './analytics-metadata/interfaces';\nimport { CheckboxProps } from './interfaces';\nimport { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n tabIndex?: -1;\n showOutline?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n (\n {\n controlId,\n name,\n checked,\n disabled,\n readOnly,\n ariaRequired,\n indeterminate,\n children,\n description,\n ariaLabel,\n onFocus,\n onBlur,\n onChange,\n tabIndex: explicitTabIndex,\n showOutline,\n ariaControls,\n style,\n nativeInputAttributes,\n __internalRootRef,\n __injectAnalyticsComponentMetadata = false,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = Boolean(indeterminate);\n }\n });\n\n const { tabIndex } = useSingleTabStopNavigation(checkboxRef, { tabIndex: explicitTabIndex });\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataCheckboxComponent = {\n name: 'awsui.Checkbox',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={styles['checkbox-control']}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n showOutline={showOutline}\n nativeControl={nativeControlProps => (\n <WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>\n {...nativeControlProps}\n tag=\"input\"\n nativeAttributes={nativeInputAttributes}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-required={ariaRequired ? 'true' : undefined}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n tabIndex={tabIndex}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(\n onChange,\n // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n );\n }}\n styledControl={\n <CheckboxIcon\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n readOnly={readOnly}\n style={getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalCheckbox;\n"]}
package/icon/index.js CHANGED
@@ -1,15 +1,18 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- 'use client';
4
- import { __rest } from "tslib";
5
3
  import React from 'react';
6
- import useBaseComponent from '../internal/hooks/use-base-component';
4
+
5
+ import CoreComponent from './internal-do-not-use-core';
7
6
  import { applyDisplayName } from '../internal/utils/apply-display-name';
8
- import InternalIcon from './internal';
9
- export default function Icon(_a) {
10
- var { size = 'normal', variant = 'normal' } = _a, props = __rest(_a, ["size", "variant"]);
11
- const baseComponentProps = useBaseComponent('Icon', { props: { name: props.name, size, variant } });
12
- return React.createElement(InternalIcon, Object.assign({ size: size, variant: variant }, props, baseComponentProps));
13
- }
7
+ import { validateProps } from '@cloudscape-design/component-toolkit/internal';
8
+
9
+
10
+
11
+ const Icon = (props) => {
12
+ validateProps('Icon', props, ["nativeAttributes"], {}, 'console');
13
+ return React.createElement(CoreComponent, props);
14
+ };
15
+
16
+
14
17
  applyDisplayName(Icon, 'Icon');
15
- //# sourceMappingURL=index.js.map
18
+ export default Icon;
@@ -1,5 +1,9 @@
1
1
  import React from 'react';
2
2
  import { BaseComponentProps } from '../internal/base-component';
3
+ /**
4
+ * @awsuiSystem core
5
+ */
6
+
3
7
  export interface IconProps extends BaseComponentProps {
4
8
  /**
5
9
  * Specifies the icon to be displayed.
@@ -59,6 +63,16 @@ export interface IconProps extends BaseComponentProps {
59
63
  * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.
60
64
  */
61
65
  svg?: React.ReactNode;
66
+ /**
67
+ * Attributes to add to the native element.
68
+ * Some attributes will be automatically combined with internal attribute values:
69
+ * - `className` will be appended.
70
+ * - Event handlers will be chained, unless the default is prevented.
71
+ *
72
+ * We do not support using this attribute to apply custom styling.
73
+ *
74
+ * @awsuiSystem core
75
+ */
62
76
  }
63
77
  export declare namespace IconProps {
64
78
  type Name = 'add-plus' | 'anchor-link' | 'angle-left-double' | 'angle-left' | 'angle-right-double' | 'angle-right' | 'angle-up' | 'angle-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'audio-full' | 'audio-half' | 'audio-off' | 'backward-10-seconds' | 'bug' | 'call' | 'calendar' | 'caret-down-filled' | 'caret-down' | 'caret-left-filled' | 'caret-right-filled' | 'caret-up-filled' | 'caret-up' | 'check' | 'contact' | 'close' | 'closed-caption' | 'closed-caption-unavailable' | 'copy' | 'command-prompt' | 'delete-marker' | 'download' | 'drag-indicator' | 'edit' | 'ellipsis' | 'envelope' | 'exit-full-screen' | 'expand' | 'external' | 'face-happy' | 'face-happy-filled' | 'face-neutral' | 'face-neutral-filled' | 'face-sad' | 'face-sad-filled' | 'file-open' | 'file' | 'filter' | 'flag' | 'folder-open' | 'folder' | 'forward-10-seconds' | 'full-screen' | 'gen-ai' | 'globe' | 'grid-view' | 'group-active' | 'group' | 'heart' | 'heart-filled' | 'insert-row' | 'key' | 'keyboard' | 'list-view' | 'location-pin' | 'lock-private' | 'map' | 'menu' | 'microphone' | 'microphone-off' | 'mini-player' | 'multiscreen' | 'notification' | 'pause' | 'play' | 'redo' | 'refresh' | 'remove' | 'resize-area' | 'script' | 'search' | 'security' | 'settings' | 'send' | 'share' | 'shrink' | 'star-filled' | 'star-half' | 'star' | 'status-in-progress' | 'status-info' | 'status-negative' | 'status-pending' | 'status-positive' | 'status-stopped' | 'status-warning' | 'subtract-minus' | 'suggestions' | 'support' | 'thumbs-down-filled' | 'thumbs-down' | 'thumbs-up-filled' | 'thumbs-up' | 'ticket' | 'transcript' | 'treeview-collapse' | 'treeview-expand' | 'undo' | 'unlocked' | 'upload-download' | 'upload' | 'user-profile-active' | 'user-profile' | 'video-off' | 'video-on' | 'video-unavailable' | 'video-camera-off' | 'video-camera-on' | 'video-camera-unavailable' | 'view-full' | 'view-horizontal' | 'view-vertical' | 'zoom-in' | 'zoom-out' | 'zoom-to-fit';
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface IconProps extends BaseComponentProps {\n /**\n * Specifies the icon to be displayed.\n */\n name?: IconProps.Name;\n\n /**\n * Specifies the size of the icon.\n *\n * If you set size to `inherit`, an icon size will be assigned based on the icon's inherited line height.\n * For icons used alongside text, ensure the icon is placed inside the acompanying text tag.\n * The icon will be vertically centered based on the height.\n *\n * @visualrefresh `medium` size\n */\n size?: IconProps.Size;\n\n /**\n * Specifies the color variant of the icon. The `normal` variant picks up the current color of its context.\n */\n variant?: IconProps.Variant;\n\n /**\n * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon cannot be an SVG.\n * For SVG icons, use the `svg` slot instead.\n *\n * If you set both `url` and `svg`, `svg` will take precedence.\n */\n url?: string;\n\n /**\n * Specifies alternate text for a custom icon (using the `url` attribute).\n * This property is ignored if you use a predefined icon or if you set your custom icon using the `svg` slot.\n *\n * @deprecated Use `ariaLabel` instead.\n */\n alt?: string;\n\n /**\n * Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n */\n ariaLabel?: string;\n\n /**\n * Specifies the SVG of a custom icon.\n *\n * Use this property if the icon you want isn't available, and you want your custom icon to inherit colors dictated by variant or hover states.\n * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n * - has attribute `focusable=\"false\"`.\n * - has `viewBox=\"0 0 16 16\"`.\n *\n * If you set the `svg` element as the root node of the slot, the component will automatically\n * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n * - set the stroke width based on the size of the icon.\n * - set the width and height of the SVG element based on the size of the icon.\n *\n * If you don't want these styles to be automatically set, wrap the `svg` element into a `span` and ensure icon `size` is not set to `inherit`.\n * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n *\n * If you set both `url` and `svg`, `svg` will take precedence.\n *\n * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n */\n svg?: React.ReactNode;\n}\n\nexport namespace IconProps {\n // Why not enums? Explained there\n // https://stackoverflow.com/questions/52393730/typescript-string-literal-union-type-from-enum\n export type Name =\n | 'add-plus'\n | 'anchor-link'\n | 'angle-left-double'\n | 'angle-left'\n | 'angle-right-double'\n | 'angle-right'\n | 'angle-up'\n | 'angle-down'\n | 'arrow-left'\n | 'arrow-right'\n | 'arrow-up'\n | 'arrow-down'\n | 'audio-full'\n | 'audio-half'\n | 'audio-off'\n | 'backward-10-seconds'\n | 'bug'\n | 'call'\n | 'calendar'\n | 'caret-down-filled'\n | 'caret-down'\n | 'caret-left-filled'\n | 'caret-right-filled'\n | 'caret-up-filled'\n | 'caret-up'\n | 'check'\n | 'contact'\n | 'close'\n | 'closed-caption'\n | 'closed-caption-unavailable'\n | 'copy'\n | 'command-prompt'\n | 'delete-marker'\n | 'download'\n | 'drag-indicator'\n | 'edit'\n | 'ellipsis'\n | 'envelope'\n | 'exit-full-screen'\n | 'expand'\n | 'external'\n | 'face-happy'\n | 'face-happy-filled'\n | 'face-neutral'\n | 'face-neutral-filled'\n | 'face-sad'\n | 'face-sad-filled'\n | 'file-open'\n | 'file'\n | 'filter'\n | 'flag'\n | 'folder-open'\n | 'folder'\n | 'forward-10-seconds'\n | 'full-screen'\n | 'gen-ai'\n | 'globe'\n | 'grid-view'\n | 'group-active'\n | 'group'\n | 'heart'\n | 'heart-filled'\n | 'insert-row'\n | 'key'\n | 'keyboard'\n | 'list-view'\n | 'location-pin'\n | 'lock-private'\n | 'map'\n | 'menu'\n | 'microphone'\n | 'microphone-off'\n | 'mini-player'\n | 'multiscreen'\n | 'notification'\n | 'pause'\n | 'play'\n | 'redo'\n | 'refresh'\n | 'remove'\n | 'resize-area'\n | 'script'\n | 'search'\n | 'security'\n | 'settings'\n | 'send'\n | 'share'\n | 'shrink'\n | 'star-filled'\n | 'star-half'\n | 'star'\n | 'status-in-progress'\n | 'status-info'\n | 'status-negative'\n | 'status-pending'\n | 'status-positive'\n | 'status-stopped'\n | 'status-warning'\n | 'subtract-minus'\n | 'suggestions'\n | 'support'\n | 'thumbs-down-filled'\n | 'thumbs-down'\n | 'thumbs-up-filled'\n | 'thumbs-up'\n | 'ticket'\n | 'transcript'\n | 'treeview-collapse'\n | 'treeview-expand'\n | 'undo'\n | 'unlocked'\n | 'upload-download'\n | 'upload'\n | 'user-profile-active'\n | 'user-profile'\n | 'video-off'\n | 'video-on'\n | 'video-unavailable'\n | 'video-camera-off'\n | 'video-camera-on'\n | 'video-camera-unavailable'\n | 'view-full'\n | 'view-horizontal'\n | 'view-vertical'\n | 'zoom-in'\n | 'zoom-out'\n | 'zoom-to-fit';\n\n export type Variant = 'normal' | 'disabled' | 'error' | 'inverted' | 'link' | 'subtle' | 'success' | 'warning';\n\n export type Size = 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface IconProps extends BaseComponentProps {\n /**\n * Specifies the icon to be displayed.\n */\n name?: IconProps.Name;\n\n /**\n * Specifies the size of the icon.\n *\n * If you set size to `inherit`, an icon size will be assigned based on the icon's inherited line height.\n * For icons used alongside text, ensure the icon is placed inside the acompanying text tag.\n * The icon will be vertically centered based on the height.\n *\n * @visualrefresh `medium` size\n */\n size?: IconProps.Size;\n\n /**\n * Specifies the color variant of the icon. The `normal` variant picks up the current color of its context.\n */\n variant?: IconProps.Variant;\n\n /**\n * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon cannot be an SVG.\n * For SVG icons, use the `svg` slot instead.\n *\n * If you set both `url` and `svg`, `svg` will take precedence.\n */\n url?: string;\n\n /**\n * Specifies alternate text for a custom icon (using the `url` attribute).\n * This property is ignored if you use a predefined icon or if you set your custom icon using the `svg` slot.\n *\n * @deprecated Use `ariaLabel` instead.\n */\n alt?: string;\n\n /**\n * Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n */\n ariaLabel?: string;\n\n /**\n * Specifies the SVG of a custom icon.\n *\n * Use this property if the icon you want isn't available, and you want your custom icon to inherit colors dictated by variant or hover states.\n * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n * - has attribute `focusable=\"false\"`.\n * - has `viewBox=\"0 0 16 16\"`.\n *\n * If you set the `svg` element as the root node of the slot, the component will automatically\n * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n * - set the stroke width based on the size of the icon.\n * - set the width and height of the SVG element based on the size of the icon.\n *\n * If you don't want these styles to be automatically set, wrap the `svg` element into a `span` and ensure icon `size` is not set to `inherit`.\n * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n *\n * If you set both `url` and `svg`, `svg` will take precedence.\n *\n * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n */\n svg?: React.ReactNode;\n\n /**\n * Attributes to add to the native element.\n * Some attributes will be automatically combined with internal attribute values:\n * - `className` will be appended.\n * - Event handlers will be chained, unless the default is prevented.\n *\n * We do not support using this attribute to apply custom styling.\n *\n * @awsuiSystem core\n */\n nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace IconProps {\n // Why not enums? Explained there\n // https://stackoverflow.com/questions/52393730/typescript-string-literal-union-type-from-enum\n export type Name =\n | 'add-plus'\n | 'anchor-link'\n | 'angle-left-double'\n | 'angle-left'\n | 'angle-right-double'\n | 'angle-right'\n | 'angle-up'\n | 'angle-down'\n | 'arrow-left'\n | 'arrow-right'\n | 'arrow-up'\n | 'arrow-down'\n | 'audio-full'\n | 'audio-half'\n | 'audio-off'\n | 'backward-10-seconds'\n | 'bug'\n | 'call'\n | 'calendar'\n | 'caret-down-filled'\n | 'caret-down'\n | 'caret-left-filled'\n | 'caret-right-filled'\n | 'caret-up-filled'\n | 'caret-up'\n | 'check'\n | 'contact'\n | 'close'\n | 'closed-caption'\n | 'closed-caption-unavailable'\n | 'copy'\n | 'command-prompt'\n | 'delete-marker'\n | 'download'\n | 'drag-indicator'\n | 'edit'\n | 'ellipsis'\n | 'envelope'\n | 'exit-full-screen'\n | 'expand'\n | 'external'\n | 'face-happy'\n | 'face-happy-filled'\n | 'face-neutral'\n | 'face-neutral-filled'\n | 'face-sad'\n | 'face-sad-filled'\n | 'file-open'\n | 'file'\n | 'filter'\n | 'flag'\n | 'folder-open'\n | 'folder'\n | 'forward-10-seconds'\n | 'full-screen'\n | 'gen-ai'\n | 'globe'\n | 'grid-view'\n | 'group-active'\n | 'group'\n | 'heart'\n | 'heart-filled'\n | 'insert-row'\n | 'key'\n | 'keyboard'\n | 'list-view'\n | 'location-pin'\n | 'lock-private'\n | 'map'\n | 'menu'\n | 'microphone'\n | 'microphone-off'\n | 'mini-player'\n | 'multiscreen'\n | 'notification'\n | 'pause'\n | 'play'\n | 'redo'\n | 'refresh'\n | 'remove'\n | 'resize-area'\n | 'script'\n | 'search'\n | 'security'\n | 'settings'\n | 'send'\n | 'share'\n | 'shrink'\n | 'star-filled'\n | 'star-half'\n | 'star'\n | 'status-in-progress'\n | 'status-info'\n | 'status-negative'\n | 'status-pending'\n | 'status-positive'\n | 'status-stopped'\n | 'status-warning'\n | 'subtract-minus'\n | 'suggestions'\n | 'support'\n | 'thumbs-down-filled'\n | 'thumbs-down'\n | 'thumbs-up-filled'\n | 'thumbs-up'\n | 'ticket'\n | 'transcript'\n | 'treeview-collapse'\n | 'treeview-expand'\n | 'undo'\n | 'unlocked'\n | 'upload-download'\n | 'upload'\n | 'user-profile-active'\n | 'user-profile'\n | 'video-off'\n | 'video-on'\n | 'video-unavailable'\n | 'video-camera-off'\n | 'video-camera-on'\n | 'video-camera-unavailable'\n | 'view-full'\n | 'view-horizontal'\n | 'view-vertical'\n | 'zoom-in'\n | 'zoom-out'\n | 'zoom-to-fit';\n\n export type Variant = 'normal' | 'disabled' | 'error' | 'inverted' | 'link' | 'subtle' | 'success' | 'warning';\n\n export type Size = 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';\n}\n"]}
@@ -0,0 +1,15 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ 'use client';
4
+ import { __rest } from "tslib";
5
+ import React from 'react';
6
+ import useBaseComponent from '../internal/hooks/use-base-component';
7
+ import { applyDisplayName } from '../internal/utils/apply-display-name';
8
+ import InternalIcon from './internal';
9
+ export default function Icon(_a) {
10
+ var { size = 'normal', variant = 'normal' } = _a, props = __rest(_a, ["size", "variant"]);
11
+ const baseComponentProps = useBaseComponent('Icon', { props: { name: props.name, size, variant } });
12
+ return React.createElement(InternalIcon, Object.assign({ size: size, variant: variant }, props, baseComponentProps));
13
+ }
14
+ applyDisplayName(Icon, 'Icon');
15
+ //# sourceMappingURL=internal-do-not-use-core.js.map
@@ -13,6 +13,7 @@ declare const InternalIcon: ({
13
13
  ariaLabel,
14
14
  svg,
15
15
  badge,
16
+ nativeAttributes,
16
17
  __internalRootRef,
17
18
  ...props
18
19
  }: InternalIconProps) => JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/icon/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,KAAK,iBAAiB,GAAG,SAAS,GAChC,0BAA0B,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAqBJ,QAAA,MAAM,YAAY,0FAWf,iBAAiB,gBA0FnB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC7B,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/icon/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,KAAK,iBAAiB,GAAG,SAAS,GAChC,0BAA0B,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAqBJ,QAAA,MAAM,YAAY,4GAYf,iBAAiB,gBA+GnB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC7B,eAAe,YAAY,CAAC"}
package/icon/internal.js CHANGED
@@ -7,6 +7,7 @@ import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/int
7
7
  import { InternalIconContext } from '../icon-provider/context';
8
8
  import { getBaseProps } from '../internal/base-component';
9
9
  import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
10
+ import WithNativeAttributes from '../internal/utils/with-native-attributes';
10
11
  import styles from './styles.css.js';
11
12
  function iconSizeMap(height) {
12
13
  if (height === null) {
@@ -30,7 +31,7 @@ function iconSizeMap(height) {
30
31
  }
31
32
  }
32
33
  const InternalIcon = (_a) => {
33
- var { name, size = 'normal', variant = 'normal', url, alt, ariaLabel, svg, badge, __internalRootRef } = _a, props = __rest(_a, ["name", "size", "variant", "url", "alt", "ariaLabel", "svg", "badge", "__internalRootRef"]);
34
+ var { name, size = 'normal', variant = 'normal', url, alt, ariaLabel, svg, badge, nativeAttributes, __internalRootRef } = _a, props = __rest(_a, ["name", "size", "variant", "url", "alt", "ariaLabel", "svg", "badge", "nativeAttributes", "__internalRootRef"]);
34
35
  const icons = useContext(InternalIconContext);
35
36
  const iconRef = useRef(null);
36
37
  // To ensure a re-render is triggered on visual mode changes
@@ -59,10 +60,10 @@ const InternalIcon = (_a) => {
59
60
  if (url) {
60
61
  warnOnce('Icon', 'You have specified both `url` and `svg`. `svg` will take precedence and `url` will be ignored.');
61
62
  }
62
- return (React.createElement("span", Object.assign({}, baseProps, labelAttributes, { ref: mergedRef, "aria-hidden": !hasAriaLabel, style: inlineStyles }), svg));
63
+ return (React.createElement(WithNativeAttributes, Object.assign({}, baseProps, labelAttributes, { tag: "span", nativeAttributes: nativeAttributes, ref: mergedRef, "aria-hidden": !hasAriaLabel, style: inlineStyles }), svg));
63
64
  }
64
65
  if (url) {
65
- return (React.createElement("span", Object.assign({}, baseProps, { ref: mergedRef, style: inlineStyles }),
66
+ return (React.createElement(WithNativeAttributes, Object.assign({}, baseProps, { tag: "span", nativeAttributes: nativeAttributes, ref: mergedRef, style: inlineStyles }),
66
67
  React.createElement("img", { src: url, alt: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : alt })));
67
68
  }
68
69
  const validIcon = name && Object.prototype.hasOwnProperty.call(icons, name);
@@ -75,7 +76,7 @@ const InternalIcon = (_a) => {
75
76
  return icons[name];
76
77
  }
77
78
  }
78
- return (React.createElement("span", Object.assign({}, baseProps, labelAttributes, { ref: mergedRef, style: inlineStyles }), validIcon ? iconMap(name) : undefined));
79
+ return (React.createElement(WithNativeAttributes, Object.assign({}, baseProps, labelAttributes, { tag: "span", nativeAttributes: nativeAttributes, ref: mergedRef, style: inlineStyles }), validIcon ? iconMap(name) : undefined));
79
80
  };
80
81
  export default InternalIcon;
81
82
  //# sourceMappingURL=internal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/icon/internal.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\nimport React, { useContext, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalIconContext } from '../icon-provider/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { IconProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalIconProps = IconProps &\n InternalBaseComponentProps & {\n badge?: boolean;\n };\n\nfunction iconSizeMap(height: number | null) {\n if (height === null) {\n // This is the best guess for the contextual height while server rendering.\n return 'normal';\n }\n\n if (height >= 50) {\n return 'large';\n } else if (height >= 36) {\n return 'big';\n } else if (height >= 24) {\n return 'medium';\n } else if (height <= 16) {\n return 'small';\n } else {\n return 'normal';\n }\n}\n\nconst InternalIcon = ({\n name,\n size = 'normal',\n variant = 'normal',\n url,\n alt,\n ariaLabel,\n svg,\n badge,\n __internalRootRef,\n ...props\n}: InternalIconProps) => {\n const icons = useContext(InternalIconContext);\n const iconRef = useRef<HTMLElement>(null);\n // To ensure a re-render is triggered on visual mode changes\n useVisualRefresh();\n const [parentHeight, setParentHeight] = useState<number | null>(null);\n const contextualSize = size === 'inherit';\n const iconSize = contextualSize ? iconSizeMap(parentHeight) : size;\n const inlineStyles = contextualSize && parentHeight !== null ? { height: `${parentHeight}px` } : {};\n const baseProps = getBaseProps(props);\n\n baseProps.className = clsx(\n baseProps.className,\n styles.icon,\n contextualSize && styles['icon-flex-height'],\n badge && styles.badge,\n !contextualSize && styles[`size-${iconSize}-mapped-height`],\n styles[`size-${iconSize}`],\n styles[`variant-${variant}`],\n styles[`name-${name}`]\n );\n\n // Possible infinite loop is not a concern here because line\n // height should not change without an external state update.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (!contextualSize || !iconRef.current) {\n return;\n }\n const { lineHeight } = getComputedStyle(iconRef.current);\n const newParentHeight = parseInt(lineHeight, 10);\n setParentHeight(newParentHeight);\n });\n\n const mergedRef = useMergeRefs(iconRef, __internalRootRef);\n const hasAriaLabel = typeof ariaLabel === 'string';\n const labelAttributes = hasAriaLabel ? { role: 'img', 'aria-label': ariaLabel } : {};\n\n if (svg) {\n if (url) {\n warnOnce(\n 'Icon',\n 'You have specified both `url` and `svg`. `svg` will take precedence and `url` will be ignored.'\n );\n }\n return (\n <span {...baseProps} {...labelAttributes} ref={mergedRef} aria-hidden={!hasAriaLabel} style={inlineStyles}>\n {svg}\n </span>\n );\n }\n\n if (url) {\n return (\n <span {...baseProps} ref={mergedRef} style={inlineStyles}>\n <img src={url} alt={ariaLabel ?? alt} />\n </span>\n );\n }\n\n const validIcon = name && Object.prototype.hasOwnProperty.call(icons, name);\n\n function iconMap(name: IconProps.Name) {\n if (name === 'gen-ai' && iconSize === 'small') {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n data-testid=\"gen-ai-filled\"\n >\n <path\n d=\"m8 4.4 1.018 2.582L11.6 8 9.018 9.018 8 11.6 6.982 9.018 4.4 8l2.582-1.018L8 4.4ZM2.405 2.41l.002-.003.003-.002-.003-.002-.002-.003-.002.003-.003.002.003.002.002.003Z\"\n className=\"filled\"\n />\n </svg>\n );\n } else {\n return icons[name];\n }\n }\n\n return (\n <span {...baseProps} {...labelAttributes} ref={mergedRef} style={inlineStyles}>\n {validIcon ? iconMap(name) : undefined}\n </span>\n );\n};\n\nexport { InternalIconProps };\nexport default InternalIcon;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/icon/internal.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\nimport React, { useContext, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalIconContext } from '../icon-provider/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { IconProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalIconProps = IconProps &\n InternalBaseComponentProps & {\n badge?: boolean;\n };\n\nfunction iconSizeMap(height: number | null) {\n if (height === null) {\n // This is the best guess for the contextual height while server rendering.\n return 'normal';\n }\n\n if (height >= 50) {\n return 'large';\n } else if (height >= 36) {\n return 'big';\n } else if (height >= 24) {\n return 'medium';\n } else if (height <= 16) {\n return 'small';\n } else {\n return 'normal';\n }\n}\n\nconst InternalIcon = ({\n name,\n size = 'normal',\n variant = 'normal',\n url,\n alt,\n ariaLabel,\n svg,\n badge,\n nativeAttributes,\n __internalRootRef,\n ...props\n}: InternalIconProps) => {\n const icons = useContext(InternalIconContext);\n const iconRef = useRef<HTMLElement>(null);\n // To ensure a re-render is triggered on visual mode changes\n useVisualRefresh();\n const [parentHeight, setParentHeight] = useState<number | null>(null);\n const contextualSize = size === 'inherit';\n const iconSize = contextualSize ? iconSizeMap(parentHeight) : size;\n const inlineStyles = contextualSize && parentHeight !== null ? { height: `${parentHeight}px` } : {};\n const baseProps = getBaseProps(props);\n\n baseProps.className = clsx(\n baseProps.className,\n styles.icon,\n contextualSize && styles['icon-flex-height'],\n badge && styles.badge,\n !contextualSize && styles[`size-${iconSize}-mapped-height`],\n styles[`size-${iconSize}`],\n styles[`variant-${variant}`],\n styles[`name-${name}`]\n );\n\n // Possible infinite loop is not a concern here because line\n // height should not change without an external state update.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (!contextualSize || !iconRef.current) {\n return;\n }\n const { lineHeight } = getComputedStyle(iconRef.current);\n const newParentHeight = parseInt(lineHeight, 10);\n setParentHeight(newParentHeight);\n });\n\n const mergedRef = useMergeRefs(iconRef, __internalRootRef);\n const hasAriaLabel = typeof ariaLabel === 'string';\n const labelAttributes = hasAriaLabel ? { role: 'img', 'aria-label': ariaLabel } : {};\n\n if (svg) {\n if (url) {\n warnOnce(\n 'Icon',\n 'You have specified both `url` and `svg`. `svg` will take precedence and `url` will be ignored.'\n );\n }\n return (\n <WithNativeAttributes\n {...baseProps}\n {...labelAttributes}\n tag=\"span\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n aria-hidden={!hasAriaLabel}\n style={inlineStyles}\n >\n {svg}\n </WithNativeAttributes>\n );\n }\n\n if (url) {\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n style={inlineStyles}\n >\n <img src={url} alt={ariaLabel ?? alt} />\n </WithNativeAttributes>\n );\n }\n\n const validIcon = name && Object.prototype.hasOwnProperty.call(icons, name);\n\n function iconMap(name: IconProps.Name) {\n if (name === 'gen-ai' && iconSize === 'small') {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n data-testid=\"gen-ai-filled\"\n >\n <path\n d=\"m8 4.4 1.018 2.582L11.6 8 9.018 9.018 8 11.6 6.982 9.018 4.4 8l2.582-1.018L8 4.4ZM2.405 2.41l.002-.003.003-.002-.003-.002-.002-.003-.002.003-.003.002.003.002.002.003Z\"\n className=\"filled\"\n />\n </svg>\n );\n } else {\n return icons[name];\n }\n }\n\n return (\n <WithNativeAttributes\n {...baseProps}\n {...labelAttributes}\n tag=\"span\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n style={inlineStyles}\n >\n {validIcon ? iconMap(name) : undefined}\n </WithNativeAttributes>\n );\n};\n\nexport { InternalIconProps };\nexport default InternalIcon;\n"]}
@@ -2039,5 +2039,5 @@
2039
2039
  }
2040
2040
  }
2041
2041
  :root {
2042
- --awsui-version-info-18e72229: true;
2042
+ --awsui-version-info-1f4503d4: true;
2043
2043
  }
@@ -1,6 +1,6 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (18e72229)";
3
- export var GIT_SHA = "18e72229";
2
+ export var PACKAGE_VERSION = "3.0.0 (1f4503d4)";
3
+ export var GIT_SHA = "1f4503d4";
4
4
  export var THEME = "open-source-visual-refresh";
5
5
  export var SYSTEM = "console";
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 (18e72229)",
4
- "GIT_SHA": "18e72229",
3
+ "PACKAGE_VERSION": "3.0.0 (1f4503d4)",
4
+ "GIT_SHA": "1f4503d4",
5
5
  "THEME": "open-source-visual-refresh",
6
6
  "SYSTEM": "console",
7
7
  "ALWAYS_VISUAL_REFRESH": true
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "18e722298c6101ce08e59d074f6df75d209e3dad"
2
+ "commit": "1f4503d4084c01fdf47f46d1c15e0edc4616eb8e"
3
3
  }
@@ -72,8 +72,8 @@ export declare function useMultiselect({
72
72
  onKeyDown?: import("../internal/events").CancelableEventHandler<import("../internal/events").BaseKeyDetail> | undefined;
73
73
  onMouseMove?: ((itemIndex: number) => void) | undefined;
74
74
  onMouseUp?: ((itemIndex: number) => void) | undefined;
75
- ariaLabel?: string | undefined;
76
75
  nativeAttributes?: Record<string, any> | undefined;
76
+ ariaLabel?: string | undefined;
77
77
  statusType: DropdownStatusProps.StatusType;
78
78
  decreaseBlockMargin?: boolean | undefined;
79
79
  stickyItemBlockSize?: number | null | undefined;
package/package.json CHANGED
@@ -150,7 +150,7 @@
150
150
  "./internal/base-component/index.js",
151
151
  "./internal/base-component/styles.css.js"
152
152
  ],
153
- "version": "3.0.1080",
153
+ "version": "3.0.1082",
154
154
  "repository": {
155
155
  "type": "git",
156
156
  "url": "https://github.com/cloudscape-design/components.git"
package/spinner/index.js CHANGED
@@ -1,17 +1,18 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- 'use client';
4
- import { __rest } from "tslib";
5
3
  import React from 'react';
6
- import useBaseComponent from '../internal/hooks/use-base-component';
4
+
5
+ import CoreComponent from './internal-do-not-use-core';
7
6
  import { applyDisplayName } from '../internal/utils/apply-display-name';
8
- import InternalSpinner from './internal';
9
- export default function Spinner(_a) {
10
- var { size = 'normal', variant = 'normal' } = _a, props = __rest(_a, ["size", "variant"]);
11
- const baseComponentProps = useBaseComponent('Spinner', {
12
- props: { size, variant },
13
- });
14
- return React.createElement(InternalSpinner, Object.assign({ size: size, variant: variant }, props, baseComponentProps));
15
- }
7
+ import { validateProps } from '@cloudscape-design/component-toolkit/internal';
8
+
9
+
10
+
11
+ const Spinner = (props) => {
12
+ validateProps('Spinner', props, ["nativeAttributes"], {}, 'console');
13
+ return React.createElement(CoreComponent, props);
14
+ };
15
+
16
+
16
17
  applyDisplayName(Spinner, 'Spinner');
17
- //# sourceMappingURL=index.js.map
18
+ export default Spinner;
@@ -1,4 +1,9 @@
1
+ /// <reference types="react" />
1
2
  import { BaseComponentProps } from '../internal/base-component';
3
+ /**
4
+ * @awsuiSystem core
5
+ */
6
+
2
7
  export interface SpinnerProps extends BaseComponentProps {
3
8
  /**
4
9
  * Specifies the size of the spinner.
@@ -8,6 +13,16 @@ export interface SpinnerProps extends BaseComponentProps {
8
13
  * Specifies the color variant of the spinner. The `normal` variant picks up the current color of its context.
9
14
  */
10
15
  variant?: SpinnerProps.Variant;
16
+ /**
17
+ * Attributes to add to the native element.
18
+ * Some attributes will be automatically combined with internal attribute values:
19
+ * - `className` will be appended.
20
+ * - Event handlers will be chained, unless the default is prevented.
21
+ *
22
+ * We do not support using this attribute to apply custom styling.
23
+ *
24
+ * @awsuiSystem core
25
+ */
11
26
  }
12
27
  export declare namespace SpinnerProps {
13
28
  type Size = 'normal' | 'big' | 'large';
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/spinner/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC;CAChC;AAED,yBAAiB,YAAY,CAAC;IAC5B,KAAY,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;IAC9C,KAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;CAC1D"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/spinner/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC;IAC/B;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACxE;AAED,yBAAiB,YAAY,CAAC;IAC5B,KAAY,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;IAC9C,KAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;CAC1D"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/spinner/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface SpinnerProps extends BaseComponentProps {\n /**\n * Specifies the size of the spinner.\n */\n size?: SpinnerProps.Size;\n /**\n * Specifies the color variant of the spinner. The `normal` variant picks up the current color of its context.\n */\n variant?: SpinnerProps.Variant;\n}\n\nexport namespace SpinnerProps {\n export type Size = 'normal' | 'big' | 'large';\n export type Variant = 'normal' | 'disabled' | 'inverted';\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/spinner/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface SpinnerProps extends BaseComponentProps {\n /**\n * Specifies the size of the spinner.\n */\n size?: SpinnerProps.Size;\n /**\n * Specifies the color variant of the spinner. The `normal` variant picks up the current color of its context.\n */\n variant?: SpinnerProps.Variant;\n /**\n * Attributes to add to the native element.\n * Some attributes will be automatically combined with internal attribute values:\n * - `className` will be appended.\n * - Event handlers will be chained, unless the default is prevented.\n *\n * We do not support using this attribute to apply custom styling.\n *\n * @awsuiSystem core\n */\n nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace SpinnerProps {\n export type Size = 'normal' | 'big' | 'large';\n export type Variant = 'normal' | 'disabled' | 'inverted';\n}\n"]}
@@ -0,0 +1,17 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ 'use client';
4
+ import { __rest } from "tslib";
5
+ import React from 'react';
6
+ import useBaseComponent from '../internal/hooks/use-base-component';
7
+ import { applyDisplayName } from '../internal/utils/apply-display-name';
8
+ import InternalSpinner from './internal';
9
+ export default function Spinner(_a) {
10
+ var { size = 'normal', variant = 'normal' } = _a, props = __rest(_a, ["size", "variant"]);
11
+ const baseComponentProps = useBaseComponent('Spinner', {
12
+ props: { size, variant },
13
+ });
14
+ return React.createElement(InternalSpinner, Object.assign({ size: size, variant: variant }, props, baseComponentProps));
15
+ }
16
+ applyDisplayName(Spinner, 'Spinner');
17
+ //# sourceMappingURL=internal-do-not-use-core.js.map
@@ -5,6 +5,7 @@ interface InternalSpinnerProps extends SpinnerProps, InternalBaseComponentProps
5
5
  export default function InternalSpinner({
6
6
  size,
7
7
  variant,
8
+ nativeAttributes,
8
9
  __internalRootRef,
9
10
  ...props
10
11
  }: InternalSpinnerProps): JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/spinner/internal.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,UAAU,oBAAqB,SAAQ,YAAY,EAAE,0BAA0B;CAAG;AAElF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAe,EACf,OAAkB,EAClB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,oBAAoB,eAatB"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/spinner/internal.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,UAAU,oBAAqB,SAAQ,YAAY,EAAE,0BAA0B;CAAG;AAElF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAe,EACf,OAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,oBAAoB,eAetB"}
@@ -5,12 +5,13 @@ import React from 'react';
5
5
  import clsx from 'clsx';
6
6
  import { getBaseProps } from '../internal/base-component';
7
7
  import { useModalContextLoadingComponent } from '../internal/hooks/use-modal-component-analytics';
8
+ import WithNativeAttributes from '../internal/utils/with-native-attributes';
8
9
  import styles from './styles.css.js';
9
10
  export default function InternalSpinner(_a) {
10
- var { size = 'normal', variant = 'normal', __internalRootRef } = _a, props = __rest(_a, ["size", "variant", "__internalRootRef"]);
11
+ var { size = 'normal', variant = 'normal', nativeAttributes, __internalRootRef } = _a, props = __rest(_a, ["size", "variant", "nativeAttributes", "__internalRootRef"]);
11
12
  const baseProps = getBaseProps(props);
12
13
  useModalContextLoadingComponent();
13
- return (React.createElement("span", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles[`size-${size}`], styles[`variant-${variant}`]), ref: __internalRootRef }),
14
+ return (React.createElement(WithNativeAttributes, Object.assign({}, baseProps, { tag: "span", nativeAttributes: nativeAttributes, className: clsx(baseProps.className, styles.root, styles[`size-${size}`], styles[`variant-${variant}`]), ref: __internalRootRef }),
14
15
  React.createElement("span", { className: clsx(styles.circle, styles['circle-left']) }),
15
16
  React.createElement("span", { className: clsx(styles.circle, styles['circle-right']) })));
16
17
  }
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/spinner/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,iDAAiD,CAAC;AAGlG,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAKjB;QALiB,EACtC,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,QAAQ,EAClB,iBAAiB,OAEI,EADlB,KAAK,cAJ8B,wCAKvC,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,+BAA+B,EAAE,CAAC;IAClC,OAAO,CACL,8CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC,EACvG,GAAG,EAAE,iBAAiB;QAEtB,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,GAAI;QAC/D,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,GAAI,CAC3D,CACR,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useModalContextLoadingComponent } from '../internal/hooks/use-modal-component-analytics';\nimport { SpinnerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalSpinnerProps extends SpinnerProps, InternalBaseComponentProps {}\n\nexport default function InternalSpinner({\n size = 'normal',\n variant = 'normal',\n __internalRootRef,\n ...props\n}: InternalSpinnerProps) {\n const baseProps = getBaseProps(props);\n useModalContextLoadingComponent();\n return (\n <span\n {...baseProps}\n className={clsx(baseProps.className, styles.root, styles[`size-${size}`], styles[`variant-${variant}`])}\n ref={__internalRootRef}\n >\n <span className={clsx(styles.circle, styles['circle-left'])} />\n <span className={clsx(styles.circle, styles['circle-right'])} />\n </span>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/spinner/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,iDAAiD,CAAC;AAClG,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAMjB;QANiB,EACtC,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,QAAQ,EAClB,gBAAgB,EAChB,iBAAiB,OAEI,EADlB,KAAK,cAL8B,4DAMvC,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,+BAA+B,EAAE,CAAC;IAClC,OAAO,CACL,oBAAC,oBAAoB,oBACf,SAAS,IACb,GAAG,EAAC,MAAM,EACV,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC,EACvG,GAAG,EAAE,iBAAiB;QAEtB,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,GAAI;QAC/D,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,GAAI,CAC3C,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useModalContextLoadingComponent } from '../internal/hooks/use-modal-component-analytics';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { SpinnerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalSpinnerProps extends SpinnerProps, InternalBaseComponentProps {}\n\nexport default function InternalSpinner({\n size = 'normal',\n variant = 'normal',\n nativeAttributes,\n __internalRootRef,\n ...props\n}: InternalSpinnerProps) {\n const baseProps = getBaseProps(props);\n useModalContextLoadingComponent();\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n nativeAttributes={nativeAttributes}\n className={clsx(baseProps.className, styles.root, styles[`size-${size}`], styles[`variant-${variant}`])}\n ref={__internalRootRef}\n >\n <span className={clsx(styles.circle, styles['circle-left'])} />\n <span className={clsx(styles.circle, styles['circle-right'])} />\n </WithNativeAttributes>\n );\n}\n"]}