@cloudscape-design/components 3.0.988 → 3.0.990
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.
- package/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +34 -34
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/button-group/analytics-metadata/interfaces.d.ts +10 -0
- package/button-group/analytics-metadata/interfaces.d.ts.map +1 -0
- package/button-group/analytics-metadata/interfaces.js +4 -0
- package/button-group/analytics-metadata/interfaces.js.map +1 -0
- package/button-group/index.d.ts.map +1 -1
- package/button-group/index.js +6 -1
- package/button-group/index.js.map +1 -1
- package/button-group/internal.d.ts.map +1 -1
- package/button-group/internal.js +2 -2
- package/button-group/internal.js.map +1 -1
- package/button-group/item-element.d.ts +1 -0
- package/button-group/item-element.d.ts.map +1 -1
- package/button-group/item-element.js +7 -4
- package/button-group/item-element.js.map +1 -1
- package/button-group/menu-dropdown-item.d.ts +1 -0
- package/button-group/menu-dropdown-item.d.ts.map +1 -1
- package/button-group/menu-dropdown-item.js +3 -2
- package/button-group/menu-dropdown-item.js.map +1 -1
- package/copy-to-clipboard/interfaces.d.ts +10 -0
- package/copy-to-clipboard/interfaces.d.ts.map +1 -1
- package/copy-to-clipboard/interfaces.js.map +1 -1
- package/copy-to-clipboard/internal.d.ts +1 -1
- package/copy-to-clipboard/internal.d.ts.map +1 -1
- package/copy-to-clipboard/internal.js +3 -3
- package/copy-to-clipboard/internal.js.map +1 -1
- package/file-input/analytics-metadata/interfaces.d.ts +11 -0
- package/file-input/analytics-metadata/interfaces.d.ts.map +1 -0
- package/file-input/analytics-metadata/interfaces.js +4 -0
- package/file-input/analytics-metadata/interfaces.js.map +1 -0
- package/file-input/index.d.ts.map +1 -1
- package/file-input/index.js +1 -1
- package/file-input/index.js.map +1 -1
- package/file-input/internal.d.ts +1 -0
- package/file-input/internal.d.ts.map +1 -1
- package/file-input/internal.js +12 -2
- package/file-input/internal.js.map +1 -1
- package/internal/base-component/styles.scoped.css +14 -0
- package/internal/components/drag-handle/button.js +1 -1
- package/internal/components/drag-handle/button.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.d.ts +2 -0
- package/internal/generated/styles/tokens.js +2 -0
- package/internal/generated/theming/index.cjs +62 -0
- package/internal/generated/theming/index.js +62 -0
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/popover/container.d.ts +1 -1
- package/popover/container.d.ts.map +1 -1
- package/popover/container.js +7 -1
- package/popover/container.js.map +1 -1
- package/test-utils/dom/autosuggest/index.js +2 -1
- package/test-utils/dom/autosuggest/index.js.map +1 -1
- package/test-utils/dom/internal/dropdown-host.js +2 -1
- package/test-utils/dom/internal/dropdown-host.js.map +1 -1
- package/test-utils/selectors/autosuggest/index.js +2 -1
- package/test-utils/selectors/autosuggest/index.js.map +1 -1
- package/test-utils/selectors/internal/dropdown-host.js +2 -1
- package/test-utils/selectors/internal/dropdown-host.js.map +1 -1
|
@@ -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;
|
|
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,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,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;AAW1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,QAAQ,EAAyB,EACvG,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,EAC9C,QAAQ,EAAE,QAAQ,iBACL,IAAI,CAAC,EAAE,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,2CAAK,GAAG,EAAE,YAAY,IAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;YACvG,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,EAC/E,SAAS,EAAE,gBAAgB,GAC3B,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,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\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 onTooltipDismiss: () => void;\n onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n expandToViewport?: boolean;\n position: string;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n (\n { item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport, position }: 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 position={position}\n data-testid={item.id}\n disabled={item.disabled}\n customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <div ref={containerRef} {...(item.disabled ? {} : getAnalyticsMetadataAttribute({ detail: { position } }))}>\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 onDismiss={onTooltipDismiss}\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 disabledReason={item.disabledReason}\n onClick={onClick}\n __title=\"\"\n />\n </div>\n )}\n />\n );\n }\n);\n\nexport default MenuDropdownItem;\n"]}
|
|
@@ -42,6 +42,16 @@ export interface CopyToClipboardProps extends BaseComponentProps {
|
|
|
42
42
|
* Enable this setting if you need the popover to ignore its parent stacking context.
|
|
43
43
|
*/
|
|
44
44
|
popoverRenderWithPortal?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Renders the copy to clipboard button as disabled and prevents clicks.
|
|
47
|
+
*/
|
|
48
|
+
disabled?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Provides a reason why the copy to clipboard button is disabled (only when `disabled` is `true`).
|
|
51
|
+
* If provided, the copy to clipboard button becomes focusable.
|
|
52
|
+
* Applicable for all variants except inline.
|
|
53
|
+
*/
|
|
54
|
+
disabledReason?: string;
|
|
45
55
|
}
|
|
46
56
|
export declare namespace CopyToClipboardProps {
|
|
47
57
|
type Variant = 'button' | 'icon' | 'inline';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,yBAAiB,oBAAoB,CAAC;IACpC,KAAY,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;CACpD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface CopyToClipboardProps extends BaseComponentProps {\n /** Determines the general styling of the copy button as follows:\n *\n * * `button` to display a standalone secondary button with an icon, and `copyButtonText` as text.\n * * `icon` to display a standalone icon-only (no text) button.\n * * `inline` to display an icon-only (no text) button within a text context.\n *\n * Defaults to `button`.\n */\n variant?: CopyToClipboardProps.Variant;\n\n /**\n * The text of the copy button (for variant=\"button\").\n */\n copyButtonText?: string;\n\n /**\n * Adds `aria-label` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,\n * and to distinguish between multiple buttons with identical visible text. The text will also be added to the `title` attribute of the button.\n */\n copyButtonAriaLabel?: string;\n\n /**\n * The text content to be copied. It is displayed next to the copy button when `variant=\"inline\"` unless when `content` is specified, and is not shown otherwise.\n */\n textToCopy: string;\n\n /**\n * The text content to display next to the copy button when `variant=\"inline\"`. If not provided, `textToCopy` will be displayed instead.\n */\n textToDisplay?: string;\n\n /**\n * The message shown when the text is copied successfully.\n */\n copySuccessText: string;\n\n /**\n * The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).\n */\n copyErrorText: string;\n\n /**\n * By default, the popover is constrained to fit inside its parent\n * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n * Enabling this property will allow the popover to be rendered in the root stack context using\n * [React Portals](https://reactjs.org/docs/portals.html).\n * Enable this setting if you need the popover to ignore its parent stacking context.\n */\n popoverRenderWithPortal?: boolean;\n}\n\nexport namespace CopyToClipboardProps {\n export type Variant = 'button' | 'icon' | 'inline';\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface CopyToClipboardProps extends BaseComponentProps {\n /** Determines the general styling of the copy button as follows:\n *\n * * `button` to display a standalone secondary button with an icon, and `copyButtonText` as text.\n * * `icon` to display a standalone icon-only (no text) button.\n * * `inline` to display an icon-only (no text) button within a text context.\n *\n * Defaults to `button`.\n */\n variant?: CopyToClipboardProps.Variant;\n\n /**\n * The text of the copy button (for variant=\"button\").\n */\n copyButtonText?: string;\n\n /**\n * Adds `aria-label` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,\n * and to distinguish between multiple buttons with identical visible text. The text will also be added to the `title` attribute of the button.\n */\n copyButtonAriaLabel?: string;\n\n /**\n * The text content to be copied. It is displayed next to the copy button when `variant=\"inline\"` unless when `content` is specified, and is not shown otherwise.\n */\n textToCopy: string;\n\n /**\n * The text content to display next to the copy button when `variant=\"inline\"`. If not provided, `textToCopy` will be displayed instead.\n */\n textToDisplay?: string;\n\n /**\n * The message shown when the text is copied successfully.\n */\n copySuccessText: string;\n\n /**\n * The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).\n */\n copyErrorText: string;\n\n /**\n * By default, the popover is constrained to fit inside its parent\n * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n * Enabling this property will allow the popover to be rendered in the root stack context using\n * [React Portals](https://reactjs.org/docs/portals.html).\n * Enable this setting if you need the popover to ignore its parent stacking context.\n */\n popoverRenderWithPortal?: boolean;\n\n /**\n * Renders the copy to clipboard button as disabled and prevents clicks.\n */\n disabled?: boolean;\n /**\n * Provides a reason why the copy to clipboard button is disabled (only when `disabled` is `true`).\n * If provided, the copy to clipboard button becomes focusable.\n * Applicable for all variants except inline.\n */\n disabledReason?: string;\n}\n\nexport namespace CopyToClipboardProps {\n export type Variant = 'button' | 'icon' | 'inline';\n}\n"]}
|
|
@@ -3,6 +3,6 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
|
|
|
3
3
|
import { CopyToClipboardProps } from './interfaces';
|
|
4
4
|
interface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {
|
|
5
5
|
}
|
|
6
|
-
export default function InternalCopyToClipboard({ variant, copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, __internalRootRef, ...restProps }: InternalCopyToClipboardProps): JSX.Element;
|
|
6
|
+
export default function InternalCopyToClipboard({ variant, copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, disabled, disabledReason, __internalRootRef, ...restProps }: InternalCopyToClipboardProps): JSX.Element;
|
|
7
7
|
export {};
|
|
8
8
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,UAAU,4BAA6B,SAAQ,oBAAoB,EAAE,0BAA0B;CAAG;AAElG,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,OAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,aAAa,EACb,uBAAuB,EACvB,iBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,4BAA4B,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,UAAU,4BAA6B,SAAQ,oBAAoB,EAAE,0BAA0B;CAAG;AAElG,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,OAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,aAAa,EACb,uBAAuB,EACvB,QAAQ,EACR,cAAc,EACd,iBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,4BAA4B,eAkF9B"}
|
|
@@ -10,7 +10,7 @@ import InternalStatusIndicator from '../status-indicator/internal';
|
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
import testStyles from './test-classes/styles.css.js';
|
|
12
12
|
export default function InternalCopyToClipboard(_a) {
|
|
13
|
-
var { variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, __internalRootRef = null } = _a, restProps = __rest(_a, ["variant", "copyButtonAriaLabel", "copyButtonText", "copySuccessText", "copyErrorText", "textToCopy", "textToDisplay", "popoverRenderWithPortal", "__internalRootRef"]);
|
|
13
|
+
var { variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, disabled, disabledReason, __internalRootRef = null } = _a, restProps = __rest(_a, ["variant", "copyButtonAriaLabel", "copyButtonText", "copySuccessText", "copyErrorText", "textToCopy", "textToDisplay", "popoverRenderWithPortal", "disabled", "disabledReason", "__internalRootRef"]);
|
|
14
14
|
const [status, setStatus] = useState('pending');
|
|
15
15
|
const [statusText, setStatusText] = useState('');
|
|
16
16
|
const baseProps = getBaseProps(restProps);
|
|
@@ -40,8 +40,8 @@ export default function InternalCopyToClipboard(_a) {
|
|
|
40
40
|
inline: 'inline-icon',
|
|
41
41
|
}[variant];
|
|
42
42
|
const isInline = variant === 'inline';
|
|
43
|
-
const
|
|
44
|
-
|
|
43
|
+
const button = (React.createElement(InternalButton, { ariaLabel: copyButtonAriaLabel !== null && copyButtonAriaLabel !== void 0 ? copyButtonAriaLabel : copyButtonText, iconName: "copy", variant: triggerVariant, wrapText: false, formAction: "none", disabled: disabled, disabledReason: disabledReason }, copyButtonText));
|
|
44
|
+
const trigger = disabled ? (button) : (React.createElement(InternalPopover, { isInline: isInline, size: "medium", position: "top", triggerType: "custom", dismissButton: false, renderWithPortal: popoverRenderWithPortal, content: React.createElement(InternalStatusIndicator, { type: status }, statusText), __onOpen: onClick }, button));
|
|
45
45
|
return (React.createElement("span", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root, testStyles.root) }), isInline ? (React.createElement("span", { className: styles['inline-container'] },
|
|
46
46
|
React.createElement("span", { className: styles['inline-container-trigger'] }, trigger),
|
|
47
47
|
React.createElement("span", { className: clsx(testStyles['text-to-display'], testStyles['text-to-copy']) }, textToDisplay !== null && textToDisplay !== void 0 ? textToDisplay : textToCopy))) : (trigger)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,eAAe,MAAM,qBAAqB,CAAC;AAClD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AAItD,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/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, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalPopover from '../popover/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { CopyToClipboardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\ninterface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {}\n\nexport default function InternalCopyToClipboard({\n variant = 'button',\n copyButtonAriaLabel,\n copyButtonText,\n copySuccessText,\n copyErrorText,\n textToCopy,\n textToDisplay,\n popoverRenderWithPortal,\n disabled,\n disabledReason,\n __internalRootRef = null,\n ...restProps\n}: InternalCopyToClipboardProps) {\n const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');\n const [statusText, setStatusText] = useState('');\n\n const baseProps = getBaseProps(restProps);\n const onClick = () => {\n if (!navigator.clipboard) {\n // The clipboard API is not available in insecure contexts.\n setStatus('error');\n setStatusText(copyErrorText);\n return;\n }\n\n setStatus('pending');\n setStatusText('');\n navigator.clipboard\n .writeText(textToCopy)\n .then(() => {\n setStatus('success');\n setStatusText(copySuccessText);\n })\n .catch(() => {\n setStatus('error');\n setStatusText(copyErrorText);\n });\n };\n\n const triggerVariant = (\n {\n button: 'normal',\n icon: 'icon',\n inline: 'inline-icon',\n } as const\n )[variant];\n\n const isInline = variant === 'inline';\n\n const button = (\n <InternalButton\n ariaLabel={copyButtonAriaLabel ?? copyButtonText}\n iconName=\"copy\"\n variant={triggerVariant}\n wrapText={false}\n formAction=\"none\"\n disabled={disabled}\n disabledReason={disabledReason}\n >\n {copyButtonText}\n </InternalButton>\n );\n\n const trigger = disabled ? (\n button\n ) : (\n <InternalPopover\n isInline={isInline}\n size=\"medium\"\n position=\"top\"\n triggerType=\"custom\"\n dismissButton={false}\n renderWithPortal={popoverRenderWithPortal}\n content={<InternalStatusIndicator type={status}>{statusText}</InternalStatusIndicator>}\n __onOpen={onClick}\n >\n {button}\n </InternalPopover>\n );\n\n return (\n <span {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testStyles.root)}>\n {isInline ? (\n <span className={styles['inline-container']}>\n <span className={styles['inline-container-trigger']}>{trigger}</span>\n <span className={clsx(testStyles['text-to-display'], testStyles['text-to-copy'])}>\n {textToDisplay ?? textToCopy}\n </span>\n </span>\n ) : (\n trigger\n )}\n </span>\n );\n}\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface GeneratedAnalyticsMetadataFileInputClick {
|
|
2
|
+
action: 'click';
|
|
3
|
+
detail: {
|
|
4
|
+
label: string;
|
|
5
|
+
};
|
|
6
|
+
}
|
|
7
|
+
export interface GeneratedAnalyticsMetadataFileInputComponent {
|
|
8
|
+
name: 'awsui.FileInput';
|
|
9
|
+
label: string;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/file-input/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,wCAAwC;IACvD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,4CAA4C;IAC3D,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/file-input/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface GeneratedAnalyticsMetadataFileInputClick {\n action: 'click';\n detail: {\n label: string;\n };\n}\n\nexport interface GeneratedAnalyticsMetadataFileInputComponent {\n name: 'awsui.FileInput';\n label: string;\n}\n"]}
|
|
@@ -1 +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,
|
|
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,2FAmBd,CAAC;AAGF,eAAe,SAAS,CAAC"}
|
package/file-input/index.js
CHANGED
|
@@ -13,7 +13,7 @@ const FileInput = React.forwardRef((_a, ref) => {
|
|
|
13
13
|
variant,
|
|
14
14
|
},
|
|
15
15
|
});
|
|
16
|
-
return React.createElement(InternalFileInput, Object.assign({ multiple: multiple, variant: variant }, props, baseComponentProps, { ref: ref }));
|
|
16
|
+
return (React.createElement(InternalFileInput, Object.assign({ multiple: multiple, variant: variant }, props, baseComponentProps, { ref: ref, __injectAnalyticsComponentMetadata: true })));
|
|
17
17
|
});
|
|
18
18
|
applyDisplayName(FileInput, 'FileInput');
|
|
19
19
|
export default FileInput;
|
package/file-input/index.js.map
CHANGED
|
@@ -1 +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,
|
|
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,CACL,oBAAC,iBAAiB,kBAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IACZ,KAAK,EACL,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,kCAAkC,EAAE,IAAI,IACxC,CACH,CAAC;AACJ,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 (\n <InternalFileInput\n multiple={multiple}\n variant={variant}\n {...props}\n {...baseComponentProps}\n ref={ref}\n __injectAnalyticsComponentMetadata={true}\n />\n );\n }\n);\n\napplyDisplayName(FileInput, 'FileInput');\nexport default FileInput;\n"]}
|
package/file-input/internal.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import { FileInputProps } from './interfaces';
|
|
|
4
4
|
interface InternalFileInputProps {
|
|
5
5
|
__inputClassName?: string;
|
|
6
6
|
__inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;
|
|
7
|
+
__injectAnalyticsComponentMetadata?: boolean;
|
|
7
8
|
}
|
|
8
9
|
declare const InternalFileInput: React.ForwardRefExoticComponent<FileInputProps & InternalBaseComponentProps<any> & InternalFileInputProps & React.RefAttributes<FileInputProps.Ref>>;
|
|
9
10
|
export default InternalFileInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAiB7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAI3F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;IACzG,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,iBAAiB,sJAuItB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
package/file-input/internal.js
CHANGED
|
@@ -4,6 +4,7 @@ import { __rest } from "tslib";
|
|
|
4
4
|
import React, { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
7
|
+
import { getAnalyticsMetadataAttribute, } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
7
8
|
import InternalButton from '../button/internal';
|
|
8
9
|
import { useFormFieldContext } from '../contexts/form-field';
|
|
9
10
|
import { getBaseProps } from '../internal/base-component/index.js';
|
|
@@ -17,7 +18,7 @@ import { joinStrings } from '../internal/utils/strings';
|
|
|
17
18
|
import styles from './styles.css.js';
|
|
18
19
|
const InternalFileInput = React.forwardRef((_a, ref) => {
|
|
19
20
|
var _b;
|
|
20
|
-
var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null, __inputClassName, __inputNativeAttributes } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef", "__inputClassName", "__inputNativeAttributes"]);
|
|
21
|
+
var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null, __inputClassName, __inputNativeAttributes, __injectAnalyticsComponentMetadata } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef", "__inputClassName", "__inputNativeAttributes", "__injectAnalyticsComponentMetadata"]);
|
|
21
22
|
const baseProps = getBaseProps(restProps);
|
|
22
23
|
const uploadInputRef = useRef(null);
|
|
23
24
|
const containerRef = useRef(null);
|
|
@@ -64,7 +65,16 @@ const InternalFileInput = React.forwardRef((_a, ref) => {
|
|
|
64
65
|
}
|
|
65
66
|
}, [value]);
|
|
66
67
|
const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);
|
|
67
|
-
|
|
68
|
+
const analyticsLabel = variant === 'button' && children ? 'button' : 'input';
|
|
69
|
+
const componentAnalyticsMetadata = {
|
|
70
|
+
name: 'awsui.FileInput',
|
|
71
|
+
label: analyticsLabel,
|
|
72
|
+
};
|
|
73
|
+
const analyticsMetadata = { detail: { label: analyticsLabel } };
|
|
74
|
+
if (__injectAnalyticsComponentMetadata) {
|
|
75
|
+
analyticsMetadata.component = componentAnalyticsMetadata;
|
|
76
|
+
}
|
|
77
|
+
return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root) }, getAnalyticsMetadataAttribute(analyticsMetadata)),
|
|
68
78
|
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, __inputClassName), tabIndex: tabIndex }, nativeAttributes)),
|
|
69
79
|
React.createElement(InternalButton, { iconName: "upload", variant: variant === 'icon' ? 'icon' : undefined, formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['file-input-button'], {
|
|
70
80
|
[styles['force-focus-outline-button']]: isFocused && variant === 'button',
|
|
@@ -1 +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 { useMergeRefs, 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 { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\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\ninterface InternalFileInputProps {\n __inputClassName?: string;\n __inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;\n}\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 __inputClassName,\n __inputNativeAttributes,\n ...restProps\n }: FileInputProps & InternalBaseComponentProps & InternalFileInputProps,\n ref: Ref<FileInputProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const uploadInputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRefs(__internalRootRef, containerRef);\n\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 = () => {\n setIsFocused(true);\n containerRef.current?.scrollIntoView?.();\n };\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 ...__inputNativeAttributes,\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 const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);\n\n return (\n <div {...baseProps} ref={mergedRef} 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, __inputClassName)}\n tabIndex={tabIndex}\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'], {\n [styles['force-focus-outline-button']]: isFocused && variant === 'button',\n [styles['force-focus-outline-icon']]: isFocused && variant === 'icon',\n })}\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"]}
|
|
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 { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\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 { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\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 { GeneratedAnalyticsMetadataFileInputComponent } from './analytics-metadata/interfaces';\nimport { FileInputProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalFileInputProps {\n __inputClassName?: string;\n __inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;\n __injectAnalyticsComponentMetadata?: boolean;\n}\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 __inputClassName,\n __inputNativeAttributes,\n __injectAnalyticsComponentMetadata,\n ...restProps\n }: FileInputProps & InternalBaseComponentProps & InternalFileInputProps,\n ref: Ref<FileInputProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const uploadInputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRefs(__internalRootRef, containerRef);\n\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 = () => {\n setIsFocused(true);\n containerRef.current?.scrollIntoView?.();\n };\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 ...__inputNativeAttributes,\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 const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);\n\n const analyticsLabel = variant === 'button' && children ? 'button' : 'input';\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataFileInputComponent = {\n name: 'awsui.FileInput',\n label: analyticsLabel,\n };\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = { detail: { label: analyticsLabel } };\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = componentAnalyticsMetadata;\n }\n\n return (\n <div\n {...baseProps}\n ref={mergedRef}\n className={clsx(baseProps.className, styles.root)}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n >\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, __inputClassName)}\n tabIndex={tabIndex}\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'], {\n [styles['force-focus-outline-button']]: isFocused && variant === 'button',\n [styles['force-focus-outline-icon']]: isFocused && variant === 'icon',\n })}\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"]}
|
|
@@ -418,6 +418,8 @@
|
|
|
418
418
|
--color-text-status-success-4f6v4h:#00802f;
|
|
419
419
|
--color-text-status-warning-fa077b:#855900;
|
|
420
420
|
--color-text-top-navigation-title-kiop92:#0f141a;
|
|
421
|
+
--color-text-tutorial-hotspot-default-aq2wj8:#006ce0;
|
|
422
|
+
--color-text-tutorial-hotspot-hover-93wlda:#002b66;
|
|
421
423
|
--color-board-placeholder-active-3nv7j5:#ebebf0;
|
|
422
424
|
--color-board-placeholder-hover-1hv3br:#d1f1ff;
|
|
423
425
|
--color-drag-placeholder-active-7dewab:#ebebf0;
|
|
@@ -1036,6 +1038,8 @@
|
|
|
1036
1038
|
--color-text-status-success-4f6v4h:#2bb534;
|
|
1037
1039
|
--color-text-status-warning-fa077b:#fbd332;
|
|
1038
1040
|
--color-text-top-navigation-title-kiop92:#f9f9fa;
|
|
1041
|
+
--color-text-tutorial-hotspot-default-aq2wj8:#42b4ff;
|
|
1042
|
+
--color-text-tutorial-hotspot-hover-93wlda:#75cfff;
|
|
1039
1043
|
--color-board-placeholder-active-3nv7j5:#656871;
|
|
1040
1044
|
--color-board-placeholder-hover-1hv3br:#006ce0;
|
|
1041
1045
|
--color-drag-placeholder-active-7dewab:#656871;
|
|
@@ -1353,6 +1357,8 @@
|
|
|
1353
1357
|
--color-text-status-success-4f6v4h:#2bb534;
|
|
1354
1358
|
--color-text-status-warning-fa077b:#fbd332;
|
|
1355
1359
|
--color-text-top-navigation-title-kiop92:#f9f9fa;
|
|
1360
|
+
--color-text-tutorial-hotspot-default-aq2wj8:#42b4ff;
|
|
1361
|
+
--color-text-tutorial-hotspot-hover-93wlda:#75cfff;
|
|
1356
1362
|
--color-board-placeholder-active-3nv7j5:#656871;
|
|
1357
1363
|
--color-board-placeholder-hover-1hv3br:#006ce0;
|
|
1358
1364
|
--color-drag-placeholder-active-7dewab:#656871;
|
|
@@ -1565,6 +1571,8 @@
|
|
|
1565
1571
|
--color-text-status-success-4f6v4h:#2bb534;
|
|
1566
1572
|
--color-text-status-warning-fa077b:#fbd332;
|
|
1567
1573
|
--color-text-top-navigation-title-kiop92:#f9f9fa;
|
|
1574
|
+
--color-text-tutorial-hotspot-default-aq2wj8:#42b4ff;
|
|
1575
|
+
--color-text-tutorial-hotspot-hover-93wlda:#75cfff;
|
|
1568
1576
|
--color-board-placeholder-active-3nv7j5:#656871;
|
|
1569
1577
|
--color-board-placeholder-hover-1hv3br:#006ce0;
|
|
1570
1578
|
--color-drag-placeholder-active-7dewab:#656871;
|
|
@@ -1621,6 +1629,8 @@
|
|
|
1621
1629
|
--color-text-expandable-section-hover-ztre2n:#ffffff;
|
|
1622
1630
|
--color-text-heading-secondary-3uj5r4:#f9f9fa;
|
|
1623
1631
|
--color-text-segment-hover-ldx8k3:#ffffff;
|
|
1632
|
+
--color-text-tutorial-hotspot-default-aq2wj8:#dedee3;
|
|
1633
|
+
--color-text-tutorial-hotspot-hover-93wlda:#f9f9fa;
|
|
1624
1634
|
}
|
|
1625
1635
|
|
|
1626
1636
|
.awsui-context-flashbar-warning:not(#\9) {
|
|
@@ -1654,6 +1664,8 @@
|
|
|
1654
1664
|
--color-text-link-inverted-hover-ocd3u3:#0f141a;
|
|
1655
1665
|
--color-text-notification-default-1iey72:#0f141a;
|
|
1656
1666
|
--color-text-segment-hover-ldx8k3:#0f141a;
|
|
1667
|
+
--color-text-tutorial-hotspot-default-aq2wj8:#656871;
|
|
1668
|
+
--color-text-tutorial-hotspot-hover-93wlda:#131920;
|
|
1657
1669
|
}
|
|
1658
1670
|
|
|
1659
1671
|
.awsui-context-alert:not(#\9) {
|
|
@@ -1886,6 +1898,8 @@
|
|
|
1886
1898
|
--color-text-status-success-4f6v4h:#2bb534;
|
|
1887
1899
|
--color-text-status-warning-fa077b:#fbd332;
|
|
1888
1900
|
--color-text-top-navigation-title-kiop92:#f9f9fa;
|
|
1901
|
+
--color-text-tutorial-hotspot-default-aq2wj8:#42b4ff;
|
|
1902
|
+
--color-text-tutorial-hotspot-hover-93wlda:#75cfff;
|
|
1889
1903
|
--color-board-placeholder-active-3nv7j5:#656871;
|
|
1890
1904
|
--color-board-placeholder-hover-1hv3br:#006ce0;
|
|
1891
1905
|
--color-drag-placeholder-active-7dewab:#656871;
|
|
@@ -28,7 +28,7 @@ const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'norma
|
|
|
28
28
|
// (See https://bugs.webkit.org/show_bug.cgi?id=22261)
|
|
29
29
|
// Otherwise, we can't reliably catch keyboard events coming from the handle
|
|
30
30
|
// when it is being dragged.
|
|
31
|
-
React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : '
|
|
31
|
+
React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'application', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onKeyDown: onKeyDown },
|
|
32
32
|
React.createElement(InternalIcon, Object.assign({}, iconProps))));
|
|
33
33
|
});
|
|
34
34
|
export default DragHandleButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAC1C,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,CACP,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, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n (\n {\n variant = 'drag-indicator',\n size = 'normal',\n className,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedby,\n ariaValue,\n disabled,\n onPointerDown,\n onKeyDown,\n }: DragHandleProps,\n ref: React.Ref<Element>\n ) => {\n const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n const iconProps: IconProps = (() => {\n const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\n switch (variant) {\n case 'drag-indicator':\n return { ...shared, name: 'drag-indicator' };\n case 'resize-area':\n return { ...shared, name: 'resize-area' };\n case 'resize-horizontal':\n return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n case 'resize-vertical':\n return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n }\n })();\n\n return (\n // We need to use a div with button role instead of a button\n // so that Safari will focus on it when clicking it.\n // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n // Otherwise, we can't reliably catch keyboard events coming from the handle\n // when it is being dragged.\n <div\n ref={useMergeRefs(ref, dragHandleRefObject)}\n role={ariaValue ? 'slider' : 'application'}\n tabIndex={0}\n className={clsx(\n className,\n styles.handle,\n testUtilsStyles.root,\n styles[`handle-${variant}`],\n styles[`handle-size-${size}`],\n disabled && styles['handle-disabled']\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedby}\n aria-disabled={disabled}\n aria-valuemax={ariaValue?.valueMax}\n aria-valuemin={ariaValue?.valueMin}\n aria-valuenow={ariaValue?.valueNow}\n onPointerDown={onPointerDown}\n onKeyDown={onKeyDown}\n >\n <InternalIcon {...iconProps} />\n </div>\n );\n }\n);\n\nexport default DragHandleButton;\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -481,6 +481,8 @@ export const colorTextStatusInfo: string;
|
|
|
481
481
|
export const colorTextStatusSuccess: string;
|
|
482
482
|
export const colorTextStatusWarning: string;
|
|
483
483
|
export const colorTextTopNavigationTitle: string;
|
|
484
|
+
export const colorTextTutorialHotspotDefault: string;
|
|
485
|
+
export const colorTextTutorialHotspotHover: string;
|
|
484
486
|
export const colorBoardPlaceholderActive: string;
|
|
485
487
|
export const colorBoardPlaceholderHover: string;
|
|
486
488
|
export const colorDragPlaceholderActive: string;
|
|
@@ -481,6 +481,8 @@ export var colorTextStatusInfo = "var(--color-text-status-info-xbstx5, #006ce0)"
|
|
|
481
481
|
export var colorTextStatusSuccess = "var(--color-text-status-success-4f6v4h, #00802f)";
|
|
482
482
|
export var colorTextStatusWarning = "var(--color-text-status-warning-fa077b, #855900)";
|
|
483
483
|
export var colorTextTopNavigationTitle = "var(--color-text-top-navigation-title-kiop92, #0f141a)";
|
|
484
|
+
export var colorTextTutorialHotspotDefault = "var(--color-text-tutorial-hotspot-default-aq2wj8, #006ce0)";
|
|
485
|
+
export var colorTextTutorialHotspotHover = "var(--color-text-tutorial-hotspot-hover-93wlda, #002b66)";
|
|
484
486
|
export var colorBoardPlaceholderActive = "var(--color-board-placeholder-active-3nv7j5, #ebebf0)";
|
|
485
487
|
export var colorBoardPlaceholderHover = "var(--color-board-placeholder-hover-1hv3br, #d1f1ff)";
|
|
486
488
|
export var colorDragPlaceholderActive = "var(--color-drag-placeholder-active-7dewab, #ebebf0)";
|
|
@@ -1818,6 +1818,14 @@ module.exports.preset = {
|
|
|
1818
1818
|
"light": "{colorGrey950}",
|
|
1819
1819
|
"dark": "{colorGrey100}"
|
|
1820
1820
|
},
|
|
1821
|
+
"colorTextTutorialHotspotDefault": {
|
|
1822
|
+
"light": "{colorTextLinkDefault}",
|
|
1823
|
+
"dark": "{colorTextLinkDefault}"
|
|
1824
|
+
},
|
|
1825
|
+
"colorTextTutorialHotspotHover": {
|
|
1826
|
+
"light": "{colorTextLinkHover}",
|
|
1827
|
+
"dark": "{colorTextLinkHover}"
|
|
1828
|
+
},
|
|
1821
1829
|
"colorBoardPlaceholderActive": {
|
|
1822
1830
|
"light": "{colorGrey250}",
|
|
1823
1831
|
"dark": "{colorGrey600}"
|
|
@@ -4090,6 +4098,14 @@ module.exports.preset = {
|
|
|
4090
4098
|
"light": "{colorGrey100}",
|
|
4091
4099
|
"dark": "{colorGrey100}"
|
|
4092
4100
|
},
|
|
4101
|
+
"colorTextTutorialHotspotDefault": {
|
|
4102
|
+
"light": "{colorTextLinkDefault}",
|
|
4103
|
+
"dark": "{colorTextLinkDefault}"
|
|
4104
|
+
},
|
|
4105
|
+
"colorTextTutorialHotspotHover": {
|
|
4106
|
+
"light": "{colorTextLinkHover}",
|
|
4107
|
+
"dark": "{colorTextLinkHover}"
|
|
4108
|
+
},
|
|
4093
4109
|
"colorBoardPlaceholderActive": {
|
|
4094
4110
|
"light": "{colorGrey600}",
|
|
4095
4111
|
"dark": "{colorGrey600}"
|
|
@@ -5260,6 +5276,14 @@ module.exports.preset = {
|
|
|
5260
5276
|
"light": "{colorGrey100}",
|
|
5261
5277
|
"dark": "{colorGrey100}"
|
|
5262
5278
|
},
|
|
5279
|
+
"colorTextTutorialHotspotDefault": {
|
|
5280
|
+
"light": "{colorTextLinkDefault}",
|
|
5281
|
+
"dark": "{colorTextLinkDefault}"
|
|
5282
|
+
},
|
|
5283
|
+
"colorTextTutorialHotspotHover": {
|
|
5284
|
+
"light": "{colorTextLinkHover}",
|
|
5285
|
+
"dark": "{colorTextLinkHover}"
|
|
5286
|
+
},
|
|
5263
5287
|
"colorBoardPlaceholderActive": {
|
|
5264
5288
|
"light": "{colorGrey600}",
|
|
5265
5289
|
"dark": "{colorGrey600}"
|
|
@@ -6362,6 +6386,14 @@ module.exports.preset = {
|
|
|
6362
6386
|
"light": "{colorGrey950}",
|
|
6363
6387
|
"dark": "{colorGrey100}"
|
|
6364
6388
|
},
|
|
6389
|
+
"colorTextTutorialHotspotDefault": {
|
|
6390
|
+
"light": "{colorGrey300}",
|
|
6391
|
+
"dark": "{colorGrey300}"
|
|
6392
|
+
},
|
|
6393
|
+
"colorTextTutorialHotspotHover": {
|
|
6394
|
+
"light": "{colorGrey100}",
|
|
6395
|
+
"dark": "{colorGrey100}"
|
|
6396
|
+
},
|
|
6365
6397
|
"colorBoardPlaceholderActive": {
|
|
6366
6398
|
"light": "{colorGrey250}",
|
|
6367
6399
|
"dark": "{colorGrey600}"
|
|
@@ -7464,6 +7496,14 @@ module.exports.preset = {
|
|
|
7464
7496
|
"light": "{colorGrey950}",
|
|
7465
7497
|
"dark": "{colorGrey100}"
|
|
7466
7498
|
},
|
|
7499
|
+
"colorTextTutorialHotspotDefault": {
|
|
7500
|
+
"light": "{colorGrey600}",
|
|
7501
|
+
"dark": "{colorGrey600}"
|
|
7502
|
+
},
|
|
7503
|
+
"colorTextTutorialHotspotHover": {
|
|
7504
|
+
"light": "{colorGrey900}",
|
|
7505
|
+
"dark": "{colorGrey900}"
|
|
7506
|
+
},
|
|
7467
7507
|
"colorBoardPlaceholderActive": {
|
|
7468
7508
|
"light": "{colorGrey250}",
|
|
7469
7509
|
"dark": "{colorGrey600}"
|
|
@@ -8566,6 +8606,14 @@ module.exports.preset = {
|
|
|
8566
8606
|
"light": "{colorGrey950}",
|
|
8567
8607
|
"dark": "{colorGrey100}"
|
|
8568
8608
|
},
|
|
8609
|
+
"colorTextTutorialHotspotDefault": {
|
|
8610
|
+
"light": "{colorTextLinkDefault}",
|
|
8611
|
+
"dark": "{colorTextLinkDefault}"
|
|
8612
|
+
},
|
|
8613
|
+
"colorTextTutorialHotspotHover": {
|
|
8614
|
+
"light": "{colorTextLinkHover}",
|
|
8615
|
+
"dark": "{colorTextLinkHover}"
|
|
8616
|
+
},
|
|
8569
8617
|
"colorBoardPlaceholderActive": {
|
|
8570
8618
|
"light": "{colorGrey250}",
|
|
8571
8619
|
"dark": "{colorGrey600}"
|
|
@@ -9680,6 +9728,14 @@ module.exports.preset = {
|
|
|
9680
9728
|
"light": "{colorGrey100}",
|
|
9681
9729
|
"dark": "{colorGrey100}"
|
|
9682
9730
|
},
|
|
9731
|
+
"colorTextTutorialHotspotDefault": {
|
|
9732
|
+
"light": "{colorTextLinkDefault}",
|
|
9733
|
+
"dark": "{colorTextLinkDefault}"
|
|
9734
|
+
},
|
|
9735
|
+
"colorTextTutorialHotspotHover": {
|
|
9736
|
+
"light": "{colorTextLinkHover}",
|
|
9737
|
+
"dark": "{colorTextLinkHover}"
|
|
9738
|
+
},
|
|
9683
9739
|
"colorBoardPlaceholderActive": {
|
|
9684
9740
|
"light": "{colorGrey600}",
|
|
9685
9741
|
"dark": "{colorGrey600}"
|
|
@@ -10160,6 +10216,8 @@ module.exports.preset = {
|
|
|
10160
10216
|
"colorTextStatusSuccess": "color",
|
|
10161
10217
|
"colorTextStatusWarning": "color",
|
|
10162
10218
|
"colorTextTopNavigationTitle": "color",
|
|
10219
|
+
"colorTextTutorialHotspotDefault": "color",
|
|
10220
|
+
"colorTextTutorialHotspotHover": "color",
|
|
10163
10221
|
"colorBoardPlaceholderActive": "color",
|
|
10164
10222
|
"colorBoardPlaceholderHover": "color",
|
|
10165
10223
|
"colorDragPlaceholderActive": "color",
|
|
@@ -11470,6 +11528,8 @@ module.exports.preset = {
|
|
|
11470
11528
|
"colorTextStatusSuccess": "color-text-status-success",
|
|
11471
11529
|
"colorTextStatusWarning": "color-text-status-warning",
|
|
11472
11530
|
"colorTextTopNavigationTitle": "color-text-top-navigation-title",
|
|
11531
|
+
"colorTextTutorialHotspotDefault": "color-text-tutorial-hotspot-default",
|
|
11532
|
+
"colorTextTutorialHotspotHover": "color-text-tutorial-hotspot-hover",
|
|
11473
11533
|
"colorBoardPlaceholderActive": "color-board-placeholder-active",
|
|
11474
11534
|
"colorBoardPlaceholderHover": "color-board-placeholder-hover",
|
|
11475
11535
|
"colorDragPlaceholderActive": "color-drag-placeholder-active",
|
|
@@ -12225,6 +12285,8 @@ module.exports.preset = {
|
|
|
12225
12285
|
"colorTextStatusSuccess": "--color-text-status-success-4f6v4h",
|
|
12226
12286
|
"colorTextStatusWarning": "--color-text-status-warning-fa077b",
|
|
12227
12287
|
"colorTextTopNavigationTitle": "--color-text-top-navigation-title-kiop92",
|
|
12288
|
+
"colorTextTutorialHotspotDefault": "--color-text-tutorial-hotspot-default-aq2wj8",
|
|
12289
|
+
"colorTextTutorialHotspotHover": "--color-text-tutorial-hotspot-hover-93wlda",
|
|
12228
12290
|
"colorBoardPlaceholderActive": "--color-board-placeholder-active-3nv7j5",
|
|
12229
12291
|
"colorBoardPlaceholderHover": "--color-board-placeholder-hover-1hv3br",
|
|
12230
12292
|
"colorDragPlaceholderActive": "--color-drag-placeholder-active-7dewab",
|