@cloudscape-design/components 3.0.640 → 3.0.641
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/drawer/index.js +1 -1
- package/app-layout/drawer/index.js.map +1 -1
- package/app-layout/drawer/resizable-drawer.d.ts.map +1 -1
- package/app-layout/drawer/resizable-drawer.js +2 -5
- package/app-layout/drawer/resizable-drawer.js.map +1 -1
- package/app-layout/drawer/styles.css.js +13 -12
- package/app-layout/drawer/styles.scoped.css +30 -20
- package/app-layout/drawer/styles.selectors.js +13 -12
- package/app-layout/utils/use-resize.d.ts.map +1 -1
- package/app-layout/utils/use-resize.js +3 -7
- package/app-layout/utils/use-resize.js.map +1 -1
- package/app-layout/visual-refresh/drawers.js +1 -1
- package/app-layout/visual-refresh/drawers.js.map +1 -1
- package/app-layout/visual-refresh/split-panel.d.ts.map +1 -1
- package/app-layout/visual-refresh/split-panel.js +1 -3
- package/app-layout/visual-refresh/split-panel.js.map +1 -1
- package/autosuggest/plain-list.d.ts.map +1 -1
- package/autosuggest/plain-list.js +1 -3
- package/autosuggest/plain-list.js.map +1 -1
- package/autosuggest/virtual-list.d.ts.map +1 -1
- package/autosuggest/virtual-list.js +1 -3
- package/autosuggest/virtual-list.js.map +1 -1
- package/calendar/utils/intl.d.ts.map +1 -1
- package/calendar/utils/intl.js +0 -3
- package/calendar/utils/intl.js.map +1 -1
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +3 -0
- package/container/internal.js.map +1 -1
- package/container/styles.css.js +29 -28
- package/container/styles.scoped.css +55 -52
- package/container/styles.selectors.js +29 -28
- package/date-range-picker/calendar/grids/index.d.ts.map +1 -1
- package/date-range-picker/calendar/grids/index.js +0 -8
- package/date-range-picker/calendar/grids/index.js.map +1 -1
- package/form/interfaces.d.ts +3 -8
- package/form/interfaces.d.ts.map +1 -1
- package/form/interfaces.js.map +1 -1
- package/form/internal.d.ts +1 -1
- package/form/internal.d.ts.map +1 -1
- package/form/internal.js +14 -20
- package/form/internal.js.map +1 -1
- package/form/styles.css.js +8 -9
- package/form/styles.scoped.css +8 -8
- package/form/styles.selectors.js +8 -9
- package/header/internal.d.ts.map +1 -1
- package/header/internal.js +1 -3
- package/header/internal.js.map +1 -1
- package/header/styles.css.js +34 -35
- package/header/styles.scoped.css +50 -53
- package/header/styles.selectors.js +34 -35
- package/input/styles.css.js +13 -13
- package/input/styles.scoped.css +32 -35
- package/input/styles.selectors.js +13 -13
- package/internal/components/chart-plot/application-controller.js +3 -13
- package/internal/components/chart-plot/application-controller.js.map +1 -1
- package/internal/components/dropdown/index.d.ts.map +1 -1
- package/internal/components/dropdown/index.js +0 -2
- package/internal/components/dropdown/index.js.map +1 -1
- package/internal/components/dropdown/styles.css.js +20 -20
- package/internal/components/dropdown/styles.scoped.css +39 -45
- package/internal/components/dropdown/styles.selectors.js +20 -20
- package/internal/components/panel-resize-handle/icon.d.ts +5 -0
- package/internal/components/panel-resize-handle/icon.d.ts.map +1 -0
- package/internal/components/panel-resize-handle/icon.js +9 -0
- package/internal/components/panel-resize-handle/icon.js.map +1 -0
- package/internal/components/panel-resize-handle/index.d.ts +12 -0
- package/internal/components/panel-resize-handle/index.d.ts.map +1 -0
- package/internal/components/panel-resize-handle/index.js +11 -0
- package/internal/components/panel-resize-handle/index.js.map +1 -0
- package/internal/components/panel-resize-handle/styles.css.js +10 -0
- package/internal/components/panel-resize-handle/styles.scoped.css +153 -0
- package/internal/components/panel-resize-handle/styles.selectors.js +11 -0
- package/internal/context/single-tab-stop-navigation-context.js +2 -2
- package/internal/context/single-tab-stop-navigation-context.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/internal/utils/content-header-utils.d.ts +0 -2
- package/internal/utils/content-header-utils.d.ts.map +1 -1
- package/internal/utils/content-header-utils.js +0 -3
- package/internal/utils/content-header-utils.js.map +1 -1
- package/internal/utils/dom.d.ts.map +1 -1
- package/internal/utils/dom.js +7 -27
- package/internal/utils/dom.js.map +1 -1
- package/internal/utils/global-flags.d.ts +0 -1
- package/internal/utils/global-flags.d.ts.map +1 -1
- package/internal/utils/global-flags.js.map +1 -1
- package/package.json +1 -1
- package/pie-chart/labels.d.ts.map +1 -1
- package/pie-chart/labels.js +1 -4
- package/pie-chart/labels.js.map +1 -1
- package/pie-chart/pie-chart.d.ts.map +1 -1
- package/pie-chart/pie-chart.js +0 -3
- package/pie-chart/pie-chart.js.map +1 -1
- package/pie-chart/utils.d.ts.map +1 -1
- package/pie-chart/utils.js +0 -4
- package/pie-chart/utils.js.map +1 -1
- package/popover/internal.js +3 -6
- package/popover/internal.js.map +1 -1
- package/popover/styles.css.js +49 -50
- package/popover/styles.scoped.css +66 -69
- package/popover/styles.selectors.js +49 -50
- package/segmented-control/styles.css.js +14 -14
- package/segmented-control/styles.scoped.css +33 -33
- package/segmented-control/styles.selectors.js +14 -14
- package/split-panel/implementation.d.ts.map +1 -1
- package/split-panel/implementation.js +6 -3
- package/split-panel/implementation.js.map +1 -1
- package/split-panel/styles.css.js +26 -31
- package/split-panel/styles.scoped.css +41 -97
- package/split-panel/styles.selectors.js +26 -31
- package/table/selection/selection-control.d.ts.map +1 -1
- package/table/selection/selection-control.js.map +1 -1
- package/table/table-role/utils.d.ts.map +1 -1
- package/table/table-role/utils.js +6 -1
- package/table/table-role/utils.js.map +1 -1
- package/tiles/styles.css.js +29 -29
- package/tiles/styles.scoped.css +82 -95
- package/tiles/styles.selectors.js +29 -29
- package/split-panel/icons/resize-handler.d.ts +0 -6
- package/split-panel/icons/resize-handler.d.ts.map +0 -1
- package/split-panel/icons/resize-handler.js +0 -8
- package/split-panel/icons/resize-handler.js.map +0 -1
package/internal/utils/dom.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import balanced from 'balanced-match';
|
|
4
|
-
import { calculateOnce } from './calculate-once';
|
|
5
4
|
export function findUpUntil(node, callback) {
|
|
6
5
|
let current = node;
|
|
7
6
|
while (current && !callback(current)) {
|
|
@@ -15,23 +14,6 @@ export function findUpUntil(node, callback) {
|
|
|
15
14
|
}
|
|
16
15
|
return current;
|
|
17
16
|
}
|
|
18
|
-
/**
|
|
19
|
-
* Returns whether `position: fixed` can be relative to transformed parents or
|
|
20
|
-
* whether it's always relative to the viewport. Returns `true` on all browsers
|
|
21
|
-
* except IE.
|
|
22
|
-
*/
|
|
23
|
-
const supportsContainingBlockPositioning = calculateOnce(() => {
|
|
24
|
-
const parent = document.createElement('div');
|
|
25
|
-
parent.style.transform = 'translateY(5px)';
|
|
26
|
-
document.body.appendChild(parent);
|
|
27
|
-
const child = document.createElement('div');
|
|
28
|
-
child.style.position = 'fixed';
|
|
29
|
-
child.style.top = '0';
|
|
30
|
-
parent.appendChild(child);
|
|
31
|
-
const result = parent.getBoundingClientRect().top === child.getBoundingClientRect().top;
|
|
32
|
-
document.body.removeChild(parent);
|
|
33
|
-
return result;
|
|
34
|
-
});
|
|
35
17
|
/**
|
|
36
18
|
* Returns an element that is used to position the given element.
|
|
37
19
|
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
|
|
@@ -40,15 +22,13 @@ export function getContainingBlock(startElement) {
|
|
|
40
22
|
if (!startElement.parentElement) {
|
|
41
23
|
return null;
|
|
42
24
|
}
|
|
43
|
-
return
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
})
|
|
51
|
-
: null;
|
|
25
|
+
return findUpUntil(startElement.parentElement, element => {
|
|
26
|
+
const computedStyle = getComputedStyle(element);
|
|
27
|
+
return ((!!computedStyle.transform && computedStyle.transform !== 'none') ||
|
|
28
|
+
(!!computedStyle.perspective && computedStyle.perspective !== 'none') ||
|
|
29
|
+
(!!computedStyle.containerType && computedStyle.containerType !== 'normal') ||
|
|
30
|
+
computedStyle.contain.split(' ').some(s => ['layout', 'paint', 'strict', 'content'].includes(s)));
|
|
31
|
+
});
|
|
52
32
|
}
|
|
53
33
|
const cssVariableExpression = /--.+?\s*,\s*(.+)/;
|
|
54
34
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../../src/internal/utils/dom.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../../src/internal/utils/dom.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,MAAM,UAAU,WAAW,CAAC,IAAiB,EAAE,QAA2C;IACxF,IAAI,OAAO,GAAuB,IAAI,CAAC;IACvC,OAAO,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;QACpC,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;QAChC,6EAA6E;QAC7E,uEAAuE;QACvE,0DAA0D;QAC1D,OAAO,OAAO,IAAI,CAAC,CAAC,OAAO,YAAY,WAAW,CAAC,EAAE;YACnD,OAAO,GAAI,OAAmB,CAAC,aAAa,CAAC;SAC9C;KACF;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,YAAyB;IAC1D,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;QAC/B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,WAAW,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,EAAE;QACvD,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAChD,OAAO,CACL,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,IAAI,aAAa,CAAC,SAAS,KAAK,MAAM,CAAC;YACjE,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,IAAI,aAAa,CAAC,WAAW,KAAK,MAAM,CAAC;YACrE,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,IAAI,aAAa,CAAC,aAAa,KAAK,QAAQ,CAAC;YAC3E,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACjG,CAAC;IACJ,CAAC,CAAgB,CAAC;AACpB,CAAC;AAED,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAa;;IAC5C,IAAI,MAAA,MAAA,MAAA,MAAM,CAAC,GAAG,0CAAE,QAAQ,mDAAG,OAAO,EAAE,oBAAoB,CAAC,mCAAI,KAAK,EAAE;QAClE,OAAO,KAAK,CAAC;KACd;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,IAAI,QAAQ,KAAK,CAAC,CAAC,EAAE;QACnB,OAAO,KAAK,CAAC;KACd;IAED,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACrD,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AAClC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport balanced from 'balanced-match';\n\nexport function findUpUntil(node: HTMLElement, callback: (element: HTMLElement) => boolean): HTMLElement | null {\n let current: HTMLElement | null = node;\n while (current && !callback(current)) {\n current = current.parentElement;\n // If a component is used within an svg (i.e. as foreignObject), then it will\n // have some ancestor nodes that are SVGElement. We want to skip those,\n // as they have very different properties to HTMLElements.\n while (current && !(current instanceof HTMLElement)) {\n current = (current as Element).parentElement;\n }\n }\n return current;\n}\n\n/**\n * Returns an element that is used to position the given element.\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block\n */\nexport function getContainingBlock(startElement: HTMLElement): HTMLElement | null {\n if (!startElement.parentElement) {\n return null;\n }\n\n return findUpUntil(startElement.parentElement, element => {\n const computedStyle = getComputedStyle(element);\n return (\n (!!computedStyle.transform && computedStyle.transform !== 'none') ||\n (!!computedStyle.perspective && computedStyle.perspective !== 'none') ||\n (!!computedStyle.containerType && computedStyle.containerType !== 'normal') ||\n computedStyle.contain.split(' ').some(s => ['layout', 'paint', 'strict', 'content'].includes(s))\n );\n }) as HTMLElement;\n}\n\nconst cssVariableExpression = /--.+?\\s*,\\s*(.+)/;\n\n/**\n * Parses a CSS color value that might contain CSS Custom Properties\n * and returns a value that will be understood by the browser, no matter of support level.\n * If the browser support CSS Custom Properties, the value will be return as is. Otherwise,\n * the fallback value will be extracted and returned instead.\n */\nexport function parseCssVariable(value: string) {\n if (window.CSS?.supports?.('color', 'var(--dummy, #000)') ?? false) {\n return value;\n }\n\n const varIndex = value.lastIndexOf('var(');\n if (varIndex === -1) {\n return value;\n }\n\n const expr = balanced('(', ')', value.substr(varIndex));\n if (!expr) {\n return value;\n }\n\n const match = expr.body.match(cssVariableExpression);\n return match ? match[1] : value;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global-flags.d.ts","sourceRoot":"","sources":["../../../../src/internal/utils/global-flags.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,eAAmC,CAAC;AAEvE,UAAU,WAAW;IACnB,
|
|
1
|
+
{"version":3,"file":"global-flags.d.ts","sourceRoot":"","sources":["../../../../src/internal/utils/global-flags.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,eAAmC,CAAC;AAEvE,UAAU,WAAW;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,qBAExB,CAAC;AAWF,eAAO,MAAM,aAAa,aAAc,MAAM,WAAW,KAAG,WAAW,CAAC,MAAM,WAAW,CAAC,GAAG,SAU5F,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global-flags.js","sourceRoot":"","sources":["../../../../src/internal/utils/global-flags.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"global-flags.js","sourceRoot":"","sources":["../../../../src/internal/utils/global-flags.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;AAUvE,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,OAAO,MAAM,CAAC,GAAG,CAAC;AACpB,CAAC,CAAC;AAEF,SAAS,SAAS;IAChB,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC;AAC7D,CAAC;AAED,SAAS,QAAQ,CAAC,MAAe,EAAE,QAA2B;;IAC5D,MAAM,MAAM,GAAG,MAA4B,CAAC;IAC5C,OAAO,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,sBAAsB,CAAC,0CAAG,QAAQ,CAAC,CAAC;AACtD,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAA2B,EAA8C,EAAE;IACvG,IAAI;QACF,MAAM,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,EAAE,QAAQ,CAAC,CAAC;QAChD,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,QAAQ,CAAC,YAAY,EAAE,EAAE,QAAQ,CAAC,CAAC;KAC3C;IAAC,OAAO,CAAC,EAAE;QACV,OAAO,SAAS,CAAC;KAClB;AACH,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport const awsuiGlobalFlagsSymbol = Symbol.for('awsui-global-flags');\n\ninterface GlobalFlags {\n appLayoutWidget?: boolean;\n}\n\nexport interface FlagsHolder {\n [awsuiGlobalFlagsSymbol]?: GlobalFlags;\n}\n\nexport const getTopWindow = () => {\n return window.top;\n};\n\nfunction getGlobal() {\n return typeof window !== 'undefined' ? window : globalThis;\n}\n\nfunction readFlag(window: unknown, flagName: keyof GlobalFlags) {\n const holder = window as FlagsHolder | null;\n return holder?.[awsuiGlobalFlagsSymbol]?.[flagName];\n}\n\nexport const getGlobalFlag = (flagName: keyof GlobalFlags): GlobalFlags[keyof GlobalFlags] | undefined => {\n try {\n const ownFlag = readFlag(getGlobal(), flagName);\n if (ownFlag !== undefined) {\n return ownFlag;\n }\n return readFlag(getTopWindow(), flagName);\n } catch (e) {\n return undefined;\n }\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/labels.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAO,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAwC,MAAM,SAAS,CAAC;AAI1E,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC;IACjE,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC/C;;
|
|
1
|
+
{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/labels.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAO,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAwC,MAAM,SAAS,CAAC;AAI1E,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC;IACjE,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC/C;;AA6CD,wBAuGE"}
|
package/pie-chart/labels.js
CHANGED
|
@@ -8,10 +8,7 @@ import { balanceLabelNodes, computeSmartAngle } from './utils';
|
|
|
8
8
|
import ResponsiveText from './responsive-text';
|
|
9
9
|
import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
|
|
10
10
|
function LabelElement({ x, y, hideTitles, hideDescriptions, rightSide, title, description, containerBoundaries, }) {
|
|
11
|
-
return (
|
|
12
|
-
// Reset the transform property to prepare for `balanceLabelNodes`.
|
|
13
|
-
// The dataset attributes are also needed in the function for IE11 support.
|
|
14
|
-
React.createElement("g", { className: styles['label-text'], transform: "", "data-x": x, "data-y": y },
|
|
11
|
+
return (React.createElement("g", { className: styles['label-text'], transform: "", "data-x": x, "data-y": y },
|
|
15
12
|
!hideTitles && (React.createElement(ResponsiveText, { x: x, y: y, rightSide: rightSide, containerBoundaries: containerBoundaries }, title)),
|
|
16
13
|
!hideDescriptions && description && (React.createElement(ResponsiveText, { x: x, y: y + (hideTitles ? 0 : 18), rightSide: rightSide, className: styles.label__description, containerBoundaries: containerBoundaries }, description))));
|
|
17
14
|
}
|
package/pie-chart/labels.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../src/pie-chart/labels.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,GAAG,EAAe,MAAM,UAAU,CAAC;AAG5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAa,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAwBlF,SAAS,YAAY,CAAC,EACpB,CAAC,EACD,CAAC,EACD,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,GACD;IAClB,OAAO;IACL,mEAAmE;IACnE,2EAA2E;IAC3E,2BAAG,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,SAAS,EAAC,EAAE,YAAS,CAAC,YAAU,CAAC;QAClE,CAAC,UAAU,IAAI,CACd,oBAAC,cAAc,IAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,EAAE,mBAAmB,IACvF,KAAK,CACS,CAClB;QACA,CAAC,gBAAgB,IAAI,WAAW,IAAI,CACnC,oBAAC,cAAc,IACb,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC5B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,MAAM,CAAC,kBAAkB,EACpC,mBAAmB,EAAE,mBAAmB,IAEvC,WAAW,CACG,CAClB,CACC,CACL,CAAC;AACJ,CAAC;AAED,eAAe,CAAgC,EAC7C,OAAO,EACP,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,YAAY,GACG,EAAE,EAAE;IACnB,MAAM,mBAAmB,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAC/D,MAAM,oBAAoB,GACxB,mBAAmB,CAAC,KAAK,GAAG,mBAAmB,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,WAAW,GAAG,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC;QAClH,GAAG,CAAC;IACN,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC;QAE9D,+CAA+C;QAC/C,MAAM,cAAc,GAAG,GAAG,EAAoB;aAC3C,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;aACvB,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAE3B,MAAM,cAAc,GAAG,GAAG,EAAoB;aAC3C,WAAW,CAAC,MAAM,GAAG,iBAAiB,CAAC;aACvC,WAAW,CAAC,MAAM,GAAG,iBAAiB,CAAC,CAAC;QAE3C,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YAC9B,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YAC9B,MAAM,UAAU,GAAG,iBAAiB,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;YAEvG,yFAAyF;YACzF,MAAM,aAAa,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC;YAC3D,cAAc,CAAC,WAAW,CAAC,MAAM,GAAG,EAAE,GAAG,aAAa,CAAC,CAAC;YACxD,cAAc,CAAC,WAAW,CAAC,MAAM,GAAG,EAAE,GAAG,aAAa,CAAC,CAAC;YACxD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,QAAQ,iCAAM,KAAK,KAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,IAAG,CAAC;YAC7G,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,QAAQ,iCAAM,KAAK,KAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,IAAG,CAAC;YAE7G,MAAM,SAAS,GAAG,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC;YACvC,MAAM,IAAI,GAAG,oBAAoB,CAAC,CAAC,CAAC,MAAM,GAAG,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9G,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAE9C,OAAO;gBACL,MAAM;gBACN,MAAM;gBACN,MAAM;gBACN,MAAM;gBACN,IAAI;gBACJ,IAAI,EAAE,MAAM;gBACZ,KAAK;gBACL,KAAK,EAAE,MAAM;gBACb,SAAS;gBACT,KAAK;aACN,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE1C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACpB,OAAO;SACR;QAED,oCAAoC;QACpC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAc,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAC7F,iBAAiB,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACrG,iBAAiB,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,WAAW,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACtG,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,2BAAG,SAAS,EAAE,MAAM,CAAC,OAAO,iBAAc,MAAM,EAAC,GAAG,EAAE,OAAO,IAC1D,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC9F,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QACjC,MAAM,WAAW,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,OAAO,EAAE,cAAc,CAAC,CAAC;QAClE,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxE,OAAO,IAAI,CAAC;SACb;QACD,OAAO,CACL,2BACE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EACrB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;gBAC5B,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,kBAAkB,KAAK,OAAO;gBAC9D,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,kBAAkB,KAAK,IAAI,IAAI,kBAAkB,KAAK,OAAO;gBACxF,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,SAAS;aAC3C,CAAC;YAEF,8BAAM,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAI;YACxD,8BAAM,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,GAAI;YACrF,oBAAC,YAAY,IACX,CAAC,EAAE,KAAK,EACR,CAAC,EAAE,KAAK,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,GACxC,CACA,CACL,CAAC;IACJ,CAAC,CAAC,CACA,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,oBAAoB,CAAC,GAAiC;IAC7D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAC1D,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;QAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACzD,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { InternalChartDatum } from './pie-chart';\nimport { Dimension, balanceLabelNodes, computeSmartAngle } from './utils';\nimport ResponsiveText from './responsive-text';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface LabelsProps<T> {\n pieData: PieArcDatum<InternalChartDatum<T>>[];\n visibleDataSum: number;\n dimensions: Dimension;\n hideTitles: boolean;\n hideDescriptions: boolean;\n highlightedSegment: PieChartProps.Datum | null;\n segmentDescription?: PieChartProps.SegmentDescriptionFunction<T>;\n containerRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface LabelElementProps {\n x: number;\n y: number;\n rightSide: boolean;\n hideTitles: boolean;\n hideDescriptions: boolean;\n title: PieChartProps.Datum['title'];\n description?: string;\n containerBoundaries: null | { left: number; right: number };\n}\n\nfunction LabelElement({\n x,\n y,\n hideTitles,\n hideDescriptions,\n rightSide,\n title,\n description,\n containerBoundaries,\n}: LabelElementProps) {\n return (\n // Reset the transform property to prepare for `balanceLabelNodes`.\n // The dataset attributes are also needed in the function for IE11 support.\n <g className={styles['label-text']} transform=\"\" data-x={x} data-y={y}>\n {!hideTitles && (\n <ResponsiveText x={x} y={y} rightSide={rightSide} containerBoundaries={containerBoundaries}>\n {title}\n </ResponsiveText>\n )}\n {!hideDescriptions && description && (\n <ResponsiveText\n x={x}\n y={y + (hideTitles ? 0 : 18)}\n rightSide={rightSide}\n className={styles.label__description}\n containerBoundaries={containerBoundaries}\n >\n {description}\n </ResponsiveText>\n )}\n </g>\n );\n}\n\nexport default <T extends PieChartProps.Datum>({\n pieData,\n dimensions,\n highlightedSegment,\n segmentDescription,\n visibleDataSum,\n hideTitles,\n hideDescriptions,\n containerRef,\n}: LabelsProps<T>) => {\n const containerBoundaries = useElementBoundaries(containerRef);\n const shouldOptimizeLabels =\n containerBoundaries.right - containerBoundaries.left - (dimensions.outerRadius + dimensions.innerLabelPadding) * 2 <\n 300;\n const markers = useMemo(() => {\n const { outerRadius: radius, innerLabelPadding } = dimensions;\n\n // More arc factories for the label positioning\n const arcMarkerStart = arc<PieArcDatum<any>>()\n .innerRadius(radius - 1)\n .outerRadius(radius - 1);\n\n const arcMarkerBreak = arc<PieArcDatum<any>>()\n .innerRadius(radius + innerLabelPadding)\n .outerRadius(radius + innerLabelPadding);\n\n return pieData.map((datum, i) => {\n const labelDatum = pieData[i];\n const smartAngle = computeSmartAngle(labelDatum.startAngle, labelDatum.endAngle, shouldOptimizeLabels);\n\n // Make the marker line longer if the segment is closer to the top or bottom of the chart\n const lineExtension = 0.5 * Math.cos(2 * smartAngle) + 0.5;\n arcMarkerBreak.outerRadius(radius + 20 * lineExtension);\n arcMarkerBreak.innerRadius(radius + 20 * lineExtension);\n const [startX, startY] = arcMarkerStart.centroid({ ...datum, startAngle: smartAngle, endAngle: smartAngle });\n const [breakX, breakY] = arcMarkerBreak.centroid({ ...datum, startAngle: smartAngle, endAngle: smartAngle });\n\n const rightSide = smartAngle < Math.PI;\n const endX = shouldOptimizeLabels ? breakX + 20 * (rightSide ? 1 : -1) : (radius + 20) * (rightSide ? 1 : -1);\n const textX = endX + 5 * (rightSide ? 1 : -1);\n\n return {\n startX,\n startY,\n breakX,\n breakY,\n endX,\n endY: breakY,\n textX,\n textY: breakY,\n rightSide,\n datum,\n };\n });\n }, [pieData, dimensions, shouldOptimizeLabels]);\n\n const rootRef = useRef<SVGGElement>(null);\n\n useLayoutEffect(() => {\n if (!rootRef.current) {\n return;\n }\n\n // Relax labels that are overlapping\n const labelNodes = rootRef.current.querySelectorAll<SVGGElement>(`.${styles['label-text']}`);\n balanceLabelNodes(labelNodes, markers, false, dimensions.outerRadius + dimensions.innerLabelPadding);\n balanceLabelNodes(labelNodes, markers, true, dimensions.outerRadius + dimensions.innerLabelPadding);\n }, [markers, pieData, dimensions]);\n\n return (\n <g className={styles.markers} aria-hidden=\"true\" ref={rootRef}>\n {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n const segment = datum.data.datum;\n const description = segmentDescription?.(segment, visibleDataSum);\n if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n return null;\n }\n return (\n <g\n key={datum.data.index}\n className={clsx(styles.label, {\n [styles['label--highlighted']]: highlightedSegment === segment,\n [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,\n [styles['label--align-right']]: !rightSide,\n })}\n >\n <line x1={startX} y1={startY} x2={breakX} y2={breakY} />\n <line x1={breakX} y1={breakY} x2={endX} y2={endY} className={styles['label-line']} />\n <LabelElement\n x={textX}\n y={textY}\n rightSide={rightSide}\n title={segment.title}\n description={description}\n hideTitles={hideTitles}\n hideDescriptions={hideDescriptions}\n containerBoundaries={containerBoundaries}\n />\n </g>\n );\n })}\n </g>\n );\n};\n\nfunction useElementBoundaries(ref: React.RefObject<HTMLElement>): { left: number; right: number } {\n const [state, setState] = useState({ left: 0, right: 0 });\n useResizeObserver(ref, entry => {\n const elementRect = entry.target.getBoundingClientRect();\n setState({ left: elementRect.left, right: elementRect.right });\n });\n return state;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../src/pie-chart/labels.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, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { InternalChartDatum } from './pie-chart';\nimport { Dimension, balanceLabelNodes, computeSmartAngle } from './utils';\nimport ResponsiveText from './responsive-text';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface LabelsProps<T> {\n pieData: PieArcDatum<InternalChartDatum<T>>[];\n visibleDataSum: number;\n dimensions: Dimension;\n hideTitles: boolean;\n hideDescriptions: boolean;\n highlightedSegment: PieChartProps.Datum | null;\n segmentDescription?: PieChartProps.SegmentDescriptionFunction<T>;\n containerRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface LabelElementProps {\n x: number;\n y: number;\n rightSide: boolean;\n hideTitles: boolean;\n hideDescriptions: boolean;\n title: PieChartProps.Datum['title'];\n description?: string;\n containerBoundaries: null | { left: number; right: number };\n}\n\nfunction LabelElement({\n x,\n y,\n hideTitles,\n hideDescriptions,\n rightSide,\n title,\n description,\n containerBoundaries,\n}: LabelElementProps) {\n return (\n <g className={styles['label-text']} transform=\"\" data-x={x} data-y={y}>\n {!hideTitles && (\n <ResponsiveText x={x} y={y} rightSide={rightSide} containerBoundaries={containerBoundaries}>\n {title}\n </ResponsiveText>\n )}\n {!hideDescriptions && description && (\n <ResponsiveText\n x={x}\n y={y + (hideTitles ? 0 : 18)}\n rightSide={rightSide}\n className={styles.label__description}\n containerBoundaries={containerBoundaries}\n >\n {description}\n </ResponsiveText>\n )}\n </g>\n );\n}\n\nexport default <T extends PieChartProps.Datum>({\n pieData,\n dimensions,\n highlightedSegment,\n segmentDescription,\n visibleDataSum,\n hideTitles,\n hideDescriptions,\n containerRef,\n}: LabelsProps<T>) => {\n const containerBoundaries = useElementBoundaries(containerRef);\n const shouldOptimizeLabels =\n containerBoundaries.right - containerBoundaries.left - (dimensions.outerRadius + dimensions.innerLabelPadding) * 2 <\n 300;\n const markers = useMemo(() => {\n const { outerRadius: radius, innerLabelPadding } = dimensions;\n\n // More arc factories for the label positioning\n const arcMarkerStart = arc<PieArcDatum<any>>()\n .innerRadius(radius - 1)\n .outerRadius(radius - 1);\n\n const arcMarkerBreak = arc<PieArcDatum<any>>()\n .innerRadius(radius + innerLabelPadding)\n .outerRadius(radius + innerLabelPadding);\n\n return pieData.map((datum, i) => {\n const labelDatum = pieData[i];\n const smartAngle = computeSmartAngle(labelDatum.startAngle, labelDatum.endAngle, shouldOptimizeLabels);\n\n // Make the marker line longer if the segment is closer to the top or bottom of the chart\n const lineExtension = 0.5 * Math.cos(2 * smartAngle) + 0.5;\n arcMarkerBreak.outerRadius(radius + 20 * lineExtension);\n arcMarkerBreak.innerRadius(radius + 20 * lineExtension);\n const [startX, startY] = arcMarkerStart.centroid({ ...datum, startAngle: smartAngle, endAngle: smartAngle });\n const [breakX, breakY] = arcMarkerBreak.centroid({ ...datum, startAngle: smartAngle, endAngle: smartAngle });\n\n const rightSide = smartAngle < Math.PI;\n const endX = shouldOptimizeLabels ? breakX + 20 * (rightSide ? 1 : -1) : (radius + 20) * (rightSide ? 1 : -1);\n const textX = endX + 5 * (rightSide ? 1 : -1);\n\n return {\n startX,\n startY,\n breakX,\n breakY,\n endX,\n endY: breakY,\n textX,\n textY: breakY,\n rightSide,\n datum,\n };\n });\n }, [pieData, dimensions, shouldOptimizeLabels]);\n\n const rootRef = useRef<SVGGElement>(null);\n\n useLayoutEffect(() => {\n if (!rootRef.current) {\n return;\n }\n\n // Relax labels that are overlapping\n const labelNodes = rootRef.current.querySelectorAll<SVGGElement>(`.${styles['label-text']}`);\n balanceLabelNodes(labelNodes, markers, false, dimensions.outerRadius + dimensions.innerLabelPadding);\n balanceLabelNodes(labelNodes, markers, true, dimensions.outerRadius + dimensions.innerLabelPadding);\n }, [markers, pieData, dimensions]);\n\n return (\n <g className={styles.markers} aria-hidden=\"true\" ref={rootRef}>\n {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n const segment = datum.data.datum;\n const description = segmentDescription?.(segment, visibleDataSum);\n if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n return null;\n }\n return (\n <g\n key={datum.data.index}\n className={clsx(styles.label, {\n [styles['label--highlighted']]: highlightedSegment === segment,\n [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,\n [styles['label--align-right']]: !rightSide,\n })}\n >\n <line x1={startX} y1={startY} x2={breakX} y2={breakY} />\n <line x1={breakX} y1={breakY} x2={endX} y2={endY} className={styles['label-line']} />\n <LabelElement\n x={textX}\n y={textY}\n rightSide={rightSide}\n title={segment.title}\n description={description}\n hideTitles={hideTitles}\n hideDescriptions={hideDescriptions}\n containerBoundaries={containerBoundaries}\n />\n </g>\n );\n })}\n </g>\n );\n};\n\nfunction useElementBoundaries(ref: React.RefObject<HTMLElement>): { left: number; right: number } {\n const [state, setState] = useState({ left: 0, right: 0 });\n useResizeObserver(ref, entry => {\n const elementRect = entry.target.getBoundingClientRect();\n setState({ left: elementRect.left, right: elementRect.right });\n });\n return state;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/pie-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAA4D,MAAM,OAAO,CAAC;AAWjF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAKzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASjD,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACpB;AAED,UAAU,qBAAqB,CAAC,CAAC,SAAS,aAAa,CAAC,KAAK,CAC3D,SAAQ,YAAY,CAClB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,mBAAmB,GAAG,YAAY,CAAC,EAC1D,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,GAAG,kBAAkB,CACvE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IAEf,kBAAkB,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,CAAC,KAAK,IAAI,CAAC;IAE/C,aAAa,EAAE,CAAC,GAAG,IAAI,CAAC;IAExB,OAAO,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,EAAE,UAAU,CAAC;CACpB;;AAED,
|
|
1
|
+
{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/pie-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAA4D,MAAM,OAAO,CAAC;AAWjF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAKzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASjD,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACpB;AAED,UAAU,qBAAqB,CAAC,CAAC,SAAS,aAAa,CAAC,KAAK,CAC3D,SAAQ,YAAY,CAClB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,mBAAmB,GAAG,YAAY,CAAC,EAC1D,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,GAAG,kBAAkB,CACvE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IAEf,kBAAkB,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,CAAC,KAAK,IAAI,CAAC;IAE/C,aAAa,EAAE,CAAC,GAAG,IAAI,CAAC;IAExB,OAAO,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,EAAE,UAAU,CAAC;CACpB;;AAED,wBA8UE"}
|
package/pie-chart/pie-chart.js
CHANGED
|
@@ -143,9 +143,6 @@ export default ({ fitHeight, height: explicitHeight, variant, size, width, i18nS
|
|
|
143
143
|
highlightSegment(pieData[nextIndex].data);
|
|
144
144
|
}, [setPinnedSegment, highlightSegment, pieData, highlightedSegmentIndex]);
|
|
145
145
|
const onApplicationFocus = useCallback((_event, target) => {
|
|
146
|
-
// We need to make sure that we do not re-show the popover when we focus the segment after the popover is dismissed.
|
|
147
|
-
// Normally we would check `event.relatedTarget` for the previously focused element,
|
|
148
|
-
// but this is not supported for SVG elements in IE11. The workaround is this `popoverDismissedRecently` ref.
|
|
149
146
|
if (pinnedSegment !== null || popoverDismissedRecently.current || target === 'mouse') {
|
|
150
147
|
return;
|
|
151
148
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../../src/pie-chart/pie-chart.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 { PieArcDatum } from 'd3-shape';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport ChartPopover from '../internal/components/chart-popover';\nimport SeriesDetails from '../internal/components/chart-series-details';\nimport SeriesMarker from '../internal/components/chart-series-marker';\nimport InternalBox from '../box/internal';\n\nimport Labels from './labels';\nimport { PieChartProps, SeriesInfo } from './interfaces';\nimport styles from './styles.css.js';\nimport { defaultDetails, getDimensionsBySize } from './utils';\nimport Segments from './segments';\nimport ChartPlot, { ChartPlotRef } from '../internal/components/chart-plot';\nimport { SomeRequired } from '../internal/types';\nimport { useInternalI18n } from '../i18n/context';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport clsx from 'clsx';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useHeightMeasure } from '../internal/hooks/container-queries/use-height-measure';\nimport ChartPopoverFooter from '../internal/components/chart-popover-footer';\nimport LiveRegion from '../internal/components/live-region';\n\nexport interface InternalChartDatum<T> {\n index: number;\n color: string;\n datum: Readonly<T>;\n}\n\ninterface InternalPieChartProps<T extends PieChartProps.Datum>\n extends SomeRequired<\n Omit<PieChartProps<T>, 'onHighlightChange' | 'statusType'>,\n 'variant' | 'size' | 'i18nStrings' | 'hideTitles' | 'hideDescriptions'\n > {\n width: number;\n height: number;\n\n highlightedSegment: T | null;\n onHighlightChange: (segment: null | T) => void;\n\n legendSegment: T | null;\n\n pieData: PieArcDatum<InternalChartDatum<T>>[];\n dataSum: number;\n}\n\nexport interface PopoverData<T> {\n datum: T;\n trackRef: React.RefObject<SVGElement>;\n series: SeriesInfo;\n}\n\nexport default <T extends PieChartProps.Datum>({\n fitHeight,\n height: explicitHeight,\n variant,\n size,\n width,\n i18nStrings,\n ariaLabel,\n ariaLabelledby,\n ariaDescription,\n innerMetricValue,\n innerMetricDescription,\n hideTitles,\n hideDescriptions,\n detailPopoverContent,\n detailPopoverSize,\n detailPopoverFooter,\n segmentDescription,\n highlightedSegment,\n onHighlightChange,\n legendSegment,\n pieData,\n dataSum,\n}: InternalPieChartProps<T>) => {\n const [pinnedSegment, setPinnedSegment] = useState<T | null>(null);\n const plotRef = useRef<ChartPlotRef>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const focusedSegmentRef = useRef<SVGGElement>(null);\n const popoverTrackRef = useRef<SVGCircleElement>(null);\n const popoverRef = useRef<HTMLElement | null>(null);\n\n const hasLabels = !(hideTitles && hideDescriptions);\n const isRefresh = useVisualRefresh();\n\n const height = useHeightMeasure(() => plotRef.current?.svg ?? null, !fitHeight) ?? explicitHeight;\n\n const dimensions = useMemo(\n () =>\n getDimensionsBySize({ size: fitHeight ? Math.min(height, width) : size, hasLabels, visualRefresh: isRefresh }),\n [fitHeight, height, width, size, hasLabels, isRefresh]\n );\n\n // Inner content is only available for donut charts and the inner description is not displayed for small charts\n const hasInnerContent =\n variant === 'donut' && (innerMetricValue || (innerMetricDescription && dimensions.size !== 'small'));\n\n const innerMetricId = useUniqueId('awsui-pie-chart__inner');\n\n const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);\n const [popoverData, setPopoverData] = useState<PopoverData<T>>();\n\n const highlightedSegmentIndex = useMemo(() => {\n for (let index = 0; index < pieData.length; index++) {\n if (pieData[index].data.datum === highlightedSegment) {\n return index;\n }\n }\n return null;\n }, [pieData, highlightedSegment]);\n\n const detailPopoverFooterContent = useMemo(\n () => (detailPopoverFooter && highlightedSegment ? detailPopoverFooter(highlightedSegment) : null),\n [detailPopoverFooter, highlightedSegment]\n );\n\n const i18n = useInternalI18n('pie-chart');\n const detailFunction = detailPopoverContent || defaultDetails(i18n, i18nStrings);\n const details = popoverData ? detailFunction(popoverData.datum, dataSum) : [];\n const popoverContentRef = useRef<HTMLDivElement | null>(null);\n const popoverContent = popoverData && <SeriesDetails details={details} compactList={true} ref={popoverContentRef} />;\n\n const popoverDismissedRecently = useRef(false);\n const escapePressed = useRef(false);\n\n const highlightSegment = useCallback(\n (internalDatum: InternalChartDatum<T>) => {\n const segment = internalDatum.datum;\n if (segment !== highlightedSegment) {\n onHighlightChange(segment);\n }\n\n if (popoverTrackRef.current) {\n setPopoverData({\n datum: internalDatum.datum,\n series: {\n color: internalDatum.color,\n index: internalDatum.index,\n label: internalDatum.datum.title,\n markerType: 'rectangle',\n },\n trackRef: popoverTrackRef,\n });\n setPopoverOpen(true);\n }\n },\n [highlightedSegment, setPopoverOpen, onHighlightChange]\n );\n\n const clearHighlightedSegment = useCallback(() => {\n setPopoverOpen(false);\n onHighlightChange(null);\n }, [onHighlightChange, setPopoverOpen]);\n\n const checkMouseLeave = (event: React.MouseEvent) => {\n if (pinnedSegment !== null) {\n return;\n }\n\n if (\n nodeContains(popoverRef.current, event.relatedTarget) ||\n nodeContains(focusedSegmentRef.current, event.relatedTarget)\n ) {\n return;\n }\n\n clearHighlightedSegment();\n };\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n clearHighlightedSegment();\n escapePressed.current = true;\n }\n };\n document.addEventListener('keydown', onKeyDown);\n return () => document.removeEventListener('keydown', onKeyDown);\n }, [clearHighlightedSegment]);\n\n const onMouseDown = useCallback(\n (internalDatum: InternalChartDatum<T>) => {\n if (pinnedSegment === internalDatum.datum) {\n setPinnedSegment(null);\n clearHighlightedSegment();\n } else {\n setPinnedSegment(internalDatum.datum);\n highlightSegment(internalDatum);\n }\n },\n [pinnedSegment, clearHighlightedSegment, setPinnedSegment, highlightSegment]\n );\n const onMouseOver = useCallback(\n (internalDatum: InternalChartDatum<T>) => {\n if (escapePressed.current) {\n escapePressed.current = false;\n return;\n }\n if (pinnedSegment !== null) {\n return;\n }\n highlightSegment(internalDatum);\n },\n [pinnedSegment, highlightSegment]\n );\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const keyCode = event.keyCode;\n if (\n keyCode !== KeyCode.right &&\n keyCode !== KeyCode.left &&\n keyCode !== KeyCode.enter &&\n keyCode !== KeyCode.space\n ) {\n return;\n }\n\n event.preventDefault();\n\n let nextIndex = highlightedSegmentIndex || 0;\n const MAX = pieData.length - 1;\n if (keyCode === KeyCode.right) {\n nextIndex++;\n if (nextIndex > MAX) {\n nextIndex = 0;\n }\n } else if (keyCode === KeyCode.left) {\n nextIndex--;\n if (nextIndex < 0) {\n nextIndex = MAX;\n }\n }\n if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {\n setPinnedSegment(pieData[nextIndex].data.datum);\n }\n highlightSegment(pieData[nextIndex].data);\n },\n [setPinnedSegment, highlightSegment, pieData, highlightedSegmentIndex]\n );\n const onApplicationFocus = useCallback(\n (_event: any, target: 'keyboard' | 'mouse') => {\n // We need to make sure that we do not re-show the popover when we focus the segment after the popover is dismissed.\n // Normally we would check `event.relatedTarget` for the previously focused element,\n // but this is not supported for SVG elements in IE11. The workaround is this `popoverDismissedRecently` ref.\n if (pinnedSegment !== null || popoverDismissedRecently.current || target === 'mouse') {\n return;\n }\n\n const segment = highlightedSegment || legendSegment || pieData[0].data.datum;\n const matched = pieData.filter(d => d.data.datum === segment);\n highlightSegment(matched[0].data);\n },\n [pinnedSegment, pieData, highlightSegment, highlightedSegment, legendSegment]\n );\n\n const onApplicationBlur = useCallback(\n (event: React.FocusEvent) => {\n const blurTarget = event.relatedTarget || event.target;\n if (blurTarget === null || !(blurTarget instanceof Element) || !nodeBelongs(containerRef.current, blurTarget)) {\n // We only need to close the popover and remove the pinned segment so that we keep track of the current\n // highlighted legendSeries. using clearHighlightedSegment() would set the legendSeries to null, in that case\n // using Keyboard Tab will always highlight the first legend item in the legend component.\n setPopoverOpen(false);\n setPinnedSegment(null);\n }\n },\n [setPinnedSegment]\n );\n const onPopoverDismiss = (outsideClick?: boolean) => {\n setPopoverOpen(false);\n setPinnedSegment(null);\n\n if (!outsideClick) {\n // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n setTimeout(() => {\n popoverDismissedRecently.current = true;\n plotRef.current!.focusApplication();\n popoverDismissedRecently.current = false;\n }, 0);\n } else {\n onHighlightChange(null);\n }\n };\n\n return (\n <div\n className={clsx(styles['chart-container'], fitHeight && styles['chart-container--fit-height'])}\n ref={containerRef}\n >\n <div\n className={clsx(\n styles['chart-container-chart-plot'],\n fitHeight && styles['chart-container-chart-plot--fit-height']\n )}\n >\n <ChartPlot\n ref={plotRef}\n width=\"100%\"\n height={fitHeight ? '100%' : height}\n transform={`translate(${width / 2} ${height / 2})`}\n isPrecise={true}\n isClickable={!isPopoverOpen}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescription={ariaDescription}\n ariaDescribedby={hasInnerContent ? innerMetricId : undefined}\n ariaRoleDescription={i18nStrings?.chartAriaRoleDescription}\n activeElementRef={focusedSegmentRef}\n activeElementKey={highlightedSegmentIndex?.toString()}\n onApplicationFocus={onApplicationFocus}\n onApplicationBlur={onApplicationBlur}\n onKeyDown={onKeyDown}\n onMouseOut={checkMouseLeave}\n >\n <Segments\n pieData={pieData}\n dimensions={dimensions}\n variant={variant}\n focusedSegmentRef={focusedSegmentRef}\n popoverTrackRef={popoverTrackRef}\n highlightedSegment={highlightedSegment}\n segmentAriaRoleDescription={i18nStrings?.segmentAriaRoleDescription}\n onMouseDown={onMouseDown}\n onMouseOver={onMouseOver}\n />\n {hasLabels && (\n <Labels\n pieData={pieData}\n dimensions={dimensions}\n segmentDescription={segmentDescription}\n visibleDataSum={dataSum}\n hideTitles={hideTitles}\n hideDescriptions={hideDescriptions}\n highlightedSegment={highlightedSegment}\n containerRef={containerRef}\n />\n )}\n </ChartPlot>\n </div>\n\n {hasInnerContent && (\n <div className={styles['inner-content']} id={innerMetricId}>\n {innerMetricValue && (\n <InternalBox\n variant={dimensions.size === 'small' ? 'h3' : 'h1'}\n tagOverride=\"div\"\n color=\"inherit\"\n padding=\"n\"\n >\n {innerMetricValue}\n </InternalBox>\n )}\n {innerMetricDescription && dimensions.size !== 'small' && (\n <InternalBox variant=\"h3\" color=\"text-body-secondary\" tagOverride=\"div\" padding=\"n\">\n {innerMetricDescription}\n </InternalBox>\n )}\n </div>\n )}\n {isPopoverOpen && popoverData && (\n <ChartPopover\n ref={popoverRef}\n title={\n popoverData.series && (\n <InternalBox className={styles['popover-header']} variant=\"strong\">\n <SeriesMarker color={popoverData.series.color} type={popoverData.series.markerType} />{' '}\n {popoverData.series.label}\n </InternalBox>\n )\n }\n trackRef={popoverData.trackRef}\n trackKey={popoverData.series.index}\n dismissButton={pinnedSegment !== null}\n dismissAriaLabel={i18nStrings.detailPopoverDismissAriaLabel}\n onDismiss={onPopoverDismiss}\n container={plotRef.current?.svg || null}\n size={detailPopoverSize}\n onMouseLeave={checkMouseLeave}\n onBlur={onApplicationBlur}\n >\n {popoverContent}\n {detailPopoverFooterContent && <ChartPopoverFooter>{detailPopoverFooterContent}</ChartPopoverFooter>}\n </ChartPopover>\n )}\n <LiveRegion source={[popoverContentRef]} />\n </div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../../src/pie-chart/pie-chart.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 { PieArcDatum } from 'd3-shape';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport ChartPopover from '../internal/components/chart-popover';\nimport SeriesDetails from '../internal/components/chart-series-details';\nimport SeriesMarker from '../internal/components/chart-series-marker';\nimport InternalBox from '../box/internal';\n\nimport Labels from './labels';\nimport { PieChartProps, SeriesInfo } from './interfaces';\nimport styles from './styles.css.js';\nimport { defaultDetails, getDimensionsBySize } from './utils';\nimport Segments from './segments';\nimport ChartPlot, { ChartPlotRef } from '../internal/components/chart-plot';\nimport { SomeRequired } from '../internal/types';\nimport { useInternalI18n } from '../i18n/context';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport clsx from 'clsx';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useHeightMeasure } from '../internal/hooks/container-queries/use-height-measure';\nimport ChartPopoverFooter from '../internal/components/chart-popover-footer';\nimport LiveRegion from '../internal/components/live-region';\n\nexport interface InternalChartDatum<T> {\n index: number;\n color: string;\n datum: Readonly<T>;\n}\n\ninterface InternalPieChartProps<T extends PieChartProps.Datum>\n extends SomeRequired<\n Omit<PieChartProps<T>, 'onHighlightChange' | 'statusType'>,\n 'variant' | 'size' | 'i18nStrings' | 'hideTitles' | 'hideDescriptions'\n > {\n width: number;\n height: number;\n\n highlightedSegment: T | null;\n onHighlightChange: (segment: null | T) => void;\n\n legendSegment: T | null;\n\n pieData: PieArcDatum<InternalChartDatum<T>>[];\n dataSum: number;\n}\n\nexport interface PopoverData<T> {\n datum: T;\n trackRef: React.RefObject<SVGElement>;\n series: SeriesInfo;\n}\n\nexport default <T extends PieChartProps.Datum>({\n fitHeight,\n height: explicitHeight,\n variant,\n size,\n width,\n i18nStrings,\n ariaLabel,\n ariaLabelledby,\n ariaDescription,\n innerMetricValue,\n innerMetricDescription,\n hideTitles,\n hideDescriptions,\n detailPopoverContent,\n detailPopoverSize,\n detailPopoverFooter,\n segmentDescription,\n highlightedSegment,\n onHighlightChange,\n legendSegment,\n pieData,\n dataSum,\n}: InternalPieChartProps<T>) => {\n const [pinnedSegment, setPinnedSegment] = useState<T | null>(null);\n const plotRef = useRef<ChartPlotRef>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const focusedSegmentRef = useRef<SVGGElement>(null);\n const popoverTrackRef = useRef<SVGCircleElement>(null);\n const popoverRef = useRef<HTMLElement | null>(null);\n\n const hasLabels = !(hideTitles && hideDescriptions);\n const isRefresh = useVisualRefresh();\n\n const height = useHeightMeasure(() => plotRef.current?.svg ?? null, !fitHeight) ?? explicitHeight;\n\n const dimensions = useMemo(\n () =>\n getDimensionsBySize({ size: fitHeight ? Math.min(height, width) : size, hasLabels, visualRefresh: isRefresh }),\n [fitHeight, height, width, size, hasLabels, isRefresh]\n );\n\n // Inner content is only available for donut charts and the inner description is not displayed for small charts\n const hasInnerContent =\n variant === 'donut' && (innerMetricValue || (innerMetricDescription && dimensions.size !== 'small'));\n\n const innerMetricId = useUniqueId('awsui-pie-chart__inner');\n\n const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);\n const [popoverData, setPopoverData] = useState<PopoverData<T>>();\n\n const highlightedSegmentIndex = useMemo(() => {\n for (let index = 0; index < pieData.length; index++) {\n if (pieData[index].data.datum === highlightedSegment) {\n return index;\n }\n }\n return null;\n }, [pieData, highlightedSegment]);\n\n const detailPopoverFooterContent = useMemo(\n () => (detailPopoverFooter && highlightedSegment ? detailPopoverFooter(highlightedSegment) : null),\n [detailPopoverFooter, highlightedSegment]\n );\n\n const i18n = useInternalI18n('pie-chart');\n const detailFunction = detailPopoverContent || defaultDetails(i18n, i18nStrings);\n const details = popoverData ? detailFunction(popoverData.datum, dataSum) : [];\n const popoverContentRef = useRef<HTMLDivElement | null>(null);\n const popoverContent = popoverData && <SeriesDetails details={details} compactList={true} ref={popoverContentRef} />;\n\n const popoverDismissedRecently = useRef(false);\n const escapePressed = useRef(false);\n\n const highlightSegment = useCallback(\n (internalDatum: InternalChartDatum<T>) => {\n const segment = internalDatum.datum;\n if (segment !== highlightedSegment) {\n onHighlightChange(segment);\n }\n\n if (popoverTrackRef.current) {\n setPopoverData({\n datum: internalDatum.datum,\n series: {\n color: internalDatum.color,\n index: internalDatum.index,\n label: internalDatum.datum.title,\n markerType: 'rectangle',\n },\n trackRef: popoverTrackRef,\n });\n setPopoverOpen(true);\n }\n },\n [highlightedSegment, setPopoverOpen, onHighlightChange]\n );\n\n const clearHighlightedSegment = useCallback(() => {\n setPopoverOpen(false);\n onHighlightChange(null);\n }, [onHighlightChange, setPopoverOpen]);\n\n const checkMouseLeave = (event: React.MouseEvent) => {\n if (pinnedSegment !== null) {\n return;\n }\n\n if (\n nodeContains(popoverRef.current, event.relatedTarget) ||\n nodeContains(focusedSegmentRef.current, event.relatedTarget)\n ) {\n return;\n }\n\n clearHighlightedSegment();\n };\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n clearHighlightedSegment();\n escapePressed.current = true;\n }\n };\n document.addEventListener('keydown', onKeyDown);\n return () => document.removeEventListener('keydown', onKeyDown);\n }, [clearHighlightedSegment]);\n\n const onMouseDown = useCallback(\n (internalDatum: InternalChartDatum<T>) => {\n if (pinnedSegment === internalDatum.datum) {\n setPinnedSegment(null);\n clearHighlightedSegment();\n } else {\n setPinnedSegment(internalDatum.datum);\n highlightSegment(internalDatum);\n }\n },\n [pinnedSegment, clearHighlightedSegment, setPinnedSegment, highlightSegment]\n );\n const onMouseOver = useCallback(\n (internalDatum: InternalChartDatum<T>) => {\n if (escapePressed.current) {\n escapePressed.current = false;\n return;\n }\n if (pinnedSegment !== null) {\n return;\n }\n highlightSegment(internalDatum);\n },\n [pinnedSegment, highlightSegment]\n );\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const keyCode = event.keyCode;\n if (\n keyCode !== KeyCode.right &&\n keyCode !== KeyCode.left &&\n keyCode !== KeyCode.enter &&\n keyCode !== KeyCode.space\n ) {\n return;\n }\n\n event.preventDefault();\n\n let nextIndex = highlightedSegmentIndex || 0;\n const MAX = pieData.length - 1;\n if (keyCode === KeyCode.right) {\n nextIndex++;\n if (nextIndex > MAX) {\n nextIndex = 0;\n }\n } else if (keyCode === KeyCode.left) {\n nextIndex--;\n if (nextIndex < 0) {\n nextIndex = MAX;\n }\n }\n if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {\n setPinnedSegment(pieData[nextIndex].data.datum);\n }\n highlightSegment(pieData[nextIndex].data);\n },\n [setPinnedSegment, highlightSegment, pieData, highlightedSegmentIndex]\n );\n const onApplicationFocus = useCallback(\n (_event: any, target: 'keyboard' | 'mouse') => {\n if (pinnedSegment !== null || popoverDismissedRecently.current || target === 'mouse') {\n return;\n }\n\n const segment = highlightedSegment || legendSegment || pieData[0].data.datum;\n const matched = pieData.filter(d => d.data.datum === segment);\n highlightSegment(matched[0].data);\n },\n [pinnedSegment, pieData, highlightSegment, highlightedSegment, legendSegment]\n );\n\n const onApplicationBlur = useCallback(\n (event: React.FocusEvent) => {\n const blurTarget = event.relatedTarget || event.target;\n if (blurTarget === null || !(blurTarget instanceof Element) || !nodeBelongs(containerRef.current, blurTarget)) {\n // We only need to close the popover and remove the pinned segment so that we keep track of the current\n // highlighted legendSeries. using clearHighlightedSegment() would set the legendSeries to null, in that case\n // using Keyboard Tab will always highlight the first legend item in the legend component.\n setPopoverOpen(false);\n setPinnedSegment(null);\n }\n },\n [setPinnedSegment]\n );\n const onPopoverDismiss = (outsideClick?: boolean) => {\n setPopoverOpen(false);\n setPinnedSegment(null);\n\n if (!outsideClick) {\n // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n setTimeout(() => {\n popoverDismissedRecently.current = true;\n plotRef.current!.focusApplication();\n popoverDismissedRecently.current = false;\n }, 0);\n } else {\n onHighlightChange(null);\n }\n };\n\n return (\n <div\n className={clsx(styles['chart-container'], fitHeight && styles['chart-container--fit-height'])}\n ref={containerRef}\n >\n <div\n className={clsx(\n styles['chart-container-chart-plot'],\n fitHeight && styles['chart-container-chart-plot--fit-height']\n )}\n >\n <ChartPlot\n ref={plotRef}\n width=\"100%\"\n height={fitHeight ? '100%' : height}\n transform={`translate(${width / 2} ${height / 2})`}\n isPrecise={true}\n isClickable={!isPopoverOpen}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescription={ariaDescription}\n ariaDescribedby={hasInnerContent ? innerMetricId : undefined}\n ariaRoleDescription={i18nStrings?.chartAriaRoleDescription}\n activeElementRef={focusedSegmentRef}\n activeElementKey={highlightedSegmentIndex?.toString()}\n onApplicationFocus={onApplicationFocus}\n onApplicationBlur={onApplicationBlur}\n onKeyDown={onKeyDown}\n onMouseOut={checkMouseLeave}\n >\n <Segments\n pieData={pieData}\n dimensions={dimensions}\n variant={variant}\n focusedSegmentRef={focusedSegmentRef}\n popoverTrackRef={popoverTrackRef}\n highlightedSegment={highlightedSegment}\n segmentAriaRoleDescription={i18nStrings?.segmentAriaRoleDescription}\n onMouseDown={onMouseDown}\n onMouseOver={onMouseOver}\n />\n {hasLabels && (\n <Labels\n pieData={pieData}\n dimensions={dimensions}\n segmentDescription={segmentDescription}\n visibleDataSum={dataSum}\n hideTitles={hideTitles}\n hideDescriptions={hideDescriptions}\n highlightedSegment={highlightedSegment}\n containerRef={containerRef}\n />\n )}\n </ChartPlot>\n </div>\n\n {hasInnerContent && (\n <div className={styles['inner-content']} id={innerMetricId}>\n {innerMetricValue && (\n <InternalBox\n variant={dimensions.size === 'small' ? 'h3' : 'h1'}\n tagOverride=\"div\"\n color=\"inherit\"\n padding=\"n\"\n >\n {innerMetricValue}\n </InternalBox>\n )}\n {innerMetricDescription && dimensions.size !== 'small' && (\n <InternalBox variant=\"h3\" color=\"text-body-secondary\" tagOverride=\"div\" padding=\"n\">\n {innerMetricDescription}\n </InternalBox>\n )}\n </div>\n )}\n {isPopoverOpen && popoverData && (\n <ChartPopover\n ref={popoverRef}\n title={\n popoverData.series && (\n <InternalBox className={styles['popover-header']} variant=\"strong\">\n <SeriesMarker color={popoverData.series.color} type={popoverData.series.markerType} />{' '}\n {popoverData.series.label}\n </InternalBox>\n )\n }\n trackRef={popoverData.trackRef}\n trackKey={popoverData.series.index}\n dismissButton={pinnedSegment !== null}\n dismissAriaLabel={i18nStrings.detailPopoverDismissAriaLabel}\n onDismiss={onPopoverDismiss}\n container={plotRef.current?.svg || null}\n size={detailPopoverSize}\n onMouseLeave={checkMouseLeave}\n onBlur={onApplicationBlur}\n >\n {popoverContent}\n {detailPopoverFooterContent && <ChartPopoverFooter>{detailPopoverFooterContent}</ChartPopoverFooter>}\n </ChartPopover>\n )}\n <LiveRegion source={[popoverContentRef]} />\n </div>\n );\n};\n"]}
|
package/pie-chart/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAMD,eAAO,MAAM,0BAA0B,QAAe,CAAC;AAEvD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAsBlF,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAgBzF,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,aAAa,GACd,EAAE;IACD,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,SAAS,GAAG;IAAE,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,CAuB3D;AAED,eAAO,MAAM,cAAc,SAClB,wBAAwB,WAAW,CAAC,eAAe,cAAc,WAAW,aAC3E,cAAc,KAAK,WAAW,MAAM;;;;;;IAM3C,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UACrB,WAAW,WAAW,CAAC,WACrB,MAAM;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,YACpC,OAAO,UACT,MAAM,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAMD,eAAO,MAAM,0BAA0B,QAAe,CAAC;AAEvD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAsBlF,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAgBzF,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,aAAa,GACd,EAAE;IACD,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,SAAS,GAAG;IAAE,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,CAuB3D;AAED,eAAO,MAAM,cAAc,SAClB,wBAAwB,WAAW,CAAC,eAAe,cAAc,WAAW,aAC3E,cAAc,KAAK,WAAW,MAAM;;;;;;IAM3C,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UACrB,WAAW,WAAW,CAAC,WACrB,MAAM;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,YACpC,OAAO,UACT,MAAM,SAiEf,CAAC;AAeF,eAAO,MAAM,iBAAiB,eAAgB,MAAM,YAAY,MAAM,yBAAqB,MA2B1F,CAAC"}
|
package/pie-chart/utils.js
CHANGED
|
@@ -79,10 +79,6 @@ export const balanceLabelNodes = (nodes, markers, leftSide, radius) => {
|
|
|
79
79
|
let i = leftSide ? nodes.length - 1 : 0;
|
|
80
80
|
while ((leftSide && i >= 0) || (!leftSide && i < nodes.length)) {
|
|
81
81
|
const node = nodes[i];
|
|
82
|
-
// Currently using dataset attributes to determine the base position.
|
|
83
|
-
// This implementation can be changed back to using `getBBox` when we drop IE11 support.
|
|
84
|
-
// Unfortunately, there is no good alternative for `getBBox` that is supported by IE11.
|
|
85
|
-
// `getBoundingClientRect` works for width and height calculations in SVG, but the x/y positions are inaccurate.
|
|
86
82
|
const x = parseFloat(node.getAttribute('data-x') || '0');
|
|
87
83
|
const y = parseFloat(node.getAttribute('data-y') || '0');
|
|
88
84
|
const box = {
|
package/pie-chart/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/pie-chart/utils.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 { ComponentFormatFunction } from '../i18n/context';\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface Dimension {\n innerRadius: number;\n outerRadius: number;\n padding: number;\n paddingLabels: number;\n innerLabelPadding: number;\n cornerRadius?: number;\n}\n\nconst minRadius = 30;\nconst paddingLabels = 44; // = 2 * (size-lineHeight-body-100)\nconst defaultPadding = 12; // = space-s\nconst smallPadding = 8; // = space-xs\nexport const minLabelLineAngularPadding = Math.PI / 20;\n\nexport const dimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n small: {\n innerRadius: 33,\n outerRadius: 50,\n innerLabelPadding: smallPadding,\n padding: smallPadding,\n paddingLabels,\n },\n medium: {\n innerRadius: 66,\n outerRadius: 100,\n innerLabelPadding: defaultPadding,\n padding: defaultPadding,\n paddingLabels,\n },\n large: {\n innerRadius: 93,\n outerRadius: 140,\n innerLabelPadding: defaultPadding,\n padding: defaultPadding,\n paddingLabels,\n },\n};\n\nexport const refreshDimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n small: {\n ...dimensionsBySize.small,\n innerRadius: 38,\n cornerRadius: 3,\n },\n medium: {\n ...dimensionsBySize.medium,\n innerRadius: 75,\n cornerRadius: 4,\n },\n large: {\n ...dimensionsBySize.large,\n innerRadius: 105,\n cornerRadius: 5,\n },\n};\n\n/**\n * When `size` is a string (\"small\", \"medium\" or \"large\") the predefined pie chart element dimensions for classic and visual refresh are used.\n * When `size` is a number the outer and inner radii are computed and the rest of the dimensions are taken from the closest predefined size.\n */\nexport function getDimensionsBySize({\n size,\n hasLabels,\n visualRefresh,\n}: {\n size: NonNullable<PieChartProps['size']> | number;\n hasLabels: boolean;\n visualRefresh?: boolean;\n}): Dimension & { size: NonNullable<PieChartProps['size']> } {\n if (typeof size === 'string') {\n const dimensions = visualRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];\n return { ...dimensions, size };\n }\n const sizeSpec = visualRefresh ? refreshDimensionsBySize : dimensionsBySize;\n const getPixelSize = (d: Dimension) => d.outerRadius * 2 + d.padding * 2 + (hasLabels ? d.paddingLabels : 0) * 2;\n\n let matchedSize: NonNullable<PieChartProps['size']> = 'small';\n if (size > getPixelSize(sizeSpec.medium)) {\n matchedSize = 'medium';\n }\n if (size > getPixelSize(sizeSpec.large)) {\n matchedSize = 'large';\n }\n\n const padding = sizeSpec[matchedSize].padding;\n const paddingLabels = hasLabels ? sizeSpec[matchedSize].paddingLabels : 0;\n const radiiRatio = sizeSpec[matchedSize].outerRadius / sizeSpec[matchedSize].innerRadius;\n const outerRadius = Math.max(minRadius, (size - 2 * paddingLabels - 2 * padding) / 2);\n const innerRadius = outerRadius / radiiRatio;\n\n return { ...sizeSpec[matchedSize], outerRadius, innerRadius, size: matchedSize };\n}\n\nexport const defaultDetails =\n (i18n: ComponentFormatFunction<'pie-chart'>, i18nStrings: PieChartProps.I18nStrings) =>\n (datum: PieChartProps.Datum, dataSum: number) => [\n { key: i18n('i18nStrings.detailsValue', i18nStrings.detailsValue) || '', value: datum.value },\n {\n key: i18n('i18nStrings.detailsPercentage', i18nStrings.detailsPercentage) || '',\n value: `${((datum.value * 100) / dataSum).toFixed(0)}%`,\n },\n ];\n\n/**\n * Adjusts the position of the given label nodes to avoid visual overlapping.\n * @param nodes List of label nodes of the entire chart (both left and right side)\n * @param markers Markers array that was calculated in <Labels>, but we just need the `endY` values\n * @param leftSide Boolean flag whether we are processing the left or right side of the chart labels\n */\nexport const balanceLabelNodes = (\n nodes: NodeListOf<SVGGElement>,\n markers: Array<{ endY: number; endX: number }>,\n leftSide: boolean,\n radius: number\n) => {\n const MARGIN = 10;\n\n let previousBBox: { x: number; y: number; height: number } | null = null;\n\n // When traversing the right side of labels, we start at the beginning of the array and go forwards.\n // For the left side, we need to traverse backwards from the end, so that overlapping nodes are pushed down in the right order.\n let i = leftSide ? nodes.length - 1 : 0;\n\n while ((leftSide && i >= 0) || (!leftSide && i < nodes.length)) {\n const node = nodes[i];\n\n // Currently using dataset attributes to determine the base position.\n // This implementation can be changed back to using `getBBox` when we drop IE11 support.\n // Unfortunately, there is no good alternative for `getBBox` that is supported by IE11.\n // `getBoundingClientRect` works for width and height calculations in SVG, but the x/y positions are inaccurate.\n const x = parseFloat(node.getAttribute('data-x') || '0');\n const y = parseFloat(node.getAttribute('data-y') || '0');\n const box = {\n x,\n y,\n height: node.getBoundingClientRect().height,\n };\n\n const marker = markers[i];\n\n if (leftSide) {\n i--;\n } else {\n i++;\n }\n\n if (!previousBBox) {\n previousBBox = box;\n node.setAttribute('transform', '');\n continue;\n }\n\n if ((!leftSide && box.x < 0) || (leftSide && box.x >= 0)) {\n // We have reached a label that is on the other side of the chart, so we're done.\n break;\n }\n\n node.setAttribute('transform', '');\n\n // Calculate how much the current node is overlapping with the previous one.\n const yOffset = previousBBox.y + previousBBox.height + MARGIN - box.y;\n\n if (yOffset > 0) {\n const xOffset = computeXOffset(box, yOffset, radius) * (leftSide ? -1 : 1);\n // Move the label down.\n node.setAttribute('transform', `translate(${xOffset} ${yOffset})`);\n\n // Adjust the attached line accordingly.\n const lineNode = node.parentNode?.querySelector(`.${styles['label-line']}`);\n if (lineNode) {\n const { endY, endX } = marker;\n lineNode.setAttribute('y2', '' + (endY + yOffset));\n lineNode.setAttribute('x2', '' + (endX + xOffset));\n }\n\n // Update the position accordingly to inform the next label\n box.y += yOffset;\n box.x += xOffset;\n }\n\n previousBBox = box;\n }\n};\n\nconst squareDistance = (edge: [number, number]): number => Math.pow(edge[0], 2) + Math.pow(edge[1], 2);\n\nconst computeXOffset = (box: { x: number; y: number; height: number }, yOffset: number, radius: number): number => {\n const upperEdge: [number, number] = [box.x, box.y + yOffset];\n const lowerEdge: [number, number] = [box.x, box.y + box.height + yOffset];\n const closestEdge = squareDistance(upperEdge) < squareDistance(lowerEdge) ? upperEdge : lowerEdge;\n\n if (squareDistance(closestEdge) < Math.pow(radius, 2)) {\n return Math.sqrt(Math.pow(radius, 2) - Math.pow(closestEdge[1], 2)) - Math.abs(closestEdge[0]);\n }\n return 0;\n};\n\nexport const computeSmartAngle = (startAngle: number, endAngle: number, optimize = false): number => {\n if (!optimize || endAngle - startAngle < 2 * minLabelLineAngularPadding) {\n return (endAngle + startAngle) / 2;\n }\n const paddedStartAngle = startAngle + minLabelLineAngularPadding;\n const paddedEndAngle = endAngle - minLabelLineAngularPadding;\n if (paddedStartAngle < 0 && paddedEndAngle > 0) {\n return 0;\n }\n if (paddedStartAngle < Math.PI && paddedEndAngle > Math.PI) {\n return Math.PI;\n }\n\n const endAngleMinDistance = Math.min(\n paddedEndAngle,\n Math.abs(Math.PI - paddedEndAngle),\n 2 * Math.PI - paddedEndAngle\n );\n const startAngleMinDistance = Math.min(\n paddedStartAngle,\n Math.abs(Math.PI - paddedStartAngle),\n 2 * Math.PI - paddedStartAngle\n );\n if (endAngleMinDistance < startAngleMinDistance) {\n return paddedEndAngle;\n }\n return paddedStartAngle;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/pie-chart/utils.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 { ComponentFormatFunction } from '../i18n/context';\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface Dimension {\n innerRadius: number;\n outerRadius: number;\n padding: number;\n paddingLabels: number;\n innerLabelPadding: number;\n cornerRadius?: number;\n}\n\nconst minRadius = 30;\nconst paddingLabels = 44; // = 2 * (size-lineHeight-body-100)\nconst defaultPadding = 12; // = space-s\nconst smallPadding = 8; // = space-xs\nexport const minLabelLineAngularPadding = Math.PI / 20;\n\nexport const dimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n small: {\n innerRadius: 33,\n outerRadius: 50,\n innerLabelPadding: smallPadding,\n padding: smallPadding,\n paddingLabels,\n },\n medium: {\n innerRadius: 66,\n outerRadius: 100,\n innerLabelPadding: defaultPadding,\n padding: defaultPadding,\n paddingLabels,\n },\n large: {\n innerRadius: 93,\n outerRadius: 140,\n innerLabelPadding: defaultPadding,\n padding: defaultPadding,\n paddingLabels,\n },\n};\n\nexport const refreshDimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n small: {\n ...dimensionsBySize.small,\n innerRadius: 38,\n cornerRadius: 3,\n },\n medium: {\n ...dimensionsBySize.medium,\n innerRadius: 75,\n cornerRadius: 4,\n },\n large: {\n ...dimensionsBySize.large,\n innerRadius: 105,\n cornerRadius: 5,\n },\n};\n\n/**\n * When `size` is a string (\"small\", \"medium\" or \"large\") the predefined pie chart element dimensions for classic and visual refresh are used.\n * When `size` is a number the outer and inner radii are computed and the rest of the dimensions are taken from the closest predefined size.\n */\nexport function getDimensionsBySize({\n size,\n hasLabels,\n visualRefresh,\n}: {\n size: NonNullable<PieChartProps['size']> | number;\n hasLabels: boolean;\n visualRefresh?: boolean;\n}): Dimension & { size: NonNullable<PieChartProps['size']> } {\n if (typeof size === 'string') {\n const dimensions = visualRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];\n return { ...dimensions, size };\n }\n const sizeSpec = visualRefresh ? refreshDimensionsBySize : dimensionsBySize;\n const getPixelSize = (d: Dimension) => d.outerRadius * 2 + d.padding * 2 + (hasLabels ? d.paddingLabels : 0) * 2;\n\n let matchedSize: NonNullable<PieChartProps['size']> = 'small';\n if (size > getPixelSize(sizeSpec.medium)) {\n matchedSize = 'medium';\n }\n if (size > getPixelSize(sizeSpec.large)) {\n matchedSize = 'large';\n }\n\n const padding = sizeSpec[matchedSize].padding;\n const paddingLabels = hasLabels ? sizeSpec[matchedSize].paddingLabels : 0;\n const radiiRatio = sizeSpec[matchedSize].outerRadius / sizeSpec[matchedSize].innerRadius;\n const outerRadius = Math.max(minRadius, (size - 2 * paddingLabels - 2 * padding) / 2);\n const innerRadius = outerRadius / radiiRatio;\n\n return { ...sizeSpec[matchedSize], outerRadius, innerRadius, size: matchedSize };\n}\n\nexport const defaultDetails =\n (i18n: ComponentFormatFunction<'pie-chart'>, i18nStrings: PieChartProps.I18nStrings) =>\n (datum: PieChartProps.Datum, dataSum: number) => [\n { key: i18n('i18nStrings.detailsValue', i18nStrings.detailsValue) || '', value: datum.value },\n {\n key: i18n('i18nStrings.detailsPercentage', i18nStrings.detailsPercentage) || '',\n value: `${((datum.value * 100) / dataSum).toFixed(0)}%`,\n },\n ];\n\n/**\n * Adjusts the position of the given label nodes to avoid visual overlapping.\n * @param nodes List of label nodes of the entire chart (both left and right side)\n * @param markers Markers array that was calculated in <Labels>, but we just need the `endY` values\n * @param leftSide Boolean flag whether we are processing the left or right side of the chart labels\n */\nexport const balanceLabelNodes = (\n nodes: NodeListOf<SVGGElement>,\n markers: Array<{ endY: number; endX: number }>,\n leftSide: boolean,\n radius: number\n) => {\n const MARGIN = 10;\n\n let previousBBox: { x: number; y: number; height: number } | null = null;\n\n // When traversing the right side of labels, we start at the beginning of the array and go forwards.\n // For the left side, we need to traverse backwards from the end, so that overlapping nodes are pushed down in the right order.\n let i = leftSide ? nodes.length - 1 : 0;\n\n while ((leftSide && i >= 0) || (!leftSide && i < nodes.length)) {\n const node = nodes[i];\n\n const x = parseFloat(node.getAttribute('data-x') || '0');\n const y = parseFloat(node.getAttribute('data-y') || '0');\n const box = {\n x,\n y,\n height: node.getBoundingClientRect().height,\n };\n\n const marker = markers[i];\n\n if (leftSide) {\n i--;\n } else {\n i++;\n }\n\n if (!previousBBox) {\n previousBBox = box;\n node.setAttribute('transform', '');\n continue;\n }\n\n if ((!leftSide && box.x < 0) || (leftSide && box.x >= 0)) {\n // We have reached a label that is on the other side of the chart, so we're done.\n break;\n }\n\n node.setAttribute('transform', '');\n\n // Calculate how much the current node is overlapping with the previous one.\n const yOffset = previousBBox.y + previousBBox.height + MARGIN - box.y;\n\n if (yOffset > 0) {\n const xOffset = computeXOffset(box, yOffset, radius) * (leftSide ? -1 : 1);\n // Move the label down.\n node.setAttribute('transform', `translate(${xOffset} ${yOffset})`);\n\n // Adjust the attached line accordingly.\n const lineNode = node.parentNode?.querySelector(`.${styles['label-line']}`);\n if (lineNode) {\n const { endY, endX } = marker;\n lineNode.setAttribute('y2', '' + (endY + yOffset));\n lineNode.setAttribute('x2', '' + (endX + xOffset));\n }\n\n // Update the position accordingly to inform the next label\n box.y += yOffset;\n box.x += xOffset;\n }\n\n previousBBox = box;\n }\n};\n\nconst squareDistance = (edge: [number, number]): number => Math.pow(edge[0], 2) + Math.pow(edge[1], 2);\n\nconst computeXOffset = (box: { x: number; y: number; height: number }, yOffset: number, radius: number): number => {\n const upperEdge: [number, number] = [box.x, box.y + yOffset];\n const lowerEdge: [number, number] = [box.x, box.y + box.height + yOffset];\n const closestEdge = squareDistance(upperEdge) < squareDistance(lowerEdge) ? upperEdge : lowerEdge;\n\n if (squareDistance(closestEdge) < Math.pow(radius, 2)) {\n return Math.sqrt(Math.pow(radius, 2) - Math.pow(closestEdge[1], 2)) - Math.abs(closestEdge[0]);\n }\n return 0;\n};\n\nexport const computeSmartAngle = (startAngle: number, endAngle: number, optimize = false): number => {\n if (!optimize || endAngle - startAngle < 2 * minLabelLineAngularPadding) {\n return (endAngle + startAngle) / 2;\n }\n const paddedStartAngle = startAngle + minLabelLineAngularPadding;\n const paddedEndAngle = endAngle - minLabelLineAngularPadding;\n if (paddedStartAngle < 0 && paddedEndAngle > 0) {\n return 0;\n }\n if (paddedStartAngle < Math.PI && paddedEndAngle > Math.PI) {\n return Math.PI;\n }\n\n const endAngleMinDistance = Math.min(\n paddedEndAngle,\n Math.abs(Math.PI - paddedEndAngle),\n 2 * Math.PI - paddedEndAngle\n );\n const startAngleMinDistance = Math.min(\n paddedStartAngle,\n Math.abs(Math.PI - paddedStartAngle),\n 2 * Math.PI - paddedStartAngle\n );\n if (endAngleMinDistance < startAngleMinDistance) {\n return paddedEndAngle;\n }\n return paddedStartAngle;\n};\n"]}
|
package/popover/internal.js
CHANGED
|
@@ -70,11 +70,9 @@ function InternalPopover(_a, ref) {
|
|
|
70
70
|
setVisible(false);
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
|
-
|
|
74
|
-
// the options.capture notation is unsupported by IE.
|
|
75
|
-
document.addEventListener('mousedown', onDocumentClick, false);
|
|
73
|
+
document.addEventListener('mousedown', onDocumentClick);
|
|
76
74
|
return () => {
|
|
77
|
-
document.removeEventListener('mousedown', onDocumentClick
|
|
75
|
+
document.removeEventListener('mousedown', onDocumentClick);
|
|
78
76
|
};
|
|
79
77
|
}, []);
|
|
80
78
|
const popoverClasses = usePortalModeClasses(triggerRef);
|
|
@@ -98,8 +96,7 @@ function InternalPopover(_a, ref) {
|
|
|
98
96
|
clickFrameId.current = null;
|
|
99
97
|
});
|
|
100
98
|
} }),
|
|
101
|
-
triggerType === 'text' ? (React.createElement("button", Object.assign({}, triggerProps, { tabIndex: triggerTabIndex, type: "button", "aria-haspopup": "dialog", id: referrerId, "aria-label": triggerAriaLabel }),
|
|
102
|
-
React.createElement("span", { className: styles['trigger-inner-text'] }, children))) : (React.createElement("span", Object.assign({}, triggerProps, { id: referrerId }), children)),
|
|
99
|
+
triggerType === 'text' ? (React.createElement("button", Object.assign({}, triggerProps, { tabIndex: triggerTabIndex, type: "button", "aria-haspopup": "dialog", id: referrerId, "aria-label": triggerAriaLabel }), children)) : (React.createElement("span", Object.assign({}, triggerProps, { id: referrerId }), children)),
|
|
103
100
|
React.createElement(ResetContextsForModal, null, renderWithPortal ? React.createElement(Portal, null, popoverContent) : popoverContent)));
|
|
104
101
|
}
|
|
105
102
|
//# sourceMappingURL=internal.js.map
|
package/popover/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/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, { useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';\nimport clsx from 'clsx';\n\nimport { KeyCode } from '../internal/keycode';\nimport { getBaseProps } from '../internal/base-component';\n\nimport Arrow from './arrow';\nimport Portal from '../internal/components/portal';\nimport { PopoverProps } from './interfaces';\nimport PopoverContainer from './container';\nimport PopoverBody from './body';\n\nimport styles from './styles.css.js';\nimport { NonCancelableEventHandler, fireNonCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useInternalI18n } from '../i18n/context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\n\nexport interface InternalPopoverProps extends PopoverProps, InternalBaseComponentProps {\n __onOpen?: NonCancelableEventHandler<null>;\n}\n\nexport interface InternalPopoverRef {\n dismissPopover: () => void;\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n\n children,\n header,\n content,\n triggerAriaLabel,\n\n renderWithPortal = false,\n\n __onOpen,\n __internalRootRef = null,\n ...restProps\n }: InternalPopoverProps,\n ref: React.Ref<InternalPopoverRef>\n) {\n const baseProps = getBaseProps(restProps);\n const triggerRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const clickFrameId = useRef<number | null>(null);\n\n const i18n = useInternalI18n('popover');\n const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n const [visible, setVisible] = useState(false);\n\n const focusTrigger = useCallback(() => {\n if (triggerType === 'text') {\n triggerRef.current?.focus();\n } else {\n triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();\n }\n }, [triggerType]);\n\n const onTriggerClick = useCallback(() => {\n fireNonCancelableEvent(__onOpen);\n setVisible(true);\n }, [__onOpen]);\n\n const onDismiss = useCallback(() => {\n setVisible(false);\n focusTrigger();\n }, [focusTrigger]);\n\n const onTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const isEscapeKey = event.keyCode === KeyCode.escape;\n const isTabKey = event.keyCode === KeyCode.tab;\n if (isEscapeKey && visible) {\n event.stopPropagation();\n }\n if (isTabKey || isEscapeKey) {\n setVisible(false);\n }\n },\n [visible]\n );\n\n useImperativeHandle(ref, () => ({\n dismissPopover: onDismiss,\n }));\n\n useEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n const document = triggerRef.current.ownerDocument;\n\n const onDocumentClick = () => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n if (clickFrameId.current === null) {\n setVisible(false);\n }\n };\n\n // useCapture=false makes sure this listener is called after the one attached to the element.\n // the options.capture notation is unsupported by IE.\n document.addEventListener('mousedown', onDocumentClick, false);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick, false);\n };\n }, []);\n\n const popoverClasses = usePortalModeClasses(triggerRef);\n\n const triggerProps = {\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: triggerRef as any,\n onClick: onTriggerClick,\n onKeyDown: onTriggerKeyDown,\n className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n };\n const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n const referrerId = useUniqueId();\n\n const popoverContent = (\n <div\n aria-live={dismissButton ? undefined : 'polite'}\n aria-atomic={dismissButton ? undefined : true}\n className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n data-awsui-referrer-id={referrerId}\n >\n {visible && (\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={triggerRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={renderWithPortal}\n zIndex={renderWithPortal ? 7000 : undefined}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={header}\n onDismiss={onDismiss}\n overflowVisible=\"both\"\n >\n {content}\n </PopoverBody>\n </LinkDefaultVariantContext.Provider>\n </PopoverContainer>\n )}\n </div>\n );\n\n const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n return (\n <span\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n ref={mergedRef}\n onMouseDown={() => {\n // Indicate there was a click inside popover recently, including nested portals.\n clickFrameId.current = requestAnimationFrame(() => {\n clickFrameId.current = null;\n });\n }}\n >\n {triggerType === 'text' ? (\n <button\n {...triggerProps}\n tabIndex={triggerTabIndex}\n type=\"button\"\n aria-haspopup=\"dialog\"\n id={referrerId}\n aria-label={triggerAriaLabel}\n >\n <span className={styles['trigger-inner-text']}>{children}</span>\n </button>\n ) : (\n <span {...triggerProps} id={referrerId}>\n {children}\n </span>\n )}\n <ResetContextsForModal>\n {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n </ResetContextsForModal>\n </span>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/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, { useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';\nimport clsx from 'clsx';\n\nimport { KeyCode } from '../internal/keycode';\nimport { getBaseProps } from '../internal/base-component';\n\nimport Arrow from './arrow';\nimport Portal from '../internal/components/portal';\nimport { PopoverProps } from './interfaces';\nimport PopoverContainer from './container';\nimport PopoverBody from './body';\n\nimport styles from './styles.css.js';\nimport { NonCancelableEventHandler, fireNonCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useInternalI18n } from '../i18n/context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\n\nexport interface InternalPopoverProps extends PopoverProps, InternalBaseComponentProps {\n __onOpen?: NonCancelableEventHandler<null>;\n}\n\nexport interface InternalPopoverRef {\n dismissPopover: () => void;\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n\n children,\n header,\n content,\n triggerAriaLabel,\n\n renderWithPortal = false,\n\n __onOpen,\n __internalRootRef = null,\n ...restProps\n }: InternalPopoverProps,\n ref: React.Ref<InternalPopoverRef>\n) {\n const baseProps = getBaseProps(restProps);\n const triggerRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const clickFrameId = useRef<number | null>(null);\n\n const i18n = useInternalI18n('popover');\n const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n const [visible, setVisible] = useState(false);\n\n const focusTrigger = useCallback(() => {\n if (triggerType === 'text') {\n triggerRef.current?.focus();\n } else {\n triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();\n }\n }, [triggerType]);\n\n const onTriggerClick = useCallback(() => {\n fireNonCancelableEvent(__onOpen);\n setVisible(true);\n }, [__onOpen]);\n\n const onDismiss = useCallback(() => {\n setVisible(false);\n focusTrigger();\n }, [focusTrigger]);\n\n const onTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const isEscapeKey = event.keyCode === KeyCode.escape;\n const isTabKey = event.keyCode === KeyCode.tab;\n if (isEscapeKey && visible) {\n event.stopPropagation();\n }\n if (isTabKey || isEscapeKey) {\n setVisible(false);\n }\n },\n [visible]\n );\n\n useImperativeHandle(ref, () => ({\n dismissPopover: onDismiss,\n }));\n\n useEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n const document = triggerRef.current.ownerDocument;\n\n const onDocumentClick = () => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n if (clickFrameId.current === null) {\n setVisible(false);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick);\n };\n }, []);\n\n const popoverClasses = usePortalModeClasses(triggerRef);\n\n const triggerProps = {\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: triggerRef as any,\n onClick: onTriggerClick,\n onKeyDown: onTriggerKeyDown,\n className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n };\n const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n const referrerId = useUniqueId();\n\n const popoverContent = (\n <div\n aria-live={dismissButton ? undefined : 'polite'}\n aria-atomic={dismissButton ? undefined : true}\n className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n data-awsui-referrer-id={referrerId}\n >\n {visible && (\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={triggerRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={renderWithPortal}\n zIndex={renderWithPortal ? 7000 : undefined}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={header}\n onDismiss={onDismiss}\n overflowVisible=\"both\"\n >\n {content}\n </PopoverBody>\n </LinkDefaultVariantContext.Provider>\n </PopoverContainer>\n )}\n </div>\n );\n\n const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n return (\n <span\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n ref={mergedRef}\n onMouseDown={() => {\n // Indicate there was a click inside popover recently, including nested portals.\n clickFrameId.current = requestAnimationFrame(() => {\n clickFrameId.current = null;\n });\n }}\n >\n {triggerType === 'text' ? (\n <button\n {...triggerProps}\n tabIndex={triggerTabIndex}\n type=\"button\"\n aria-haspopup=\"dialog\"\n id={referrerId}\n aria-label={triggerAriaLabel}\n >\n {children}\n </button>\n ) : (\n <span {...triggerProps} id={referrerId}>\n {children}\n </span>\n )}\n <ResetContextsForModal>\n {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n </ResetContextsForModal>\n </span>\n );\n}\n"]}
|