@cloudscape-design/components 3.0.200 → 3.0.201
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/button/index.d.ts.map +1 -1
- package/button/index.js +2 -2
- package/button/index.js.map +1 -1
- package/button/interfaces.d.ts +5 -0
- package/button/interfaces.d.ts.map +1 -1
- package/button/interfaces.js.map +1 -1
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +2 -2
- package/button/internal.js.map +1 -1
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +9 -11
- package/container/internal.js.map +1 -1
- package/container/styles.css.js +20 -18
- package/container/styles.scoped.css +43 -36
- package/container/styles.selectors.js +20 -18
- package/flashbar/styles.css.js +43 -43
- package/flashbar/styles.scoped.css +137 -135
- package/flashbar/styles.selectors.js +43 -43
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
package/button/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,QAAA,MAAM,MAAM,qFA0DX,CAAC;AAGF,eAAe,MAAM,CAAC"}
|
package/button/index.js
CHANGED
|
@@ -7,10 +7,10 @@ import { InternalButton } from './internal';
|
|
|
7
7
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
8
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
9
9
|
var Button = React.forwardRef(function (_a, ref) {
|
|
10
|
-
var children = _a.children, iconName = _a.iconName, _b = _a.iconAlign, iconAlign = _b === void 0 ? 'left' : _b, iconUrl = _a.iconUrl, iconSvg = _a.iconSvg, iconAlt = _a.iconAlt, _c = _a.variant, variant = _c === void 0 ? 'normal' : _c, _d = _a.loading, loading = _d === void 0 ? false : _d, loadingText = _a.loadingText, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.wrapText, wrapText = _f === void 0 ? true : _f, href = _a.href, target = _a.target, download = _a.download, _g = _a.formAction, formAction = _g === void 0 ? 'submit' : _g, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onFollow = _a.onFollow, ariaExpanded = _a.ariaExpanded, props = __rest(_a, ["children", "iconName", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "wrapText", "href", "target", "download", "formAction", "ariaLabel", "onClick", "onFollow", "ariaExpanded"]);
|
|
10
|
+
var children = _a.children, iconName = _a.iconName, _b = _a.iconAlign, iconAlign = _b === void 0 ? 'left' : _b, iconUrl = _a.iconUrl, iconSvg = _a.iconSvg, iconAlt = _a.iconAlt, _c = _a.variant, variant = _c === void 0 ? 'normal' : _c, _d = _a.loading, loading = _d === void 0 ? false : _d, loadingText = _a.loadingText, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.wrapText, wrapText = _f === void 0 ? true : _f, href = _a.href, target = _a.target, rel = _a.rel, download = _a.download, _g = _a.formAction, formAction = _g === void 0 ? 'submit' : _g, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onFollow = _a.onFollow, ariaExpanded = _a.ariaExpanded, props = __rest(_a, ["children", "iconName", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "wrapText", "href", "target", "rel", "download", "formAction", "ariaLabel", "onClick", "onFollow", "ariaExpanded"]);
|
|
11
11
|
var baseComponentProps = useBaseComponent('Button');
|
|
12
12
|
var baseProps = getBaseProps(props);
|
|
13
|
-
return (React.createElement(InternalButton, __assign({}, baseProps, baseComponentProps, { ref: ref, iconName: iconName, iconAlign: iconAlign, iconUrl: iconUrl, iconSvg: iconSvg, iconAlt: iconAlt, variant: variant, loading: loading, loadingText: loadingText, disabled: disabled, wrapText: wrapText, href: href, target: target, download: download, formAction: formAction, ariaLabel: ariaLabel, onClick: onClick, onFollow: onFollow, ariaExpanded: ariaExpanded }), children));
|
|
13
|
+
return (React.createElement(InternalButton, __assign({}, baseProps, baseComponentProps, { ref: ref, iconName: iconName, iconAlign: iconAlign, iconUrl: iconUrl, iconSvg: iconSvg, iconAlt: iconAlt, variant: variant, loading: loading, loadingText: loadingText, disabled: disabled, wrapText: wrapText, href: href, target: target, rel: rel, download: download, formAction: formAction, ariaLabel: ariaLabel, onClick: onClick, onFollow: onFollow, ariaExpanded: ariaExpanded }), children));
|
|
14
14
|
});
|
|
15
15
|
applyDisplayName(Button, 'Button');
|
|
16
16
|
export default Button;
|
package/button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,UACE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,UACE,EAsBc,EACd,GAA+B;IAtB7B,IAAA,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,iBAAkB,EAAlB,SAAS,mBAAG,MAAM,KAAA,EAClB,OAAO,aAAA,EACP,OAAO,aAAA,EACP,OAAO,aAAA,EACP,eAAkB,EAAlB,OAAO,mBAAG,QAAQ,KAAA,EAClB,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,kBAAqB,EAArB,UAAU,mBAAG,QAAQ,KAAA,EACrB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,YAAY,kBAAA,EACT,KAAK,cArBV,0OAsBC,CADS;IAIV,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACtD,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,oBAAC,cAAc,eACT,SAAS,EACT,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,KAEzB,QAAQ,CACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { ButtonProps } from './interfaces';\nimport { InternalButton } from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { ButtonProps };\n\nconst Button = React.forwardRef(\n (\n {\n children,\n iconName,\n iconAlign = 'left',\n iconUrl,\n iconSvg,\n iconAlt,\n variant = 'normal',\n loading = false,\n loadingText,\n disabled = false,\n wrapText = true,\n href,\n target,\n rel,\n download,\n formAction = 'submit',\n ariaLabel,\n onClick,\n onFollow,\n ariaExpanded,\n ...props\n }: ButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('Button');\n const baseProps = getBaseProps(props);\n return (\n <InternalButton\n {...baseProps}\n {...baseComponentProps}\n ref={ref}\n iconName={iconName}\n iconAlign={iconAlign}\n iconUrl={iconUrl}\n iconSvg={iconSvg}\n iconAlt={iconAlt}\n variant={variant}\n loading={loading}\n loadingText={loadingText}\n disabled={disabled}\n wrapText={wrapText}\n href={href}\n target={target}\n rel={rel}\n download={download}\n formAction={formAction}\n ariaLabel={ariaLabel}\n onClick={onClick}\n onFollow={onFollow}\n ariaExpanded={ariaExpanded}\n >\n {children}\n </InternalButton>\n );\n }\n);\n\napplyDisplayName(Button, 'Button');\nexport default Button;\n"]}
|
package/button/interfaces.d.ts
CHANGED
|
@@ -76,6 +76,11 @@ export interface ButtonProps extends BaseComponentProps {
|
|
|
76
76
|
* This property only applies when an `href` is provided.
|
|
77
77
|
*/
|
|
78
78
|
target?: string;
|
|
79
|
+
/**
|
|
80
|
+
* Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to "noopener noreferrer" when `target` is `"_blank"`.
|
|
81
|
+
* If the `rel` property is provided, it overrides the default behavior.
|
|
82
|
+
*/
|
|
83
|
+
rel?: string;
|
|
79
84
|
/**
|
|
80
85
|
* Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.
|
|
81
86
|
* You can specify a string value that will be suggested as the name of the downloaded file.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEzF,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;QAII;IACJ,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAE1D;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAExC;;OAEG;IAEH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,yBAAiB,WAAW,CAAC;IAC3B,KAAY,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC;IAC7E,KAAY,WAAW,GAAG,YAAY,CAAC;IAEvC,KAAY,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAE3C,KAAY,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAEzC,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;KACrC;CACF"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEzF,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;QAII;IACJ,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAE1D;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAExC;;OAEG;IAEH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,yBAAiB,WAAW,CAAC;IAC3B,KAAY,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC;IAC7E,KAAY,WAAW,GAAG,YAAY,CAAC;IAEvC,KAAY,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAE3C,KAAY,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAEzC,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;KACrC;CACF"}
|
package/button/interfaces.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button/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 { IconProps } from '../icon/interfaces';\nimport React from 'react';\nimport { CancelableEventHandler, ClickDetail as _ClickDetail } from '../internal/events';\n\nexport interface ButtonProps extends BaseComponentProps {\n /**\n * Renders the button as disabled and prevents clicks.\n */\n disabled?: boolean;\n /**\n * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n * It prevents users from clicking the button.\n */\n loading?: boolean;\n /**\n * Specifies the text that screen reader announces when the button is in a loading state.\n */\n loadingText?: string;\n /**\n * Displays an icon next to the text. You can use the `iconAlign` property to position the icon.\n */\n iconName?: IconProps.Name;\n /**\n * Specifies the alignment of the icon.\n */\n iconAlign?: ButtonProps.IconAlign;\n /**\n * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n *\n * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n */\n iconUrl?: string;\n /**\n * Specifies the SVG of a custom icon.\n *\n * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n * - has attribute `focusable=\"false\"`.\n * - has `viewBox=\"0 0 16 16\"`.\n *\n * If you set the `svg` element as the root node of the slot, the component will automatically\n * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n * - set the stroke width based on the size of the icon.\n * - set the width and height of the SVG element based on the size of the icon.\n *\n * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n *\n * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n *\n * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n */\n iconSvg?: React.ReactNode;\n /**\n * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n */\n iconAlt?: string;\n /**\n * The form action that is performed by a button click.\n */\n formAction?: ButtonProps.FormAction;\n /**\n * Adds `aria-label` to the button element. It should be used in buttons that don't have text in order to make\n * them accessible.\n */\n ariaLabel?: string;\n /**\n * Applies button styling to a link. Use this property if you need a link styled as a button (`variant=link`).\n * For example, if you have a 'help' button that links to a documentation page.\n */\n href?: string;\n\n /**\n * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n * This property only applies when an `href` is provided.\n */\n target?: string;\n\n /**\n * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n * You can specify a string value that will be suggested as the name of the downloaded file.\n * This property only applies when an `href` is provided.\n **/\n download?: boolean | string;\n\n /**\n * Specifies if the `text` content wraps. If you set it to `false`, it prevents the text from wrapping.\n */\n wrapText?: boolean;\n\n /** Determines the general styling of the button as follows:\n * * `primary` for primary buttons.\n * * `normal` for secondary buttons.\n * * `link` for tertiary buttons.\n * * `icon` to display an icon only (no text).\n * * `inline-icon` to display an icon-only (no text) button within a text context.\n */\n variant?: ButtonProps.Variant;\n\n /**\n * Text displayed in the button element.\n * @displayname text\n */\n children?: React.ReactNode;\n\n /**\n * Called when the user clicks on the button and the button is not disabled or in loading state.\n */\n onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n\n /**\n * Called when the user clicks on the button with the left mouse button without pressing\n * modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an `href` set.\n */\n onFollow?: CancelableEventHandler<null>;\n\n /**\n * Adds aria-expanded to the button element. Use when the button controls an expandable element.\n */\n\n ariaExpanded?: boolean;\n}\n\nexport namespace ButtonProps {\n export type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon';\n export type ClickDetail = _ClickDetail;\n\n export type FormAction = 'submit' | 'none';\n\n export type IconAlign = 'left' | 'right';\n\n export interface Ref {\n /**\n * Focuses the underlying native button.\n */\n focus(options?: FocusOptions): void;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button/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 { IconProps } from '../icon/interfaces';\nimport React from 'react';\nimport { CancelableEventHandler, ClickDetail as _ClickDetail } from '../internal/events';\n\nexport interface ButtonProps extends BaseComponentProps {\n /**\n * Renders the button as disabled and prevents clicks.\n */\n disabled?: boolean;\n /**\n * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n * It prevents users from clicking the button.\n */\n loading?: boolean;\n /**\n * Specifies the text that screen reader announces when the button is in a loading state.\n */\n loadingText?: string;\n /**\n * Displays an icon next to the text. You can use the `iconAlign` property to position the icon.\n */\n iconName?: IconProps.Name;\n /**\n * Specifies the alignment of the icon.\n */\n iconAlign?: ButtonProps.IconAlign;\n /**\n * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n *\n * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n */\n iconUrl?: string;\n /**\n * Specifies the SVG of a custom icon.\n *\n * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n * - has attribute `focusable=\"false\"`.\n * - has `viewBox=\"0 0 16 16\"`.\n *\n * If you set the `svg` element as the root node of the slot, the component will automatically\n * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n * - set the stroke width based on the size of the icon.\n * - set the width and height of the SVG element based on the size of the icon.\n *\n * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n *\n * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n *\n * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n */\n iconSvg?: React.ReactNode;\n /**\n * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n */\n iconAlt?: string;\n /**\n * The form action that is performed by a button click.\n */\n formAction?: ButtonProps.FormAction;\n /**\n * Adds `aria-label` to the button element. It should be used in buttons that don't have text in order to make\n * them accessible.\n */\n ariaLabel?: string;\n /**\n * Applies button styling to a link. Use this property if you need a link styled as a button (`variant=link`).\n * For example, if you have a 'help' button that links to a documentation page.\n */\n href?: string;\n\n /**\n * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n * This property only applies when an `href` is provided.\n */\n target?: string;\n\n /**\n * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`.\n * If the `rel` property is provided, it overrides the default behavior.\n */\n rel?: string;\n\n /**\n * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n * You can specify a string value that will be suggested as the name of the downloaded file.\n * This property only applies when an `href` is provided.\n **/\n download?: boolean | string;\n\n /**\n * Specifies if the `text` content wraps. If you set it to `false`, it prevents the text from wrapping.\n */\n wrapText?: boolean;\n\n /** Determines the general styling of the button as follows:\n * * `primary` for primary buttons.\n * * `normal` for secondary buttons.\n * * `link` for tertiary buttons.\n * * `icon` to display an icon only (no text).\n * * `inline-icon` to display an icon-only (no text) button within a text context.\n */\n variant?: ButtonProps.Variant;\n\n /**\n * Text displayed in the button element.\n * @displayname text\n */\n children?: React.ReactNode;\n\n /**\n * Called when the user clicks on the button and the button is not disabled or in loading state.\n */\n onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n\n /**\n * Called when the user clicks on the button with the left mouse button without pressing\n * modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an `href` set.\n */\n onFollow?: CancelableEventHandler<null>;\n\n /**\n * Adds aria-expanded to the button element. Use when the button controls an expandable element.\n */\n\n ariaExpanded?: boolean;\n}\n\nexport namespace ButtonProps {\n export type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon';\n export type ClickDetail = _ClickDetail;\n\n export type FormAction = 'submit' | 'none';\n\n export type IconAlign = 'left' | 'right';\n\n export interface Ref {\n /**\n * Focuses the underlying native button.\n */\n focus(options?: FocusOptions): void;\n }\n}\n"]}
|
package/button/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAalF,eAAO,MAAM,cAAc;cAPf,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,GAAG,kBAAkB,GAAG,cAAc,GAAG,eAAe;;;;;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAalF,eAAO,MAAM,cAAc;cAPf,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,GAAG,kBAAkB,GAAG,cAAc,GAAG,eAAe;;;;;sEAoI3G,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/button/internal.js
CHANGED
|
@@ -13,7 +13,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
|
13
13
|
import LiveRegion from '../internal/components/live-region';
|
|
14
14
|
export var InternalButton = React.forwardRef(function (_a, ref) {
|
|
15
15
|
var _b;
|
|
16
|
-
var children = _a.children, iconName = _a.iconName, __iconClass = _a.__iconClass, onClick = _a.onClick, onFollow = _a.onFollow, _c = _a.iconAlign, iconAlign = _c === void 0 ? 'left' : _c, iconUrl = _a.iconUrl, iconSvg = _a.iconSvg, iconAlt = _a.iconAlt, _d = _a.variant, variant = _d === void 0 ? 'normal' : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, loadingText = _a.loadingText, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.wrapText, wrapText = _g === void 0 ? true : _g, href = _a.href, target = _a.target, download = _a.download, _h = _a.formAction, formAction = _h === void 0 ? 'submit' : _h, ariaLabel = _a.ariaLabel, ariaExpanded = _a.ariaExpanded, _j = _a.__hideFocusOutline, __hideFocusOutline = _j === void 0 ? false : _j, __nativeAttributes = _a.__nativeAttributes, _k = _a.__internalRootRef, __internalRootRef = _k === void 0 ? null : _k, _l = _a.__activated, __activated = _l === void 0 ? false : _l, props = __rest(_a, ["children", "iconName", "__iconClass", "onClick", "onFollow", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "wrapText", "href", "target", "download", "formAction", "ariaLabel", "ariaExpanded", "__hideFocusOutline", "__nativeAttributes", "__internalRootRef", "__activated"]);
|
|
16
|
+
var children = _a.children, iconName = _a.iconName, __iconClass = _a.__iconClass, onClick = _a.onClick, onFollow = _a.onFollow, _c = _a.iconAlign, iconAlign = _c === void 0 ? 'left' : _c, iconUrl = _a.iconUrl, iconSvg = _a.iconSvg, iconAlt = _a.iconAlt, _d = _a.variant, variant = _d === void 0 ? 'normal' : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, loadingText = _a.loadingText, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.wrapText, wrapText = _g === void 0 ? true : _g, href = _a.href, target = _a.target, rel = _a.rel, download = _a.download, _h = _a.formAction, formAction = _h === void 0 ? 'submit' : _h, ariaLabel = _a.ariaLabel, ariaExpanded = _a.ariaExpanded, _j = _a.__hideFocusOutline, __hideFocusOutline = _j === void 0 ? false : _j, __nativeAttributes = _a.__nativeAttributes, _k = _a.__internalRootRef, __internalRootRef = _k === void 0 ? null : _k, _l = _a.__activated, __activated = _l === void 0 ? false : _l, props = __rest(_a, ["children", "iconName", "__iconClass", "onClick", "onFollow", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "wrapText", "href", "target", "rel", "download", "formAction", "ariaLabel", "ariaExpanded", "__hideFocusOutline", "__nativeAttributes", "__internalRootRef", "__activated"]);
|
|
17
17
|
checkSafeUrl('Button', href);
|
|
18
18
|
var focusVisible = useFocusVisible();
|
|
19
19
|
var isAnchor = Boolean(href);
|
|
@@ -62,7 +62,7 @@ export var InternalButton = React.forwardRef(function (_a, ref) {
|
|
|
62
62
|
React.createElement(React.Fragment, null,
|
|
63
63
|
React.createElement("a", __assign({}, buttonProps, { href: href, target: target,
|
|
64
64
|
// security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
|
|
65
|
-
rel: target === '_blank' ? 'noopener noreferrer' : undefined, tabIndex: isDisabled ? -1 : undefined, "aria-disabled": isDisabled ? true : undefined, download: download }), buttonContent),
|
|
65
|
+
rel: rel !== null && rel !== void 0 ? rel : (target === '_blank' ? 'noopener noreferrer' : undefined), tabIndex: isDisabled ? -1 : undefined, "aria-disabled": isDisabled ? true : undefined, download: download }), buttonContent),
|
|
66
66
|
loading && loadingText && React.createElement(LiveRegion, null, loadingText)));
|
|
67
67
|
}
|
|
68
68
|
return (React.createElement(React.Fragment, null,
|
package/button/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAmB,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAGrE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAU5D,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,UACE,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/button/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 clsx from 'clsx';\nimport React, { useCallback, useRef } from 'react';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport styles from './styles.css.js';\nimport { ButtonIconProps, LeftIcon, RightIcon } from './icon-helper';\nimport { ButtonProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport LiveRegion from '../internal/components/live-region';\n\ntype InternalButtonProps = Omit<ButtonProps, 'variant'> & {\n variant?: ButtonProps['variant'] | 'flashbar-icon' | 'breadcrumb-group' | 'menu-trigger' | 'modal-dismiss';\n __nativeAttributes?: Record<string, any>;\n __iconClass?: string;\n __activated?: boolean;\n __hideFocusOutline?: boolean;\n} & InternalBaseComponentProps;\n\nexport const InternalButton = React.forwardRef(\n (\n {\n children,\n iconName,\n __iconClass,\n onClick,\n onFollow,\n iconAlign = 'left',\n iconUrl,\n iconSvg,\n iconAlt,\n variant = 'normal',\n loading = false,\n loadingText,\n disabled = false,\n wrapText = true,\n href,\n target,\n rel,\n download,\n formAction = 'submit',\n ariaLabel,\n ariaExpanded,\n __hideFocusOutline = false,\n __nativeAttributes,\n __internalRootRef = null,\n __activated = false,\n ...props\n }: InternalButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n checkSafeUrl('Button', href);\n const focusVisible = useFocusVisible();\n const isAnchor = Boolean(href);\n const isDisabled = loading || disabled;\n const shouldHaveContent =\n children && ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss'].indexOf(variant) === -1;\n\n const buttonRef = useRef<HTMLElement>(null);\n useForwardFocus(ref, buttonRef);\n\n const handleClick = useCallback(\n (event: React.MouseEvent) => {\n if (isAnchor && isDisabled) {\n return event.preventDefault();\n }\n\n if (isAnchor && isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, null, event);\n }\n\n const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n fireCancelableEvent(onClick, { altKey, button, ctrlKey, metaKey, shiftKey }, event);\n },\n [isAnchor, isDisabled, onClick, onFollow]\n );\n\n const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {\n [styles.disabled]: isDisabled,\n [styles['button-no-wrap']]: !wrapText,\n [styles['button-no-text']]: !shouldHaveContent,\n [styles['is-activated']]: __activated,\n });\n\n const buttonProps = {\n ...props,\n ...(__hideFocusOutline ? undefined : focusVisible),\n ...__nativeAttributes,\n // https://github.com/microsoft/TypeScript/issues/36659\n ref: useMergeRefs(buttonRef as any, __internalRootRef),\n 'aria-label': ariaLabel,\n 'aria-expanded': ariaExpanded,\n className: buttonClass,\n onClick: handleClick,\n } as const;\n const iconProps: ButtonIconProps = {\n loading,\n iconName,\n iconAlign,\n iconUrl,\n iconSvg,\n iconAlt,\n variant,\n iconClass: __iconClass,\n iconSize: variant === 'modal-dismiss' ? 'medium' : 'normal',\n };\n const buttonContent = (\n <>\n <LeftIcon {...iconProps} />\n {shouldHaveContent && <span className={styles.content}>{children}</span>}\n <RightIcon {...iconProps} />\n </>\n );\n\n if (isAnchor) {\n return (\n // https://github.com/yannickcr/eslint-plugin-react/issues/2962\n // eslint-disable-next-line react/jsx-no-target-blank\n <>\n <a\n {...buttonProps}\n href={href}\n target={target}\n // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n rel={rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)}\n tabIndex={isDisabled ? -1 : undefined}\n aria-disabled={isDisabled ? true : undefined}\n download={download}\n >\n {buttonContent}\n </a>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n return (\n <>\n <button {...buttonProps} type={formAction === 'none' ? 'button' : 'submit'} disabled={isDisabled}>\n {buttonContent}\n </button>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n);\n\nexport default InternalButton;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,cAAc,EACd,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,GAAG,SAAS,EACb,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,cAAc,EACd,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,GAAG,SAAS,EACb,EAAE,sBAAsB,eAmFxB"}
|
package/container/internal.js
CHANGED
|
@@ -11,12 +11,12 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
|
11
11
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
12
12
|
import styles from './styles.css.js';
|
|
13
13
|
export default function InternalContainer(_a) {
|
|
14
|
-
var _b, _c
|
|
15
|
-
var header = _a.header, footer = _a.footer, children = _a.children,
|
|
14
|
+
var _b, _c;
|
|
15
|
+
var header = _a.header, footer = _a.footer, children = _a.children, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, _e = _a.disableHeaderPaddings, disableHeaderPaddings = _e === void 0 ? false : _e, _f = _a.disableContentPaddings, disableContentPaddings = _f === void 0 ? false : _f, fitHeight = _a.fitHeight, __stickyOffset = _a.__stickyOffset, _g = _a.__stickyHeader, __stickyHeader = _g === void 0 ? false : _g, _h = _a.__internalRootRef, __internalRootRef = _h === void 0 ? null : _h, _j = _a.__disableFooterDivider, __disableFooterDivider = _j === void 0 ? false : _j, _k = _a.__disableFooterPaddings, __disableFooterPaddings = _k === void 0 ? false : _k, _l = _a.__hiddenContent, __hiddenContent = _l === void 0 ? false : _l, __headerRef = _a.__headerRef, __headerId = _a.__headerId, _m = _a.__darkHeader, __darkHeader = _m === void 0 ? false : _m, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "fitHeight", "__stickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__disableFooterPaddings", "__hiddenContent", "__headerRef", "__headerId", "__darkHeader"]);
|
|
16
16
|
var baseProps = getBaseProps(restProps);
|
|
17
17
|
var rootRef = useRef(null);
|
|
18
18
|
var headerRef = useRef(null);
|
|
19
|
-
var
|
|
19
|
+
var _o = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset), isSticky = _o.isSticky, isStuck = _o.isStuck, stickyStyles = _o.stickyStyles;
|
|
20
20
|
var setHasStickyBackground = useAppLayoutContext().setHasStickyBackground;
|
|
21
21
|
var isRefresh = useVisualRefresh();
|
|
22
22
|
var hasDynamicHeight = isRefresh && variant === 'full-page';
|
|
@@ -40,7 +40,7 @@ export default function InternalContainer(_a) {
|
|
|
40
40
|
}
|
|
41
41
|
};
|
|
42
42
|
}, [isSticky, setHasStickyBackground, variant]);
|
|
43
|
-
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles["variant-".concat(variant)], fitHeight && styles['fit-height'], isSticky && [styles['sticky-enabled']]), ref: mergedRef }),
|
|
43
|
+
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles["variant-".concat(variant)], fitHeight && styles['fit-height'], isSticky && [styles['sticky-enabled']], !disableContentPaddings && styles['with-content-paddings'], footer && styles['with-footer']), ref: mergedRef }),
|
|
44
44
|
header && (React.createElement(StickyHeaderContext.Provider, { value: { isStuck: isStuck } },
|
|
45
45
|
React.createElement("div", __assign({ className: clsx(styles.header, styles["header-variant-".concat(variant)], (_b = {},
|
|
46
46
|
_b[styles['header-sticky-disabled']] = __stickyHeader && !isSticky,
|
|
@@ -50,12 +50,10 @@ export default function InternalContainer(_a) {
|
|
|
50
50
|
_b[styles['with-paddings']] = !disableHeaderPaddings,
|
|
51
51
|
_b[styles['with-hidden-content']] = !children || __hiddenContent,
|
|
52
52
|
_b)) }, headerIdProp, stickyStyles, { ref: headerMergedRef }), __darkHeader ? (React.createElement("div", { className: clsx(styles['dark-header'], 'awsui-context-content-header') }, header)) : (header)))),
|
|
53
|
-
React.createElement("div", { className:
|
|
54
|
-
|
|
55
|
-
_c
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
_d[styles['with-paddings']] = !__disableFooterPaddings,
|
|
59
|
-
_d)) }, footer))));
|
|
53
|
+
React.createElement("div", { className: styles.content }, children),
|
|
54
|
+
footer && (React.createElement("div", { className: clsx(styles.footer, (_c = {},
|
|
55
|
+
_c[styles['with-divider']] = !__disableFooterDivider,
|
|
56
|
+
_c[styles['with-paddings']] = !__disableFooterPaddings,
|
|
57
|
+
_c)) }, footer))));
|
|
60
58
|
}
|
|
61
59
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAE7E,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAoBrC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAkBjB;;IAjBvB,IAAA,MAAM,YAAA,EACN,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA,EAC7B,8BAA8B,EAA9B,sBAAsB,mBAAG,KAAK,KAAA,EAC9B,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACxB,8BAA8B,EAA9B,sBAAsB,mBAAG,KAAK,KAAA,EAC9B,+BAA+B,EAA/B,uBAAuB,mBAAG,KAAK,KAAA,EAC/B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACjB,SAAS,cAjB4B,yRAkBzC,CADa;IAEZ,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,IAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,KAAsC,eAAe,CAAC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,CAAC,EAAvG,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,YAAY,kBAAwE,CAAC;IACxG,IAAA,sBAAsB,GAAK,mBAAmB,EAAE,uBAA1B,CAA2B;IACzD,IAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,IAAM,gBAAgB,GAAG,SAAS,IAAI,OAAO,KAAK,WAAW,CAAC;IAC9D,IAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,gBAAgB,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IAE3F,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC3D,IAAM,eAAe,GAAG,YAAY,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;IAC7E,IAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE1D;;;;OAIG;IACH,SAAS,CAAC;QACR,IAAM,4BAA4B,GAAG,QAAQ,IAAI,OAAO,KAAK,WAAW,IAAI,sBAAsB,CAAC;QACnG,IAAI,4BAA4B,EAAE;YAChC,sBAAsB,CAAC,IAAI,CAAC,CAAC;SAC9B;QAED,OAAO;YACL,IAAI,4BAA4B,EAAE;gBAChC,sBAAsB,CAAC,KAAK,CAAC,CAAC;aAC/B;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhD,OAAO,CACL,wCACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAC5B,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EACjC,QAAQ,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/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 clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __headerId?: string;\n __darkHeader?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n fitHeight,\n __stickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __headerId,\n __darkHeader = false,\n ...restProps\n}: InternalContainerProps) {\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\n const { setHasStickyBackground } = useAppLayoutContext();\n const isRefresh = useVisualRefresh();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n const headerIdProp = __headerId ? { id: __headerId } : {};\n\n /**\n * The visual refresh AppLayout component needs to know if a child component\n * has a high contrast sticky header. This is to make sure the background element\n * stays in the same vertical position as the header content.\n */\n useEffect(() => {\n const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n if (shouldUpdateStickyBackground) {\n setHasStickyBackground(true);\n }\n\n return () => {\n if (shouldUpdateStickyBackground) {\n setHasStickyBackground(false);\n }\n };\n }, [isSticky, setHasStickyBackground, variant]);\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n isSticky && [styles['sticky-enabled']],\n !disableContentPaddings && styles['with-content-paddings'],\n footer && styles['with-footer']\n )}\n ref={mergedRef}\n >\n {header && (\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n })}\n {...headerIdProp}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {__darkHeader ? (\n <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n ) : (\n header\n )}\n </div>\n </StickyHeaderContext.Provider>\n )}\n <div className={styles.content}>{children}</div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n );\n}\n"]}
|
package/container/styles.css.js
CHANGED
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"fit-height": "awsui_fit-
|
|
6
|
-
"variant-default": "awsui_variant-
|
|
7
|
-
"variant-stacked": "awsui_variant-
|
|
8
|
-
"sticky-enabled": "awsui_sticky-
|
|
9
|
-
"header": "
|
|
10
|
-
"header-sticky-disabled": "awsui_header-sticky-
|
|
11
|
-
"header-sticky-enabled": "awsui_header-sticky-
|
|
12
|
-
"header-stuck": "awsui_header-
|
|
13
|
-
"header-variant-cards": "awsui_header-variant-
|
|
14
|
-
"header-dynamic-height": "awsui_header-dynamic-
|
|
15
|
-
"with-paddings": "awsui_with-
|
|
16
|
-
"with-hidden-content": "awsui_with-hidden-
|
|
17
|
-
"header-variant-full-page": "awsui_header-variant-full-
|
|
18
|
-
"dark-header": "awsui_dark-
|
|
19
|
-
"content": "
|
|
20
|
-
"
|
|
21
|
-
"with-
|
|
4
|
+
"root": "awsui_root_14iqq_140qo_97",
|
|
5
|
+
"fit-height": "awsui_fit-height_14iqq_140qo_111",
|
|
6
|
+
"variant-default": "awsui_variant-default_14iqq_140qo_116",
|
|
7
|
+
"variant-stacked": "awsui_variant-stacked_14iqq_140qo_116",
|
|
8
|
+
"sticky-enabled": "awsui_sticky-enabled_14iqq_140qo_169",
|
|
9
|
+
"header": "awsui_header_14iqq_140qo_176",
|
|
10
|
+
"header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_140qo_181",
|
|
11
|
+
"header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_140qo_185",
|
|
12
|
+
"header-stuck": "awsui_header-stuck_14iqq_140qo_191",
|
|
13
|
+
"header-variant-cards": "awsui_header-variant-cards_14iqq_140qo_197",
|
|
14
|
+
"header-dynamic-height": "awsui_header-dynamic-height_14iqq_140qo_200",
|
|
15
|
+
"with-paddings": "awsui_with-paddings_14iqq_140qo_206",
|
|
16
|
+
"with-hidden-content": "awsui_with-hidden-content_14iqq_140qo_209",
|
|
17
|
+
"header-variant-full-page": "awsui_header-variant-full-page_14iqq_140qo_259",
|
|
18
|
+
"dark-header": "awsui_dark-header_14iqq_140qo_277",
|
|
19
|
+
"content": "awsui_content_14iqq_140qo_281",
|
|
20
|
+
"with-content-paddings": "awsui_with-content-paddings_14iqq_140qo_285",
|
|
21
|
+
"with-footer": "awsui_with-footer_14iqq_140qo_292",
|
|
22
|
+
"footer": "awsui_footer_14iqq_140qo_299",
|
|
23
|
+
"with-divider": "awsui_with-divider_14iqq_140qo_302"
|
|
22
24
|
};
|
|
23
25
|
|
|
@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
94
94
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
95
|
SPDX-License-Identifier: Apache-2.0
|
|
96
96
|
*/
|
|
97
|
-
.
|
|
97
|
+
.awsui_root_14iqq_140qo_97:not(#\9) {
|
|
98
98
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
99
99
|
border-collapse: separate;
|
|
100
100
|
border-spacing: 0;
|
|
@@ -134,17 +134,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
134
134
|
word-wrap: break-word;
|
|
135
135
|
position: relative;
|
|
136
136
|
}
|
|
137
|
-
.
|
|
137
|
+
.awsui_root_14iqq_140qo_97.awsui_fit-height_14iqq_140qo_111:not(#\9) {
|
|
138
138
|
display: flex;
|
|
139
139
|
flex-direction: column;
|
|
140
140
|
height: 100%;
|
|
141
141
|
}
|
|
142
|
-
.
|
|
142
|
+
.awsui_root_14iqq_140qo_97.awsui_variant-default_14iqq_140qo_116:not(#\9), .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9) {
|
|
143
143
|
border-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
144
144
|
box-sizing: border-box;
|
|
145
145
|
background-color: var(--color-background-container-content-i8i4a0, #ffffff);
|
|
146
146
|
}
|
|
147
|
-
.
|
|
147
|
+
.awsui_root_14iqq_140qo_97.awsui_variant-default_14iqq_140qo_116:not(#\9)::before, .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9)::before {
|
|
148
148
|
content: "";
|
|
149
149
|
position: absolute;
|
|
150
150
|
left: 0px;
|
|
@@ -159,7 +159,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
159
159
|
border-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
160
160
|
z-index: 1;
|
|
161
161
|
}
|
|
162
|
-
.
|
|
162
|
+
.awsui_root_14iqq_140qo_97.awsui_variant-default_14iqq_140qo_116:not(#\9)::after, .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9)::after {
|
|
163
163
|
content: "";
|
|
164
164
|
position: absolute;
|
|
165
165
|
left: 0px;
|
|
@@ -174,76 +174,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
174
174
|
mix-blend-mode: multiply;
|
|
175
175
|
}
|
|
176
176
|
@media screen and (-ms-high-contrast: active) {
|
|
177
|
-
.
|
|
177
|
+
.awsui_root_14iqq_140qo_97.awsui_variant-default_14iqq_140qo_116:not(#\9), .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9) {
|
|
178
178
|
border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
|
-
.
|
|
181
|
+
.awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9):not(:last-child), .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9):not(:last-child)::before, .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9):not(:last-child)::after {
|
|
182
182
|
border-bottom-right-radius: 0;
|
|
183
183
|
border-bottom-left-radius: 0;
|
|
184
184
|
}
|
|
185
|
-
.
|
|
185
|
+
.awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116 + .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9), .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116 + .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9)::before, .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116 + .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9)::after {
|
|
186
186
|
border-top-left-radius: 0;
|
|
187
187
|
border-top-right-radius: 0;
|
|
188
188
|
}
|
|
189
|
-
.
|
|
189
|
+
.awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116 + .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9)::before {
|
|
190
190
|
border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
191
191
|
}
|
|
192
|
-
.
|
|
192
|
+
.awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116 + .awsui_root_14iqq_140qo_97.awsui_variant-stacked_14iqq_140qo_116:not(#\9)::after {
|
|
193
193
|
box-shadow: var(--shadow-container-stacked-jfo2nn, -1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgba(0, 7, 22, 0.12), 8px 0px 8px -7px rgba(0, 7, 22, 0.12), -8px 0px 8px -7px rgba(0, 7, 22, 0.12));
|
|
194
194
|
}
|
|
195
|
-
.
|
|
195
|
+
.awsui_root_14iqq_140qo_97.awsui_sticky-enabled_14iqq_140qo_169:not(#\9)::before {
|
|
196
196
|
top: calc(-1 * var(--border-container-top-width-jk6fhm, 0px));
|
|
197
197
|
}
|
|
198
|
-
.
|
|
198
|
+
.awsui_root_14iqq_140qo_97.awsui_sticky-enabled_14iqq_140qo_169.awsui_variant-stacked_14iqq_140qo_116:not(#\9)::before {
|
|
199
199
|
top: calc(-1 * var(--border-divider-section-width-4wm2it, 2px));
|
|
200
200
|
}
|
|
201
201
|
|
|
202
|
-
.
|
|
202
|
+
.awsui_header_14iqq_140qo_176:not(#\9) {
|
|
203
203
|
background-color: var(--color-background-container-header-4flbq5, #ffffff);
|
|
204
204
|
border-top-left-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
205
205
|
border-top-right-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
206
206
|
}
|
|
207
|
-
.awsui_header-sticky-
|
|
207
|
+
.awsui_header-sticky-disabled_14iqq_140qo_181:not(#\9) {
|
|
208
208
|
position: relative;
|
|
209
209
|
z-index: 1;
|
|
210
210
|
}
|
|
211
|
-
.awsui_header-sticky-
|
|
211
|
+
.awsui_header-sticky-enabled_14iqq_140qo_185:not(#\9) {
|
|
212
212
|
top: 0;
|
|
213
213
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
214
214
|
position: sticky;
|
|
215
215
|
z-index: 800;
|
|
216
216
|
}
|
|
217
|
-
.awsui_header-
|
|
217
|
+
.awsui_header-stuck_14iqq_140qo_191:not(#\9) {
|
|
218
218
|
border-radius: 0;
|
|
219
219
|
}
|
|
220
|
-
.awsui_header-
|
|
220
|
+
.awsui_header-stuck_14iqq_140qo_191:not(#\9)::before {
|
|
221
221
|
border: 0;
|
|
222
222
|
}
|
|
223
|
-
.awsui_header-
|
|
223
|
+
.awsui_header-stuck_14iqq_140qo_191:not(#\9):not(.awsui_header-variant-cards_14iqq_140qo_197) {
|
|
224
224
|
box-shadow: var(--shadow-sticky-embedded-qit8ba, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
|
|
225
225
|
}
|
|
226
|
-
.awsui_header-dynamic-
|
|
226
|
+
.awsui_header-dynamic-height_14iqq_140qo_200.awsui_header-stuck_14iqq_140qo_191:not(#\9) {
|
|
227
227
|
margin-bottom: calc(var(--font-heading-xl-line-height-doxfdj, 40px) - var(--font-heading-l-line-height-gev4n1, 30px));
|
|
228
228
|
}
|
|
229
|
-
.
|
|
229
|
+
.awsui_header_14iqq_140qo_176:not(#\9):not(:empty) {
|
|
230
230
|
border-bottom: var(--border-container-sticky-width-i7t7xe, 0px) solid var(--color-border-container-divider-4ade7z, transparent);
|
|
231
231
|
}
|
|
232
|
-
.
|
|
232
|
+
.awsui_header_14iqq_140qo_176.awsui_with-paddings_14iqq_140qo_206:not(#\9) {
|
|
233
233
|
padding: var(--space-container-header-vertical-zsjhel, 12px) var(--space-container-horizontal-tlw03i, 20px);
|
|
234
234
|
}
|
|
235
|
-
.
|
|
235
|
+
.awsui_header_14iqq_140qo_176.awsui_with-hidden-content_14iqq_140qo_209:not(#\9) {
|
|
236
236
|
border-bottom-left-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
237
237
|
border-bottom-right-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
238
238
|
}
|
|
239
|
-
.awsui_header-variant-
|
|
239
|
+
.awsui_header-variant-cards_14iqq_140qo_197:not(#\9) {
|
|
240
240
|
border-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
241
241
|
box-sizing: border-box;
|
|
242
242
|
}
|
|
243
|
-
.awsui_header-variant-
|
|
243
|
+
.awsui_header-variant-cards_14iqq_140qo_197:not(#\9):not(.awsui_header-sticky-enabled_14iqq_140qo_185) {
|
|
244
244
|
position: relative;
|
|
245
245
|
}
|
|
246
|
-
.awsui_header-variant-
|
|
246
|
+
.awsui_header-variant-cards_14iqq_140qo_197:not(#\9)::before {
|
|
247
247
|
content: "";
|
|
248
248
|
position: absolute;
|
|
249
249
|
left: 0px;
|
|
@@ -258,7 +258,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
258
258
|
border-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
259
259
|
z-index: 1;
|
|
260
260
|
}
|
|
261
|
-
.awsui_header-variant-
|
|
261
|
+
.awsui_header-variant-cards_14iqq_140qo_197:not(#\9)::after {
|
|
262
262
|
content: "";
|
|
263
263
|
position: absolute;
|
|
264
264
|
left: 0px;
|
|
@@ -273,19 +273,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
273
273
|
mix-blend-mode: multiply;
|
|
274
274
|
}
|
|
275
275
|
@media screen and (-ms-high-contrast: active) {
|
|
276
|
-
.awsui_header-variant-
|
|
276
|
+
.awsui_header-variant-cards_14iqq_140qo_197:not(#\9) {
|
|
277
277
|
border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
|
-
.awsui_header-variant-
|
|
280
|
+
.awsui_header-variant-cards_14iqq_140qo_197.awsui_header-stuck_14iqq_140qo_191:not(#\9)::after, .awsui_header-variant-cards_14iqq_140qo_197.awsui_header-stuck_14iqq_140qo_191:not(#\9)::before {
|
|
281
281
|
border: 0;
|
|
282
282
|
border-top-left-radius: 0;
|
|
283
283
|
border-top-right-radius: 0;
|
|
284
284
|
}
|
|
285
|
-
.awsui_header-variant-full-
|
|
285
|
+
.awsui_header-variant-full-page_14iqq_140qo_259.awsui_header-stuck_14iqq_140qo_191:not(#\9) {
|
|
286
286
|
box-shadow: none;
|
|
287
287
|
}
|
|
288
|
-
.awsui_header-variant-full-
|
|
288
|
+
.awsui_header-variant-full-page_14iqq_140qo_259.awsui_header-stuck_14iqq_140qo_191:not(#\9)::after {
|
|
289
289
|
content: "";
|
|
290
290
|
position: absolute;
|
|
291
291
|
right: 0;
|
|
@@ -300,24 +300,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
300
300
|
The dynamic height dark header needs a background that will cover
|
|
301
301
|
the default white background of the container component.
|
|
302
302
|
*/
|
|
303
|
-
.awsui_dark-
|
|
303
|
+
.awsui_dark-header_14iqq_140qo_277:not(#\9) {
|
|
304
304
|
background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
|
|
305
305
|
}
|
|
306
306
|
|
|
307
|
-
.awsui_fit-
|
|
307
|
+
.awsui_fit-height_14iqq_140qo_111 > .awsui_content_14iqq_140qo_281:not(#\9) {
|
|
308
308
|
flex: 1;
|
|
309
309
|
overflow: auto;
|
|
310
310
|
}
|
|
311
|
-
.
|
|
311
|
+
.awsui_with-content-paddings_14iqq_140qo_285 > .awsui_content_14iqq_140qo_281:not(#\9) {
|
|
312
312
|
padding: var(--space-scaled-l-t03y3z, 20px) var(--space-container-horizontal-tlw03i, 20px);
|
|
313
313
|
}
|
|
314
|
-
.
|
|
314
|
+
.awsui_with-content-paddings_14iqq_140qo_285 > .awsui_header_14iqq_140qo_176 + .awsui_content_14iqq_140qo_281:not(#\9) {
|
|
315
315
|
padding-top: var(--space-container-content-top-fsd8nr, 0px);
|
|
316
316
|
}
|
|
317
317
|
|
|
318
|
-
.
|
|
318
|
+
.awsui_fit-height_14iqq_140qo_111.awsui_with-content-paddings_14iqq_140qo_285:not(#\9):not(.awsui_with-footer_14iqq_140qo_292) {
|
|
319
|
+
padding-bottom: var(--space-scaled-l-t03y3z, 20px);
|
|
320
|
+
}
|
|
321
|
+
.awsui_fit-height_14iqq_140qo_111.awsui_with-content-paddings_14iqq_140qo_285:not(#\9):not(.awsui_with-footer_14iqq_140qo_292) > .awsui_content_14iqq_140qo_281 {
|
|
322
|
+
padding-bottom: 0;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.awsui_footer_14iqq_140qo_299.awsui_with-paddings_14iqq_140qo_206:not(#\9) {
|
|
319
326
|
padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-tlw03i, 20px);
|
|
320
327
|
}
|
|
321
|
-
.
|
|
328
|
+
.awsui_footer_14iqq_140qo_299.awsui_with-divider_14iqq_140qo_302:not(#\9) {
|
|
322
329
|
border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
323
330
|
}
|
|
@@ -2,23 +2,25 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"fit-height": "awsui_fit-
|
|
7
|
-
"variant-default": "awsui_variant-
|
|
8
|
-
"variant-stacked": "awsui_variant-
|
|
9
|
-
"sticky-enabled": "awsui_sticky-
|
|
10
|
-
"header": "
|
|
11
|
-
"header-sticky-disabled": "awsui_header-sticky-
|
|
12
|
-
"header-sticky-enabled": "awsui_header-sticky-
|
|
13
|
-
"header-stuck": "awsui_header-
|
|
14
|
-
"header-variant-cards": "awsui_header-variant-
|
|
15
|
-
"header-dynamic-height": "awsui_header-dynamic-
|
|
16
|
-
"with-paddings": "awsui_with-
|
|
17
|
-
"with-hidden-content": "awsui_with-hidden-
|
|
18
|
-
"header-variant-full-page": "awsui_header-variant-full-
|
|
19
|
-
"dark-header": "awsui_dark-
|
|
20
|
-
"content": "
|
|
21
|
-
"
|
|
22
|
-
"with-
|
|
5
|
+
"root": "awsui_root_14iqq_140qo_97",
|
|
6
|
+
"fit-height": "awsui_fit-height_14iqq_140qo_111",
|
|
7
|
+
"variant-default": "awsui_variant-default_14iqq_140qo_116",
|
|
8
|
+
"variant-stacked": "awsui_variant-stacked_14iqq_140qo_116",
|
|
9
|
+
"sticky-enabled": "awsui_sticky-enabled_14iqq_140qo_169",
|
|
10
|
+
"header": "awsui_header_14iqq_140qo_176",
|
|
11
|
+
"header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_140qo_181",
|
|
12
|
+
"header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_140qo_185",
|
|
13
|
+
"header-stuck": "awsui_header-stuck_14iqq_140qo_191",
|
|
14
|
+
"header-variant-cards": "awsui_header-variant-cards_14iqq_140qo_197",
|
|
15
|
+
"header-dynamic-height": "awsui_header-dynamic-height_14iqq_140qo_200",
|
|
16
|
+
"with-paddings": "awsui_with-paddings_14iqq_140qo_206",
|
|
17
|
+
"with-hidden-content": "awsui_with-hidden-content_14iqq_140qo_209",
|
|
18
|
+
"header-variant-full-page": "awsui_header-variant-full-page_14iqq_140qo_259",
|
|
19
|
+
"dark-header": "awsui_dark-header_14iqq_140qo_277",
|
|
20
|
+
"content": "awsui_content_14iqq_140qo_281",
|
|
21
|
+
"with-content-paddings": "awsui_with-content-paddings_14iqq_140qo_285",
|
|
22
|
+
"with-footer": "awsui_with-footer_14iqq_140qo_292",
|
|
23
|
+
"footer": "awsui_footer_14iqq_140qo_299",
|
|
24
|
+
"with-divider": "awsui_with-divider_14iqq_140qo_302"
|
|
23
25
|
};
|
|
24
26
|
|