@cloudscape-design/components 3.0.828 → 3.0.830

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 (189) hide show
  1. package/app-layout/visual-refresh-toolbar/navigation/index.d.ts.map +1 -1
  2. package/app-layout/visual-refresh-toolbar/navigation/index.js +5 -4
  3. package/app-layout/visual-refresh-toolbar/navigation/index.js.map +1 -1
  4. package/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -5
  5. package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +10 -16
  6. package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -5
  7. package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map +1 -1
  8. package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js +1 -1
  9. package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js.map +1 -1
  10. package/app-layout/visual-refresh-toolbar/toolbar/index.js +1 -1
  11. package/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
  12. package/button-group/icon-toggle-button-item.d.ts +12 -0
  13. package/button-group/icon-toggle-button-item.d.ts.map +1 -0
  14. package/button-group/icon-toggle-button-item.js +30 -0
  15. package/button-group/icon-toggle-button-item.js.map +1 -0
  16. package/button-group/interfaces.d.ts +42 -6
  17. package/button-group/interfaces.d.ts.map +1 -1
  18. package/button-group/interfaces.js.map +1 -1
  19. package/button-group/item-element.d.ts.map +1 -1
  20. package/button-group/item-element.js +2 -0
  21. package/button-group/item-element.js.map +1 -1
  22. package/button-group/menu-dropdown-item.js +1 -1
  23. package/button-group/menu-dropdown-item.js.map +1 -1
  24. package/{internal/components/file-dropzone → file-dropzone}/index.d.ts +1 -1
  25. package/file-dropzone/index.d.ts.map +1 -0
  26. package/file-dropzone/index.js +14 -0
  27. package/file-dropzone/index.js.map +1 -0
  28. package/{internal/components/file-dropzone → file-dropzone}/interfaces.d.ts +2 -2
  29. package/file-dropzone/interfaces.d.ts.map +1 -0
  30. package/file-dropzone/interfaces.js.map +1 -0
  31. package/file-dropzone/internal.d.ts +5 -0
  32. package/file-dropzone/internal.d.ts.map +1 -0
  33. package/{internal/components/file-dropzone/index.js → file-dropzone/internal.js} +10 -6
  34. package/file-dropzone/internal.js.map +1 -0
  35. package/file-dropzone/styles.css.js +8 -0
  36. package/{internal/components/file-dropzone → file-dropzone}/styles.scoped.css +17 -14
  37. package/{internal/components/file-dropzone → file-dropzone}/styles.selectors.js +3 -3
  38. package/file-dropzone/use-files-dragging.d.ts.map +1 -0
  39. package/file-dropzone/use-files-dragging.js.map +1 -0
  40. package/file-input/index.d.ts +6 -0
  41. package/file-input/index.d.ts.map +1 -0
  42. package/file-input/index.js +20 -0
  43. package/file-input/index.js.map +1 -0
  44. package/{internal/components/file-input → file-input}/interfaces.d.ts +3 -3
  45. package/file-input/interfaces.d.ts.map +1 -0
  46. package/file-input/interfaces.js.map +1 -0
  47. package/file-input/internal.d.ts +6 -0
  48. package/file-input/internal.d.ts.map +1 -0
  49. package/{internal/components/file-input/index.js → file-input/internal.js} +13 -11
  50. package/file-input/internal.js.map +1 -0
  51. package/file-input/styles.css.js +10 -0
  52. package/{internal/components/file-input → file-input}/styles.scoped.css +6 -6
  53. package/file-input/styles.selectors.js +11 -0
  54. package/file-token-group/default-formatters.d.ts.map +1 -0
  55. package/{internal/components/file-token-group → file-token-group}/default-formatters.js +1 -1
  56. package/file-token-group/default-formatters.js.map +1 -0
  57. package/{internal/components/file-token-group → file-token-group}/file-token.d.ts +2 -2
  58. package/file-token-group/file-token.d.ts.map +1 -0
  59. package/{internal/components/file-token-group → file-token-group}/file-token.js +8 -8
  60. package/file-token-group/file-token.js.map +1 -0
  61. package/file-token-group/index.d.ts +6 -0
  62. package/file-token-group/index.d.ts.map +1 -0
  63. package/file-token-group/index.js +23 -0
  64. package/file-token-group/index.js.map +1 -0
  65. package/{internal/components/file-token-group → file-token-group}/interfaces.d.ts +2 -2
  66. package/file-token-group/interfaces.d.ts.map +1 -0
  67. package/file-token-group/interfaces.js.map +1 -0
  68. package/{internal/components/file-token-group/index.d.ts → file-token-group/internal.d.ts} +2 -3
  69. package/file-token-group/internal.d.ts.map +1 -0
  70. package/{internal/components/file-token-group/index.js → file-token-group/internal.js} +7 -7
  71. package/file-token-group/internal.js.map +1 -0
  72. package/file-token-group/styles.css.js +27 -0
  73. package/{internal/components/file-token-group → file-token-group}/styles.scoped.css +29 -29
  74. package/file-token-group/styles.selectors.js +28 -0
  75. package/file-token-group/test-classes/styles.css.js +11 -0
  76. package/file-token-group/test-classes/styles.scoped.css +12 -0
  77. package/file-token-group/test-classes/styles.selectors.js +12 -0
  78. package/file-token-group/thumbnail.d.ts.map +1 -0
  79. package/file-token-group/thumbnail.js.map +1 -0
  80. package/file-upload/internal.d.ts.map +1 -1
  81. package/file-upload/internal.js +6 -5
  82. package/file-upload/internal.js.map +1 -1
  83. package/index.d.ts +3 -0
  84. package/index.d.ts.map +1 -1
  85. package/index.js +3 -0
  86. package/index.js.map +1 -1
  87. package/internal/base-component/styles.scoped.css +30 -20
  88. package/internal/environment.js +1 -1
  89. package/internal/environment.json +1 -1
  90. package/internal/generated/styles/tokens.d.ts +4 -2
  91. package/internal/generated/styles/tokens.js +6 -4
  92. package/internal/generated/theming/index.cjs +136 -74
  93. package/internal/generated/theming/index.js +136 -74
  94. package/internal/manifest.json +1 -1
  95. package/internal/plugins/controllers/drawers.d.ts +6 -2
  96. package/internal/plugins/controllers/drawers.d.ts.map +1 -1
  97. package/internal/plugins/controllers/drawers.js +24 -21
  98. package/internal/plugins/controllers/drawers.js.map +1 -1
  99. package/internal/utils/date-time/format-date-localized.d.ts.map +1 -1
  100. package/internal/utils/date-time/format-date-localized.js +6 -1
  101. package/internal/utils/date-time/format-date-localized.js.map +1 -1
  102. package/package.json +4 -1
  103. package/test-utils/dom/button-group/index.d.ts +5 -0
  104. package/test-utils/dom/button-group/index.js +9 -0
  105. package/test-utils/dom/button-group/index.js.map +1 -1
  106. package/test-utils/dom/{internal/file-dropzone.js → file-dropzone/index.js} +2 -2
  107. package/test-utils/dom/file-dropzone/index.js.map +1 -0
  108. package/test-utils/dom/{internal/file-input.js → file-input/index.js} +2 -2
  109. package/test-utils/dom/file-input/index.js.map +1 -0
  110. package/test-utils/dom/{internal/file-token-group.js → file-token-group/index.js} +14 -14
  111. package/test-utils/dom/file-token-group/index.js.map +1 -0
  112. package/test-utils/dom/file-upload/index.d.ts +1 -1
  113. package/test-utils/dom/file-upload/index.js +13 -13
  114. package/test-utils/dom/file-upload/index.js.map +1 -1
  115. package/test-utils/dom/index.d.ts +9 -0
  116. package/test-utils/dom/index.js +26 -2
  117. package/test-utils/dom/index.js.map +1 -1
  118. package/test-utils/selectors/button-group/index.d.ts +5 -0
  119. package/test-utils/selectors/button-group/index.js +9 -0
  120. package/test-utils/selectors/button-group/index.js.map +1 -1
  121. package/test-utils/selectors/{internal/file-dropzone.js → file-dropzone/index.js} +2 -2
  122. package/test-utils/selectors/file-dropzone/index.js.map +1 -0
  123. package/test-utils/selectors/{internal/file-input.js → file-input/index.js} +2 -2
  124. package/test-utils/selectors/file-input/index.js.map +1 -0
  125. package/test-utils/selectors/{internal/file-token-group.js → file-token-group/index.js} +14 -14
  126. package/test-utils/selectors/file-token-group/index.js.map +1 -0
  127. package/test-utils/selectors/file-upload/index.d.ts +1 -1
  128. package/test-utils/selectors/file-upload/index.js +13 -13
  129. package/test-utils/selectors/file-upload/index.js.map +1 -1
  130. package/test-utils/selectors/index.d.ts +9 -0
  131. package/test-utils/selectors/index.js +26 -2
  132. package/test-utils/selectors/index.js.map +1 -1
  133. package/test-utils/tsconfig.tsbuildinfo +1 -1
  134. package/toggle-button/internal.d.ts +3 -1
  135. package/toggle-button/internal.d.ts.map +1 -1
  136. package/toggle-button/internal.js.map +1 -1
  137. package/wizard/wizard-form.d.ts +4 -2
  138. package/wizard/wizard-form.d.ts.map +1 -1
  139. package/wizard/wizard-form.js +10 -9
  140. package/wizard/wizard-form.js.map +1 -1
  141. package/internal/components/file-dropzone/index.d.ts.map +0 -1
  142. package/internal/components/file-dropzone/index.js.map +0 -1
  143. package/internal/components/file-dropzone/interfaces.d.ts.map +0 -1
  144. package/internal/components/file-dropzone/interfaces.js.map +0 -1
  145. package/internal/components/file-dropzone/styles.css.js +0 -8
  146. package/internal/components/file-dropzone/use-files-dragging.d.ts.map +0 -1
  147. package/internal/components/file-dropzone/use-files-dragging.js.map +0 -1
  148. package/internal/components/file-input/index.d.ts +0 -6
  149. package/internal/components/file-input/index.d.ts.map +0 -1
  150. package/internal/components/file-input/index.js.map +0 -1
  151. package/internal/components/file-input/interfaces.d.ts.map +0 -1
  152. package/internal/components/file-input/interfaces.js.map +0 -1
  153. package/internal/components/file-input/styles.css.js +0 -10
  154. package/internal/components/file-input/styles.selectors.js +0 -11
  155. package/internal/components/file-token-group/default-formatters.d.ts.map +0 -1
  156. package/internal/components/file-token-group/default-formatters.js.map +0 -1
  157. package/internal/components/file-token-group/file-token.d.ts.map +0 -1
  158. package/internal/components/file-token-group/file-token.js.map +0 -1
  159. package/internal/components/file-token-group/index.d.ts.map +0 -1
  160. package/internal/components/file-token-group/index.js.map +0 -1
  161. package/internal/components/file-token-group/interfaces.d.ts.map +0 -1
  162. package/internal/components/file-token-group/interfaces.js.map +0 -1
  163. package/internal/components/file-token-group/styles.css.js +0 -27
  164. package/internal/components/file-token-group/styles.selectors.js +0 -28
  165. package/internal/components/file-token-group/test-classes/styles.css.js +0 -11
  166. package/internal/components/file-token-group/test-classes/styles.scoped.css +0 -12
  167. package/internal/components/file-token-group/test-classes/styles.selectors.js +0 -12
  168. package/internal/components/file-token-group/thumbnail.d.ts.map +0 -1
  169. package/internal/components/file-token-group/thumbnail.js.map +0 -1
  170. package/test-utils/dom/internal/file-dropzone.js.map +0 -1
  171. package/test-utils/dom/internal/file-input.js.map +0 -1
  172. package/test-utils/dom/internal/file-token-group.js.map +0 -1
  173. package/test-utils/selectors/internal/file-dropzone.js.map +0 -1
  174. package/test-utils/selectors/internal/file-input.js.map +0 -1
  175. package/test-utils/selectors/internal/file-token-group.js.map +0 -1
  176. /package/{internal/components/file-dropzone → file-dropzone}/interfaces.js +0 -0
  177. /package/{internal/components/file-dropzone → file-dropzone}/use-files-dragging.d.ts +0 -0
  178. /package/{internal/components/file-dropzone → file-dropzone}/use-files-dragging.js +0 -0
  179. /package/{internal/components/file-input → file-input}/interfaces.js +0 -0
  180. /package/{internal/components/file-token-group → file-token-group}/default-formatters.d.ts +0 -0
  181. /package/{internal/components/file-token-group → file-token-group}/interfaces.js +0 -0
  182. /package/{internal/components/file-token-group → file-token-group}/thumbnail.d.ts +0 -0
  183. /package/{internal/components/file-token-group → file-token-group}/thumbnail.js +0 -0
  184. /package/test-utils/dom/{internal/file-dropzone.d.ts → file-dropzone/index.d.ts} +0 -0
  185. /package/test-utils/dom/{internal/file-input.d.ts → file-input/index.d.ts} +0 -0
  186. /package/test-utils/dom/{internal/file-token-group.d.ts → file-token-group/index.d.ts} +0 -0
  187. /package/test-utils/selectors/{internal/file-dropzone.d.ts → file-dropzone/index.d.ts} +0 -0
  188. /package/test-utils/selectors/{internal/file-input.d.ts → file-input/index.d.ts} +0 -0
  189. /package/test-utils/selectors/{internal/file-token-group.d.ts → file-token-group/index.d.ts} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"item-element.js","sourceRoot":"","sources":["../../../src/button-group/item-element.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, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { fireCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport IconButtonItem from './icon-button-item';\nimport { ButtonGroupProps } from './interfaces';\nimport MenuDropdownItem from './menu-dropdown-item';\n\nimport styles from './styles.css.js';\n\ninterface ItemElementProps {\n item: ButtonGroupProps.Item;\n dropdownExpandToViewport?: boolean;\n tooltip: null | { item: string; feedback: boolean };\n setTooltip: (tooltip: null | { item: string; feedback: boolean }) => void;\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;\n}\n\nconst ItemElement = forwardRef(\n (\n { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }: ItemElementProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n useImperativeHandle(ref, () => ({\n focus: () => {\n buttonRef.current?.focus();\n },\n }));\n\n useEffect(() => {\n if (tooltip?.item !== item.id) {\n return;\n }\n\n const close = () => {\n setTooltip(null);\n };\n\n const handlePointerDownEvent = (event: PointerEvent) => {\n if (event.target && containerRef.current?.contains(event.target as HTMLElement)) {\n return;\n }\n\n close();\n };\n\n const handleKeyDownEvent = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n close();\n }\n };\n\n window.addEventListener('pointerdown', handlePointerDownEvent);\n window.addEventListener('keydown', handleKeyDownEvent);\n\n return () => {\n window.removeEventListener('pointerdown', handlePointerDownEvent);\n window.removeEventListener('keydown', handleKeyDownEvent);\n };\n }, [item.id, tooltip, setTooltip]);\n\n const onShowTooltipSoft = (show: boolean) => {\n if (!tooltip?.feedback) {\n setTooltip(show ? { item: item.id, feedback: false } : null);\n }\n };\n\n const onShowTooltipHard = (show: boolean) => {\n if (!show && item.id !== tooltip?.item) {\n return;\n }\n\n setTooltip(show ? { item: item.id, feedback: false } : null);\n };\n\n const onClickHandler = (event: CustomEvent<ButtonGroupProps.ItemClickDetails>) => {\n const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n if (hasPopoverFeedback) {\n setTooltip({ item: item.id, feedback: true });\n }\n\n fireCancelableEvent(onItemClick, event.detail, event);\n };\n\n return (\n <div\n key={item.id}\n className={styles['item-wrapper']}\n ref={containerRef}\n onPointerEnter={() => onShowTooltipSoft(true)}\n onPointerLeave={() => onShowTooltipSoft(false)}\n onFocus={event => {\n // Showing no tooltip when the focus comes from inside the container.\n // This is needed to prevent the tooltip after a menu closes with item selection or Escape.\n if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {\n return;\n }\n onShowTooltipHard(true);\n }}\n onBlur={() => onShowTooltipHard(false)}\n >\n {item.type === 'icon-button' && (\n <IconButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n />\n )}\n {item.type === 'menu-dropdown' && (\n <MenuDropdownItem\n ref={buttonRef}\n item={item}\n showTooltip={tooltip?.item === item.id}\n onItemClick={onClickHandler}\n expandToViewport={dropdownExpandToViewport}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ItemElement;\n"]}
1
+ {"version":3,"file":"item-element.js","sourceRoot":"","sources":["../../../src/button-group/item-element.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, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { fireCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport IconButtonItem from './icon-button-item';\nimport IconToggleButtonItem from './icon-toggle-button-item.js';\nimport { ButtonGroupProps } from './interfaces';\nimport MenuDropdownItem from './menu-dropdown-item';\n\nimport styles from './styles.css.js';\n\ninterface ItemElementProps {\n item: ButtonGroupProps.Item;\n dropdownExpandToViewport?: boolean;\n tooltip: null | { item: string; feedback: boolean };\n setTooltip: (tooltip: null | { item: string; feedback: boolean }) => void;\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;\n}\n\nconst ItemElement = forwardRef(\n (\n { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }: ItemElementProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n useImperativeHandle(ref, () => ({\n focus: () => {\n buttonRef.current?.focus();\n },\n }));\n\n useEffect(() => {\n if (tooltip?.item !== item.id) {\n return;\n }\n\n const close = () => {\n setTooltip(null);\n };\n\n const handlePointerDownEvent = (event: PointerEvent) => {\n if (event.target && containerRef.current?.contains(event.target as HTMLElement)) {\n return;\n }\n\n close();\n };\n\n const handleKeyDownEvent = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n close();\n }\n };\n\n window.addEventListener('pointerdown', handlePointerDownEvent);\n window.addEventListener('keydown', handleKeyDownEvent);\n\n return () => {\n window.removeEventListener('pointerdown', handlePointerDownEvent);\n window.removeEventListener('keydown', handleKeyDownEvent);\n };\n }, [item.id, tooltip, setTooltip]);\n\n const onShowTooltipSoft = (show: boolean) => {\n if (!tooltip?.feedback) {\n setTooltip(show ? { item: item.id, feedback: false } : null);\n }\n };\n\n const onShowTooltipHard = (show: boolean) => {\n if (!show && item.id !== tooltip?.item) {\n return;\n }\n\n setTooltip(show ? { item: item.id, feedback: false } : null);\n };\n\n const onClickHandler = (event: CustomEvent<ButtonGroupProps.ItemClickDetails>) => {\n const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n if (hasPopoverFeedback) {\n setTooltip({ item: item.id, feedback: true });\n }\n\n fireCancelableEvent(onItemClick, event.detail, event);\n };\n\n return (\n <div\n key={item.id}\n className={styles['item-wrapper']}\n ref={containerRef}\n onPointerEnter={() => onShowTooltipSoft(true)}\n onPointerLeave={() => onShowTooltipSoft(false)}\n onFocus={event => {\n // Showing no tooltip when the focus comes from inside the container.\n // This is needed to prevent the tooltip after a menu closes with item selection or Escape.\n if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {\n return;\n }\n onShowTooltipHard(true);\n }}\n onBlur={() => onShowTooltipHard(false)}\n >\n {item.type === 'icon-button' && (\n <IconButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n />\n )}\n {item.type === 'icon-toggle-button' && (\n <IconToggleButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n />\n )}\n {item.type === 'menu-dropdown' && (\n <MenuDropdownItem\n ref={buttonRef}\n item={item}\n showTooltip={tooltip?.item === item.id}\n onItemClick={onClickHandler}\n expandToViewport={dropdownExpandToViewport}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ItemElement;\n"]}
@@ -10,7 +10,7 @@ import testUtilStyles from './test-classes/styles.css.js';
10
10
  const MenuDropdownItem = React.forwardRef(({ item, showTooltip, onItemClick, expandToViewport }, ref) => {
11
11
  const containerRef = React.useRef(null);
12
12
  const onClickHandler = (event) => {
13
- fireCancelableEvent(onItemClick, { id: event.detail.id }, event);
13
+ fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);
14
14
  };
15
15
  return (React.createElement(ButtonDropdown, { ref: ref, variant: "icon", items: item.items, onItemClick: onClickHandler, expandToViewport: expandToViewport, ariaLabel: item.text, className: testUtilStyles['button-group-item'], "data-testid": item.id, customTriggerBuilder: ({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement("div", { ref: containerRef },
16
16
  !isOpen && showTooltip && !item.disabled && !item.loading && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) })),
@@ -1 +1 @@
1
- {"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAS1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAyB,EAC3E,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,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 InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n item: ButtonGroupProps.MenuDropdown;\n showTooltip: boolean;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n (\n { item, showTooltip, onItemClick, expandToViewport }: MenuDropdownItemProps,\n ref: React.Ref<ButtonDropdownProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n fireCancelableEvent(onItemClick, { id: event.detail.id }, event);\n };\n\n return (\n <ButtonDropdown\n ref={ref}\n variant=\"icon\"\n items={item.items}\n onItemClick={onClickHandler}\n expandToViewport={expandToViewport}\n ariaLabel={item.text}\n className={testUtilStyles['button-group-item']}\n data-testid={item.id}\n customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <div ref={containerRef}>\n {!isOpen && showTooltip && !item.disabled && !item.loading && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={item.text}\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n />\n )}\n <InternalButton\n ref={triggerRef}\n variant=\"icon\"\n ariaLabel={ariaLabel}\n data-itemid={item.id}\n ariaExpanded={ariaExpanded}\n className={clsx(testUtilStyles.item, testUtilsClass)}\n iconName=\"ellipsis\"\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n onClick={onClick}\n __title=\"\"\n />\n </div>\n )}\n />\n );\n }\n);\n\nexport default MenuDropdownItem;\n"]}
1
+ {"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAS1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAyB,EAC3E,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAClG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,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 InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n item: ButtonGroupProps.MenuDropdown;\n showTooltip: boolean;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n (\n { item, showTooltip, onItemClick, expandToViewport }: MenuDropdownItemProps,\n ref: React.Ref<ButtonDropdownProps.Ref>\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);\n };\n\n return (\n <ButtonDropdown\n ref={ref}\n variant=\"icon\"\n items={item.items}\n onItemClick={onClickHandler}\n expandToViewport={expandToViewport}\n ariaLabel={item.text}\n className={testUtilStyles['button-group-item']}\n data-testid={item.id}\n customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <div ref={containerRef}>\n {!isOpen && showTooltip && !item.disabled && !item.loading && (\n <Tooltip\n trackRef={containerRef}\n trackKey={item.id}\n value={item.text}\n className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n />\n )}\n <InternalButton\n ref={triggerRef}\n variant=\"icon\"\n ariaLabel={ariaLabel}\n data-itemid={item.id}\n ariaExpanded={ariaExpanded}\n className={clsx(testUtilStyles.item, testUtilsClass)}\n iconName=\"ellipsis\"\n loading={item.loading}\n loadingText={item.loadingText}\n disabled={item.disabled}\n onClick={onClick}\n __title=\"\"\n />\n </div>\n )}\n />\n );\n }\n);\n\nexport default MenuDropdownItem;\n"]}
@@ -2,5 +2,5 @@
2
2
  import { FileDropzoneProps } from './interfaces';
3
3
  import { useFilesDragging } from './use-files-dragging';
4
4
  export { FileDropzoneProps, useFilesDragging };
5
- export default function InternalFileDropzone({ onChange, children }: FileDropzoneProps): JSX.Element;
5
+ export default function FileDropzone(props: FileDropzoneProps): JSX.Element;
6
6
  //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAG5D"}
@@ -0,0 +1,14 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import React from 'react';
4
+ import useBaseComponent from '../internal/hooks/use-base-component';
5
+ import { applyDisplayName } from '../internal/utils/apply-display-name';
6
+ import InternalFileDropzone from './internal';
7
+ import { useFilesDragging } from './use-files-dragging';
8
+ export { useFilesDragging };
9
+ export default function FileDropzone(props) {
10
+ const baseComponentProps = useBaseComponent('FileDropzone');
11
+ return React.createElement(InternalFileDropzone, Object.assign({}, baseComponentProps, props));
12
+ }
13
+ applyDisplayName(FileDropzone, 'FileDropzone');
14
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/file-dropzone/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,oBAAoB,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAqB,gBAAgB,EAAE,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAwB;IAC3D,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC5D,OAAO,oBAAC,oBAAoB,oBAAK,kBAAkB,EAAM,KAAK,EAAI,CAAC;AACrE,CAAC;AAED,gBAAgB,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FileDropzoneProps } from './interfaces';\nimport InternalFileDropzone from './internal';\nimport { useFilesDragging } from './use-files-dragging';\n\nexport { FileDropzoneProps, useFilesDragging };\n\nexport default function FileDropzone(props: FileDropzoneProps) {\n const baseComponentProps = useBaseComponent('FileDropzone');\n return <InternalFileDropzone {...baseComponentProps} {...props} />;\n}\n\napplyDisplayName(FileDropzone, 'FileDropzone');\n"]}
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { BaseComponentProps } from '../../base-component';
3
- import { NonCancelableEventHandler } from '../../events';
2
+ import { BaseComponentProps } from '../internal/base-component';
3
+ import { NonCancelableEventHandler } from '../internal/events';
4
4
  export interface FileDropzoneProps extends BaseComponentProps {
5
5
  /**
6
6
  * Called when the user selects new file(s), or removes a file.
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/interfaces.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;OAGG;IACH,QAAQ,EAAE,yBAAyB,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACpE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,yBAAiB,iBAAiB,CAAC;IACjC,UAAiB,YAAY;QAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;KACf;CACF"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/file-dropzone/interfaces.tsx"],"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';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface FileDropzoneProps extends BaseComponentProps {\n /**\n * Called when the user selects new file(s), or removes a file.\n * The event `detail` contains the current value of the component.\n */\n onChange: NonCancelableEventHandler<FileDropzoneProps.ChangeDetail>;\n /**\n * Children of the Dropzone.\n */\n children: React.ReactNode;\n}\n\nexport namespace FileDropzoneProps {\n export interface ChangeDetail {\n value: File[];\n }\n}\n"]}
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
3
+ import { FileDropzoneProps } from './interfaces';
4
+ export default function InternalFileDropzone({ onChange, children, __internalRootRef, ...restProps }: FileDropzoneProps & InternalBaseComponentProps): JSX.Element;
5
+ //# sourceMappingURL=internal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/internal.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAC3F,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAIjD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,QAAQ,EACR,iBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,0BAA0B,eA0ChD"}
@@ -1,13 +1,15 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
+ import { __rest } from "tslib";
3
4
  import React, { useState } from 'react';
4
5
  import clsx from 'clsx';
5
- import { fireNonCancelableEvent } from '../../events';
6
- import { useFilesDragging } from './use-files-dragging';
6
+ import { getBaseProps } from '../internal/base-component';
7
+ import { fireNonCancelableEvent } from '../internal/events';
7
8
  import styles from './styles.css.js';
8
- export { useFilesDragging };
9
- export default function InternalFileDropzone({ onChange, children }) {
9
+ export default function InternalFileDropzone(_a) {
10
+ var { onChange, children, __internalRootRef = null } = _a, restProps = __rest(_a, ["onChange", "children", "__internalRootRef"]);
10
11
  const [isDropzoneHovered, setDropzoneHovered] = useState(false);
12
+ const baseProps = getBaseProps(restProps);
11
13
  const onDragOver = (event) => {
12
14
  event.preventDefault();
13
15
  if (event.dataTransfer) {
@@ -27,7 +29,9 @@ export default function InternalFileDropzone({ onChange, children }) {
27
29
  setDropzoneHovered(false);
28
30
  fireNonCancelableEvent(onChange, { value: Array.from(event.dataTransfer.files) });
29
31
  };
30
- return (React.createElement("div", { className: clsx(styles.root, isDropzoneHovered && styles.hovered), onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop },
32
+ return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root, {
33
+ [styles.hovered]: isDropzoneHovered,
34
+ }), onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop }),
31
35
  React.createElement("div", { className: styles.content }, children)));
32
36
  }
33
- //# sourceMappingURL=index.js.map
37
+ //# sourceMappingURL=internal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-dropzone/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAI5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAKI;QALJ,EAC3C,QAAQ,EACR,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEuB,EAD5C,SAAS,cAJ+B,6CAK5C,CADa;IAEZ,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,KAAK,CAAC,YAAY,EAAE;YACtB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;SACxC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,KAAK,CAAC,YAAY,EAAE;YACtB,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;SACxC;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAE1B,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACpF,CAAC,CAAC;IAEF,OAAO,CACL,6CACM,SAAS,IACb,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE;YAChD,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,iBAAiB;SACpC,CAAC,EACF,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM;QAEd,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { FileDropzoneProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport default function InternalFileDropzone({\n onChange,\n children,\n __internalRootRef = null,\n ...restProps\n}: FileDropzoneProps & InternalBaseComponentProps) {\n const [isDropzoneHovered, setDropzoneHovered] = useState(false);\n const baseProps = getBaseProps(restProps);\n\n const onDragOver = (event: React.DragEvent) => {\n event.preventDefault();\n\n if (event.dataTransfer) {\n setDropzoneHovered(true);\n event.dataTransfer.dropEffect = 'copy';\n }\n };\n\n const onDragLeave = (event: React.DragEvent) => {\n event.preventDefault();\n setDropzoneHovered(false);\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = 'none';\n }\n };\n\n const onDrop = (event: React.DragEvent) => {\n event.preventDefault();\n setDropzoneHovered(false);\n\n fireNonCancelableEvent(onChange, { value: Array.from(event.dataTransfer.files) });\n };\n\n return (\n <div\n {...baseProps}\n ref={__internalRootRef}\n className={clsx(baseProps.className, styles.root, {\n [styles.hovered]: isDropzoneHovered,\n })}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n onDrop={onDrop}\n >\n <div className={styles.content}>{children}</div>\n </div>\n );\n}\n"]}
@@ -0,0 +1,8 @@
1
+
2
+ import './styles.scoped.css';
3
+ export default {
4
+ "root": "awsui_root_ptw8i_s4wi0_177",
5
+ "hovered": "awsui_hovered_ptw8i_s4wi0_190",
6
+ "content": "awsui_content_ptw8i_s4wi0_197"
7
+ };
8
+
@@ -174,27 +174,30 @@
174
174
  */
175
175
  /* Style used for links in slots/components that are text heavy, to help links stand out among
176
176
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
177
- .awsui_root_1tk3k_uajxe_177:not(#\9) {
178
- display: flex;
179
- flex-direction: column;
180
- align-items: center;
181
- justify-content: center;
182
- gap: var(--space-static-xxs-82cdfi, 4px);
177
+ .awsui_root_ptw8i_s4wi0_177:not(#\9) {
183
178
  padding-block: var(--space-static-l-0xsx8r, 20px);
184
179
  padding-inline: var(--space-static-l-0xsx8r, 20px);
185
180
  border-start-start-radius: var(--border-radius-dropzone-4sx861, 12px);
186
181
  border-start-end-radius: var(--border-radius-dropzone-4sx861, 12px);
187
182
  border-end-start-radius: var(--border-radius-dropzone-4sx861, 12px);
188
183
  border-end-end-radius: var(--border-radius-dropzone-4sx861, 12px);
189
- color: var(--color-dropzone-text-active-pqn4ld, #656871);
190
- background-color: var(--color-dropzone-background-active-xjesd4, #ebebf0);
191
- font-weight: 700;
184
+ color: var(--color-dropzone-text-default-owo5k2, #424650);
185
+ background-color: var(--color-dropzone-background-default-q8kl4f, #ffffff);
186
+ border-color: var(--color-dropzone-border-default-phwpnt, #8c8c94);
187
+ border-block: 1px dashed var(--color-dropzone-border-default-phwpnt, #8c8c94);
188
+ border-inline: 1px dashed var(--color-dropzone-border-default-phwpnt, #8c8c94);
192
189
  }
193
- .awsui_root_1tk3k_uajxe_177.awsui_hovered_1tk3k_uajxe_193:not(#\9) {
194
- color: var(--color-dropzone-text-hover-xjyyuz, #002b66);
195
- background-color: var(--color-dropzone-background-hover-elxayo, #d1f1ff);
190
+ .awsui_root_ptw8i_s4wi0_177.awsui_hovered_ptw8i_s4wi0_190:not(#\9) {
191
+ color: var(--color-dropzone-text-hover-wteupn, #424650);
192
+ background-color: var(--color-dropzone-background-hover-wl3yez, #f0fbff);
193
+ border-block: 1px dashed var(--color-dropzone-border-hover-tpluhc, #002b66);
194
+ border-inline: 1px dashed var(--color-dropzone-border-hover-tpluhc, #002b66);
196
195
  }
197
196
 
198
- .awsui_content_1tk3k_uajxe_198:not(#\9) {
199
- /* used in test-utils */
197
+ .awsui_content_ptw8i_s4wi0_197:not(#\9) {
198
+ display: flex;
199
+ flex-direction: column;
200
+ gap: var(--space-static-xxs-82cdfi, 4px);
201
+ align-items: center;
202
+ justify-content: center;
200
203
  }
@@ -2,8 +2,8 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_1tk3k_uajxe_177",
6
- "hovered": "awsui_hovered_1tk3k_uajxe_193",
7
- "content": "awsui_content_1tk3k_uajxe_198"
5
+ "root": "awsui_root_ptw8i_s4wi0_177",
6
+ "hovered": "awsui_hovered_ptw8i_s4wi0_190",
7
+ "content": "awsui_content_ptw8i_s4wi0_197"
8
8
  };
9
9
 
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-files-dragging.d.ts","sourceRoot":"","sources":["../../../src/file-dropzone/use-files-dragging.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,wBAAgB,gBAAgB;;EAoD/B"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-files-dragging.js","sourceRoot":"","sources":["../../../src/file-dropzone/use-files-dragging.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE7D,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,8CAA8C;QAC9C,IAAI,SAAS,GAAyC,IAAI,CAAC;QAE3D,mFAAmF;QACnF,MAAM,kBAAkB,GAAG,CAAC,KAAgB,EAAE,EAAE;;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAC,MAAM,KAAI,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;gBACzE,IAAI,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAC,IAAI,CAAC,MAAK,OAAO,EAAE;oBAC/C,KAAK,EAAE,CAAC;iBACT;aACF;YAED,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACvB,SAAS,IAAI,YAAY,CAAC,SAAS,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QAEF,iFAAiF;QACjF,MAAM,mBAAmB,GAAG,CAAC,KAAgB,EAAE,EAAE;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,qDAAqD;QACrD,MAAM,cAAc,GAAG,CAAC,KAAgB,EAAE,EAAE;YAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACjE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACnE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;QAEzD,OAAO,GAAG,EAAE;YACV,SAAS,IAAI,YAAY,CAAC,SAAS,CAAC,CAAC;YACrC,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;YAC7D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAC;YAC/D,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC9B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useState } from 'react';\n\n/**\n * A utility to determine whether or not a file is being currently dragged into the window.\n *\n * @returns An object with the following arguments:\n * `areFilesDragging`: True if a file is being dragged over the current window, false otherwise.\n */\nexport function useFilesDragging() {\n const [areFilesDragging, setFilesDragging] = useState(false);\n\n // Registering global drag events listeners.\n useEffect(() => {\n // The timer helps avoiding dropzone blinking.\n let dragTimer: null | ReturnType<typeof setTimeout> = null;\n\n // The file-upload dropzone is shown when the user drags files over to the browser.\n const onDocumentDragOver = (event: DragEvent) => {\n event.preventDefault();\n\n let files = 0;\n for (let item = 0; item < (event.dataTransfer?.types.length || 0); item++) {\n if (event.dataTransfer?.types[item] === 'Files') {\n files++;\n }\n }\n\n if (files > 0) {\n setFilesDragging(true);\n dragTimer && clearTimeout(dragTimer);\n }\n };\n\n // When the files are no longer dragged over the browser the state must be reset.\n const onDocumentDragLeave = (event: DragEvent) => {\n event.preventDefault();\n\n dragTimer = setTimeout(() => setFilesDragging(false), 25);\n };\n\n // If the files were dropped the state must be reset.\n const onDocumentDrop = (event: DragEvent) => {\n event.preventDefault();\n\n dragTimer = setTimeout(() => setFilesDragging(false), 25);\n };\n\n document.addEventListener('dragover', onDocumentDragOver, false);\n document.addEventListener('dragleave', onDocumentDragLeave, false);\n document.addEventListener('drop', onDocumentDrop, false);\n\n return () => {\n dragTimer && clearTimeout(dragTimer);\n document.removeEventListener('dragover', onDocumentDragOver);\n document.removeEventListener('dragleave', onDocumentDragLeave);\n document.removeEventListener('drop', onDocumentDrop);\n };\n }, []);\n\n return { areFilesDragging };\n}\n"]}
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { FileInputProps } from './interfaces';
3
+ export { FileInputProps };
4
+ declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<FileInputProps.Ref>>;
5
+ export default FileInput;
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/file-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAUd,CAAC;AAGF,eAAe,SAAS,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { __rest } from "tslib";
2
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
+ // SPDX-License-Identifier: Apache-2.0
4
+ import React from 'react';
5
+ import useBaseComponent from '../internal/hooks/use-base-component';
6
+ import { applyDisplayName } from '../internal/utils/apply-display-name';
7
+ import InternalFileInput from './internal';
8
+ const FileInput = React.forwardRef((_a, ref) => {
9
+ var { multiple, variant } = _a, props = __rest(_a, ["multiple", "variant"]);
10
+ const baseComponentProps = useBaseComponent('FileInput', {
11
+ props: {
12
+ multiple,
13
+ variant,
14
+ },
15
+ });
16
+ return React.createElement(InternalFileInput, Object.assign({ multiple: multiple, variant: variant }, props, baseComponentProps, { ref: ref }));
17
+ });
18
+ applyDisplayName(FileInput, 'FileInput');
19
+ export default FileInput;
20
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/file-input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAI3C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAA+C,EAAE,GAAkC,EAAE,EAAE;QAAvF,EAAE,QAAQ,EAAE,OAAO,OAA4B,EAAvB,KAAK,cAA7B,uBAA+B,CAAF;IAC5B,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,EAAE;QACvD,KAAK,EAAE;YACL,QAAQ;YACR,OAAO;SACR;KACF,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,kBAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAClH,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AACzC,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FileInputProps } from './interfaces';\nimport InternalFileInput from './internal';\n\nexport { FileInputProps };\n\nconst FileInput = React.forwardRef(\n ({ multiple, variant, ...props }: FileInputProps, ref: React.Ref<FileInputProps.Ref>) => {\n const baseComponentProps = useBaseComponent('FileInput', {\n props: {\n multiple,\n variant,\n },\n });\n return <InternalFileInput multiple={multiple} variant={variant} {...props} {...baseComponentProps} ref={ref} />;\n }\n);\n\napplyDisplayName(FileInput, 'FileInput');\nexport default FileInput;\n"]}
@@ -1,6 +1,6 @@
1
- import { BaseComponentProps } from '../../base-component';
2
- import { FormFieldCommonValidationControlProps } from '../../context/form-field-context';
3
- import { NonCancelableEventHandler } from '../../events';
1
+ import { BaseComponentProps } from '../internal/base-component';
2
+ import { FormFieldCommonValidationControlProps } from '../internal/context/form-field-context';
3
+ import { NonCancelableEventHandler } from '../internal/events';
4
4
  export interface FileInputProps extends BaseComponentProps, FormFieldCommonValidationControlProps {
5
5
  /**
6
6
  * Variant of the file input. Defaults to "button".
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/file-input/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,qCAAqC,EAAE,MAAM,wCAAwC,CAAC;AAC/F,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,qCAAqC;IAC/F;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE5B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,EAAE,yBAAyB,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAEjE;;;OAGG;IACH,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,YAAY;QAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/file-input/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';\nimport { FormFieldCommonValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface FileInputProps extends BaseComponentProps, FormFieldCommonValidationControlProps {\n /**\n * Variant of the file input. Defaults to \"button\".\n */\n variant?: 'button' | 'icon';\n\n /**\n * Adds `aria-label` to the file input element. Use this to provide an accessible name for file inputs\n * that don't have visible text, and to distinguish between multiple file inputs with identical visible text.\n */\n ariaLabel?: string;\n\n /**\n * Text displayed in the file input component. Used as the aria label if ariaLabel is not defined.\n * @displayname text\n */\n children?: string;\n\n /**\n * Specifies the native file input `accept` attribute to describe the allow-list of file types.\n */\n accept?: string;\n\n /**\n * Specifies whether to add aria-required to the file upload control.\n */\n ariaRequired?: boolean;\n\n /**\n * Specifies the native file input `multiple` attribute to allow users entering more than one file.\n */\n multiple?: boolean;\n\n /**\n * Called when the user selects new file(s), or removes a file.\n * The event `detail` contains the current value of the component.\n */\n onChange: NonCancelableEventHandler<FileInputProps.ChangeDetail>;\n\n /**\n * Specifies the currently selected file(s).\n * If you want to clear the selection, use empty array.\n */\n value: ReadonlyArray<File>;\n}\n\nexport namespace FileInputProps {\n export interface ChangeDetail {\n value: File[];\n }\n\n export interface Ref {\n /**\n * Sets focus on the file upload button.\n */\n focus(): void;\n }\n}\n"]}
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
3
+ import { FileInputProps } from './interfaces';
4
+ declare const InternalFileInput: React.ForwardRefExoticComponent<FileInputProps & InternalBaseComponentProps<any> & React.RefAttributes<FileInputProps.Ref>>;
5
+ export default InternalFileInput;
6
+ //# sourceMappingURL=internal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAY7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAG3F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,QAAA,MAAM,iBAAiB,6HAuGtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
@@ -4,18 +4,20 @@ import { __rest } from "tslib";
4
4
  import React, { useEffect, useRef, useState } from 'react';
5
5
  import clsx from 'clsx';
6
6
  import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
7
- import InternalButton from '../../../button/internal';
8
- import { useFormFieldContext } from '../../../contexts/form-field';
9
- import ScreenreaderOnly from '../../components/screenreader-only';
10
- import { fireNonCancelableEvent } from '../../events';
11
- import checkControlled from '../../hooks/check-controlled';
12
- import useForwardFocus from '../../hooks/forward-focus';
13
- import { useUniqueId } from '../../hooks/use-unique-id';
14
- import { joinStrings } from '../../utils/strings';
7
+ import InternalButton from '../button/internal';
8
+ import { useFormFieldContext } from '../contexts/form-field';
9
+ import { getBaseProps } from '../internal/base-component/index.js';
10
+ import ScreenreaderOnly from '../internal/components/screenreader-only';
11
+ import { fireNonCancelableEvent } from '../internal/events';
12
+ import checkControlled from '../internal/hooks/check-controlled';
13
+ import useForwardFocus from '../internal/hooks/forward-focus';
14
+ import { useUniqueId } from '../internal/hooks/use-unique-id';
15
+ import { joinStrings } from '../internal/utils/strings';
15
16
  import styles from './styles.css.js';
16
17
  const InternalFileInput = React.forwardRef((_a, ref) => {
17
18
  var _b;
18
- var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children"]);
19
+ var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef"]);
20
+ const baseProps = getBaseProps(restProps);
19
21
  const uploadInputRef = useRef(null);
20
22
  const uploadButtonLabelId = useUniqueId('upload-button-label');
21
23
  const formFieldContext = useFormFieldContext(restProps);
@@ -58,10 +60,10 @@ const InternalFileInput = React.forwardRef((_a, ref) => {
58
60
  uploadInputRef.current.value = ''; // reset value to allow calling onChange when the same file is uploaded again
59
61
  }
60
62
  }, [value]);
61
- return (React.createElement("div", { className: clsx(styles.root) },
63
+ return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root) }),
62
64
  React.createElement("input", Object.assign({ id: controlId, ref: uploadInputRef, type: "file", hidden: false, multiple: multiple, accept: accept, onChange: onUploadInputChange, onFocus: onUploadInputFocus, onBlur: onUploadInputBlur, className: clsx(styles['file-input'], styles.hidden) }, nativeAttributes)),
63
65
  React.createElement(InternalButton, { iconName: "upload", variant: variant === 'icon' ? 'icon' : undefined, formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['file-input-button'], isFocused && styles['force-focus-outline']), __nativeAttributes: { tabIndex: -1, 'aria-hidden': true } }, variant === 'button' && children),
64
66
  React.createElement(ScreenreaderOnly, { id: uploadButtonLabelId }, ariaLabel || children)));
65
67
  });
66
68
  export default InternalFileInput;
67
- //# sourceMappingURL=index.js.map
69
+ //# sourceMappingURL=internal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-input/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\n\nimport React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalButton from '../button/internal';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport { FileInputProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nconst InternalFileInput = React.forwardRef(\n (\n {\n accept,\n ariaRequired,\n ariaLabel,\n multiple = false,\n value,\n onChange,\n variant = 'button',\n children,\n __internalRootRef = null,\n ...restProps\n }: FileInputProps & InternalBaseComponentProps,\n ref: Ref<FileInputProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const uploadInputRef = useRef<HTMLInputElement>(null);\n const uploadButtonLabelId = useUniqueId('upload-button-label');\n const formFieldContext = useFormFieldContext(restProps);\n const selfControlId = useUniqueId('upload-input');\n const controlId = formFieldContext.controlId ?? selfControlId;\n\n useForwardFocus(ref, uploadInputRef);\n\n const [isFocused, setIsFocused] = useState(false);\n const onUploadButtonClick = () => uploadInputRef.current?.click();\n const onUploadInputFocus = () => setIsFocused(true);\n const onUploadInputBlur = () => setIsFocused(false);\n\n const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n fireNonCancelableEvent(onChange, { value: target.files ? Array.from(target.files) : [] });\n };\n\n checkControlled('FileInput', 'value', value, 'onChange', onChange);\n\n const nativeAttributes: React.HTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel || children,\n 'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n 'aria-describedby': formFieldContext.ariaDescribedby,\n };\n if (formFieldContext.invalid) {\n nativeAttributes['aria-invalid'] = true;\n }\n if (ariaRequired) {\n nativeAttributes['aria-required'] = true;\n }\n\n if (variant === 'icon' && !ariaLabel) {\n warnOnce('FileInput', 'Aria label is required with icon variant.');\n }\n\n // Synchronizing component's value with the native file input state.\n useEffect(() => {\n /* istanbul ignore next: The DataTransfer is not available in jsdom. */\n if (window.DataTransfer) {\n const dataTransfer = new DataTransfer();\n for (const file of value) {\n dataTransfer.items.add(file);\n }\n uploadInputRef.current!.files = dataTransfer.files;\n }\n if (uploadInputRef.current) {\n uploadInputRef.current.value = ''; // reset value to allow calling onChange when the same file is uploaded again\n }\n }, [value]);\n\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root)}>\n {/* This is the actual interactive and accessible file-upload element. */}\n {/* It is visually hidden to achieve the desired UX design. */}\n <input\n id={controlId}\n ref={uploadInputRef}\n type=\"file\"\n hidden={false}\n multiple={multiple}\n accept={accept}\n onChange={onUploadInputChange}\n onFocus={onUploadInputFocus}\n onBlur={onUploadInputBlur}\n className={clsx(styles['file-input'], styles.hidden)}\n {...nativeAttributes}\n />\n\n {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n {/* When the input is focused the focus outline is forced on the button. */}\n <InternalButton\n iconName=\"upload\"\n variant={variant === 'icon' ? 'icon' : undefined}\n formAction=\"none\"\n onClick={onUploadButtonClick}\n className={clsx(styles['file-input-button'], isFocused && styles['force-focus-outline'])}\n __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n >\n {variant === 'button' && children}\n </InternalButton>\n\n {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n <ScreenreaderOnly id={uploadButtonLabelId}>{ariaLabel || children}</ScreenreaderOnly>\n </div>\n );\n }\n);\n\nexport default InternalFileInput;\n"]}
@@ -0,0 +1,10 @@
1
+
2
+ import './styles.scoped.css';
3
+ export default {
4
+ "root": "awsui_root_1wp4s_tule3_181",
5
+ "file-input": "awsui_file-input_1wp4s_tule3_182",
6
+ "hidden": "awsui_hidden_1wp4s_tule3_186",
7
+ "file-input-button": "awsui_file-input-button_1wp4s_tule3_192",
8
+ "force-focus-outline": "awsui_force-focus-outline_1wp4s_tule3_192"
9
+ };
10
+
@@ -178,25 +178,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
178
178
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
179
179
  SPDX-License-Identifier: Apache-2.0
180
180
  */
181
- .awsui_root_181f9_tule3_181:not(#\9),
182
- .awsui_file-input_181f9_tule3_182:not(#\9) {
181
+ .awsui_root_1wp4s_tule3_181:not(#\9),
182
+ .awsui_file-input_1wp4s_tule3_182:not(#\9) {
183
183
  /* used in test-utils */
184
184
  }
185
185
 
186
- .awsui_hidden_181f9_tule3_186:not(#\9) {
186
+ .awsui_hidden_1wp4s_tule3_186:not(#\9) {
187
187
  position: absolute !important;
188
188
  inset-block-start: -9999px !important;
189
189
  inset-inline-start: -9999px !important;
190
190
  }
191
191
 
192
- body[data-awsui-focus-visible=true] .awsui_file-input-button_181f9_tule3_192.awsui_force-focus-outline_181f9_tule3_192:not(#\9) {
192
+ body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_tule3_192.awsui_force-focus-outline_1wp4s_tule3_192:not(#\9) {
193
193
  position: relative;
194
194
  }
195
- body[data-awsui-focus-visible=true] .awsui_file-input-button_181f9_tule3_192.awsui_force-focus-outline_181f9_tule3_192:not(#\9) {
195
+ body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_tule3_192.awsui_force-focus-outline_1wp4s_tule3_192:not(#\9) {
196
196
  outline: 2px dotted transparent;
197
197
  outline-offset: calc(var(--space-button-focus-outline-gutter-cqfd0c, 4px) - 1px);
198
198
  }
199
- body[data-awsui-focus-visible=true] .awsui_file-input-button_181f9_tule3_192.awsui_force-focus-outline_181f9_tule3_192:not(#\9)::before {
199
+ body[data-awsui-focus-visible=true] .awsui_file-input-button_1wp4s_tule3_192.awsui_force-focus-outline_1wp4s_tule3_192:not(#\9)::before {
200
200
  content: " ";
201
201
  display: block;
202
202
  position: absolute;
@@ -0,0 +1,11 @@
1
+
2
+ // es-module interop with Babel and Typescript
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ module.exports.default = {
5
+ "root": "awsui_root_1wp4s_tule3_181",
6
+ "file-input": "awsui_file-input_1wp4s_tule3_182",
7
+ "hidden": "awsui_hidden_1wp4s_tule3_186",
8
+ "file-input-button": "awsui_file-input-button_1wp4s_tule3_192",
9
+ "force-focus-outline": "awsui_force-focus-outline_1wp4s_tule3_192"
10
+ };
11
+
@@ -0,0 +1 @@
1
+ {"version":3,"file":"default-formatters.d.ts","sourceRoot":"","sources":["../../../src/file-token-group/default-formatters.ts"],"names":[],"mappings":"AAUA,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAWnD;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAEzD"}
@@ -1,6 +1,6 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- import { formatDateTime } from '../../utils/date-time';
3
+ import { formatDateTime } from '../internal/utils/date-time';
4
4
  const KB = 1000;
5
5
  const MB = Math.pow(1000, 2);
6
6
  const GB = Math.pow(1000, 3);
@@ -0,0 +1 @@
1
+ {"version":3,"file":"default-formatters.js","sourceRoot":"","sources":["../../../src/file-token-group/default-formatters.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,MAAM,EAAE,GAAG,IAAI,CAAC;AAChB,MAAM,EAAE,GAAG,SAAA,IAAI,EAAI,CAAC,CAAA,CAAC;AACrB,MAAM,EAAE,GAAG,SAAA,IAAI,EAAI,CAAC,CAAA,CAAC;AACrB,MAAM,EAAE,GAAG,SAAA,IAAI,EAAI,CAAC,CAAA,CAAC;AAErB,MAAM,UAAU,cAAc,CAAC,IAAY;IACzC,IAAI,IAAI,GAAG,EAAE,EAAE;QACb,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;KACvC;IACD,IAAI,IAAI,GAAG,EAAE,EAAE;QACb,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;KACvC;IACD,IAAI,IAAI,GAAG,EAAE,EAAE;QACb,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;KACvC;IACD,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,IAAU;IAC/C,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { formatDateTime } from '../internal/utils/date-time';\n\nconst KB = 1000;\nconst MB = 1000 ** 2;\nconst GB = 1000 ** 3;\nconst TB = 1000 ** 4;\n\nexport function formatFileSize(size: number): string {\n if (size < MB) {\n return `${(size / KB).toFixed(2)} KB`;\n }\n if (size < GB) {\n return `${(size / MB).toFixed(2)} MB`;\n }\n if (size < TB) {\n return `${(size / GB).toFixed(2)} GB`;\n }\n return `${(size / TB).toFixed(2)} TB`;\n}\n\nexport function formatFileLastModified(date: Date): string {\n return formatDateTime(date);\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { TokenGroupProps } from '../../../token-group/interfaces.js';
3
- import { BaseComponentProps } from '../../base-component/index.js';
2
+ import { BaseComponentProps } from '../internal/base-component/index.js';
3
+ import { TokenGroupProps } from '../token-group/interfaces.js';
4
4
  export declare namespace FileTokenProps {
5
5
  interface I18nStrings {
6
6
  removeFileAriaLabel: (fileIndex: number) => string;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-token.d.ts","sourceRoot":"","sources":["../../../src/file-token-group/file-token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAMzE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAO/D,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;QACnD,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;QACjD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;KACjD;CACF;AAED,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,oBAAoB,EACpB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,KAAK,GACN,EAAE,cAAc,eA+HhB;AAED,eAAe,iBAAiB,CAAC"}
@@ -2,13 +2,13 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React, { useRef, useState } from 'react';
4
4
  import clsx from 'clsx';
5
- import InternalBox from '../../../box/internal.js';
6
- import { FormFieldError, FormFieldWarning } from '../../../form-field/internal';
7
- import InternalSpaceBetween from '../../../space-between/internal.js';
8
- import InternalSpinner from '../../../spinner/internal.js';
9
- import DismissButton from '../../../token-group/dismiss-button';
10
- import { useUniqueId } from '../../hooks/use-unique-id';
11
- import Tooltip from '../tooltip/index';
5
+ import InternalBox from '../box/internal.js';
6
+ import { FormFieldError, FormFieldWarning } from '../form-field/internal';
7
+ import Tooltip from '../internal/components/tooltip/index';
8
+ import { useUniqueId } from '../internal/hooks/use-unique-id';
9
+ import InternalSpaceBetween from '../space-between/internal.js';
10
+ import InternalSpinner from '../spinner/internal.js';
11
+ import DismissButton from '../token-group/dismiss-button';
12
12
  import * as defaultFormatters from './default-formatters.js';
13
13
  import { FileOptionThumbnail } from './thumbnail.js';
14
14
  import styles from './styles.css.js';
@@ -35,7 +35,7 @@ function InternalFileToken({ file, showFileLastModified, showFileSize, showFileT
35
35
  const fileIsSingleRow = !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));
36
36
  return (React.createElement("div", { ref: containerRef, className: clsx(styles.token, {
37
37
  [styles['token-grid']]: alignment === 'horizontal',
38
- [styles['token-contains-image']]: groupContainsImage,
38
+ [styles['token-contains-image']]: groupContainsImage && showFileThumbnail,
39
39
  }), role: "group", "aria-label": file.name, "aria-describedby": errorText ? errorId : warningText ? warningId : undefined, "aria-disabled": loading, "data-index": index },
40
40
  React.createElement("div", { className: clsx(styles['token-box'], {
41
41
  [styles.loading]: loading,
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-token.js","sourceRoot":"","sources":["../../../src/file-token-group/file-token.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalBox from '../box/internal.js';\nimport { FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { BaseComponentProps } from '../internal/base-component/index.js';\nimport Tooltip from '../internal/components/tooltip/index';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../space-between/internal.js';\nimport InternalSpinner from '../spinner/internal.js';\nimport DismissButton from '../token-group/dismiss-button';\nimport { TokenGroupProps } from '../token-group/interfaces.js';\nimport * as defaultFormatters from './default-formatters.js';\nimport { FileOptionThumbnail } from './thumbnail.js';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport namespace FileTokenProps {\n export interface I18nStrings {\n removeFileAriaLabel: (fileIndex: number) => string;\n errorIconAriaLabel?: string;\n warningIconAriaLabel?: string;\n formatFileSize?: (sizeInBytes: number) => string;\n formatFileLastModified?: (date: Date) => string;\n }\n}\n\nexport interface FileTokenProps extends BaseComponentProps {\n file: File;\n onDismiss: () => void;\n showFileSize?: boolean;\n showFileLastModified?: boolean;\n showFileThumbnail?: boolean;\n errorText?: React.ReactNode;\n warningText?: React.ReactNode;\n loading?: boolean;\n readOnly?: boolean;\n i18nStrings: FileTokenProps.I18nStrings;\n dismissLabel?: string;\n alignment?: TokenGroupProps.Alignment;\n groupContainsImage?: boolean;\n isImage: boolean;\n index: number;\n}\n\nfunction InternalFileToken({\n file,\n showFileLastModified,\n showFileSize,\n showFileThumbnail,\n i18nStrings,\n onDismiss,\n errorText,\n warningText,\n readOnly,\n loading,\n alignment,\n groupContainsImage,\n isImage,\n index,\n}: FileTokenProps) {\n const formatFileSize = i18nStrings.formatFileSize ?? defaultFormatters.formatFileSize;\n const formatFileLastModified = i18nStrings.formatFileLastModified ?? defaultFormatters.formatFileLastModified;\n\n const errorId = useUniqueId('error');\n const warningId = useUniqueId('warning');\n\n const showWarning = warningText && !errorText;\n const containerRef = useRef<HTMLDivElement>(null);\n const fileNameRef = useRef<HTMLSpanElement>(null);\n const fileNameContainerRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n\n function isEllipsisActive() {\n const span = fileNameRef.current;\n const container = fileNameContainerRef.current;\n\n if (span && container) {\n return span.offsetWidth >= container.offsetWidth;\n }\n return false;\n }\n\n const fileIsSingleRow =\n !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));\n\n return (\n <div\n ref={containerRef}\n className={clsx(styles.token, {\n [styles['token-grid']]: alignment === 'horizontal',\n [styles['token-contains-image']]: groupContainsImage && showFileThumbnail,\n })}\n role=\"group\"\n aria-label={file.name}\n aria-describedby={errorText ? errorId : warningText ? warningId : undefined}\n aria-disabled={loading}\n data-index={index}\n >\n <div\n className={clsx(styles['token-box'], {\n [styles.loading]: loading,\n [styles.error]: errorText,\n [styles.warning]: showWarning,\n [styles.horizontal]: alignment === 'horizontal',\n [styles['read-only']]: readOnly,\n })}\n >\n {loading && (\n <div\n className={clsx(styles['file-loading-overlay'], {\n [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,\n })}\n >\n <InternalSpinner variant=\"disabled\" size=\"normal\" />\n </div>\n )}\n <InternalBox className={styles['file-option']}>\n {showFileThumbnail && isImage && <FileOptionThumbnail file={file} />}\n\n <div\n className={clsx(styles['file-option-metadata'], {\n [styles['with-image']]: showFileThumbnail && isImage,\n [styles['single-row-loading']]: loading && fileIsSingleRow,\n })}\n >\n <InternalSpaceBetween direction=\"vertical\" size=\"xxxs\">\n <div\n onMouseOver={() => setShowTooltip(true)}\n onMouseOut={() => setShowTooltip(false)}\n ref={fileNameContainerRef}\n >\n <InternalBox\n fontWeight=\"normal\"\n className={clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {\n [testUtilStyles['ellipsis-active']]: isEllipsisActive(),\n })}\n >\n <span ref={fileNameRef}>{file.name}</span>\n </InternalBox>\n </div>\n\n {showFileSize && file.size ? (\n <InternalBox\n fontSize=\"body-s\"\n color={'text-body-secondary'}\n className={clsx(styles['file-option-size'], testUtilStyles['file-option-size'])}\n >\n {formatFileSize(file.size)}\n </InternalBox>\n ) : null}\n\n {showFileLastModified && file.lastModified ? (\n <InternalBox\n fontSize=\"body-s\"\n color={'text-body-secondary'}\n className={clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified'])}\n >\n {formatFileLastModified(new Date(file.lastModified))}\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n </div>\n </InternalBox>\n {onDismiss && !readOnly && (\n <DismissButton dismissLabel={i18nStrings.removeFileAriaLabel(index)} onDismiss={onDismiss} />\n )}\n </div>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {showTooltip && isEllipsisActive() && (\n <Tooltip\n trackRef={containerRef}\n trackKey={file.name}\n value={<InternalBox fontWeight=\"normal\">{file.name}</InternalBox>}\n />\n )}\n </div>\n );\n}\n\nexport default InternalFileToken;\n"]}
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { FileTokenGroupProps } from './interfaces';
3
+ export { FileTokenGroupProps };
4
+ declare const FileTokenGroup: ({ showFileLastModified, showFileSize, showFileThumbnail, alignment, limit, ...props }: FileTokenGroupProps) => JSX.Element;
5
+ export default FileTokenGroup;
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/file-token-group/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,QAAA,MAAM,cAAc,0FAOjB,mBAAmB,gBAqBrB,CAAC;AAGF,eAAe,cAAc,CAAC"}