@cloudscape-design/components 3.0.633 → 3.0.634
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/app-layout/split-panel/styles.css.js +2 -2
- package/app-layout/split-panel/styles.scoped.css +3 -2
- package/app-layout/split-panel/styles.selectors.js +2 -2
- package/cards/index.d.ts.map +1 -1
- package/cards/index.js +6 -6
- package/cards/index.js.map +1 -1
- package/cards/interfaces.d.ts +1 -1
- package/cards/interfaces.js.map +1 -1
- package/internal/direction.d.ts +1 -1
- package/internal/direction.d.ts.map +1 -1
- package/internal/direction.js +3 -0
- package/internal/direction.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/mixed-line-bar-chart/bar-series.d.ts +2 -1
- package/mixed-line-bar-chart/bar-series.d.ts.map +1 -1
- package/mixed-line-bar-chart/bar-series.js +6 -3
- package/mixed-line-bar-chart/bar-series.js.map +1 -1
- package/mixed-line-bar-chart/chart-container.d.ts.map +1 -1
- package/mixed-line-bar-chart/chart-container.js +3 -3
- package/mixed-line-bar-chart/chart-container.js.map +1 -1
- package/mixed-line-bar-chart/data-series.d.ts +2 -1
- package/mixed-line-bar-chart/data-series.d.ts.map +1 -1
- package/mixed-line-bar-chart/data-series.js +2 -2
- package/mixed-line-bar-chart/data-series.js.map +1 -1
- package/package.json +1 -1
- package/progress-bar/index.d.ts.map +1 -1
- package/progress-bar/index.js +1 -1
- package/progress-bar/index.js.map +1 -1
- package/progress-bar/internal.d.ts +2 -1
- package/progress-bar/internal.d.ts.map +1 -1
- package/progress-bar/internal.js +2 -2
- package/progress-bar/internal.js.map +1 -1
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +8 -2
- package/property-filter/index.js.map +1 -1
- package/property-filter/interfaces.d.ts +5 -0
- package/property-filter/interfaces.d.ts.map +1 -1
- package/property-filter/interfaces.js.map +1 -1
- package/property-filter/styles.css.js +32 -31
- package/property-filter/styles.scoped.css +41 -33
- package/property-filter/styles.selectors.js +32 -31
- package/table/interfaces.d.ts +13 -11
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +9 -4
- package/table/internal.js.map +1 -1
- package/table/selection/interfaces.d.ts +1 -0
- package/table/selection/interfaces.d.ts.map +1 -1
- package/table/selection/interfaces.js.map +1 -1
- package/table/selection/use-selection.d.ts +5 -4
- package/table/selection/use-selection.d.ts.map +1 -1
- package/table/selection/use-selection.js +55 -36
- package/table/selection/use-selection.js.map +1 -1
- package/table/thead.d.ts +1 -1
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +1 -1
- package/table/thead.js.map +1 -1
- package/test-utils/dom/progress-bar/index.d.ts +1 -0
- package/test-utils/dom/progress-bar/index.js +3 -0
- package/test-utils/dom/progress-bar/index.js.map +1 -1
- package/test-utils/dom/property-filter/index.d.ts +4 -0
- package/test-utils/dom/property-filter/index.js +6 -0
- package/test-utils/dom/property-filter/index.js.map +1 -1
- package/test-utils/selectors/progress-bar/index.d.ts +1 -0
- package/test-utils/selectors/progress-bar/index.js +3 -0
- package/test-utils/selectors/progress-bar/index.js.map +1 -1
- package/test-utils/selectors/property-filter/index.d.ts +4 -0
- package/test-utils/selectors/property-filter/index.js +6 -0
- package/test-utils/selectors/property-filter/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"drawer-displayed": "awsui_drawer-
|
|
5
|
-
"drawer-content": "awsui_drawer-
|
|
4
|
+
"drawer-displayed": "awsui_drawer-displayed_1lh3u_17q8n_103",
|
|
5
|
+
"drawer-content": "awsui_drawer-content_1lh3u_17q8n_107"
|
|
6
6
|
};
|
|
7
7
|
|
|
@@ -100,10 +100,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
100
100
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
101
101
|
SPDX-License-Identifier: Apache-2.0
|
|
102
102
|
*/
|
|
103
|
-
.awsui_drawer-
|
|
103
|
+
.awsui_drawer-displayed_1lh3u_17q8n_103:not(#\9) {
|
|
104
104
|
min-inline-size: 40px;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
.awsui_drawer-
|
|
107
|
+
.awsui_drawer-content_1lh3u_17q8n_107:not(#\9) {
|
|
108
108
|
position: fixed;
|
|
109
|
+
z-index: 830;
|
|
109
110
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"drawer-displayed": "awsui_drawer-
|
|
6
|
-
"drawer-content": "awsui_drawer-
|
|
5
|
+
"drawer-displayed": "awsui_drawer-displayed_1lh3u_17q8n_103",
|
|
6
|
+
"drawer-content": "awsui_drawer-content_1lh3u_17q8n_107"
|
|
7
7
|
};
|
|
8
8
|
|
package/cards/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+B/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+B/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,qBA4Kc,CAAC;AAE1B,eAAe,KAAK,CAAC"}
|
package/cards/index.js
CHANGED
|
@@ -45,7 +45,7 @@ const Cards = React.forwardRef(function (_a, ref) {
|
|
|
45
45
|
const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);
|
|
46
46
|
const getMouseDownTarget = useMouseDownTarget();
|
|
47
47
|
const i18n = useInternalI18n('cards');
|
|
48
|
-
const { isItemSelected, getItemSelectionProps
|
|
48
|
+
const { isItemSelected, getItemSelectionProps } = useSelection({
|
|
49
49
|
items,
|
|
50
50
|
trackBy,
|
|
51
51
|
selectedItems,
|
|
@@ -94,10 +94,10 @@ const Cards = React.forwardRef(function (_a, ref) {
|
|
|
94
94
|
React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences })))), footer: hasFooterPagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef, __darkHeader: computedVariant === 'full-page', __disableFooterDivider: true },
|
|
95
95
|
React.createElement("div", { className: clsx(hasToolsHeader && styles['has-header'], isRefresh && styles.refresh, styles[`header-variant-${computedVariant}`], shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']) },
|
|
96
96
|
!!renderAriaLive && !!firstIndex && (React.createElement(LiveRegion, null,
|
|
97
|
-
React.createElement("span", null, renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })))), status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections,
|
|
97
|
+
React.createElement("span", null, renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })))), status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, onFocus: onCardFocus, ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cardsLabel, ariaLabelledby: isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined, entireCardClickable: entireCardClickable }))))))));
|
|
98
98
|
});
|
|
99
99
|
export default Cards;
|
|
100
|
-
const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isItemSelected, getItemSelectionProps, visibleSections,
|
|
100
|
+
const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isItemSelected, getItemSelectionProps, visibleSections, onFocus, ariaLabelledby, ariaLabel, entireCardClickable, }) => {
|
|
101
101
|
const selectable = !!selectionType;
|
|
102
102
|
const canClickEntireCard = selectable && entireCardClickable;
|
|
103
103
|
const isRefresh = useVisualRefresh();
|
|
@@ -119,15 +119,15 @@ const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isI
|
|
|
119
119
|
React.createElement("div", { className: clsx(styles['card-inner'], isRefresh && styles.refresh), onClick: canClickEntireCard
|
|
120
120
|
? event => {
|
|
121
121
|
var _a;
|
|
122
|
-
getItemSelectionProps(item).onChange();
|
|
122
|
+
getItemSelectionProps === null || getItemSelectionProps === void 0 ? void 0 : getItemSelectionProps(item).onChange();
|
|
123
123
|
// Manually move focus to the native input (checkbox or radio button)
|
|
124
124
|
(_a = event.currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
|
|
125
125
|
}
|
|
126
126
|
: undefined },
|
|
127
127
|
React.createElement("div", { className: styles['card-header'] },
|
|
128
128
|
React.createElement("div", { className: styles['card-header-inner'] }, cardDefinition.header ? cardDefinition.header(item) : ''),
|
|
129
|
-
|
|
130
|
-
React.createElement(SelectionControl, Object.assign({ onFocusDown: moveFocusDown, onFocusUp: moveFocusUp
|
|
129
|
+
getItemSelectionProps && (React.createElement("div", { className: styles['selection-control'] },
|
|
130
|
+
React.createElement(SelectionControl, Object.assign({ onFocusDown: moveFocusDown, onFocusUp: moveFocusUp }, getItemSelectionProps(item)))))),
|
|
131
131
|
visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (React.createElement("div", { key: id || index, className: styles.section, style: { width: `${width}%` } },
|
|
132
132
|
header ? React.createElement("div", { className: styles['section-header'] }, header) : '',
|
|
133
133
|
content ? React.createElement("div", { className: styles['section-content'] }, content(item)) : '')))))))));
|
package/cards/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.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, { FocusEventHandler, useCallback, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport {\n SelectionControl,\n SelectionControlProps,\n focusMarkers,\n useSelectionFocusMove,\n useSelection,\n} from '../table/selection';\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport LiveRegion from '../internal/components/live-region';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n {\n items = [],\n cardDefinition,\n cardsPerRow = [],\n header,\n filter,\n pagination,\n preferences,\n empty,\n loading,\n loadingText,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n visibleSections,\n stickyHeader,\n stickyHeaderVerticalOffset,\n variant = 'container',\n renderAriaLive,\n firstIndex = 1,\n totalItemsCount,\n entireCardClickable,\n ...rest\n }: CardsProps<T>,\n ref: React.Ref<CardsProps.Ref>\n) {\n const { __internalRootRef } = useBaseComponent('Cards', {\n props: { entireCardClickable, selectionType, stickyHeader, variant },\n });\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n const isMobile = useMobile();\n\n const computedVariant = isRefresh ? variant : 'container';\n\n const headerIdRef = useRef<string | undefined>(undefined);\n const setHeaderRef = useCallback((id: string) => {\n headerIdRef.current = id;\n }, []);\n const isLabelledByHeader = !ariaLabels?.cardsLabel && !!header;\n\n const [columns, measureRef] = useContainerQuery<number>(\n ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n [cardsPerRow]\n );\n const refObject = useRef(null);\n const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n const getMouseDownTarget = useMouseDownTarget();\n\n const i18n = useInternalI18n('cards');\n const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n items,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels: {\n itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n },\n });\n const hasToolsHeader = header || filter || pagination || preferences;\n const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n const headerRef = useRef<HTMLDivElement>(null);\n\n const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;\n const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n // When an element inside card receives focus we want to adjust the scroll.\n // However, that behavior is unwanted when the focus is received as result of a click\n // as it causes the click to never reach the target element.\n if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n scrollToItem(event.currentTarget);\n }\n };\n useImperativeHandle(\n ref,\n () => ({\n scrollToTop: () => {\n if (stickyHeader) {\n scrollToTop();\n }\n },\n }),\n [stickyHeader, scrollToTop]\n );\n let status;\n if (loading) {\n status = (\n <div className={styles.loading}>\n <InternalStatusIndicator type=\"loading\">\n <LiveRegion visible={true}>{loadingText}</LiveRegion>\n </InternalStatusIndicator>\n </div>\n );\n } else if (empty && !items.length) {\n status = <div className={styles.empty}>{empty}</div>;\n }\n\n return (\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <AnalyticsFunnelSubStep>\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n <InternalContainerAsSubstep\n header={\n hasToolsHeader && (\n <div\n className={clsx(\n styles.header,\n isRefresh && styles['header-refresh'],\n styles[`header-variant-${computedVariant}`],\n shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n )}\n >\n <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>\n <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n </CollectionLabelContext.Provider>\n </div>\n )\n }\n footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n disableContentPaddings={true}\n disableHeaderPaddings={computedVariant === 'full-page'}\n variant={computedVariant === 'container' ? 'cards' : computedVariant}\n __stickyHeader={stickyHeader}\n __stickyOffset={stickyHeaderVerticalOffset}\n __headerRef={headerRef}\n __darkHeader={computedVariant === 'full-page'}\n __disableFooterDivider={true}\n >\n <div\n className={clsx(\n hasToolsHeader && styles['has-header'],\n isRefresh && styles.refresh,\n styles[`header-variant-${computedVariant}`],\n shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n )}\n >\n {!!renderAriaLive && !!firstIndex && (\n <LiveRegion>\n <span>\n {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n </span>\n </LiveRegion>\n )}\n {status ?? (\n <CardsList\n items={items}\n cardDefinition={cardDefinition}\n trackBy={trackBy}\n selectionType={selectionType}\n columns={columns}\n isItemSelected={isItemSelected}\n getItemSelectionProps={getItemSelectionProps}\n visibleSections={visibleSections}\n updateShiftToggle={updateShiftToggle}\n onFocus={onCardFocus}\n ariaLabel={ariaLabels?.cardsLabel}\n ariaLabelledby={isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined}\n entireCardClickable={entireCardClickable}\n />\n )}\n </div>\n </InternalContainerAsSubstep>\n </div>\n </AnalyticsFunnelSubStep>\n </LinkDefaultVariantContext.Provider>\n );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n items,\n cardDefinition,\n trackBy,\n selectionType,\n columns,\n isItemSelected,\n getItemSelectionProps,\n visibleSections,\n updateShiftToggle,\n onFocus,\n ariaLabelledby,\n ariaLabel,\n entireCardClickable,\n}: Pick<\n CardsProps<T>,\n 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections' | 'entireCardClickable'\n> & {\n columns: number | null;\n isItemSelected: (item: T) => boolean;\n getItemSelectionProps: (item: T) => SelectionControlProps;\n updateShiftToggle: (state: boolean) => void;\n onFocus: FocusEventHandler<HTMLElement>;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}) => {\n const selectable = !!selectionType;\n const canClickEntireCard = selectable && entireCardClickable;\n const isRefresh = useVisualRefresh();\n\n const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);\n\n let visibleSectionsDefinition = cardDefinition.sections || [];\n visibleSectionsDefinition = visibleSections\n ? visibleSectionsDefinition.filter(\n (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n )\n : visibleSectionsDefinition;\n\n let listRole: 'group' | undefined = undefined;\n let listItemRole: 'presentation' | undefined = undefined;\n\n if (selectable) {\n listRole = 'group';\n listItemRole = 'presentation';\n }\n\n return (\n <ol\n className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n role={listRole}\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n {...(focusMarkers && focusMarkers.root)}\n >\n {items.map((item, index) => (\n <li\n className={clsx(styles.card, {\n [styles['card-selectable']]: selectable,\n [styles['card-selected']]: selectable && isItemSelected(item),\n })}\n key={getItemKey(trackBy, item, index)}\n onFocus={onFocus}\n {...(focusMarkers && focusMarkers.item)}\n role={listItemRole}\n >\n <div\n className={clsx(styles['card-inner'], isRefresh && styles.refresh)}\n onClick={\n canClickEntireCard\n ? event => {\n getItemSelectionProps(item).onChange();\n // Manually move focus to the native input (checkbox or radio button)\n event.currentTarget.querySelector('input')?.focus();\n }\n : undefined\n }\n >\n <div className={styles['card-header']}>\n <div className={styles['card-header-inner']}>\n {cardDefinition.header ? cardDefinition.header(item) : ''}\n </div>\n {selectable && (\n <div className={styles['selection-control']}>\n <SelectionControl\n onFocusDown={moveFocusDown}\n onFocusUp={moveFocusUp}\n onShiftToggle={updateShiftToggle}\n {...getItemSelectionProps(item)}\n />\n </div>\n )}\n </div>\n {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n {header ? <div className={styles['section-header']}>{header}</div> : ''}\n {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n </div>\n ))}\n </div>\n </li>\n ))}\n </ol>\n );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.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, { FocusEventHandler, useCallback, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport {\n SelectionControl,\n SelectionControlProps,\n focusMarkers,\n useSelectionFocusMove,\n useSelection,\n} from '../table/selection';\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport LiveRegion from '../internal/components/live-region';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n {\n items = [],\n cardDefinition,\n cardsPerRow = [],\n header,\n filter,\n pagination,\n preferences,\n empty,\n loading,\n loadingText,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n visibleSections,\n stickyHeader,\n stickyHeaderVerticalOffset,\n variant = 'container',\n renderAriaLive,\n firstIndex = 1,\n totalItemsCount,\n entireCardClickable,\n ...rest\n }: CardsProps<T>,\n ref: React.Ref<CardsProps.Ref>\n) {\n const { __internalRootRef } = useBaseComponent('Cards', {\n props: { entireCardClickable, selectionType, stickyHeader, variant },\n });\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n const isMobile = useMobile();\n\n const computedVariant = isRefresh ? variant : 'container';\n\n const headerIdRef = useRef<string | undefined>(undefined);\n const setHeaderRef = useCallback((id: string) => {\n headerIdRef.current = id;\n }, []);\n const isLabelledByHeader = !ariaLabels?.cardsLabel && !!header;\n\n const [columns, measureRef] = useContainerQuery<number>(\n ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n [cardsPerRow]\n );\n const refObject = useRef(null);\n const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n const getMouseDownTarget = useMouseDownTarget();\n\n const i18n = useInternalI18n('cards');\n const { isItemSelected, getItemSelectionProps } = useSelection({\n items,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels: {\n itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n },\n });\n const hasToolsHeader = header || filter || pagination || preferences;\n const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n const headerRef = useRef<HTMLDivElement>(null);\n\n const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;\n const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n // When an element inside card receives focus we want to adjust the scroll.\n // However, that behavior is unwanted when the focus is received as result of a click\n // as it causes the click to never reach the target element.\n if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n scrollToItem(event.currentTarget);\n }\n };\n useImperativeHandle(\n ref,\n () => ({\n scrollToTop: () => {\n if (stickyHeader) {\n scrollToTop();\n }\n },\n }),\n [stickyHeader, scrollToTop]\n );\n let status;\n if (loading) {\n status = (\n <div className={styles.loading}>\n <InternalStatusIndicator type=\"loading\">\n <LiveRegion visible={true}>{loadingText}</LiveRegion>\n </InternalStatusIndicator>\n </div>\n );\n } else if (empty && !items.length) {\n status = <div className={styles.empty}>{empty}</div>;\n }\n\n return (\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <AnalyticsFunnelSubStep>\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n <InternalContainerAsSubstep\n header={\n hasToolsHeader && (\n <div\n className={clsx(\n styles.header,\n isRefresh && styles['header-refresh'],\n styles[`header-variant-${computedVariant}`],\n shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n )}\n >\n <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>\n <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n </CollectionLabelContext.Provider>\n </div>\n )\n }\n footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n disableContentPaddings={true}\n disableHeaderPaddings={computedVariant === 'full-page'}\n variant={computedVariant === 'container' ? 'cards' : computedVariant}\n __stickyHeader={stickyHeader}\n __stickyOffset={stickyHeaderVerticalOffset}\n __headerRef={headerRef}\n __darkHeader={computedVariant === 'full-page'}\n __disableFooterDivider={true}\n >\n <div\n className={clsx(\n hasToolsHeader && styles['has-header'],\n isRefresh && styles.refresh,\n styles[`header-variant-${computedVariant}`],\n shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n )}\n >\n {!!renderAriaLive && !!firstIndex && (\n <LiveRegion>\n <span>\n {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n </span>\n </LiveRegion>\n )}\n {status ?? (\n <CardsList\n items={items}\n cardDefinition={cardDefinition}\n trackBy={trackBy}\n selectionType={selectionType}\n columns={columns}\n isItemSelected={isItemSelected}\n getItemSelectionProps={getItemSelectionProps}\n visibleSections={visibleSections}\n onFocus={onCardFocus}\n ariaLabel={ariaLabels?.cardsLabel}\n ariaLabelledby={isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined}\n entireCardClickable={entireCardClickable}\n />\n )}\n </div>\n </InternalContainerAsSubstep>\n </div>\n </AnalyticsFunnelSubStep>\n </LinkDefaultVariantContext.Provider>\n );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n items,\n cardDefinition,\n trackBy,\n selectionType,\n columns,\n isItemSelected,\n getItemSelectionProps,\n visibleSections,\n onFocus,\n ariaLabelledby,\n ariaLabel,\n entireCardClickable,\n}: Pick<\n CardsProps<T>,\n 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections' | 'entireCardClickable'\n> & {\n columns: number | null;\n isItemSelected: (item: T) => boolean;\n getItemSelectionProps?: (item: T) => SelectionControlProps;\n onFocus: FocusEventHandler<HTMLElement>;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}) => {\n const selectable = !!selectionType;\n const canClickEntireCard = selectable && entireCardClickable;\n const isRefresh = useVisualRefresh();\n\n const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);\n\n let visibleSectionsDefinition = cardDefinition.sections || [];\n visibleSectionsDefinition = visibleSections\n ? visibleSectionsDefinition.filter(\n (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n )\n : visibleSectionsDefinition;\n\n let listRole: 'group' | undefined = undefined;\n let listItemRole: 'presentation' | undefined = undefined;\n\n if (selectable) {\n listRole = 'group';\n listItemRole = 'presentation';\n }\n\n return (\n <ol\n className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n role={listRole}\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n {...(focusMarkers && focusMarkers.root)}\n >\n {items.map((item, index) => (\n <li\n className={clsx(styles.card, {\n [styles['card-selectable']]: selectable,\n [styles['card-selected']]: selectable && isItemSelected(item),\n })}\n key={getItemKey(trackBy, item, index)}\n onFocus={onFocus}\n {...(focusMarkers && focusMarkers.item)}\n role={listItemRole}\n >\n <div\n className={clsx(styles['card-inner'], isRefresh && styles.refresh)}\n onClick={\n canClickEntireCard\n ? event => {\n getItemSelectionProps?.(item).onChange();\n // Manually move focus to the native input (checkbox or radio button)\n event.currentTarget.querySelector('input')?.focus();\n }\n : undefined\n }\n >\n <div className={styles['card-header']}>\n <div className={styles['card-header-inner']}>\n {cardDefinition.header ? cardDefinition.header(item) : ''}\n </div>\n {getItemSelectionProps && (\n <div className={styles['selection-control']}>\n <SelectionControl\n onFocusDown={moveFocusDown}\n onFocusUp={moveFocusUp}\n {...getItemSelectionProps(item)}\n />\n </div>\n )}\n </div>\n {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n {header ? <div className={styles['section-header']}>{header}</div> : ''}\n {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n </div>\n ))}\n </div>\n </li>\n ))}\n </ol>\n );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
|
package/cards/interfaces.d.ts
CHANGED
|
@@ -177,8 +177,8 @@ export interface CardsProps<T = any> extends BaseComponentProps {
|
|
|
177
177
|
* Use this function to announce page changes to screen reader users.
|
|
178
178
|
* The function argument takes the following properties:
|
|
179
179
|
* * `firstIndex` (number) - The provided `firstIndex` property which defaults to 1 when not defined.
|
|
180
|
-
* * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.
|
|
181
180
|
* * `lastIndex` (number) - The index of the last visible item of the table.
|
|
181
|
+
* * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.
|
|
182
182
|
*/
|
|
183
183
|
renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;
|
|
184
184
|
/**
|
package/cards/interfaces.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n /**\n * Displayed only when the list of items is empty.\n */\n empty?: React.ReactNode;\n\n /**\n * Heading element of the table container. Use the [header component](/components/header/).\n */\n header?: React.ReactNode;\n\n /**\n * Use this slot to add filtering controls to the component.\n */\n filter?: React.ReactNode;\n\n /**\n * Use this slot to add the [pagination component](/components/pagination/) to the component.\n */\n pagination?: React.ReactNode;\n\n /**\n * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n */\n preferences?: React.ReactNode;\n\n /**\n * Specifies the items that serve as data source for a card.\n *\n * The `cardDefinition` property handles the display of this data.\n */\n items: ReadonlyArray<T>;\n\n /**\n * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n */\n loading?: boolean;\n\n /**\n * Specifies the text to display when in loading state.\n */\n loadingText?: string;\n\n /**\n * Defines what to display in each card. It has the following properties:\n * * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n * Use `fontSize=\"inherit\"` on [link](/components/link/) components inside card header.\n * * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n * body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n * * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n * source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n * * `header`: (ReactNode) - Responsible for displaying the section header.\n * * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n * * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n * the same row. The default value is 100%.\n *\n * All of the above properties are optional.\n */\n cardDefinition: CardsProps.CardDefinition<T>;\n /**\n * Determines the number of cards per row for any interval of container width.\n * It's an array whose entries are objects containing the following:\n * - `cards` (number) - Specifies the number of cards per row.\n * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n *\n * For example, with this configuration:\n * ```\n * [{\n * cards: 1\n * }, {\n * minWidth: 500,\n * cards: 2\n * }, {\n * minWidth: 800,\n * cards: 3\n * }]\n * ```\n *\n * the cards component displays:\n * * 1 card per row when the container width is below 500px.\n * * 2 cards per row when the container width is between 500px and 799px.\n * * 3 cards per row when the container width is 800px or wider.\n *\n * The number of cards per row can't be greater than 20.\n *\n * Default value:\n * ```\n * [{\n * cards: 1\n * }, {\n * minWidth: 768,\n * cards: 2\n * }, {\n * minWidth: 992,\n * cards: 3\n * }, {\n * minWidth: 1200,\n * cards: 4\n * }, {\n * minWidth: 1400,\n * cards: 5\n * }, {\n * minWidth: 1920,\n * cards: 6\n * }]\n * ```\n */\n cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n /**\n * Specifies the property inside items that uniquely identifies them.\n * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n * for performance optimizations.\n *\n * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n */\n trackBy?: CardsProps.TrackBy<T>;\n /**\n * Specifies the selection mode. It can be either `single` or `multi`.\n */\n selectionType?: CardsProps.SelectionType;\n /**\n * Specifies the list of selected items.\n */\n selectedItems?: ReadonlyArray<T>;\n /**\n * Determines which items are disabled. If an item is disabled, users can't select it.\n */\n isItemDisabled?: CardsProps.IsItemDisabled<T>;\n /**\n * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n * * `cardsLabel` (string) - Provides alternative text for the cards list.\n * By default the contents of the `header` are used.\n *\n * You can use the first arguments of type `SelectionState` to access the current selection\n * state of the component (for example, the `selectedItems` list). The label function for individual\n * items also receives the corresponding `Item` object. You can use the group label to\n * add a meaningful description to the whole selection.\n * @i18n\n */\n ariaLabels?: CardsProps.AriaLabels<T>;\n /**\n * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n *\n * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n *\n * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n */\n visibleSections?: ReadonlyArray<string>;\n /**\n * Called when a user interaction causes a change in the list of selected items.\n * The event `detail` contains the current list of `selectedItems`.\n */\n onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n /**\n * If set to true, the cards header remains visible when the user scrolls down.\n */\n stickyHeader?: boolean;\n /**\n * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n * need to position the sticky header below other fixed position elements on the page.\n */\n stickyHeaderVerticalOffset?: number;\n\n /**\n * Use this property to inform screen readers how many cards there are.\n * It specifies the total number of cards.\n * If there is an unknown total number of cards, leave this property undefined.\n */\n totalItemsCount?: number;\n /**\n * Use this property to inform screen readers which range of cards is currently displayed.\n * It specifies the index (1-based) of the first card.\n */\n firstIndex?: number;\n /**\n * Use this function to announce page changes to screen reader users.\n * The function argument takes the following properties:\n * * `firstIndex` (number) - The provided `firstIndex` property which defaults to 1 when not defined.\n * * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.\n * * `lastIndex` (number) - The index of the last visible item of the table.\n */\n renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n /**\n * Specify a cards variant with one of the following:\n * * `container` - Use this variant to have the cards displayed as a container.\n * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n * implement the high contrast header and content behavior automatically.\n * @visualrefresh `full-page` variant\n */\n variant?: 'container' | 'full-page';\n\n /**\n * Activating this property makes the entire card clickable to select it.\n * Don't use this property if the card has any other interactive elements.\n */\n entireCardClickable?: boolean;\n}\n\nexport namespace CardsProps {\n export interface CardDefinition<T> {\n header?(item: T): React.ReactNode;\n sections?: ReadonlyArray<SectionDefinition<T>>;\n }\n\n export interface SectionDefinition<T> {\n id?: string;\n header?: React.ReactNode;\n content?(item: T): React.ReactNode;\n width?: number;\n }\n\n export interface CardsLayout {\n cards: number;\n minWidth?: number;\n }\n\n export type TrackBy<T> = string | ((item: T) => string);\n\n export type SelectionType = 'single' | 'multi';\n\n export interface SelectionState<T> {\n selectedItems: ReadonlyArray<T>;\n }\n\n export interface SelectionChangeDetail<T> {\n selectedItems: T[];\n }\n\n export type IsItemDisabled<T> = (item: T) => boolean;\n\n export interface AriaLabels<T> {\n itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n selectionGroupLabel: string;\n cardsLabel?: string;\n }\n\n export interface LiveAnnouncement {\n firstIndex: number;\n lastIndex: number;\n totalItemsCount?: number;\n }\n\n export interface Ref {\n /**\n * When the sticky header is enabled, calling this function scrolls cards's\n * scroll parent up to reveal the first card or row of cards.\n */\n scrollToTop(): void;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n /**\n * Displayed only when the list of items is empty.\n */\n empty?: React.ReactNode;\n\n /**\n * Heading element of the table container. Use the [header component](/components/header/).\n */\n header?: React.ReactNode;\n\n /**\n * Use this slot to add filtering controls to the component.\n */\n filter?: React.ReactNode;\n\n /**\n * Use this slot to add the [pagination component](/components/pagination/) to the component.\n */\n pagination?: React.ReactNode;\n\n /**\n * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n */\n preferences?: React.ReactNode;\n\n /**\n * Specifies the items that serve as data source for a card.\n *\n * The `cardDefinition` property handles the display of this data.\n */\n items: ReadonlyArray<T>;\n\n /**\n * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n */\n loading?: boolean;\n\n /**\n * Specifies the text to display when in loading state.\n */\n loadingText?: string;\n\n /**\n * Defines what to display in each card. It has the following properties:\n * * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n * Use `fontSize=\"inherit\"` on [link](/components/link/) components inside card header.\n * * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n * body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n * * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n * source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n * * `header`: (ReactNode) - Responsible for displaying the section header.\n * * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n * * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n * the same row. The default value is 100%.\n *\n * All of the above properties are optional.\n */\n cardDefinition: CardsProps.CardDefinition<T>;\n /**\n * Determines the number of cards per row for any interval of container width.\n * It's an array whose entries are objects containing the following:\n * - `cards` (number) - Specifies the number of cards per row.\n * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n *\n * For example, with this configuration:\n * ```\n * [{\n * cards: 1\n * }, {\n * minWidth: 500,\n * cards: 2\n * }, {\n * minWidth: 800,\n * cards: 3\n * }]\n * ```\n *\n * the cards component displays:\n * * 1 card per row when the container width is below 500px.\n * * 2 cards per row when the container width is between 500px and 799px.\n * * 3 cards per row when the container width is 800px or wider.\n *\n * The number of cards per row can't be greater than 20.\n *\n * Default value:\n * ```\n * [{\n * cards: 1\n * }, {\n * minWidth: 768,\n * cards: 2\n * }, {\n * minWidth: 992,\n * cards: 3\n * }, {\n * minWidth: 1200,\n * cards: 4\n * }, {\n * minWidth: 1400,\n * cards: 5\n * }, {\n * minWidth: 1920,\n * cards: 6\n * }]\n * ```\n */\n cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n /**\n * Specifies the property inside items that uniquely identifies them.\n * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n * for performance optimizations.\n *\n * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n */\n trackBy?: CardsProps.TrackBy<T>;\n /**\n * Specifies the selection mode. It can be either `single` or `multi`.\n */\n selectionType?: CardsProps.SelectionType;\n /**\n * Specifies the list of selected items.\n */\n selectedItems?: ReadonlyArray<T>;\n /**\n * Determines which items are disabled. If an item is disabled, users can't select it.\n */\n isItemDisabled?: CardsProps.IsItemDisabled<T>;\n /**\n * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n * * `cardsLabel` (string) - Provides alternative text for the cards list.\n * By default the contents of the `header` are used.\n *\n * You can use the first arguments of type `SelectionState` to access the current selection\n * state of the component (for example, the `selectedItems` list). The label function for individual\n * items also receives the corresponding `Item` object. You can use the group label to\n * add a meaningful description to the whole selection.\n * @i18n\n */\n ariaLabels?: CardsProps.AriaLabels<T>;\n /**\n * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n *\n * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n *\n * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n */\n visibleSections?: ReadonlyArray<string>;\n /**\n * Called when a user interaction causes a change in the list of selected items.\n * The event `detail` contains the current list of `selectedItems`.\n */\n onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n /**\n * If set to true, the cards header remains visible when the user scrolls down.\n */\n stickyHeader?: boolean;\n /**\n * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n * need to position the sticky header below other fixed position elements on the page.\n */\n stickyHeaderVerticalOffset?: number;\n\n /**\n * Use this property to inform screen readers how many cards there are.\n * It specifies the total number of cards.\n * If there is an unknown total number of cards, leave this property undefined.\n */\n totalItemsCount?: number;\n /**\n * Use this property to inform screen readers which range of cards is currently displayed.\n * It specifies the index (1-based) of the first card.\n */\n firstIndex?: number;\n /**\n * Use this function to announce page changes to screen reader users.\n * The function argument takes the following properties:\n * * `firstIndex` (number) - The provided `firstIndex` property which defaults to 1 when not defined.\n * * `lastIndex` (number) - The index of the last visible item of the table.\n * * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.\n */\n renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n /**\n * Specify a cards variant with one of the following:\n * * `container` - Use this variant to have the cards displayed as a container.\n * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n * implement the high contrast header and content behavior automatically.\n * @visualrefresh `full-page` variant\n */\n variant?: 'container' | 'full-page';\n\n /**\n * Activating this property makes the entire card clickable to select it.\n * Don't use this property if the card has any other interactive elements.\n */\n entireCardClickable?: boolean;\n}\n\nexport namespace CardsProps {\n export interface CardDefinition<T> {\n header?(item: T): React.ReactNode;\n sections?: ReadonlyArray<SectionDefinition<T>>;\n }\n\n export interface SectionDefinition<T> {\n id?: string;\n header?: React.ReactNode;\n content?(item: T): React.ReactNode;\n width?: number;\n }\n\n export interface CardsLayout {\n cards: number;\n minWidth?: number;\n }\n\n export type TrackBy<T> = string | ((item: T) => string);\n\n export type SelectionType = 'single' | 'multi';\n\n export interface SelectionState<T> {\n selectedItems: ReadonlyArray<T>;\n }\n\n export interface SelectionChangeDetail<T> {\n selectedItems: T[];\n }\n\n export type IsItemDisabled<T> = (item: T) => boolean;\n\n export interface AriaLabels<T> {\n itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n selectionGroupLabel: string;\n cardsLabel?: string;\n }\n\n export interface LiveAnnouncement {\n firstIndex: number;\n lastIndex: number;\n totalItemsCount?: number;\n }\n\n export interface Ref {\n /**\n * When the sticky header is enabled, calling this function scrolls cards's\n * scroll parent up to reveal the first card or row of cards.\n */\n scrollToTop(): void;\n }\n}\n"]}
|
package/internal/direction.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare function getIsRtl(element: HTMLElement | SVGElement): boolean;
|
|
1
|
+
export declare function getIsRtl(element: null | HTMLElement | SVGElement): boolean;
|
|
2
2
|
export declare function getOffsetInlineStart(element: HTMLElement): number;
|
|
3
3
|
/**
|
|
4
4
|
* The scrollLeft value will be a negative number if the direction is RTL and
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../src/internal/direction.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,UAAU,
|
|
1
|
+
{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../src/internal/direction.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAK1E;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,UAGxD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,UAExD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,UAEpE;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,WAAW,GAAG,UAAU;;;;;;;EAoB7E;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,UAIhD"}
|
package/internal/direction.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
export function getIsRtl(element) {
|
|
4
|
+
if (!element) {
|
|
5
|
+
return false;
|
|
6
|
+
}
|
|
4
7
|
return getComputedStyle(element).direction === 'rtl';
|
|
5
8
|
}
|
|
6
9
|
export function getOffsetInlineStart(element) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"direction.js","sourceRoot":"","sources":["../../../src/internal/direction.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"direction.js","sourceRoot":"","sources":["../../../src/internal/direction.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,QAAQ,CAAC,OAAwC;IAC/D,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC;AACvD,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,OAAoB;;IACvD,MAAM,iBAAiB,GAAG,MAAA,MAAA,OAAO,CAAC,YAAY,0CAAE,WAAW,mCAAI,CAAC,CAAC;IACjE,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;AAC/G,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,OAAoB;IACvD,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AACjG,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAmB,EAAE,KAAc;IACnE,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;AACtF,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,4BAA4B,CAAC,OAAiC;IAC5E,MAAM,kBAAkB,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAE3D,MAAM,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC;IAC5C,MAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC;IAC5C,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,CAAC;IAC/C,MAAM,aAAa,GAAG,kBAAkB,CAAC,MAAM,CAAC;IAChD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,CAAC;QACxC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC,KAAK;QACjE,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC;IAC5B,MAAM,cAAc,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAErD,OAAO;QACL,SAAS;QACT,UAAU;QACV,eAAe;QACf,aAAa;QACb,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,KAAiB;IAC/C,OAAO,KAAK,CAAC,MAAM,YAAY,WAAW,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;QAClE,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,KAAK,CAAC,KAAK;QACpD,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;AAClB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function getIsRtl(element: null | HTMLElement | SVGElement): boolean {\n if (!element) {\n return false;\n }\n return getComputedStyle(element).direction === 'rtl';\n}\n\nexport function getOffsetInlineStart(element: HTMLElement) {\n const offsetParentWidth = element.offsetParent?.clientWidth ?? 0;\n return getIsRtl(element) ? offsetParentWidth - element.offsetWidth - element.offsetLeft : element.offsetLeft;\n}\n\n/**\n * The scrollLeft value will be a negative number if the direction is RTL and\n * needs to be converted to a positive value for direction independent scroll\n * computations. Additionally, the scrollLeft value can be a decimal value on\n * systems using display scaling requiring the floor and ceiling calls.\n */\nexport function getScrollInlineStart(element: HTMLElement) {\n return getIsRtl(element) ? Math.floor(element.scrollLeft) * -1 : Math.ceil(element.scrollLeft);\n}\n\n/**\n * The clientX position needs to be converted so it is relative to the right of\n * the document in order for computations to yield the same result in both\n * element directions.\n */\nexport function getLogicalClientX(event: PointerEvent, IsRtl: boolean) {\n return IsRtl ? document.documentElement.clientWidth - event.clientX : event.clientX;\n}\n\n/**\n * The getBoundingClientRect() function returns values relative to the top left\n * corner of the document regardless of document direction. The left/right position\n * will be transformed to insetInlineStart based on element direction in order to\n * support direction agnostic position computation.\n */\nexport function getLogicalBoundingClientRect(element: HTMLElement | SVGElement) {\n const boundingClientRect = element.getBoundingClientRect();\n\n const blockSize = boundingClientRect.height;\n const inlineSize = boundingClientRect.width;\n const insetBlockStart = boundingClientRect.top;\n const insetBlockEnd = boundingClientRect.bottom;\n const insetInlineStart = getIsRtl(element)\n ? document.documentElement.clientWidth - boundingClientRect.right\n : boundingClientRect.left;\n const insetInlineEnd = insetInlineStart + inlineSize;\n\n return {\n blockSize,\n inlineSize,\n insetBlockStart,\n insetBlockEnd,\n insetInlineStart,\n insetInlineEnd,\n };\n}\n\n/**\n * The pageX position needs to be converted so it is relative to the right of\n * the document in order for computations to yield the same result in both\n * element directions.\n */\nexport function getLogicalPageX(event: MouseEvent) {\n return event.target instanceof HTMLElement && getIsRtl(event.target)\n ? document.documentElement.clientWidth - event.pageX\n : event.pageX;\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
|
@@ -16,6 +16,7 @@ export interface BarSeriesProps<T> {
|
|
|
16
16
|
dimmed: boolean;
|
|
17
17
|
highlightedGroupIndex: number | null;
|
|
18
18
|
stackedBarValues?: StackedBarValues;
|
|
19
|
+
isRtl?: boolean;
|
|
19
20
|
}
|
|
20
|
-
export default function BarSeries<T extends ChartDataTypes>({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, }: BarSeriesProps<T>): JSX.Element;
|
|
21
|
+
export default function BarSeries<T extends ChartDataTypes>({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, isRtl, }: BarSeriesProps<T>): JSX.Element;
|
|
21
22
|
//# sourceMappingURL=bar-series.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar-series.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/bar-series.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAC9F,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAyB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKlE,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAEhB,MAAM,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAEhD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IAEpB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAE1B,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAE1B,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"bar-series.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/bar-series.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAC9F,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAyB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKlE,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAEhB,MAAM,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAEhD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IAEpB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAE1B,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAE1B,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAC1D,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,MAAM,EACN,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,GACN,EAAE,cAAc,CAAC,CAAC,CAAC,eAiInB"}
|
|
@@ -6,7 +6,7 @@ import { matchesX, getKeyValue } from './utils';
|
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
8
8
|
import { createOneSideRoundedRectPath } from './create-one-side-rounded-rect-path';
|
|
9
|
-
export default function BarSeries({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, }) {
|
|
9
|
+
export default function BarSeries({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, isRtl, }) {
|
|
10
10
|
const isRefresh = useVisualRefresh();
|
|
11
11
|
const isStacked = !!stackedBarValues;
|
|
12
12
|
const isVertical = axis === 'x';
|
|
@@ -81,7 +81,7 @@ export default function BarSeries({ axis, series, color, xScale, yScale, highlig
|
|
|
81
81
|
height: height - heightOffset,
|
|
82
82
|
}
|
|
83
83
|
: {
|
|
84
|
-
x: y - height + heightOffset / 2,
|
|
84
|
+
x: y - (!isRtl ? height : 0) + heightOffset / 2,
|
|
85
85
|
y: x + widthOffset / 2,
|
|
86
86
|
width: height - heightOffset,
|
|
87
87
|
height: width - widthOffset,
|
|
@@ -100,9 +100,12 @@ export default function BarSeries({ axis, series, color, xScale, yScale, highlig
|
|
|
100
100
|
else if (isVertical) {
|
|
101
101
|
side = isRoundedStart ? 'bottom' : 'top';
|
|
102
102
|
}
|
|
103
|
-
else {
|
|
103
|
+
else if (!isRtl) {
|
|
104
104
|
side = isRoundedStart ? 'left' : 'right';
|
|
105
105
|
}
|
|
106
|
+
else {
|
|
107
|
+
side = isRoundedStart ? 'right' : 'left';
|
|
108
|
+
}
|
|
106
109
|
if (side === 'all') {
|
|
107
110
|
return React.createElement("rect", Object.assign({ key: i }, placement, styleProps, { rx: rx }));
|
|
108
111
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar-series.js","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/bar-series.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 { ScaleContinuousNumeric, ScaleTime } from '../internal/vendor/d3-scale';\n\nimport { ChartScale, NumericChartScale } from '../internal/components/cartesian-chart/scales';\nimport { ChartDataTypes, MixedLineBarChartProps } from './interfaces';\nimport { matchesX, getKeyValue, StackedBarValues } from './utils';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { createOneSideRoundedRectPath } from './create-one-side-rounded-rect-path';\n\nexport interface BarSeriesProps<T> {\n axis: 'x' | 'y';\n\n series: MixedLineBarChartProps.BarDataSeries<T>;\n\n color: string;\n totalSeriesCount: number;\n seriesIndex: number;\n\n xScale: ChartScale;\n yScale: NumericChartScale;\n\n plotSize: number;\n chartAreaClipPath: string;\n\n highlighted: boolean;\n dimmed: boolean;\n highlightedGroupIndex: number | null;\n\n // Contains values to be used for stacked bars.\n stackedBarValues?: StackedBarValues;\n}\n\nexport default function BarSeries<T extends ChartDataTypes>({\n axis,\n series,\n color,\n xScale,\n yScale,\n highlighted,\n dimmed,\n highlightedGroupIndex,\n totalSeriesCount,\n seriesIndex,\n plotSize,\n chartAreaClipPath,\n stackedBarValues,\n}: BarSeriesProps<T>) {\n const isRefresh = useVisualRefresh();\n const isStacked = !!stackedBarValues;\n const isVertical = axis === 'x';\n\n const xCoordinates = (() => {\n if (series.type !== 'bar' || !xScale.isCategorical()) {\n return [];\n }\n\n const yContinuosScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number> = yScale.d3Scale;\n const xPoints = (series.data as ReadonlyArray<MixedLineBarChartProps.Datum<ChartDataTypes>>).map(\n ({ x }) => xScale.d3Scale(x) || NaN\n );\n\n const zeroY = yScale.d3Scale(0) ?? NaN;\n const baseY = isFinite(zeroY) ? Math.min(plotSize, zeroY) : plotSize;\n\n let barWidth = xScale.d3Scale.bandwidth();\n\n const PADDING = 4;\n const MINWIDTH = 4;\n\n if (!isStacked && totalSeriesCount > 1) {\n // Regular grouped bars\n barWidth = (barWidth - (totalSeriesCount - 1) * PADDING) / totalSeriesCount;\n barWidth = Math.max(barWidth, MINWIDTH);\n }\n\n return xPoints.map((x, i) => {\n const d = series.data[i];\n const key = getKeyValue(d.x);\n let barX = x;\n let yValue = d.y;\n let isRoundedStart = !isStacked;\n let isRoundedEnd = !isStacked;\n\n // Stacked bars\n if (isStacked) {\n const allXValues = stackedBarValues.get(key) ?? new Map();\n yValue = allXValues.get(seriesIndex) ?? 0;\n const allXValuesSorted = Array.from(allXValues.values()).sort((a, b) => a - b);\n isRoundedStart = yValue === allXValuesSorted[0];\n isRoundedEnd = yValue === allXValuesSorted[allXValuesSorted.length - 1];\n }\n // Regular grouped bars\n else if (totalSeriesCount > 1) {\n barX += seriesIndex * (barWidth + PADDING);\n }\n\n // Account for negative values growing \"down\" instead of \"up\"\n yValue = yValue < 0 ? yValue - d.y : yValue;\n\n return {\n x: barX,\n y: yContinuosScale(yValue) ?? NaN,\n width: barWidth,\n height: Math.abs((yContinuosScale(d.y) ?? NaN) - baseY),\n isRoundedStart,\n isRoundedEnd,\n };\n });\n })();\n\n const highlightedXValue = highlightedGroupIndex !== null ? xScale.domain[highlightedGroupIndex] : null;\n\n return (\n <g\n aria-label={series.title}\n clipPath={`url(#${chartAreaClipPath})`}\n className={clsx(styles.series, styles['series--bar'], {\n [styles['series--highlighted']]: highlighted,\n [styles['series--dimmed']]: dimmed,\n })}\n >\n {xCoordinates.map(({ x, y, width, height, isRoundedStart, isRoundedEnd }, i) => {\n if (!isFinite(x) || !isFinite(height)) {\n return;\n }\n\n // Create margins between stacked series but only when series data is not too small.\n const baseHeightOffset = isStacked ? 3 : 0;\n const isSmallBar = height < 4;\n const heightOffset = isSmallBar ? 0 : baseHeightOffset;\n const widthOffset = 2;\n\n const rx = isRefresh ? (isSmallBar ? 2 : 4) : 0;\n const placement = isVertical\n ? {\n x: x + widthOffset / 2,\n y: y + heightOffset / 2,\n width: width - widthOffset,\n height: height - heightOffset,\n }\n : {\n x: y - height + heightOffset / 2,\n y: x + widthOffset / 2,\n width: height - heightOffset,\n height: width - widthOffset,\n };\n\n const className = clsx(styles.series__rect, {\n [styles['series--dimmed']]: highlightedXValue !== null && !matchesX(highlightedXValue, series.data[i].x),\n });\n const styleProps = { fill: color, className };\n\n let side: 'left' | 'right' | 'top' | 'bottom' | 'all' | 'none' = 'none';\n if (isRoundedStart && isRoundedEnd) {\n side = 'all';\n } else if (!isRoundedStart && !isRoundedEnd) {\n side = 'none';\n } else if (isVertical) {\n side = isRoundedStart ? 'bottom' : 'top';\n } else {\n side = isRoundedStart ? 'left' : 'right';\n }\n\n if (side === 'all') {\n return <rect key={i} {...placement} {...styleProps} rx={rx} />;\n }\n if (side === 'none') {\n return <rect key={i} {...placement} {...styleProps} rx={0} />;\n }\n return <path key={i} d={createOneSideRoundedRectPath(placement, rx, side)} {...styleProps} />;\n })}\n </g>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"bar-series.js","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/bar-series.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 { ScaleContinuousNumeric, ScaleTime } from '../internal/vendor/d3-scale';\n\nimport { ChartScale, NumericChartScale } from '../internal/components/cartesian-chart/scales';\nimport { ChartDataTypes, MixedLineBarChartProps } from './interfaces';\nimport { matchesX, getKeyValue, StackedBarValues } from './utils';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { createOneSideRoundedRectPath } from './create-one-side-rounded-rect-path';\n\nexport interface BarSeriesProps<T> {\n axis: 'x' | 'y';\n\n series: MixedLineBarChartProps.BarDataSeries<T>;\n\n color: string;\n totalSeriesCount: number;\n seriesIndex: number;\n\n xScale: ChartScale;\n yScale: NumericChartScale;\n\n plotSize: number;\n chartAreaClipPath: string;\n\n highlighted: boolean;\n dimmed: boolean;\n highlightedGroupIndex: number | null;\n\n // Contains values to be used for stacked bars.\n stackedBarValues?: StackedBarValues;\n\n isRtl?: boolean;\n}\n\nexport default function BarSeries<T extends ChartDataTypes>({\n axis,\n series,\n color,\n xScale,\n yScale,\n highlighted,\n dimmed,\n highlightedGroupIndex,\n totalSeriesCount,\n seriesIndex,\n plotSize,\n chartAreaClipPath,\n stackedBarValues,\n isRtl,\n}: BarSeriesProps<T>) {\n const isRefresh = useVisualRefresh();\n const isStacked = !!stackedBarValues;\n const isVertical = axis === 'x';\n\n const xCoordinates = (() => {\n if (series.type !== 'bar' || !xScale.isCategorical()) {\n return [];\n }\n\n const yContinuosScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number> = yScale.d3Scale;\n const xPoints = (series.data as ReadonlyArray<MixedLineBarChartProps.Datum<ChartDataTypes>>).map(\n ({ x }) => xScale.d3Scale(x) || NaN\n );\n\n const zeroY = yScale.d3Scale(0) ?? NaN;\n const baseY = isFinite(zeroY) ? Math.min(plotSize, zeroY) : plotSize;\n\n let barWidth = xScale.d3Scale.bandwidth();\n\n const PADDING = 4;\n const MINWIDTH = 4;\n\n if (!isStacked && totalSeriesCount > 1) {\n // Regular grouped bars\n barWidth = (barWidth - (totalSeriesCount - 1) * PADDING) / totalSeriesCount;\n barWidth = Math.max(barWidth, MINWIDTH);\n }\n\n return xPoints.map((x, i) => {\n const d = series.data[i];\n const key = getKeyValue(d.x);\n let barX = x;\n let yValue = d.y;\n let isRoundedStart = !isStacked;\n let isRoundedEnd = !isStacked;\n\n // Stacked bars\n if (isStacked) {\n const allXValues = stackedBarValues.get(key) ?? new Map();\n yValue = allXValues.get(seriesIndex) ?? 0;\n const allXValuesSorted = Array.from(allXValues.values()).sort((a, b) => a - b);\n isRoundedStart = yValue === allXValuesSorted[0];\n isRoundedEnd = yValue === allXValuesSorted[allXValuesSorted.length - 1];\n }\n // Regular grouped bars\n else if (totalSeriesCount > 1) {\n barX += seriesIndex * (barWidth + PADDING);\n }\n\n // Account for negative values growing \"down\" instead of \"up\"\n yValue = yValue < 0 ? yValue - d.y : yValue;\n\n return {\n x: barX,\n y: yContinuosScale(yValue) ?? NaN,\n width: barWidth,\n height: Math.abs((yContinuosScale(d.y) ?? NaN) - baseY),\n isRoundedStart,\n isRoundedEnd,\n };\n });\n })();\n\n const highlightedXValue = highlightedGroupIndex !== null ? xScale.domain[highlightedGroupIndex] : null;\n\n return (\n <g\n aria-label={series.title}\n clipPath={`url(#${chartAreaClipPath})`}\n className={clsx(styles.series, styles['series--bar'], {\n [styles['series--highlighted']]: highlighted,\n [styles['series--dimmed']]: dimmed,\n })}\n >\n {xCoordinates.map(({ x, y, width, height, isRoundedStart, isRoundedEnd }, i) => {\n if (!isFinite(x) || !isFinite(height)) {\n return;\n }\n\n // Create margins between stacked series but only when series data is not too small.\n const baseHeightOffset = isStacked ? 3 : 0;\n const isSmallBar = height < 4;\n const heightOffset = isSmallBar ? 0 : baseHeightOffset;\n const widthOffset = 2;\n\n const rx = isRefresh ? (isSmallBar ? 2 : 4) : 0;\n const placement = isVertical\n ? {\n x: x + widthOffset / 2,\n y: y + heightOffset / 2,\n width: width - widthOffset,\n height: height - heightOffset,\n }\n : {\n x: y - (!isRtl ? height : 0) + heightOffset / 2,\n y: x + widthOffset / 2,\n width: height - heightOffset,\n height: width - widthOffset,\n };\n\n const className = clsx(styles.series__rect, {\n [styles['series--dimmed']]: highlightedXValue !== null && !matchesX(highlightedXValue, series.data[i].x),\n });\n const styleProps = { fill: color, className };\n\n let side: 'left' | 'right' | 'top' | 'bottom' | 'all' | 'none' = 'none';\n if (isRoundedStart && isRoundedEnd) {\n side = 'all';\n } else if (!isRoundedStart && !isRoundedEnd) {\n side = 'none';\n } else if (isVertical) {\n side = isRoundedStart ? 'bottom' : 'top';\n } else if (!isRtl) {\n side = isRoundedStart ? 'left' : 'right';\n } else {\n side = isRoundedStart ? 'right' : 'left';\n }\n\n if (side === 'all') {\n return <rect key={i} {...placement} {...styleProps} rx={rx} />;\n }\n if (side === 'none') {\n return <rect key={i} {...placement} {...styleProps} rx={0} />;\n }\n return <path key={i} d={createOneSideRoundedRectPath(placement, rx, side)} {...styleProps} />;\n })}\n </g>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/chart-container.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/chart-container.tsx"],"names":[],"mappings":"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"}
|
|
@@ -51,7 +51,7 @@ export default function ChartContainer(_a) {
|
|
|
51
51
|
const containerRefObject = useRef(null);
|
|
52
52
|
const containerRef = useMergeRefs(containerMeasureRef, containerRefObject);
|
|
53
53
|
const popoverRef = useRef(null);
|
|
54
|
-
const isRtl =
|
|
54
|
+
const isRtl = getIsRtl(containerRefObject.current);
|
|
55
55
|
const xDomain = (props.xDomain || computeDomainX(series, xScaleType));
|
|
56
56
|
const yDomain = (props.yDomain || computeDomainY(series, yScaleType, stackedBars));
|
|
57
57
|
const linesOnly = series.every(({ series }) => series.type === 'line' || series.type === 'threshold');
|
|
@@ -85,7 +85,7 @@ export default function ChartContainer(_a) {
|
|
|
85
85
|
}
|
|
86
86
|
const bottomAxisProps = !horizontalBars
|
|
87
87
|
? getXAxisProps(plotWidth, !isRtl ? [0, plotWidth] : [plotWidth, 0])
|
|
88
|
-
: getYAxisProps(plotWidth, [0, plotWidth]);
|
|
88
|
+
: getYAxisProps(plotWidth, !isRtl ? [0, plotWidth] : [plotWidth, 0]);
|
|
89
89
|
const blockEndLabelsProps = useBLockEndLabels(Object.assign({}, bottomAxisProps));
|
|
90
90
|
const plotMeasureRef = useRef(null);
|
|
91
91
|
const measuredHeight = useHeightMeasure(() => plotMeasureRef.current, !fitHeight);
|
|
@@ -341,7 +341,7 @@ export default function ChartContainer(_a) {
|
|
|
341
341
|
React.createElement(InlineStartLabels, { axis: y, ticks: leftAxisProps.ticks, scale: leftAxisProps.scale, tickFormatter: leftAxisProps.tickFormatter, title: leftAxisProps.title, ariaRoleDescription: leftAxisProps.ariaRoleDescription, maxLabelsWidth: maxInlineStartLabelsWidth, plotWidth: plotWidth, plotHeight: plotHeight }),
|
|
342
342
|
horizontalBars && (React.createElement(VerticalGridLines, { scale: yAxisProps.scale, ticks: yAxisProps.ticks, height: plotHeight })),
|
|
343
343
|
emphasizeBaselineAxis && linesOnly && (React.createElement(EmphasizedBaseline, { axis: x, scale: yAxisProps.scale, width: plotWidth, height: plotHeight })),
|
|
344
|
-
React.createElement(DataSeries, { axis: x, plotWidth: plotWidth, plotHeight: plotHeight, highlightedSeries: highlightedSeries !== null && highlightedSeries !== void 0 ? highlightedSeries : null, highlightedGroupIndex: highlightedGroupIndex, stackedBars: stackedBars, isGroupNavigation: isGroupNavigation, visibleSeries: visibleSeries, xScale: xAxisProps.scale, yScale: yAxisProps.scale }),
|
|
344
|
+
React.createElement(DataSeries, { axis: x, plotWidth: plotWidth, plotHeight: plotHeight, highlightedSeries: highlightedSeries !== null && highlightedSeries !== void 0 ? highlightedSeries : null, highlightedGroupIndex: highlightedGroupIndex, stackedBars: stackedBars, isGroupNavigation: isGroupNavigation, visibleSeries: visibleSeries, xScale: xAxisProps.scale, yScale: yAxisProps.scale, isRtl: !!isRtl }),
|
|
345
345
|
emphasizeBaselineAxis && !linesOnly && (React.createElement(EmphasizedBaseline, { axis: x, scale: yAxisProps.scale, width: plotWidth, height: plotHeight })),
|
|
346
346
|
React.createElement(VerticalMarker, { key: verticalLineX || '', height: plotHeight, showPoints: highlightedPoint === null, showLine: !isGroupNavigation, points: verticalMarkers, ref: verticalMarkerRef }),
|
|
347
347
|
highlightedPoint && (React.createElement(HighlightedPoint, { ref: highlightedPointRef, point: point, role: "button", ariaLabel: activeAriaLabel, ariaHasPopup: true, ariaExpanded: isPopoverPinned })),
|