@cloudscape-design/components 3.0.293 → 3.0.295
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/alert/internal.d.ts.map +1 -1
- package/alert/internal.js +1 -1
- package/alert/internal.js.map +1 -1
- package/area-chart/elements/use-highlight-details.d.ts.map +1 -1
- package/area-chart/elements/use-highlight-details.js +3 -1
- package/area-chart/elements/use-highlight-details.js.map +1 -1
- package/area-chart/interfaces.d.ts +1 -0
- package/area-chart/interfaces.d.ts.map +1 -1
- package/area-chart/interfaces.js.map +1 -1
- package/breadcrumb-group/item/item.d.ts.map +1 -1
- package/breadcrumb-group/item/item.js +9 -6
- package/breadcrumb-group/item/item.js.map +1 -1
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +6 -1
- package/button/internal.js.map +1 -1
- package/container/index.d.ts.map +1 -1
- package/container/index.js +3 -1
- package/container/index.js.map +1 -1
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +4 -2
- package/container/internal.js.map +1 -1
- package/form/index.d.ts.map +1 -1
- package/form/index.js +5 -1
- package/form/index.js.map +1 -1
- package/form/internal.d.ts.map +1 -1
- package/form/internal.js +11 -2
- package/form/internal.js.map +1 -1
- package/form-field/internal.d.ts.map +1 -1
- package/form-field/internal.js +28 -2
- package/form-field/internal.js.map +1 -1
- package/header/internal.d.ts.map +1 -1
- package/header/internal.js +1 -1
- package/header/internal.js.map +1 -1
- package/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
- package/internal/analytics/hooks/use-funnel.js +17 -11
- package/internal/analytics/hooks/use-funnel.js.map +1 -1
- package/internal/components/cartesian-chart/bottom-labels.d.ts.map +1 -1
- package/internal/components/cartesian-chart/bottom-labels.js +3 -1
- package/internal/components/cartesian-chart/bottom-labels.js.map +1 -1
- package/internal/components/cartesian-chart/interfaces.d.ts +4 -0
- package/internal/components/cartesian-chart/interfaces.d.ts.map +1 -1
- package/internal/components/cartesian-chart/interfaces.js.map +1 -1
- package/internal/components/cartesian-chart/left-labels.d.ts.map +1 -1
- package/internal/components/cartesian-chart/left-labels.js +3 -1
- package/internal/components/cartesian-chart/left-labels.js.map +1 -1
- package/internal/components/chart-filter/index.d.ts.map +1 -1
- package/internal/components/chart-filter/index.js +4 -2
- package/internal/components/chart-filter/index.js.map +1 -1
- package/internal/components/chart-legend/index.d.ts.map +1 -1
- package/internal/components/chart-legend/index.js +3 -1
- package/internal/components/chart-legend/index.js.map +1 -1
- package/internal/components/chart-plot/application-controller.d.ts.map +1 -1
- package/internal/components/chart-plot/application-controller.js +1 -2
- package/internal/components/chart-plot/application-controller.js.map +1 -1
- package/internal/components/chart-plot/index.d.ts.map +1 -1
- package/internal/components/chart-plot/index.js +4 -3
- package/internal/components/chart-plot/index.js.map +1 -1
- package/internal/components/chart-status-container/index.d.ts.map +1 -1
- package/internal/components/chart-status-container/index.js +7 -4
- package/internal/components/chart-status-container/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/i18n/testing.d.ts +8 -0
- package/internal/i18n/testing.d.ts.map +1 -0
- package/internal/i18n/testing.js +8 -0
- package/internal/i18n/testing.js.map +1 -0
- package/internal/manifest.json +1 -1
- package/link/internal.d.ts.map +1 -1
- package/link/internal.js +35 -1
- package/link/internal.js.map +1 -1
- package/package.json +1 -1
- package/pie-chart/interfaces.d.ts +4 -0
- package/pie-chart/interfaces.d.ts.map +1 -1
- package/pie-chart/interfaces.js.map +1 -1
- package/pie-chart/pie-chart.d.ts.map +1 -1
- package/pie-chart/pie-chart.js +3 -1
- package/pie-chart/pie-chart.js.map +1 -1
- package/pie-chart/segments.d.ts.map +1 -1
- package/pie-chart/segments.js +3 -1
- package/pie-chart/segments.js.map +1 -1
- package/pie-chart/utils.d.ts +2 -1
- package/pie-chart/utils.d.ts.map +1 -1
- package/pie-chart/utils.js +3 -3
- package/pie-chart/utils.js.map +1 -1
- package/popover/body.d.ts.map +1 -1
- package/popover/body.js +3 -1
- package/popover/body.js.map +1 -1
- package/popover/interfaces.d.ts +1 -0
- package/popover/interfaces.d.ts.map +1 -1
- package/popover/interfaces.js.map +1 -1
- package/table/styles.css.js +34 -33
- package/table/styles.scoped.css +41 -41
- package/table/styles.selectors.js +34 -33
- package/tiles/interfaces.d.ts +4 -0
- package/tiles/interfaces.d.ts.map +1 -1
- package/tiles/interfaces.js.map +1 -1
- package/tiles/internal.d.ts.map +1 -1
- package/tiles/internal.js +2 -2
- package/tiles/internal.js.map +1 -1
- package/top-navigation/interfaces.d.ts +2 -0
- package/top-navigation/interfaces.d.ts.map +1 -1
- package/top-navigation/interfaces.js.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.d.ts +1 -0
- package/top-navigation/parts/overflow-menu/menu-item.d.ts.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.js +2 -0
- package/top-navigation/parts/overflow-menu/menu-item.js.map +1 -1
- package/top-navigation/parts/overflow-menu/views/submenu.d.ts.map +1 -1
- package/top-navigation/parts/overflow-menu/views/submenu.js +1 -0
- package/top-navigation/parts/overflow-menu/views/submenu.js.map +1 -1
- package/top-navigation/parts/overflow-menu/views/utilities.d.ts.map +1 -1
- package/top-navigation/parts/overflow-menu/views/utilities.js +1 -1
- package/top-navigation/parts/overflow-menu/views/utilities.js.map +1 -1
- package/internal/utils/focus-svg-element.d.ts +0 -2
- package/internal/utils/focus-svg-element.d.ts.map +0 -1
- package/internal/utils/focus-svg-element.js +0 -15
- package/internal/utils/focus-svg-element.js.map +0 -1
package/alert/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["alert/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,mBAAmB,EACnB,OAAc,EACd,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["alert/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,mBAAmB,EACnB,OAAc,EACd,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eA+DpB"}
|
package/alert/internal.js
CHANGED
|
@@ -29,7 +29,7 @@ export default function InternalAlert(_a) {
|
|
|
29
29
|
const size = isRefresh ? 'normal' : header && children ? 'big' : 'normal';
|
|
30
30
|
const actionButton = action || (React.createElement(InternalButton, { className: styles['action-button'], onClick: () => fireNonCancelableEvent(onButtonClick), formAction: "none" }, buttonText));
|
|
31
31
|
const hasAction = Boolean(action || buttonText);
|
|
32
|
-
return (React.createElement("div", Object.assign({}, baseProps, { "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, styles[`breakpoint-${breakpoint}`]), ref: mergedRef }),
|
|
32
|
+
return (React.createElement("div", Object.assign({}, baseProps, { "data-analytics-alert": type, "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, styles[`breakpoint-${breakpoint}`]), ref: mergedRef }),
|
|
33
33
|
React.createElement(VisualContext, { contextName: "alert" },
|
|
34
34
|
React.createElement("div", { className: clsx(styles.alert, styles[`type-${type}`]) },
|
|
35
35
|
React.createElement("div", { className: clsx(styles.icon, styles.text), role: "img", "aria-label": statusIconAriaLabel },
|
package/alert/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["alert/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,uCAAuC,CAAC;AAClE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGrE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,UAAU,GAA+C;IAC7D,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,gBAAgB;IACzB,OAAO,EAAE,iBAAiB;IAC1B,IAAI,EAAE,aAAa;CACpB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAcjB;QAdiB,EACpC,IAAI,EACJ,mBAAmB,EACnB,OAAO,GAAG,IAAI,EACd,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAiB,GAAG,IAAI,OAEL,EADhB,IAAI,cAb6B,8KAcrC,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACpE,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;IAEjE,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE1E,MAAM,YAAY,GAAG,MAAM,IAAI,CAC7B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,aAAa,CAAC,EACpD,UAAU,EAAC,MAAM,IAEhB,UAAU,CACI,CAClB,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,IAAI,UAAU,CAAC,CAAC;IAEhD,OAAO,CACL,6CACM,SAAS,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["alert/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 from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../button/internal';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { AlertProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n error: 'status-negative',\n warning: 'status-warning',\n success: 'status-positive',\n info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps;\n\nexport default function InternalAlert({\n type,\n statusIconAriaLabel,\n visible = true,\n dismissible,\n dismissAriaLabel,\n children,\n header,\n buttonText,\n action,\n onDismiss,\n onButtonClick,\n __internalRootRef = null,\n ...rest\n}: InternalAlertProps) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('alert');\n\n const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const isRefresh = useVisualRefresh();\n const size = isRefresh ? 'normal' : header && children ? 'big' : 'normal';\n\n const actionButton = action || (\n <InternalButton\n className={styles['action-button']}\n onClick={() => fireNonCancelableEvent(onButtonClick)}\n formAction=\"none\"\n >\n {buttonText}\n </InternalButton>\n );\n\n const hasAction = Boolean(action || buttonText);\n\n return (\n <div\n {...baseProps}\n data-analytics-alert={type}\n aria-hidden={!visible}\n className={clsx(\n styles.root,\n { [styles.hidden]: !visible },\n baseProps.className,\n styles[`breakpoint-${breakpoint}`]\n )}\n ref={mergedRef}\n >\n <VisualContext contextName=\"alert\">\n <div className={clsx(styles.alert, styles[`type-${type}`])}>\n <div className={clsx(styles.icon, styles.text)} role=\"img\" aria-label={statusIconAriaLabel}>\n <InternalIcon name={typeToIcon[type]} size={size} />\n </div>\n <div className={styles.body}>\n <div className={clsx(styles.message, styles.text)}>\n {header && <div className={styles.header}>{header}</div>}\n <div className={styles.content}>{children}</div>\n </div>\n {hasAction && <div className={styles.action}>{actionButton}</div>}\n </div>\n {dismissible && (\n <div className={styles.dismiss}>\n <InternalButton\n className={styles['dismiss-button']}\n variant=\"icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n onClick={() => fireNonCancelableEvent(onDismiss)}\n />\n </div>\n )}\n </div>\n </VisualContext>\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight-details.d.ts","sourceRoot":"lib/default/","sources":["area-chart/elements/use-highlight-details.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;
|
|
1
|
+
{"version":3,"file":"use-highlight-details.d.ts","sourceRoot":"lib/default/","sources":["area-chart/elements/use-highlight-details.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,WAAW,gBAAgB;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAChD,YAAY,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC/C,YAAY,EAAE,IAAI,GAAG,qBAAqB,CAAC;IAC3C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC9E,KAAK,EACL,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,gBAAgB,GACjB,EAAE;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,cAAc,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3D,oBAAoB,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,IAAI,GAAG,gBAAgB,CAkD1B"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { useInternalI18n } from '../../internal/i18n/context';
|
|
1
2
|
import { useSelector } from '../model/async-store';
|
|
2
3
|
export default function useHighlightDetails({ model, xTickFormatter, yTickFormatter, detailTotalFormatter, detailTotalLabel, }) {
|
|
4
|
+
const i18n = useInternalI18n('area-chart');
|
|
3
5
|
const hX = useSelector(model.interactions, state => state.highlightedX);
|
|
4
6
|
const hPoint = useSelector(model.interactions, state => state.highlightedPoint);
|
|
5
7
|
const isPopoverPinned = useSelector(model.interactions, state => state.isPopoverPinned);
|
|
@@ -20,7 +22,7 @@ export default function useHighlightDetails({ model, xTickFormatter, yTickFormat
|
|
|
20
22
|
});
|
|
21
23
|
const totalDetails = [
|
|
22
24
|
{
|
|
23
|
-
key: detailTotalLabel || '',
|
|
25
|
+
key: i18n('i18nStrings.detailTotalLabel', detailTotalLabel) || '',
|
|
24
26
|
value: detailTotalFormatter
|
|
25
27
|
? detailTotalFormatter(detailsTotal)
|
|
26
28
|
: yTickFormatter
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight-details.js","sourceRoot":"lib/default/","sources":["area-chart/elements/use-highlight-details.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-highlight-details.js","sourceRoot":"lib/default/","sources":["area-chart/elements/use-highlight-details.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CartesianChartProps } from '../../internal/components/cartesian-chart/interfaces';\nimport { ChartSeriesDetailItem } from '../../internal/components/chart-series-details';\nimport { useInternalI18n } from '../../internal/i18n/context';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport { useSelector } from '../model/async-store';\n\nexport interface HighlightDetails {\n isPopoverPinned: boolean;\n highlightIndex: number;\n formattedX: string;\n seriesTitle: string;\n formattedY: number | string;\n seriesDetails: readonly ChartSeriesDetailItem[];\n totalDetails: readonly ChartSeriesDetailItem[];\n pointDetails: null | ChartSeriesDetailItem;\n activeLabel: string;\n}\n\nexport default function useHighlightDetails<T extends AreaChartProps.DataTypes>({\n model,\n xTickFormatter,\n yTickFormatter,\n detailTotalFormatter,\n detailTotalLabel,\n}: {\n model: ChartModel<T>;\n xTickFormatter?: CartesianChartProps.TickFormatter<T>;\n yTickFormatter?: CartesianChartProps.TickFormatter<number>;\n detailTotalFormatter?: CartesianChartProps.TickFormatter<number>;\n detailTotalLabel?: string;\n}): null | HighlightDetails {\n const i18n = useInternalI18n('area-chart');\n const hX = useSelector(model.interactions, state => state.highlightedX);\n const hPoint = useSelector(model.interactions, state => state.highlightedPoint);\n const isPopoverPinned = useSelector(model.interactions, state => state.isPopoverPinned);\n\n if (!hX) {\n return null;\n }\n\n const [firstPoint] = hX;\n const highlightIndex = firstPoint.index.x;\n const seriesPoints = [...model.computed.plot.xs[highlightIndex]];\n const detailsTotal = seriesPoints.reduce((total, point) => total + point.value, 0);\n const formattedX = xTickFormatter ? xTickFormatter(firstPoint.x) : firstPoint.x.toString();\n const seriesTitle = hPoint ? getInternalSeries(hPoint).title : '';\n const formattedY = hPoint ? getInternalSeries(hPoint).formatValue(hPoint.value, hPoint.x) : '';\n const seriesDetails = seriesPoints.map(point => {\n const { title, formatValue, color, markerType } = getInternalSeries(point);\n const isDimmed = Boolean(hPoint) && point !== hPoint;\n return { key: title, value: formatValue(point.value, point.x), color, markerType, isDimmed };\n });\n const totalDetails = [\n {\n key: i18n('i18nStrings.detailTotalLabel', detailTotalLabel) || '',\n value: detailTotalFormatter\n ? detailTotalFormatter(detailsTotal)\n : yTickFormatter\n ? yTickFormatter(detailsTotal)\n : detailsTotal,\n },\n ];\n const pointDetails = hPoint ? seriesDetails[hPoint.index.s] : null;\n const activeLabel = `${seriesTitle} ${formattedX} ${formattedY}, ${totalDetails[0].key} ${totalDetails[0].value}`;\n\n return {\n isPopoverPinned,\n highlightIndex,\n formattedX,\n seriesTitle,\n formattedY,\n activeLabel,\n seriesDetails,\n totalDetails,\n pointDetails,\n };\n\n function getInternalSeries(point: ChartModel.PlotPoint<T>) {\n return model.getInternalSeries(model.series[point.index.s]);\n }\n}\n"]}
|
|
@@ -13,6 +13,7 @@ export interface AreaChartProps<T extends AreaChartProps.DataTypes> extends Cart
|
|
|
13
13
|
series: ReadonlyArray<AreaChartProps.Series<T>>;
|
|
14
14
|
/**
|
|
15
15
|
* An object containing all the necessary localized strings required by the component.
|
|
16
|
+
* @i18n
|
|
16
17
|
*/
|
|
17
18
|
i18nStrings?: AreaChartProps.I18nStrings<T>;
|
|
18
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["area-chart/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAExG,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAChE,SAAQ,mBAAmB,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACxD;;;;;;;;;OASG;IACH,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhD
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["area-chart/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAExG,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAChE,SAAQ,mBAAmB,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACxD;;;;;;;;;OASG;IACH,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhD;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;CAC7C;AAED,yBAAiB,cAAc,CAAC;IAC9B,KAAY,SAAS,GAAG,cAAc,CAAC;IAEvC,UAAiB,KAAK,CAAC,CAAC;QACtB,CAAC,EAAE,CAAC,CAAC;QACL,CAAC,EAAE,MAAM,CAAC;KACX;IAED,KAAY,MAAM,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC;IAExD,UAAiB,UAAU,CAAC,CAAC;QAC3B,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,CAAC,SAAS,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5E,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KAC5C;IAED,UAAiB,eAAe;QAC9B,IAAI,EAAE,WAAW,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,CAAC,EAAE,MAAM,CAAC;QACV,cAAc,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;KACxC;IAED,KAAY,kBAAkB,CAAC,CAAC,IAAI,mBAAmB,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtF,KAAY,qBAAqB,CAAC,CAAC,IAAI,mBAAmB,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5F,KAAY,aAAa,CAAC,CAAC,IAAI,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAEpE,KAAY,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,IAAI,mBAAmB,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEnG,UAAiB,WAAW,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;QACxE,oDAAoD;QACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,qDAAqD;QACrD,oBAAoB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;KAC9C;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["area-chart/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CartesianChartProps, ChartDataTypes } from '../internal/components/cartesian-chart/interfaces';\n\nexport interface AreaChartProps<T extends AreaChartProps.DataTypes>\n extends CartesianChartProps<T, AreaChartProps.Series<T>> {\n /**\n * Array that represents the source of data for the displayed chart.\n * Each element can represent an area series, or a threshold, and can have the following properties:\n *\n * * `title` (string): A human-readable title for this series\n * * `type` (string): Series type (`\"area\"`, or `\"threshold\"`)\n * * `data` (Array): An array of data points, represented as objects with `x` and `y` properties. The `x` values must be consistent across all series\n * * `color` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color\n * * `valueFormatter` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.\n */\n series: ReadonlyArray<AreaChartProps.Series<T>>;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n */\n i18nStrings?: AreaChartProps.I18nStrings<T>;\n}\n\nexport namespace AreaChartProps {\n export type DataTypes = ChartDataTypes;\n\n export interface Datum<T> {\n x: T;\n y: number;\n }\n\n export type Series<T> = AreaSeries<T> | ThresholdSeries;\n\n export interface AreaSeries<T> {\n type: 'area';\n title: string;\n color?: string;\n data: T extends unknown ? ReadonlyArray<Datum<T>> : ReadonlyArray<Datum<T>>;\n valueFormatter?: ValueFormatter<number, T>;\n }\n\n export interface ThresholdSeries {\n type: 'threshold';\n title: string;\n color?: string;\n y: number;\n valueFormatter?: TickFormatter<number>;\n }\n\n export type FilterChangeDetail<T> = CartesianChartProps.FilterChangeDetail<Series<T>>;\n\n export type HighlightChangeDetail<T> = CartesianChartProps.HighlightChangeDetail<Series<T>>;\n\n export type TickFormatter<T> = CartesianChartProps.TickFormatter<T>;\n\n export type ValueFormatter<YType, XType = null> = CartesianChartProps.ValueFormatter<YType, XType>;\n\n export interface I18nStrings<T> extends CartesianChartProps.I18nStrings<T> {\n /** The title of the values total in the popover. */\n detailTotalLabel?: string;\n /** Function to format the displayed values total. */\n detailTotalFormatter?: TickFormatter<number>;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["area-chart/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CartesianChartProps, ChartDataTypes } from '../internal/components/cartesian-chart/interfaces';\n\nexport interface AreaChartProps<T extends AreaChartProps.DataTypes>\n extends CartesianChartProps<T, AreaChartProps.Series<T>> {\n /**\n * Array that represents the source of data for the displayed chart.\n * Each element can represent an area series, or a threshold, and can have the following properties:\n *\n * * `title` (string): A human-readable title for this series\n * * `type` (string): Series type (`\"area\"`, or `\"threshold\"`)\n * * `data` (Array): An array of data points, represented as objects with `x` and `y` properties. The `x` values must be consistent across all series\n * * `color` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color\n * * `valueFormatter` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.\n */\n series: ReadonlyArray<AreaChartProps.Series<T>>;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: AreaChartProps.I18nStrings<T>;\n}\n\nexport namespace AreaChartProps {\n export type DataTypes = ChartDataTypes;\n\n export interface Datum<T> {\n x: T;\n y: number;\n }\n\n export type Series<T> = AreaSeries<T> | ThresholdSeries;\n\n export interface AreaSeries<T> {\n type: 'area';\n title: string;\n color?: string;\n data: T extends unknown ? ReadonlyArray<Datum<T>> : ReadonlyArray<Datum<T>>;\n valueFormatter?: ValueFormatter<number, T>;\n }\n\n export interface ThresholdSeries {\n type: 'threshold';\n title: string;\n color?: string;\n y: number;\n valueFormatter?: TickFormatter<number>;\n }\n\n export type FilterChangeDetail<T> = CartesianChartProps.FilterChangeDetail<Series<T>>;\n\n export type HighlightChangeDetail<T> = CartesianChartProps.HighlightChangeDetail<Series<T>>;\n\n export type TickFormatter<T> = CartesianChartProps.TickFormatter<T>;\n\n export type ValueFormatter<YType, XType = null> = CartesianChartProps.ValueFormatter<YType, XType>;\n\n export interface I18nStrings<T> extends CartesianChartProps.I18nStrings<T> {\n /** The title of the values total in the popover. */\n detailTotalLabel?: string;\n /** Function to format the displayed values total. */\n detailTotalFormatter?: TickFormatter<number>;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAyH1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAyH1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA2CxB"}
|
|
@@ -76,11 +76,14 @@ export function BreadcrumbItem({ item, onClick, onFollow, isDisplayed, isLast =
|
|
|
76
76
|
href: item.href || '#',
|
|
77
77
|
onClick: isLast ? preventDefault : onClickHandler,
|
|
78
78
|
};
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
79
|
+
const dataAttibutes = {};
|
|
80
|
+
if (isLast) {
|
|
81
|
+
dataAttibutes['data-analytics-context'] = 'breadcrumb';
|
|
82
|
+
}
|
|
83
|
+
return (React.createElement("div", Object.assign({ className: clsx(styles.breadcrumb, isLast && styles.last) }, dataAttibutes),
|
|
84
|
+
isDisplayed && isCompressed ? (React.createElement(BreadcrumbItemWithPopover, Object.assign({ item: item, isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes))) : (React.createElement(Item, Object.assign({ isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes),
|
|
85
|
+
React.createElement("span", { className: styles.text }, item.text))),
|
|
86
|
+
!isLast ? (React.createElement("span", { className: styles.icon },
|
|
87
|
+
React.createElement(InternalIcon, { name: "angle-right" }))) : null));
|
|
85
88
|
}
|
|
86
89
|
//# sourceMappingURL=item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,aAAa,MAAM,6BAA6B,CAAC;AAQxD,MAAM,yBAAyB,GAAG,CAAsC,EAKpC,EAAE,EAAE;QALgC,EACtE,IAAI,EACJ,MAAM,EACN,gBAAgB,OAEkB,EAD/B,cAAc,cAJqD,sCAKvE,CADkB;IAEjB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,CAAC,OAAqC,EAAE,cAA4C,EAAE,EAAE;QAC1G,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YAC9E,OAAO,KAAK,CAAC;SACd;QACD,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC9E,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAChE,IAAI,gBAAgB,GAAG,SAAS,EAAE;YAChC,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CACrB,oBAAC,MAAM;QACL,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;YACpC,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,GAAG,EAAE,CAAC,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,OAAO,EACjB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,CACjB,6BAAK,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB,QAAQ,EAAE,CAAC,CAAC;oBACpF,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI;oBAChD,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI,CAC5C,CACP;gBAED,oBAAC,WAAW,IAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,MAAM,EAAE,SAAS,IACnG,IAAI,CAAC,IAAI,CACE,CACG,CACpB,CACU,CACT,CACC,CACV,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC,CAAC;QACF,IAAI,WAAW,EAAE;YACf,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACjD;QACD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL;QACE,oBAAC,IAAI,kBACH,MAAM,EAAE,MAAM,IACV,cAAc,IAClB,OAAO,EAAE,GAAG,EAAE;gBACZ,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;YAC/D,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACnC,YAAY,EAAE,GAAG,EAAE;gBACjB,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;YAC/D,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,gBAAgB,EAAE,gBAAgB;YAElC,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,IACvC,IAAI,CAAC,IAAI,CACL;YACP,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,cAAc,IACzD,IAAI,CAAC,IAAI,CACL,CACF;QACN,WAAW,IAAI,cAAc,CAC7B,CACJ,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,IAAI,GAAG,CAAC,EAAoE,EAAE,EAAE;QAAxE,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,OAAgC,EAA3B,cAAc,cAAvD,0CAAyD,CAAF;IACnE,OAAA,MAAM,CAAC,CAAC,CAAC,CACP,8CAAU,cAAc,GAAG,QAAQ,CAAQ,CAC5C,CAAC,CAAC,CAAC,CACF,2CAAO,cAAc,EAAM,gBAAgB,GACxC,QAAQ,CACP,CACL,CAAA;CAAA,CAAC;AAEJ,MAAM,UAAU,cAAc,CAAsC,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAM,GAAG,KAAK,EACd,YAAY,GAAG,KAAK,GACG;IACvB,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3E,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;QACjD,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;SAC5D;QACD,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,MAAM,cAAc,GAAsC;QACxD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;KACtE,CAAC;IACF,MAAM,gBAAgB,GAAkD;QACtE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG;QACtB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc;KAClD,CAAC;IAEF,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC;YAC3D,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC7B,oBAAC,yBAAyB,kBACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,IAC9B,cAAc,EAClB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,kBAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,IAAM,cAAc;gBAC1E,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CAC3C,CACR;YACA,CAAC,MAAM,CAAC,CAAC,CAAC,CACT,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI;gBAC1B,oBAAC,YAAY,IAAC,IAAI,EAAC,aAAa,GAAG,CAC9B,CACR,CAAC,CAAC,CAAC,IAAI,CACJ,CACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\nimport { Transition } from '../../internal/components/transition';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport Portal from '../../internal/components/portal';\nimport popoverStyles from '../../popover/styles.css.js';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = (\n <Portal>\n <div className={styles['item-popover']}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={textRef}\n size=\"small\"\n fixedWidth={false}\n position=\"bottom\"\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={() => {}} header={undefined}>\n {item.text}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes}>{children}</span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n return (\n <>\n <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n <span className={styles.text}>{item.text}</span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n </>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"item.js","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,aAAa,MAAM,6BAA6B,CAAC;AAQxD,MAAM,yBAAyB,GAAG,CAAsC,EAKpC,EAAE,EAAE;QALgC,EACtE,IAAI,EACJ,MAAM,EACN,gBAAgB,OAEkB,EAD/B,cAAc,cAJqD,sCAKvE,CADkB;IAEjB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,CAAC,OAAqC,EAAE,cAA4C,EAAE,EAAE;QAC1G,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YAC9E,OAAO,KAAK,CAAC;SACd;QACD,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC9E,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAChE,IAAI,gBAAgB,GAAG,SAAS,EAAE;YAChC,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CACrB,oBAAC,MAAM;QACL,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;YACpC,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,GAAG,EAAE,CAAC,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,OAAO,EACjB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,CACjB,6BAAK,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB,QAAQ,EAAE,CAAC,CAAC;oBACpF,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI;oBAChD,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI,CAC5C,CACP;gBAED,oBAAC,WAAW,IAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,MAAM,EAAE,SAAS,IACnG,IAAI,CAAC,IAAI,CACE,CACG,CACpB,CACU,CACT,CACC,CACV,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC,CAAC;QACF,IAAI,WAAW,EAAE;YACf,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACjD;QACD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL;QACE,oBAAC,IAAI,kBACH,MAAM,EAAE,MAAM,IACV,cAAc,IAClB,OAAO,EAAE,GAAG,EAAE;gBACZ,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;YAC/D,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACnC,YAAY,EAAE,GAAG,EAAE;gBACjB,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;YAC/D,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,gBAAgB,EAAE,gBAAgB;YAElC,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,IACvC,IAAI,CAAC,IAAI,CACL;YACP,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,cAAc,IACzD,IAAI,CAAC,IAAI,CACL,CACF;QACN,WAAW,IAAI,cAAc,CAC7B,CACJ,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,IAAI,GAAG,CAAC,EAAoE,EAAE,EAAE;QAAxE,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,OAAgC,EAA3B,cAAc,cAAvD,0CAAyD,CAAF;IACnE,OAAA,MAAM,CAAC,CAAC,CAAC,CACP,8CAAU,cAAc,GAAG,QAAQ,CAAQ,CAC5C,CAAC,CAAC,CAAC,CACF,2CAAO,cAAc,EAAM,gBAAgB,GACxC,QAAQ,CACP,CACL,CAAA;CAAA,CAAC;AAEJ,MAAM,UAAU,cAAc,CAAsC,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAM,GAAG,KAAK,EACd,YAAY,GAAG,KAAK,GACG;IACvB,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3E,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;QACjD,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;SAC5D;QACD,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,MAAM,cAAc,GAAsC;QACxD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;KACtE,CAAC;IACF,MAAM,gBAAgB,GAAkD;QACtE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG;QACtB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc;KAClD,CAAC;IAEF,MAAM,aAAa,GAA2B,EAAE,CAAC;IACjD,IAAI,MAAM,EAAE;QACV,aAAa,CAAC,wBAAwB,CAAC,GAAG,YAAY,CAAC;KACxD;IAED,OAAO,CACL,2CAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,IAAM,aAAa;QAC9E,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC7B,oBAAC,yBAAyB,kBACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,IAC9B,cAAc,EAClB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,kBAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,IAAM,cAAc;YAC1E,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CAC3C,CACR;QACA,CAAC,MAAM,CAAC,CAAC,CAAC,CACT,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI;YAC1B,oBAAC,YAAY,IAAC,IAAI,EAAC,aAAa,GAAG,CAC9B,CACR,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\nimport { Transition } from '../../internal/components/transition';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport Portal from '../../internal/components/portal';\nimport popoverStyles from '../../popover/styles.css.js';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = (\n <Portal>\n <div className={styles['item-popover']}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={textRef}\n size=\"small\"\n fixedWidth={false}\n position=\"bottom\"\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={() => {}} header={undefined}>\n {item.text}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes}>{children}</span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n const dataAttibutes: Record<string, string> = {};\n if (isLast) {\n dataAttibutes['data-analytics-context'] = 'breadcrumb';\n }\n\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)} {...dataAttibutes}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n <span className={styles.text}>{item.text}</span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}
|
package/button/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["button/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["button/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAalF,eAAO,MAAM,cAAc;cANf,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,GAAG,kBAAkB,GAAG,cAAc,GAAG,eAAe;;;;sEA+I3G,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/button/internal.js
CHANGED
|
@@ -10,6 +10,7 @@ import { LeftIcon, RightIcon } from './icon-helper';
|
|
|
10
10
|
import { checkSafeUrl } from '../internal/utils/check-safe-url';
|
|
11
11
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
12
12
|
import LiveRegion from '../internal/components/live-region';
|
|
13
|
+
import { useFunnel } from '../internal/analytics/hooks/use-funnel';
|
|
13
14
|
export const InternalButton = React.forwardRef((_a, ref) => {
|
|
14
15
|
var { children, iconName, __iconClass, onClick, onFollow, iconAlign = 'left', iconUrl, iconSvg, iconAlt, variant = 'normal', loading = false, loadingText, disabled = false, wrapText = true, href, target, rel, download, formAction = 'submit', ariaLabel, ariaDescribedby, ariaExpanded, fullWidth, __nativeAttributes, __internalRootRef = null, __activated = false } = _a, props = __rest(_a, ["children", "iconName", "__iconClass", "onClick", "onFollow", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "wrapText", "href", "target", "rel", "download", "formAction", "ariaLabel", "ariaDescribedby", "ariaExpanded", "fullWidth", "__nativeAttributes", "__internalRootRef", "__activated"]);
|
|
15
16
|
checkSafeUrl('Button', href);
|
|
@@ -18,6 +19,7 @@ export const InternalButton = React.forwardRef((_a, ref) => {
|
|
|
18
19
|
const shouldHaveContent = children && ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss'].indexOf(variant) === -1;
|
|
19
20
|
const buttonRef = useRef(null);
|
|
20
21
|
useForwardFocus(ref, buttonRef);
|
|
22
|
+
const { funnelInteractionId, funnelSubmit } = useFunnel();
|
|
21
23
|
const handleClick = useCallback((event) => {
|
|
22
24
|
if (isNotInteractive) {
|
|
23
25
|
return event.preventDefault();
|
|
@@ -25,9 +27,12 @@ export const InternalButton = React.forwardRef((_a, ref) => {
|
|
|
25
27
|
if (isAnchor && isPlainLeftClick(event)) {
|
|
26
28
|
fireCancelableEvent(onFollow, { href, target }, event);
|
|
27
29
|
}
|
|
30
|
+
if (funnelInteractionId && variant === 'primary') {
|
|
31
|
+
funnelSubmit();
|
|
32
|
+
}
|
|
28
33
|
const { altKey, button, ctrlKey, metaKey, shiftKey } = event;
|
|
29
34
|
fireCancelableEvent(onClick, { altKey, button, ctrlKey, metaKey, shiftKey }, event);
|
|
30
|
-
}, [isAnchor, isNotInteractive, onClick, onFollow, href, target]);
|
|
35
|
+
}, [isAnchor, isNotInteractive, onClick, onFollow, href, target, funnelInteractionId, variant, funnelSubmit]);
|
|
31
36
|
const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {
|
|
32
37
|
[styles.disabled]: isNotInteractive,
|
|
33
38
|
[styles['button-no-wrap']]: !wrapText,
|
package/button/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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,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;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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 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';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\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} & 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 ariaDescribedby,\n ariaExpanded,\n fullWidth,\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 isAnchor = Boolean(href);\n const isNotInteractive = 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 { funnelInteractionId, funnelSubmit } = useFunnel();\n\n const handleClick = useCallback(\n (event: React.MouseEvent) => {\n if (isNotInteractive) {\n return event.preventDefault();\n }\n\n if (isAnchor && isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, { href, target }, event);\n }\n\n if (funnelInteractionId && variant === 'primary') {\n funnelSubmit();\n }\n\n const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n fireCancelableEvent(onClick, { altKey, button, ctrlKey, metaKey, shiftKey }, event);\n },\n [isAnchor, isNotInteractive, onClick, onFollow, href, target, funnelInteractionId, variant, funnelSubmit]\n );\n\n const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {\n [styles.disabled]: isNotInteractive,\n [styles['button-no-wrap']]: !wrapText,\n [styles['button-no-text']]: !shouldHaveContent,\n [styles['is-activated']]: __activated,\n [styles['full-width']]: shouldHaveContent && fullWidth,\n });\n\n const buttonProps = {\n ...props,\n ...__nativeAttributes,\n // https://github.com/microsoft/TypeScript/issues/36659\n ref: useMergeRefs(buttonRef as any, __internalRootRef),\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedby,\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={isNotInteractive ? -1 : undefined}\n aria-disabled={isNotInteractive ? true : undefined}\n download={download}\n >\n {buttonContent}\n </a>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n return (\n <>\n <button\n {...buttonProps}\n type={formAction === 'none' ? 'button' : 'submit'}\n disabled={disabled}\n aria-disabled={loading && !disabled ? true : undefined}\n >\n {buttonContent}\n </button>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n);\n\nexport default InternalButton;\n"]}
|
package/container/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["container/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["container/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,GAAG,KAAK,EACT,EAAE,cAAc,eAchB"}
|
package/container/index.js
CHANGED
|
@@ -6,11 +6,13 @@ import InternalContainer from './internal';
|
|
|
6
6
|
import { getExternalProps } from '../internal/utils/external-props';
|
|
7
7
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
8
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
9
|
+
import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
|
|
9
10
|
export default function Container(_a) {
|
|
10
11
|
var { variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false } = _a, props = __rest(_a, ["variant", "disableHeaderPaddings", "disableContentPaddings"]);
|
|
11
12
|
const baseComponentProps = useBaseComponent('Container');
|
|
12
13
|
const externalProps = getExternalProps(props);
|
|
13
|
-
return (React.createElement(
|
|
14
|
+
return (React.createElement(AnalyticsFunnelSubStep, null,
|
|
15
|
+
React.createElement(InternalContainer, Object.assign({ variant: variant, disableHeaderPaddings: disableHeaderPaddings, disableContentPaddings: disableContentPaddings }, externalProps, baseComponentProps))));
|
|
14
16
|
}
|
|
15
17
|
applyDisplayName(Container, 'Container');
|
|
16
18
|
//# sourceMappingURL=index.js.map
|
package/container/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["container/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["container/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mDAAmD,CAAC;AAI3F,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAKjB;QALiB,EAChC,OAAO,GAAG,SAAS,EACnB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,OAEf,EADZ,KAAK,cAJwB,8DAKjC,CADS;IAER,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACL,oBAAC,sBAAsB;QACrB,oBAAC,iBAAiB,kBAChB,OAAO,EAAE,OAAO,EAChB,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,IAC1C,aAAa,EACb,kBAAkB,EACtB,CACqB,CAC1B,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalContainer from './internal';\nimport { ContainerProps } from './interfaces';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\n\nexport { ContainerProps };\n\nexport default function Container({\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n ...props\n}: ContainerProps) {\n const baseComponentProps = useBaseComponent('Container');\n const externalProps = getExternalProps(props);\n return (\n <AnalyticsFunnelSubStep>\n <InternalContainer\n variant={variant}\n disableHeaderPaddings={disableHeaderPaddings}\n disableContentPaddings={disableContentPaddings}\n {...externalProps}\n {...baseComponentProps}\n />\n </AnalyticsFunnelSubStep>\n );\n}\n\napplyDisplayName(Container, 'Container');\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["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;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["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;AASlF,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,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,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,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;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,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,qBAA4B,EAC5B,GAAG,SAAS,EACb,EAAE,sBAAsB,eAqGxB"}
|
package/container/internal.js
CHANGED
|
@@ -11,6 +11,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
|
11
11
|
import { useMobile } from '../internal/hooks/use-mobile';
|
|
12
12
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
13
13
|
import styles from './styles.css.js';
|
|
14
|
+
import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
|
|
14
15
|
export default function InternalContainer(_a) {
|
|
15
16
|
var { header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, fitHeight, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef = null, __disableFooterDivider = false, __disableFooterPaddings = false, __hiddenContent = false, __headerRef, __headerId, __darkHeader = false, __disableStickyMobile = true } = _a, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "fitHeight", "__stickyOffset", "__mobileStickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__disableFooterPaddings", "__hiddenContent", "__headerRef", "__headerId", "__darkHeader", "__disableStickyMobile"]);
|
|
16
17
|
const isMobile = useMobile();
|
|
@@ -20,9 +21,10 @@ export default function InternalContainer(_a) {
|
|
|
20
21
|
const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableStickyMobile);
|
|
21
22
|
const { setHasStickyBackground } = useAppLayoutContext();
|
|
22
23
|
const isRefresh = useVisualRefresh();
|
|
24
|
+
const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
|
|
23
25
|
const hasDynamicHeight = isRefresh && variant === 'full-page';
|
|
24
26
|
const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });
|
|
25
|
-
const mergedRef = useMergeRefs(rootRef, __internalRootRef);
|
|
27
|
+
const mergedRef = useMergeRefs(rootRef, subStepRef, __internalRootRef);
|
|
26
28
|
const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);
|
|
27
29
|
const headerIdProp = __headerId ? { id: __headerId } : {};
|
|
28
30
|
/**
|
|
@@ -44,7 +46,7 @@ export default function InternalContainer(_a) {
|
|
|
44
46
|
// The container is only sticky on mobile if it is the header for the table.
|
|
45
47
|
// In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.
|
|
46
48
|
const shouldHaveStickyStyles = isSticky && !isMobile;
|
|
47
|
-
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], shouldHaveStickyStyles && [styles['sticky-enabled']]), ref: mergedRef }),
|
|
49
|
+
return (React.createElement("div", Object.assign({}, baseProps, funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], shouldHaveStickyStyles && [styles['sticky-enabled']]), ref: mergedRef }),
|
|
48
50
|
header && (React.createElement(StickyHeaderContext.Provider, { value: { isStuck } },
|
|
49
51
|
React.createElement("div", Object.assign({ className: clsx(styles.header, styles[`header-variant-${variant}`], {
|
|
50
52
|
[styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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 { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __headerId?: string;\n __darkHeader?: boolean;\n __disableStickyMobile?: 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 __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __headerId,\n __darkHeader = false,\n __disableStickyMobile = true,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile\n );\n const { setHasStickyBackground } = useAppLayoutContext();\n const isRefresh = useVisualRefresh();\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n const mergedRef = useMergeRefs(rootRef, subStepRef, __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 // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n return (\n <div\n {...baseProps}\n {...funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n shouldHaveStickyStyles && [styles['sticky-enabled']]\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\n className={clsx(styles.content, {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </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/form/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAU1E"}
|
package/form/index.js
CHANGED
|
@@ -5,10 +5,14 @@ import React from 'react';
|
|
|
5
5
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
6
6
|
import InternalForm from './internal';
|
|
7
7
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
8
|
+
import { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';
|
|
9
|
+
import { getFunnelNameSelector } from '../internal/analytics/selectors';
|
|
8
10
|
export default function Form(_a) {
|
|
9
11
|
var { variant = 'full-page' } = _a, props = __rest(_a, ["variant"]);
|
|
10
12
|
const baseComponentProps = useBaseComponent('Form');
|
|
11
|
-
return React.createElement(
|
|
13
|
+
return (React.createElement(AnalyticsFunnel, { funnelType: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1 },
|
|
14
|
+
React.createElement(AnalyticsFunnelStep, { stepNumber: 1, stepNameSelector: getFunnelNameSelector() },
|
|
15
|
+
React.createElement(InternalForm, Object.assign({ variant: variant }, props, baseComponentProps)))));
|
|
12
16
|
}
|
|
13
17
|
applyDisplayName(Form, 'Form');
|
|
14
18
|
//# sourceMappingURL=index.js.map
|
package/form/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["form/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,YAAY,MAAM,YAAY,CAAC;AACtC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAIxE,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAA8C;QAA9C,EAAE,OAAO,GAAG,WAAW,OAAuB,EAAlB,KAAK,cAAjC,WAAmC,CAAF;IAC5D,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,eAAe,IAAC,UAAU,EAAC,aAAa,EAAC,mBAAmB,EAAE,EAAE,EAAE,gBAAgB,EAAE,CAAC;QACpF,oBAAC,mBAAmB,IAAC,UAAU,EAAE,CAAC,EAAE,gBAAgB,EAAE,qBAAqB,EAAE;YAC3E,oBAAC,YAAY,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CACjD,CACN,CACnB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { getFunnelNameSelector } from '../internal/analytics/selectors';\n\nexport { FormProps };\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n const baseComponentProps = useBaseComponent('Form');\n\n return (\n <AnalyticsFunnel funnelType=\"single-page\" optionalStepNumbers={[]} totalFunnelSteps={1}>\n <AnalyticsFunnelStep stepNumber={1} stepNameSelector={getFunnelNameSelector()}>\n <InternalForm variant={variant} {...props} {...baseComponentProps} />\n </AnalyticsFunnelStep>\n </AnalyticsFunnel>\n );\n}\n\napplyDisplayName(Form, 'Form');\n"]}
|
package/form/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,KAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAmDnB"}
|
package/form/internal.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { useEffect } from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { getBaseProps } from '../internal/base-component';
|
|
7
7
|
import InternalAlert from '../alert/internal';
|
|
@@ -10,12 +10,21 @@ import InternalContentLayout from '../content-layout/internal';
|
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
import LiveRegion from '../internal/components/live-region';
|
|
12
12
|
import { useInternalI18n } from '../internal/i18n/context';
|
|
13
|
+
import { FunnelMetrics } from '../internal/analytics';
|
|
14
|
+
import { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';
|
|
13
15
|
export default function InternalForm(_a) {
|
|
14
16
|
var { children, header, errorText, errorIconAriaLabel: errorIconAriaLabelOverride, actions, secondaryActions, variant, __internalRootRef } = _a, props = __rest(_a, ["children", "header", "errorText", "errorIconAriaLabel", "actions", "secondaryActions", "variant", "__internalRootRef"]);
|
|
15
17
|
const baseProps = getBaseProps(props);
|
|
16
18
|
const i18n = useInternalI18n('form');
|
|
17
19
|
const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);
|
|
18
|
-
|
|
20
|
+
const { funnelInteractionId, funnelProps } = useFunnel();
|
|
21
|
+
const { funnelStepProps } = useFunnelStep();
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
if (funnelInteractionId && errorText) {
|
|
24
|
+
FunnelMetrics.funnelError({ funnelInteractionId });
|
|
25
|
+
}
|
|
26
|
+
}, [funnelInteractionId, errorText]);
|
|
27
|
+
return (React.createElement("div", Object.assign({}, baseProps, funnelProps, funnelStepProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }),
|
|
19
28
|
React.createElement(FormLayout, { header: header && React.createElement("div", { className: clsx(styles.header, variant === 'full-page' && styles['full-page']) }, header), variant: variant },
|
|
20
29
|
children && React.createElement("div", { className: styles.content }, children),
|
|
21
30
|
errorText && (React.createElement(InternalBox, { margin: { top: 'l' } },
|
package/form/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport InternalContentLayout from '../content-layout/internal';\nimport styles from './styles.css.js';\nimport { FormLayoutProps, FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n children,\n header,\n errorText,\n errorIconAriaLabel: errorIconAriaLabelOverride,\n actions,\n secondaryActions,\n variant,\n __internalRootRef,\n ...props\n}: InternalFormProps) {\n const baseProps = getBaseProps(props);\n const i18n = useInternalI18n('form');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n const { funnelInteractionId, funnelProps } = useFunnel();\n const { funnelStepProps } = useFunnelStep();\n\n useEffect(() => {\n if (funnelInteractionId && errorText) {\n FunnelMetrics.funnelError({ funnelInteractionId });\n }\n }, [funnelInteractionId, errorText]);\n\n return (\n <div\n {...baseProps}\n {...funnelProps}\n {...funnelStepProps}\n ref={__internalRootRef}\n className={clsx(styles.root, baseProps.className)}\n >\n <FormLayout\n header={\n header && <div className={clsx(styles.header, variant === 'full-page' && styles['full-page'])}>{header}</div>\n }\n variant={variant}\n >\n {children && <div className={styles.content}>{children}</div>}\n {errorText && (\n <InternalBox margin={{ top: 'l' }}>\n <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n <div className={styles.error}>{errorText}</div>\n </InternalAlert>\n </InternalBox>\n )}\n {(actions || secondaryActions) && (\n <div className={styles.footer}>\n <div className={styles['actions-section']}>\n {actions && <div className={styles.actions}>{actions}</div>}\n {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n </div>\n </div>\n )}\n {errorText && (\n <LiveRegion assertive={true}>\n {errorIconAriaLabel}, {errorText}\n </LiveRegion>\n )}\n </FormLayout>\n </div>\n );\n}\n\nfunction FormLayout({ children, header, variant }: FormLayoutProps) {\n return variant === 'full-page' && header ? (\n <InternalContentLayout header={header}>{children}</InternalContentLayout>\n ) : (\n <>\n {header}\n {children}\n </>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAQtD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eAiHxB"}
|