@cloudscape-design/components 3.0.338 → 3.0.339

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.
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAa,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAGpF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAa,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAyCpF"}
package/alert/index.js CHANGED
@@ -1,13 +1,48 @@
1
1
  import { __rest } from "tslib";
2
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  // SPDX-License-Identifier: Apache-2.0
4
- import React from 'react';
4
+ import React, { useEffect } from 'react';
5
5
  import { applyDisplayName } from '../internal/utils/apply-display-name';
6
6
  import InternalAlert from './internal';
7
7
  import useBaseComponent from '../internal/hooks/use-base-component';
8
+ import { FunnelMetrics } from '../internal/analytics';
9
+ import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
10
+ import { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';
8
11
  export default function Alert(_a) {
9
12
  var { type = 'info', visible = true } = _a, props = __rest(_a, ["type", "visible"]);
10
13
  const baseComponentProps = useBaseComponent('Alert');
14
+ const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
15
+ const { stepNumber, stepNameSelector } = useFunnelStep();
16
+ const { subStepSelector, subStepNameSelector } = useFunnelSubStep();
17
+ useEffect(() => {
18
+ if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {
19
+ const stepName = getNameFromSelector(stepNameSelector);
20
+ const subStepName = getNameFromSelector(subStepNameSelector);
21
+ errorCount.current++;
22
+ if (subStepSelector) {
23
+ FunnelMetrics.funnelSubStepError({
24
+ funnelInteractionId,
25
+ subStepSelector,
26
+ subStepName,
27
+ subStepNameSelector,
28
+ stepNumber,
29
+ stepName,
30
+ stepNameSelector,
31
+ subStepAllSelector: getSubStepAllSelector(),
32
+ });
33
+ }
34
+ else {
35
+ FunnelMetrics.funnelError({
36
+ funnelInteractionId,
37
+ });
38
+ }
39
+ return () => {
40
+ // eslint-disable-next-line react-hooks/exhaustive-deps
41
+ errorCount.current--;
42
+ };
43
+ }
44
+ // eslint-disable-next-line react-hooks/exhaustive-deps
45
+ }, [funnelInteractionId, visible, submissionAttempt, errorCount]);
11
46
  return React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps));
12
47
  }
13
48
  applyDisplayName(Alert, 'Alert');
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AACvC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAuD;QAAvD,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACrE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC5F,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { AlertProps };\n\nexport default function Alert({ type = 'info', visible = true, ...props }: AlertProps) {\n const baseComponentProps = useBaseComponent('Alert');\n return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Alert, 'Alert');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AACvC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACpG,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAI7F,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAuD;QAAvD,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACrE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACxF,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IACzD,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,IAAI,OAAO,IAAI,IAAI,KAAK,OAAO,IAAI,WAAW,CAAC,OAAO,KAAK,UAAU,EAAE;YAC5F,MAAM,QAAQ,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YACvD,MAAM,WAAW,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;YAE7D,UAAU,CAAC,OAAO,EAAE,CAAC;YAErB,IAAI,eAAe,EAAE;gBACnB,aAAa,CAAC,kBAAkB,CAAC;oBAC/B,mBAAmB;oBACnB,eAAe;oBACf,WAAW;oBACX,mBAAmB;oBACnB,UAAU;oBACV,QAAQ;oBACR,gBAAgB;oBAChB,kBAAkB,EAAE,qBAAqB,EAAE;iBAC5C,CAAC,CAAC;aACJ;iBAAM;gBACL,aAAa,CAAC,WAAW,CAAC;oBACxB,mBAAmB;iBACpB,CAAC,CAAC;aACJ;YAED,OAAO,GAAG,EAAE;gBACV,uDAAuD;gBACvD,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC;SACH;QAED,uDAAuD;IACzD,CAAC,EAAE,CAAC,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IAElE,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC5F,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\n\nexport { AlertProps };\n\nexport default function Alert({ type = 'info', visible = true, ...props }: AlertProps) {\n const baseComponentProps = useBaseComponent('Alert');\n\n const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n useEffect(() => {\n if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n if (subStepSelector) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n } else {\n FunnelMetrics.funnelError({\n funnelInteractionId,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Alert, 'Alert');\n"]}
@@ -56,7 +56,7 @@ export const AnalyticsFunnel = (_a) => {
56
56
  }
57
57
  else {
58
58
  FunnelMetrics.funnelCancelled({ funnelInteractionId });
59
- funnelState.current === 'cancelled';
59
+ funnelState.current = 'cancelled';
60
60
  }
61
61
  };
62
62
  }, []);
@@ -133,7 +133,7 @@ export const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector })
133
133
  }
134
134
  return () => {
135
135
  //eslint-disable-next-line react-hooks/exhaustive-deps
136
- if (funnelInteractionId && funnelState.current === 'default') {
136
+ if (funnelInteractionId && funnelState.current !== 'cancelled') {
137
137
  FunnelMetrics.funnelStepComplete({
138
138
  funnelInteractionId,
139
139
  stepNumber,
@@ -1 +1 @@
1
- {"version":3,"file":"analytics-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.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, { useContext, useEffect, useRef, useState } from 'react';\n\nimport {\n FunnelStepContext,\n FunnelSubStepContext,\n FunnelContext,\n FunnelContextValue,\n FunnelStepContextValue,\n FunnelState,\n FunnelSubStepContextValue,\n} from '../context/analytics-context';\nimport { useFunnel } from '../hooks/use-funnel';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport { PACKAGE_VERSION } from '../../environment';\n\nimport { FunnelMetrics } from '../';\nimport { FunnelProps, FunnelStepProps } from '../interfaces';\n\nimport {\n DATA_ATTR_FUNNEL_STEP,\n getFunnelNameSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n getSubStepNameSelector,\n getSubStepSelector,\n} from '../selectors';\n\nexport const FUNNEL_VERSION = '1.0';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n FunnelProps,\n 'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = ({ children, ...props }: AnalyticsFunnelProps) => {\n const [funnelInteractionId, setFunnelInteractionId] = useState<string>('');\n const [submissionAttempt, setSubmissionAttempt] = useState(0);\n const isVisualRefresh = useVisualRefresh();\n const funnelState = useRef<FunnelState>('default');\n const errorCount = useRef<number>(0);\n const loadingButtonCount = useRef<number>(0);\n\n // This useEffect hook is run once on component mount to initiate the funnel analytics.\n // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details\n // about the funnel, and receives a unique interaction id.\n // This unique interaction id is then stored in the state for further use.\n //\n // On component unmount, it checks whether the funnel was successfully completed.\n // Based on this, it either calls 'funnelComplete' or 'funnelCancelled' method from FunnelMetrics.\n //\n // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,\n // hence we do not provide any dependencies.\n useEffect(() => {\n // Reset the state, in case the component was re-mounted.\n funnelState.current = 'default';\n\n const funnelInteractionId = FunnelMetrics.funnelStart({\n funnelNameSelector: getFunnelNameSelector(),\n optionalStepNumbers: props.optionalStepNumbers,\n funnelType: props.funnelType,\n totalFunnelSteps: props.totalFunnelSteps,\n componentVersion: PACKAGE_VERSION,\n theme: isVisualRefresh ? 'vr' : 'classic',\n funnelVersion: FUNNEL_VERSION,\n });\n\n setFunnelInteractionId(funnelInteractionId);\n\n /*\n A funnel counts as \"successful\" if it is unmounted after being \"complete\".\n */\n /* eslint-disable react-hooks/exhaustive-deps */\n return () => {\n if (funnelState.current === 'validating') {\n // Finish the validation phase early.\n FunnelMetrics.funnelComplete({ funnelInteractionId });\n funnelState.current = 'complete';\n }\n\n if (funnelState.current === 'complete') {\n FunnelMetrics.funnelSuccessful({ funnelInteractionId });\n } else {\n FunnelMetrics.funnelCancelled({ funnelInteractionId });\n funnelState.current === 'cancelled';\n }\n };\n }, []);\n /* eslint-enable react-hooks/exhaustive-deps */\n\n const funnelSubmit = () => {\n funnelState.current = 'validating';\n\n /*\n When the user attempts to submit the form, we wait for 50 milliseconds before checking\n if any form validation errors are present. This value was chosen to give enough time\n for validation and rerendering to occur, but be low enough that the user will not\n be able to take further action in the meantime.\n */\n const VALIDATION_WAIT_DELAY = 50;\n /*\n Loading is expected to take longer than validation, so we can keep the pressure on the CPU low.\n */\n const LOADING_WAIT_DELAY = 100;\n\n const checkForCompleteness = () => {\n if (funnelState.current === 'complete') {\n return;\n }\n\n if (loadingButtonCount.current > 0) {\n setTimeout(checkForCompleteness, LOADING_WAIT_DELAY);\n return;\n }\n\n if (errorCount.current === 0) {\n /*\n If no validation errors are rendered, we treat the funnel as complete.\n */\n FunnelMetrics.funnelComplete({ funnelInteractionId });\n funnelState.current = 'complete';\n } else {\n funnelState.current = 'default';\n }\n };\n\n setTimeout(checkForCompleteness, VALIDATION_WAIT_DELAY);\n };\n\n const funnelNextOrSubmitAttempt = () => setSubmissionAttempt(i => i + 1);\n\n const funnelCancel = () => {};\n\n const funnelContextValue: FunnelContextValue = {\n funnelInteractionId,\n setFunnelInteractionId,\n funnelType: props.funnelType,\n optionalStepNumbers: props.optionalStepNumbers,\n totalFunnelSteps: props.totalFunnelSteps,\n funnelSubmit,\n funnelCancel,\n submissionAttempt,\n funnelNextOrSubmitAttempt,\n funnelState,\n errorCount,\n loadingButtonCount,\n };\n\n return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = {\n children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);\n} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;\n\nexport const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n const { funnelInteractionId, funnelState } = useFunnel();\n\n const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n // This useEffect hook is used to track the start and completion of interaction with the step.\n // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics\n // to record the beginning of the interaction with the current step.\n // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.\n useEffect(() => {\n const stepName = getNameFromSelector(stepNameSelector);\n\n if (funnelInteractionId && funnelState.current === 'default') {\n FunnelMetrics.funnelStepStart({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n return () => {\n //eslint-disable-next-line react-hooks/exhaustive-deps\n if (funnelInteractionId && funnelState.current === 'default') {\n FunnelMetrics.funnelStepComplete({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n //eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n const contextValue: FunnelStepContextValue = { stepNumber, stepNameSelector, funnelStepProps };\n return (\n <FunnelStepContext.Provider value={contextValue}>\n {typeof children === 'function' ? children(contextValue) : children}\n </FunnelStepContext.Provider>\n );\n};\ninterface AnalyticsFunnelSubStepProps {\n children?: React.ReactNode;\n}\n\nexport const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {\n const subStepId = useUniqueId('substep');\n const subStepSelector = getSubStepSelector(subStepId);\n const subStepNameSelector = getSubStepNameSelector(subStepId);\n const subStepRef = useRef<HTMLDivElement | null>(null);\n\n const newContext: FunnelSubStepContextValue = {\n subStepSelector,\n subStepNameSelector,\n subStepId,\n subStepRef,\n isNestedSubStep: false,\n };\n\n const inheritedContext = { ...useContext(FunnelSubStepContext), isNestedSubStep: true };\n\n const context = inheritedContext.subStepId ? inheritedContext : newContext;\n\n return <FunnelSubStepContext.Provider value={context}>{children}</FunnelSubStepContext.Provider>;\n};\n"]}
1
+ {"version":3,"file":"analytics-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.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, { useContext, useEffect, useRef, useState } from 'react';\n\nimport {\n FunnelStepContext,\n FunnelSubStepContext,\n FunnelContext,\n FunnelContextValue,\n FunnelStepContextValue,\n FunnelState,\n FunnelSubStepContextValue,\n} from '../context/analytics-context';\nimport { useFunnel } from '../hooks/use-funnel';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport { PACKAGE_VERSION } from '../../environment';\n\nimport { FunnelMetrics } from '../';\nimport { FunnelProps, FunnelStepProps } from '../interfaces';\n\nimport {\n DATA_ATTR_FUNNEL_STEP,\n getFunnelNameSelector,\n getNameFromSelector,\n getSubStepAllSelector,\n getSubStepNameSelector,\n getSubStepSelector,\n} from '../selectors';\n\nexport const FUNNEL_VERSION = '1.0';\n\ntype AnalyticsFunnelProps = { children?: React.ReactNode } & Pick<\n FunnelProps,\n 'funnelType' | 'optionalStepNumbers' | 'totalFunnelSteps'\n>;\n\nexport const AnalyticsFunnel = ({ children, ...props }: AnalyticsFunnelProps) => {\n const [funnelInteractionId, setFunnelInteractionId] = useState<string>('');\n const [submissionAttempt, setSubmissionAttempt] = useState(0);\n const isVisualRefresh = useVisualRefresh();\n const funnelState = useRef<FunnelState>('default');\n const errorCount = useRef<number>(0);\n const loadingButtonCount = useRef<number>(0);\n\n // This useEffect hook is run once on component mount to initiate the funnel analytics.\n // It first calls the 'funnelStart' method from FunnelMetrics, providing all necessary details\n // about the funnel, and receives a unique interaction id.\n // This unique interaction id is then stored in the state for further use.\n //\n // On component unmount, it checks whether the funnel was successfully completed.\n // Based on this, it either calls 'funnelComplete' or 'funnelCancelled' method from FunnelMetrics.\n //\n // The eslint-disable is required as we deliberately want this effect to run only once on mount and unmount,\n // hence we do not provide any dependencies.\n useEffect(() => {\n // Reset the state, in case the component was re-mounted.\n funnelState.current = 'default';\n\n const funnelInteractionId = FunnelMetrics.funnelStart({\n funnelNameSelector: getFunnelNameSelector(),\n optionalStepNumbers: props.optionalStepNumbers,\n funnelType: props.funnelType,\n totalFunnelSteps: props.totalFunnelSteps,\n componentVersion: PACKAGE_VERSION,\n theme: isVisualRefresh ? 'vr' : 'classic',\n funnelVersion: FUNNEL_VERSION,\n });\n\n setFunnelInteractionId(funnelInteractionId);\n\n /*\n A funnel counts as \"successful\" if it is unmounted after being \"complete\".\n */\n /* eslint-disable react-hooks/exhaustive-deps */\n return () => {\n if (funnelState.current === 'validating') {\n // Finish the validation phase early.\n FunnelMetrics.funnelComplete({ funnelInteractionId });\n funnelState.current = 'complete';\n }\n\n if (funnelState.current === 'complete') {\n FunnelMetrics.funnelSuccessful({ funnelInteractionId });\n } else {\n FunnelMetrics.funnelCancelled({ funnelInteractionId });\n funnelState.current = 'cancelled';\n }\n };\n }, []);\n /* eslint-enable react-hooks/exhaustive-deps */\n\n const funnelSubmit = () => {\n funnelState.current = 'validating';\n\n /*\n When the user attempts to submit the form, we wait for 50 milliseconds before checking\n if any form validation errors are present. This value was chosen to give enough time\n for validation and rerendering to occur, but be low enough that the user will not\n be able to take further action in the meantime.\n */\n const VALIDATION_WAIT_DELAY = 50;\n /*\n Loading is expected to take longer than validation, so we can keep the pressure on the CPU low.\n */\n const LOADING_WAIT_DELAY = 100;\n\n const checkForCompleteness = () => {\n if (funnelState.current === 'complete') {\n return;\n }\n\n if (loadingButtonCount.current > 0) {\n setTimeout(checkForCompleteness, LOADING_WAIT_DELAY);\n return;\n }\n\n if (errorCount.current === 0) {\n /*\n If no validation errors are rendered, we treat the funnel as complete.\n */\n FunnelMetrics.funnelComplete({ funnelInteractionId });\n funnelState.current = 'complete';\n } else {\n funnelState.current = 'default';\n }\n };\n\n setTimeout(checkForCompleteness, VALIDATION_WAIT_DELAY);\n };\n\n const funnelNextOrSubmitAttempt = () => setSubmissionAttempt(i => i + 1);\n\n const funnelCancel = () => {};\n\n const funnelContextValue: FunnelContextValue = {\n funnelInteractionId,\n setFunnelInteractionId,\n funnelType: props.funnelType,\n optionalStepNumbers: props.optionalStepNumbers,\n totalFunnelSteps: props.totalFunnelSteps,\n funnelSubmit,\n funnelCancel,\n submissionAttempt,\n funnelNextOrSubmitAttempt,\n funnelState,\n errorCount,\n loadingButtonCount,\n };\n\n return <FunnelContext.Provider value={funnelContextValue}>{children}</FunnelContext.Provider>;\n};\n\ntype AnalyticsFunnelStepProps = {\n children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);\n} & Pick<FunnelStepProps, 'stepNumber' | 'stepNameSelector'>;\n\nexport const AnalyticsFunnelStep = ({ children, stepNumber, stepNameSelector }: AnalyticsFunnelStepProps) => {\n const { funnelInteractionId, funnelState } = useFunnel();\n\n const funnelStepProps = { [DATA_ATTR_FUNNEL_STEP]: stepNumber };\n\n // This useEffect hook is used to track the start and completion of interaction with the step.\n // On mount, if there is a valid funnel interaction id, it calls the 'funnelStepStart' method from FunnelMetrics\n // to record the beginning of the interaction with the current step.\n // On unmount, it does a similar thing but this time calling 'funnelStepComplete' to record the completion of the interaction.\n useEffect(() => {\n const stepName = getNameFromSelector(stepNameSelector);\n\n if (funnelInteractionId && funnelState.current === 'default') {\n FunnelMetrics.funnelStepStart({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n return () => {\n //eslint-disable-next-line react-hooks/exhaustive-deps\n if (funnelInteractionId && funnelState.current !== 'cancelled') {\n FunnelMetrics.funnelStepComplete({\n funnelInteractionId,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n //eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, stepNumber, stepNameSelector]);\n\n const contextValue: FunnelStepContextValue = { stepNumber, stepNameSelector, funnelStepProps };\n return (\n <FunnelStepContext.Provider value={contextValue}>\n {typeof children === 'function' ? children(contextValue) : children}\n </FunnelStepContext.Provider>\n );\n};\ninterface AnalyticsFunnelSubStepProps {\n children?: React.ReactNode;\n}\n\nexport const AnalyticsFunnelSubStep = ({ children }: AnalyticsFunnelSubStepProps) => {\n const subStepId = useUniqueId('substep');\n const subStepSelector = getSubStepSelector(subStepId);\n const subStepNameSelector = getSubStepNameSelector(subStepId);\n const subStepRef = useRef<HTMLDivElement | null>(null);\n\n const newContext: FunnelSubStepContextValue = {\n subStepSelector,\n subStepNameSelector,\n subStepId,\n subStepRef,\n isNestedSubStep: false,\n };\n\n const inheritedContext = { ...useContext(FunnelSubStepContext), isNestedSubStep: true };\n\n const context = inheritedContext.subStepId ? inheritedContext : newContext;\n\n return <FunnelSubStepContext.Provider value={context}>{children}</FunnelSubStepContext.Provider>;\n};\n"]}
@@ -40,7 +40,7 @@ export const useFunnelSubStep = () => {
40
40
  if (funnelInteractionId &&
41
41
  subStepRef.current &&
42
42
  !subStepRef.current.contains(event.relatedTarget) &&
43
- funnelState.current === 'default') {
43
+ funnelState.current !== 'cancelled') {
44
44
  FunnelMetrics.funnelSubStepComplete({
45
45
  funnelInteractionId,
46
46
  subStepSelector,
@@ -1 +1 @@
1
- {"version":3,"file":"use-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/hooks/use-funnel.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,+BAA+B,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAChH,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IACzD,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAEzD,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,OAAO,CAAC;IAEjG,IAAI,eAAe,EAAE;QACnB,OAAO,OAAO,CAAC;KAChB;IAED,MAAM,OAAO,GAAG,CAAC,KAAuC,EAAE,EAAE;QAC1D,IACE,mBAAmB;YACnB,UAAU,CAAC,OAAO;YAClB,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,CAAC,EACnF;YACA,aAAa,CAAC,kBAAkB,CAAC;gBAC/B,mBAAmB;gBACnB,eAAe;gBACf,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,KAAuC,EAAE,EAAE;QACzD,IACE,mBAAmB;YACnB,UAAU,CAAC,OAAO;YAClB,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC;YACjD,WAAW,CAAC,OAAO,KAAK,SAAS,EACjC;YACA,aAAa,CAAC,qBAAqB,CAAC;gBAClC,mBAAmB;gBACnB,eAAe;gBACf,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAwB,mBAAmB;QACjE,CAAC,CAAC;YACE,CAAC,wBAAwB,CAAC,EAAE,SAAS;YACrC,OAAO;YACP,MAAM;SACP;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,kBAAkB,IAAK,OAAO,EAAG;AAC5C,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,WAAW,GAA0D,OAAO,CAAC,mBAAmB;QACpG,CAAC,CAAC;YACE,CAAC,+BAA+B,CAAC,EAAE,OAAO,CAAC,mBAAmB;SAC/D;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,WAAW,IAAK,OAAO,EAAG;AACrC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useContext } from 'react';\nimport { FunnelContext, FunnelStepContext, FunnelSubStepContext } from '../context/analytics-context';\nimport { DATA_ATTR_FUNNEL_INTERACTION_ID, DATA_ATTR_FUNNEL_SUBSTEP, getSubStepAllSelector } from '../selectors';\nimport { FunnelMetrics } from '../';\n\n/**\n * Custom React Hook to manage and interact with FunnelSubStep.\n * This hook will provide necessary properties and methods required\n * to track and manage interactions with a FunnelSubStep component.\n *\n * The `onFocus` method is used to track the beginning of interaction with the FunnelSubStep.\n * The `onBlur` method is used to track the completion of interaction with the FunnelSubStep.\n * The subStepId is a unique identifier for the funnel sub-step.\n * The subStepRef is a reference to the DOM element of the funnel sub-step.\n */\nexport const useFunnelSubStep = () => {\n const context = useContext(FunnelSubStepContext);\n const { funnelInteractionId, funnelState } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n\n const { subStepId, subStepSelector, subStepNameSelector, subStepRef, isNestedSubStep } = context;\n\n if (isNestedSubStep) {\n return context;\n }\n\n const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n if (\n funnelInteractionId &&\n subStepRef.current &&\n (!event.relatedTarget || !subStepRef.current.contains(event.relatedTarget as Node))\n ) {\n FunnelMetrics.funnelSubStepStart({\n funnelInteractionId,\n subStepSelector,\n subStepNameSelector,\n stepNumber,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n\n const onBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n if (\n funnelInteractionId &&\n subStepRef.current &&\n !subStepRef.current.contains(event.relatedTarget) &&\n funnelState.current === 'default'\n ) {\n FunnelMetrics.funnelSubStepComplete({\n funnelInteractionId,\n subStepSelector,\n subStepNameSelector,\n stepNumber,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n\n const funnelSubStepProps: Record<string, any> = funnelInteractionId\n ? {\n [DATA_ATTR_FUNNEL_SUBSTEP]: subStepId,\n onFocus,\n onBlur,\n }\n : {};\n\n return { funnelSubStepProps, ...context };\n};\n\n/**\n * Custom React Hook to manage and interact with FunnelStep.\n * This hook will provide necessary properties required to track\n * and manage interactions with a FunnelStep component.\n *\n * The 'data-analytics-funnel-step' property of funnelStepProps is used to track the index of the current step in the funnel.\n * The context contains additional properties of the FunnelStep.\n */\nexport const useFunnelStep = () => {\n const context = useContext(FunnelStepContext);\n return context;\n};\n\n/**\n * Custom React Hook to manage and interact with Funnel.\n * This hook will provide necessary properties required to track\n * and manage interactions with a Funnel component.\n *\n * The 'data-analytics-funnel-interaction-id' property of funnelProps is used to track the unique identifier of the current interaction with the funnel.\n */\nexport const useFunnel = () => {\n const context = useContext(FunnelContext);\n const funnelProps: Record<string, string | number | boolean | undefined> = context.funnelInteractionId\n ? {\n [DATA_ATTR_FUNNEL_INTERACTION_ID]: context.funnelInteractionId,\n }\n : {};\n\n return { funnelProps, ...context };\n};\n"]}
1
+ {"version":3,"file":"use-funnel.js","sourceRoot":"lib/default/","sources":["internal/analytics/hooks/use-funnel.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,+BAA+B,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAChH,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IACzD,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAEzD,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,OAAO,CAAC;IAEjG,IAAI,eAAe,EAAE;QACnB,OAAO,OAAO,CAAC;KAChB;IAED,MAAM,OAAO,GAAG,CAAC,KAAuC,EAAE,EAAE;QAC1D,IACE,mBAAmB;YACnB,UAAU,CAAC,OAAO;YAClB,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,CAAC,EACnF;YACA,aAAa,CAAC,kBAAkB,CAAC;gBAC/B,mBAAmB;gBACnB,eAAe;gBACf,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,KAAuC,EAAE,EAAE;QACzD,IACE,mBAAmB;YACnB,UAAU,CAAC,OAAO;YAClB,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC;YACjD,WAAW,CAAC,OAAO,KAAK,WAAW,EACnC;YACA,aAAa,CAAC,qBAAqB,CAAC;gBAClC,mBAAmB;gBACnB,eAAe;gBACf,mBAAmB;gBACnB,UAAU;gBACV,gBAAgB;gBAChB,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAwB,mBAAmB;QACjE,CAAC,CAAC;YACE,CAAC,wBAAwB,CAAC,EAAE,SAAS;YACrC,OAAO;YACP,MAAM;SACP;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,kBAAkB,IAAK,OAAO,EAAG;AAC5C,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,WAAW,GAA0D,OAAO,CAAC,mBAAmB;QACpG,CAAC,CAAC;YACE,CAAC,+BAA+B,CAAC,EAAE,OAAO,CAAC,mBAAmB;SAC/D;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,uBAAS,WAAW,IAAK,OAAO,EAAG;AACrC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useContext } from 'react';\nimport { FunnelContext, FunnelStepContext, FunnelSubStepContext } from '../context/analytics-context';\nimport { DATA_ATTR_FUNNEL_INTERACTION_ID, DATA_ATTR_FUNNEL_SUBSTEP, getSubStepAllSelector } from '../selectors';\nimport { FunnelMetrics } from '../';\n\n/**\n * Custom React Hook to manage and interact with FunnelSubStep.\n * This hook will provide necessary properties and methods required\n * to track and manage interactions with a FunnelSubStep component.\n *\n * The `onFocus` method is used to track the beginning of interaction with the FunnelSubStep.\n * The `onBlur` method is used to track the completion of interaction with the FunnelSubStep.\n * The subStepId is a unique identifier for the funnel sub-step.\n * The subStepRef is a reference to the DOM element of the funnel sub-step.\n */\nexport const useFunnelSubStep = () => {\n const context = useContext(FunnelSubStepContext);\n const { funnelInteractionId, funnelState } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n\n const { subStepId, subStepSelector, subStepNameSelector, subStepRef, isNestedSubStep } = context;\n\n if (isNestedSubStep) {\n return context;\n }\n\n const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n if (\n funnelInteractionId &&\n subStepRef.current &&\n (!event.relatedTarget || !subStepRef.current.contains(event.relatedTarget as Node))\n ) {\n FunnelMetrics.funnelSubStepStart({\n funnelInteractionId,\n subStepSelector,\n subStepNameSelector,\n stepNumber,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n\n const onBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n if (\n funnelInteractionId &&\n subStepRef.current &&\n !subStepRef.current.contains(event.relatedTarget) &&\n funnelState.current !== 'cancelled'\n ) {\n FunnelMetrics.funnelSubStepComplete({\n funnelInteractionId,\n subStepSelector,\n subStepNameSelector,\n stepNumber,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n };\n\n const funnelSubStepProps: Record<string, any> = funnelInteractionId\n ? {\n [DATA_ATTR_FUNNEL_SUBSTEP]: subStepId,\n onFocus,\n onBlur,\n }\n : {};\n\n return { funnelSubStepProps, ...context };\n};\n\n/**\n * Custom React Hook to manage and interact with FunnelStep.\n * This hook will provide necessary properties required to track\n * and manage interactions with a FunnelStep component.\n *\n * The 'data-analytics-funnel-step' property of funnelStepProps is used to track the index of the current step in the funnel.\n * The context contains additional properties of the FunnelStep.\n */\nexport const useFunnelStep = () => {\n const context = useContext(FunnelStepContext);\n return context;\n};\n\n/**\n * Custom React Hook to manage and interact with Funnel.\n * This hook will provide necessary properties required to track\n * and manage interactions with a Funnel component.\n *\n * The 'data-analytics-funnel-interaction-id' property of funnelProps is used to track the unique identifier of the current interaction with the funnel.\n */\nexport const useFunnel = () => {\n const context = useContext(FunnelContext);\n const funnelProps: Record<string, string | number | boolean | undefined> = context.funnelInteractionId\n ? {\n [DATA_ATTR_FUNNEL_INTERACTION_ID]: context.funnelInteractionId,\n }\n : {};\n\n return { funnelProps, ...context };\n};\n"]}
@@ -1,6 +1,6 @@
1
1
 
2
2
  export var PACKAGE_SOURCE = 'components';
3
- export var PACKAGE_VERSION = '3.0.0 (f2157d0)';
3
+ export var PACKAGE_VERSION = '3.0.0 (b80535d)';
4
4
  export var THEME = 'open-source-visual-refresh';
5
5
  export var ALWAYS_VISUAL_REFRESH = true;
6
6
 
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "f2157d08391a051b016df6a34ee27029a2b2084d"
2
+ "commit": "b80535d74110de4e1e2e3459ef46bbb215d3baf3"
3
3
  }
package/package.json CHANGED
@@ -136,7 +136,7 @@
136
136
  "./internal/base-component/index.js",
137
137
  "./internal/base-component/styles.css.js"
138
138
  ],
139
- "version": "3.0.338",
139
+ "version": "3.0.339",
140
140
  "repository": {
141
141
  "type": "git",
142
142
  "url": "https://github.com/cloudscape-design/components.git"
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AASnE,UAAU,kBAAkB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IAChE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrD,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;AA2FD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,EACtC,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAMxD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAUnE,UAAU,kBAAkB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IAChE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrD,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;AAgHD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,EACtC,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAMxD"}
@@ -9,6 +9,7 @@ import { TableTdElement } from './td-element';
9
9
  import { InlineEditor } from './inline-editor';
10
10
  import LiveRegion from '../../internal/components/live-region/index.js';
11
11
  import { useInternalI18n } from '../../internal/i18n/context';
12
+ import { usePrevious } from '../../internal/hooks/use-previous';
12
13
  const submitHandlerFallback = () => {
13
14
  throw new Error('The function `handleSubmit` is required for editable columns');
14
15
  };
@@ -31,13 +32,31 @@ function TableCellEditable(_a) {
31
32
  const [hasHover, setHasHover] = useState(false);
32
33
  const [hasFocus, setHasFocus] = useState(false);
33
34
  const showIcon = hasHover || hasFocus;
34
- return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], isEditing && styles['body-cell-edit-active'], successfulEdit && styles['body-cell-has-success'], isVisualRefresh && styles['is-visual-refresh']), onClick: !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: e => {
35
+ const prevSuccessfulEdit = usePrevious(successfulEdit);
36
+ const prevHasFocus = usePrevious(hasFocus);
37
+ const [showSuccessIcon, setShowSuccessIcon] = useState(false);
38
+ useEffect(() => {
39
+ // Hide the success icon after a successful edit, when cell loses focus.
40
+ if (successfulEdit && prevSuccessfulEdit && !hasFocus && prevHasFocus) {
41
+ setShowSuccessIcon(false);
42
+ }
43
+ // Show success icon right after a successful edit, when `successfulEdit` switches to true.
44
+ if (successfulEdit && !prevSuccessfulEdit) {
45
+ setShowSuccessIcon(true);
46
+ }
47
+ }, [hasFocus, successfulEdit, prevHasFocus, prevSuccessfulEdit]);
48
+ return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], isEditing && styles['body-cell-edit-active'], showSuccessIcon && showIcon && styles['body-cell-has-success'], isVisualRefresh && styles['is-visual-refresh']), onClick: !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: e => {
49
+ setShowSuccessIcon(false);
35
50
  isFocusMoveNeededRef.current = true;
36
51
  onEditEnd(e);
37
52
  }, submitEdit: submitEdit !== null && submitEdit !== void 0 ? submitEdit : submitHandlerFallback })) : (React.createElement(React.Fragment, null,
38
53
  column.cell(item),
39
- successfulEdit && (React.createElement(React.Fragment, null,
40
- React.createElement("span", { className: styles['body-cell-success'], "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.successfulEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), role: "img" },
54
+ showSuccessIcon && showIcon && (React.createElement(React.Fragment, null,
55
+ React.createElement("span", { className: styles['body-cell-success'], "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.successfulEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), role: "img", onMouseDown: e => {
56
+ // Prevent the editor's Button blur event to be fired when clicking the success icon.
57
+ // This prevents unfocusing the button and triggers the `TableTdElement` onClick event which initiates the edit mode.
58
+ e.preventDefault();
59
+ } },
41
60
  React.createElement(Icon, { name: "status-positive", variant: "success" })),
42
61
  React.createElement(LiveRegion, null, i18n('ariaLabels.successfulEditLabel', (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.successfulEditLabel) === null || _c === void 0 ? void 0 : _c.call(ariaLabels, column))))),
43
62
  React.createElement("button", { className: styles['body-cell-editor'], "aria-label": (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _d === void 0 ? void 0 : _d.call(ariaLabels, column, item), ref: editActivateRef, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false) }, showIcon && React.createElement(Icon, { name: "edit" }))))));
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React, { useEffect, useRef, useState } from 'react';\nimport Icon from '../../icon/internal';\nimport { TableProps } from '../interfaces';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { InlineEditor } from './inline-editor';\nimport LiveRegion from '../../internal/components/live-region/index.js';\nimport { useInternalI18n } from '../../internal/i18n/context';\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\ninterface TableBodyCellProps<ItemType> extends TableTdElementProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n isEditing: boolean;\n successfulEdit?: boolean;\n onEditStart: () => void;\n onEditEnd: (cancelled: boolean) => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType>({\n className,\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n isVisualRefresh,\n successfulEdit = false,\n ...rest\n}: TableBodyCellProps<ItemType>) {\n const i18n = useInternalI18n('table');\n const editActivateRef = useRef<HTMLButtonElement>(null);\n const tdNativeAttributes = {\n 'data-inline-editing-active': isEditing.toString(),\n };\n const isFocusMoveNeededRef = useRef(false);\n\n useEffect(() => {\n if (!isEditing && editActivateRef.current && isFocusMoveNeededRef.current) {\n isFocusMoveNeededRef.current = false;\n editActivateRef.current.focus();\n }\n }, [isEditing]);\n // To improve the initial page render performance we only show the edit icon when necessary.\n const [hasHover, setHasHover] = useState(false);\n const [hasFocus, setHasFocus] = useState(false);\n const showIcon = hasHover || hasFocus;\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n className={clsx(\n className,\n styles['body-cell-editable'],\n isEditing && styles['body-cell-edit-active'],\n successfulEdit && styles['body-cell-has-success'],\n isVisualRefresh && styles['is-visual-refresh']\n )}\n onClick={!isEditing ? onEditStart : undefined}\n onMouseEnter={() => setHasHover(true)}\n onMouseLeave={() => setHasHover(false)}\n >\n {isEditing ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={e => {\n isFocusMoveNeededRef.current = true;\n onEditEnd(e);\n }}\n submitEdit={submitEdit ?? submitHandlerFallback}\n />\n ) : (\n <>\n {column.cell(item)}\n {successfulEdit && (\n <>\n <span\n className={styles['body-cell-success']}\n aria-label={ariaLabels?.successfulEditLabel?.(column)}\n role=\"img\"\n >\n <Icon name=\"status-positive\" variant=\"success\" />\n </span>\n <LiveRegion>\n {i18n('ariaLabels.successfulEditLabel', ariaLabels?.successfulEditLabel?.(column))}\n </LiveRegion>\n </>\n )}\n <button\n className={styles['body-cell-editor']}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n ref={editActivateRef}\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n >\n {showIcon && <Icon name=\"edit\" />}\n </button>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType>({\n isEditable,\n ...rest\n}: TableBodyCellProps<ItemType> & { isEditable: boolean }) {\n if (isEditable || rest.isEditing) {\n return <TableCellEditable {...rest} />;\n }\n const { column, item } = rest;\n return <TableTdElement {...rest}>{column.cell(item)}</TableTdElement>;\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React, { useEffect, useRef, useState } from 'react';\nimport Icon from '../../icon/internal';\nimport { TableProps } from '../interfaces';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { InlineEditor } from './inline-editor';\nimport LiveRegion from '../../internal/components/live-region/index.js';\nimport { useInternalI18n } from '../../internal/i18n/context';\nimport { usePrevious } from '../../internal/hooks/use-previous';\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\ninterface TableBodyCellProps<ItemType> extends TableTdElementProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n isEditing: boolean;\n successfulEdit?: boolean;\n onEditStart: () => void;\n onEditEnd: (cancelled: boolean) => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType>({\n className,\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n isVisualRefresh,\n successfulEdit = false,\n ...rest\n}: TableBodyCellProps<ItemType>) {\n const i18n = useInternalI18n('table');\n const editActivateRef = useRef<HTMLButtonElement>(null);\n const tdNativeAttributes = {\n 'data-inline-editing-active': isEditing.toString(),\n };\n const isFocusMoveNeededRef = useRef(false);\n\n useEffect(() => {\n if (!isEditing && editActivateRef.current && isFocusMoveNeededRef.current) {\n isFocusMoveNeededRef.current = false;\n editActivateRef.current.focus();\n }\n }, [isEditing]);\n // To improve the initial page render performance we only show the edit icon when necessary.\n const [hasHover, setHasHover] = useState(false);\n const [hasFocus, setHasFocus] = useState(false);\n const showIcon = hasHover || hasFocus;\n\n const prevSuccessfulEdit = usePrevious(successfulEdit);\n const prevHasFocus = usePrevious(hasFocus);\n const [showSuccessIcon, setShowSuccessIcon] = useState(false);\n\n useEffect(() => {\n // Hide the success icon after a successful edit, when cell loses focus.\n if (successfulEdit && prevSuccessfulEdit && !hasFocus && prevHasFocus) {\n setShowSuccessIcon(false);\n }\n // Show success icon right after a successful edit, when `successfulEdit` switches to true.\n if (successfulEdit && !prevSuccessfulEdit) {\n setShowSuccessIcon(true);\n }\n }, [hasFocus, successfulEdit, prevHasFocus, prevSuccessfulEdit]);\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n className={clsx(\n className,\n styles['body-cell-editable'],\n isEditing && styles['body-cell-edit-active'],\n showSuccessIcon && showIcon && styles['body-cell-has-success'],\n isVisualRefresh && styles['is-visual-refresh']\n )}\n onClick={!isEditing ? onEditStart : undefined}\n onMouseEnter={() => setHasHover(true)}\n onMouseLeave={() => setHasHover(false)}\n >\n {isEditing ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={e => {\n setShowSuccessIcon(false);\n isFocusMoveNeededRef.current = true;\n onEditEnd(e);\n }}\n submitEdit={submitEdit ?? submitHandlerFallback}\n />\n ) : (\n <>\n {column.cell(item)}\n {showSuccessIcon && showIcon && (\n <>\n <span\n className={styles['body-cell-success']}\n aria-label={ariaLabels?.successfulEditLabel?.(column)}\n role=\"img\"\n onMouseDown={e => {\n // Prevent the editor's Button blur event to be fired when clicking the success icon.\n // This prevents unfocusing the button and triggers the `TableTdElement` onClick event which initiates the edit mode.\n e.preventDefault();\n }}\n >\n <Icon name=\"status-positive\" variant=\"success\" />\n </span>\n <LiveRegion>\n {i18n('ariaLabels.successfulEditLabel', ariaLabels?.successfulEditLabel?.(column))}\n </LiveRegion>\n </>\n )}\n <button\n className={styles['body-cell-editor']}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n ref={editActivateRef}\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n >\n {showIcon && <Icon name=\"edit\" />}\n </button>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType>({\n isEditable,\n ...rest\n}: TableBodyCellProps<ItemType> & { isEditable: boolean }) {\n if (isEditable || rest.isEditing) {\n return <TableCellEditable {...rest} />;\n }\n const { column, item } = rest;\n return <TableTdElement {...rest}>{column.cell(item)}</TableTdElement>;\n}\n"]}
@@ -1,33 +1,33 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "body-cell": "awsui_body-cell_c6tup_djrxv_93",
5
- "body-cell-wrap": "awsui_body-cell-wrap_c6tup_djrxv_103",
6
- "is-visual-refresh": "awsui_is-visual-refresh_c6tup_djrxv_115",
7
- "has-striped-rows": "awsui_has-striped-rows_c6tup_djrxv_127",
8
- "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_djrxv_130",
9
- "body-cell-editable": "awsui_body-cell-editable_c6tup_djrxv_130",
10
- "has-striped-rows-sticky-cell-pad-left": "awsui_has-striped-rows-sticky-cell-pad-left_c6tup_djrxv_136",
11
- "has-selection": "awsui_has-selection_c6tup_djrxv_139",
12
- "body-cell-first-row": "awsui_body-cell-first-row_c6tup_djrxv_145",
13
- "body-cell-last-row": "awsui_body-cell-last-row_c6tup_djrxv_148",
14
- "body-cell-selected": "awsui_body-cell-selected_c6tup_djrxv_148",
15
- "has-footer": "awsui_has-footer_c6tup_djrxv_148",
16
- "body-cell-shaded": "awsui_body-cell-shaded_c6tup_djrxv_158",
17
- "sticky-cell": "awsui_sticky-cell_c6tup_djrxv_175",
18
- "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_c6tup_djrxv_183",
19
- "sticky-cell-last-right": "awsui_sticky-cell-last-right_c6tup_djrxv_200",
20
- "sticky-cell-last-left": "awsui_sticky-cell-last-left_c6tup_djrxv_204",
21
- "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_djrxv_227",
22
- "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_djrxv_231",
23
- "body-cell-success": "awsui_body-cell-success_c6tup_djrxv_255",
24
- "body-cell-editor": "awsui_body-cell-editor_c6tup_djrxv_255",
25
- "body-cell-success-form": "awsui_body-cell-success-form_c6tup_djrxv_277",
26
- "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_djrxv_277",
27
- "body-cell-success-row": "awsui_body-cell-success-row_c6tup_djrxv_286",
28
- "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_djrxv_286",
29
- "body-cell-success-controls": "awsui_body-cell-success-controls_c6tup_djrxv_296",
30
- "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_djrxv_296",
31
- "body-cell-has-success": "awsui_body-cell-has-success_c6tup_djrxv_315"
4
+ "body-cell": "awsui_body-cell_c6tup_xpjfg_93",
5
+ "body-cell-wrap": "awsui_body-cell-wrap_c6tup_xpjfg_103",
6
+ "is-visual-refresh": "awsui_is-visual-refresh_c6tup_xpjfg_115",
7
+ "has-striped-rows": "awsui_has-striped-rows_c6tup_xpjfg_127",
8
+ "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_xpjfg_130",
9
+ "body-cell-editable": "awsui_body-cell-editable_c6tup_xpjfg_130",
10
+ "has-striped-rows-sticky-cell-pad-left": "awsui_has-striped-rows-sticky-cell-pad-left_c6tup_xpjfg_136",
11
+ "has-selection": "awsui_has-selection_c6tup_xpjfg_139",
12
+ "body-cell-first-row": "awsui_body-cell-first-row_c6tup_xpjfg_145",
13
+ "body-cell-last-row": "awsui_body-cell-last-row_c6tup_xpjfg_148",
14
+ "body-cell-selected": "awsui_body-cell-selected_c6tup_xpjfg_148",
15
+ "has-footer": "awsui_has-footer_c6tup_xpjfg_148",
16
+ "body-cell-shaded": "awsui_body-cell-shaded_c6tup_xpjfg_158",
17
+ "sticky-cell": "awsui_sticky-cell_c6tup_xpjfg_175",
18
+ "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_c6tup_xpjfg_183",
19
+ "sticky-cell-last-right": "awsui_sticky-cell-last-right_c6tup_xpjfg_200",
20
+ "sticky-cell-last-left": "awsui_sticky-cell-last-left_c6tup_xpjfg_204",
21
+ "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_xpjfg_227",
22
+ "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_xpjfg_231",
23
+ "body-cell-editor": "awsui_body-cell-editor_c6tup_xpjfg_255",
24
+ "body-cell-success": "awsui_body-cell-success_c6tup_xpjfg_260",
25
+ "body-cell-success-form": "awsui_body-cell-success-form_c6tup_xpjfg_285",
26
+ "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_xpjfg_285",
27
+ "body-cell-success-row": "awsui_body-cell-success-row_c6tup_xpjfg_294",
28
+ "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_xpjfg_294",
29
+ "body-cell-success-controls": "awsui_body-cell-success-controls_c6tup_xpjfg_304",
30
+ "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_xpjfg_304",
31
+ "body-cell-has-success": "awsui_body-cell-has-success_c6tup_xpjfg_328"
32
32
  };
33
33
 
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_body-cell_c6tup_djrxv_93:not(#\9) {
93
+ .awsui_body-cell_c6tup_xpjfg_93:not(#\9) {
94
94
  box-sizing: border-box;
95
95
  padding: var(--space-scaled-xs-wbfgrv, 8px) var(--space-scaled-l-2rs0gk, 20px) calc(
96
96
  var(--space-scaled-xs-wbfgrv, 8px) + (var(--border-item-width-y36svo, 2px) - var(--border-divider-list-width-um3zli, 1px))
@@ -100,19 +100,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
100
100
  border-bottom: var(--border-divider-list-width-um3zli, 1px) solid var(--color-border-divider-default-9o8zql, #e9ebed);
101
101
  font-weight: inherit;
102
102
  }
103
- .awsui_body-cell_c6tup_djrxv_93:not(#\9):not(.awsui_body-cell-wrap_c6tup_djrxv_103) {
103
+ .awsui_body-cell_c6tup_xpjfg_93:not(#\9):not(.awsui_body-cell-wrap_c6tup_xpjfg_103) {
104
104
  white-space: nowrap;
105
105
  overflow: hidden;
106
106
  text-overflow: ellipsis;
107
107
  }
108
- .awsui_body-cell_c6tup_djrxv_93:not(#\9):first-child {
108
+ .awsui_body-cell_c6tup_xpjfg_93:not(#\9):first-child {
109
109
  border-left: var(--border-item-width-y36svo, 2px) solid transparent;
110
110
  }
111
- .awsui_body-cell_c6tup_djrxv_93:not(#\9):last-child {
111
+ .awsui_body-cell_c6tup_xpjfg_93:not(#\9):last-child {
112
112
  border-right: var(--border-item-width-y36svo, 2px) solid transparent;
113
113
  padding-right: calc(var(--space-l-f4l5gr, 20px) - var(--border-item-width-y36svo, 2px));
114
114
  }
115
- .awsui_body-cell_c6tup_djrxv_93.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):first-child {
115
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):first-child {
116
116
  /*
117
117
  Striped rows requires additional left padding because the
118
118
  shaded background makes the child content appear too close
@@ -124,55 +124,55 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
124
124
  that the placeholder border would consume.
125
125
  */
126
126
  }
127
- .awsui_body-cell_c6tup_djrxv_93.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_djrxv_127) {
127
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_xpjfg_127) {
128
128
  padding-left: var(--space-xxxs-j6dpcy, 2px);
129
129
  }
130
- .awsui_body-cell_c6tup_djrxv_93.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_djrxv_127):not(.awsui_body-cell-edit-active_c6tup_djrxv_130).awsui_body-cell-editable_c6tup_djrxv_130:hover {
130
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_xpjfg_127):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130).awsui_body-cell-editable_c6tup_xpjfg_130:hover {
131
131
  padding-left: calc(var(--space-xxxs-j6dpcy, 2px) + var(--border-divider-list-width-um3zli, 1px));
132
132
  }
133
- .awsui_body-cell_c6tup_djrxv_93.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):first-child:first-child.awsui_has-striped-rows_c6tup_djrxv_127 {
133
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):first-child:first-child.awsui_has-striped-rows_c6tup_xpjfg_127 {
134
134
  padding-left: var(--space-xxs-ja5cp8, 4px);
135
135
  }
136
- .awsui_body-cell_c6tup_djrxv_93.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):first-child:first-child.awsui_has-striped-rows-sticky-cell-pad-left_c6tup_djrxv_136 {
136
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):first-child:first-child.awsui_has-striped-rows-sticky-cell-pad-left_c6tup_xpjfg_136 {
137
137
  padding-left: var(--space-table-horizontal-8ca8r3, 20px);
138
138
  }
139
- .awsui_body-cell_c6tup_djrxv_93.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):first-child:not(.awsui_has-selection_c6tup_djrxv_139):not(.awsui_body-cell-editable_c6tup_djrxv_130) {
139
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):first-child:not(.awsui_has-selection_c6tup_xpjfg_139):not(.awsui_body-cell-editable_c6tup_xpjfg_130) {
140
140
  border-left: none;
141
141
  }
142
- .awsui_body-cell_c6tup_djrxv_93:not(#\9):first-child:not(.awsui_is-visual-refresh_c6tup_djrxv_115) {
142
+ .awsui_body-cell_c6tup_xpjfg_93:not(#\9):first-child:not(.awsui_is-visual-refresh_c6tup_xpjfg_115) {
143
143
  padding-left: calc(var(--space-l-f4l5gr, 20px) - var(--border-item-width-y36svo, 2px));
144
144
  }
145
- .awsui_body-cell-first-row_c6tup_djrxv_145:not(#\9) {
145
+ .awsui_body-cell-first-row_c6tup_xpjfg_145:not(#\9) {
146
146
  border-top: var(--border-item-width-y36svo, 2px) solid transparent;
147
147
  }
148
- .awsui_body-cell-last-row_c6tup_djrxv_148:not(#\9):not(.awsui_body-cell-selected_c6tup_djrxv_148):not(.awsui_has-footer_c6tup_djrxv_148) {
148
+ .awsui_body-cell-last-row_c6tup_xpjfg_148:not(#\9):not(.awsui_body-cell-selected_c6tup_xpjfg_148):not(.awsui_has-footer_c6tup_xpjfg_148) {
149
149
  border-bottom: var(--border-item-width-y36svo, 2px) solid transparent;
150
150
  }
151
- .awsui_body-cell-last-row_c6tup_djrxv_148:not(#\9):not(.awsui_body-cell-selected_c6tup_djrxv_148).awsui_has-footer_c6tup_djrxv_148 {
151
+ .awsui_body-cell-last-row_c6tup_xpjfg_148:not(#\9):not(.awsui_body-cell-selected_c6tup_xpjfg_148).awsui_has-footer_c6tup_xpjfg_148 {
152
152
  /*
153
153
  Add a bottom border to the body cells of the last row as a separator between the
154
154
  table and the footer
155
155
  */
156
156
  border-bottom: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-divider-default-9o8zql, #e9ebed);
157
157
  }
158
- .awsui_body-cell-shaded_c6tup_djrxv_158:not(#\9) {
158
+ .awsui_body-cell-shaded_c6tup_xpjfg_158:not(#\9) {
159
159
  background: var(--color-background-cell-shaded-oyxkf4, #f8f8f8);
160
160
  }
161
- .awsui_body-cell-selected_c6tup_djrxv_148:not(#\9) {
161
+ .awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9) {
162
162
  background-color: var(--color-background-item-selected-ndi5zy, #f2f8fd);
163
163
  border-top: var(--border-item-width-y36svo, 2px) solid var(--color-border-item-selected-xoo46x, #0972d3);
164
164
  border-bottom: var(--border-item-width-y36svo, 2px) solid var(--color-border-item-selected-xoo46x, #0972d3);
165
165
  padding-bottom: var(--space-scaled-xs-wbfgrv, 8px);
166
166
  }
167
- .awsui_body-cell-selected_c6tup_djrxv_148:not(#\9):first-child {
167
+ .awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9):first-child {
168
168
  border-left: var(--border-item-width-y36svo, 2px) solid var(--color-border-item-selected-xoo46x, #0972d3);
169
169
  border-radius: var(--border-radius-item-gyl0qr, 8px) 0 0 var(--border-radius-item-gyl0qr, 8px);
170
170
  }
171
- .awsui_body-cell-selected_c6tup_djrxv_148:not(#\9):last-child {
171
+ .awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9):last-child {
172
172
  border-right: var(--border-item-width-y36svo, 2px) solid var(--color-border-item-selected-xoo46x, #0972d3);
173
173
  border-radius: 0 var(--border-radius-item-gyl0qr, 8px) var(--border-radius-item-gyl0qr, 8px) 0;
174
174
  }
175
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175:not(#\9) {
175
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175:not(#\9) {
176
176
  position: sticky;
177
177
  background: var(--color-background-container-content-og3y0v, #ffffff);
178
178
  z-index: 798;
@@ -180,79 +180,89 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
180
180
  transition-duration: var(--motion-duration-transition-show-quick-tx10w8, 90ms);
181
181
  transition-timing-function: var(--motion-easing-sticky-c9pq0x, cubic-bezier(1, 0, 0.83, 1));
182
182
  }
183
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell-pad-left_c6tup_djrxv_183:not(#\9):not(.awsui_has-selection_c6tup_djrxv_139):not(.awsui_is-visual-refresh_c6tup_djrxv_115.awsui_body-cell_c6tup_djrxv_93:first-child.awsui_has-striped-rows_c6tup_djrxv_127) {
183
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell-pad-left_c6tup_xpjfg_183:not(#\9):not(.awsui_has-selection_c6tup_xpjfg_139):not(.awsui_is-visual-refresh_c6tup_xpjfg_115.awsui_body-cell_c6tup_xpjfg_93:first-child.awsui_has-striped-rows_c6tup_xpjfg_127) {
184
184
  padding-left: var(--space-table-horizontal-8ca8r3, 20px);
185
185
  }
186
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175.awsui_body-cell-shaded_c6tup_djrxv_158:not(#\9) {
186
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175.awsui_body-cell-shaded_c6tup_xpjfg_158:not(#\9) {
187
187
  background: var(--color-background-cell-shaded-oyxkf4, #f8f8f8);
188
188
  }
189
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175.awsui_body-cell-selected_c6tup_djrxv_148:not(#\9) {
189
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175.awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9) {
190
190
  background-color: var(--color-background-item-selected-ndi5zy, #f2f8fd);
191
191
  }
192
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175.awsui_body-cell-selected_c6tup_djrxv_148:not(#\9):first-child {
192
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175.awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9):first-child {
193
193
  box-shadow: 0 0 0 4px var(--color-background-container-content-og3y0v, #ffffff);
194
194
  clip-path: inset(0 0 0 0);
195
195
  }
196
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175.awsui_body-cell-selected_c6tup_djrxv_148:not(#\9):last-child {
196
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175.awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9):last-child {
197
197
  box-shadow: 4px 0 0 0 var(--color-background-container-content-og3y0v, #ffffff);
198
198
  clip-path: inset(0 0 0 0);
199
199
  }
200
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175.awsui_body-cell-selected_c6tup_djrxv_148:not(#\9):last-child.awsui_sticky-cell-last-right_c6tup_djrxv_200 {
200
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175.awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9):last-child.awsui_sticky-cell-last-right_c6tup_xpjfg_200 {
201
201
  box-shadow: var(--shadow-sticky-column-last-gplke4, -4px 0 20px 1px rgba(0, 28, 36, 0.1)), 8px 0 0 0 var(--color-background-container-content-og3y0v, #ffffff);
202
202
  clip-path: inset(0 0 0 -24px);
203
203
  }
204
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell-last-left_c6tup_djrxv_204:not(#\9) {
204
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell-last-left_c6tup_xpjfg_204:not(#\9) {
205
205
  box-shadow: var(--shadow-sticky-column-first-n8r2og, 4px 0px 20px 1px rgba(0, 7, 22, 0.1));
206
206
  clip-path: inset(0px -24px 0px 0px);
207
207
  }
208
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell-last-right_c6tup_djrxv_200:not(#\9) {
208
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell-last-right_c6tup_xpjfg_200:not(#\9) {
209
209
  box-shadow: var(--shadow-sticky-column-last-gplke4, -4px 0 20px 1px rgba(0, 28, 36, 0.1));
210
210
  clip-path: inset(0 0 0 -24px);
211
211
  }
212
212
  @media (prefers-reduced-motion: reduce) {
213
- .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175:not(#\9) {
213
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175:not(#\9) {
214
214
  animation: none;
215
215
  transition: none;
216
216
  }
217
217
  }
218
- .awsui-motion-disabled .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175:not(#\9), .awsui-mode-entering .awsui_body-cell_c6tup_djrxv_93.awsui_sticky-cell_c6tup_djrxv_175:not(#\9) {
218
+ .awsui-motion-disabled .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175:not(#\9), .awsui-mode-entering .awsui_body-cell_c6tup_xpjfg_93.awsui_sticky-cell_c6tup_xpjfg_175:not(#\9) {
219
219
  animation: none;
220
220
  transition: none;
221
221
  }
222
- .awsui_body-cell-selected_c6tup_djrxv_148:not(#\9):not(:first-child) {
222
+ .awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9):not(:first-child) {
223
223
  padding-top: calc(
224
224
  var(--space-scaled-xs-wbfgrv, 8px) + (var(--border-item-width-y36svo, 2px) - var(--border-divider-list-width-um3zli, 1px))
225
225
  );
226
226
  }
227
- .awsui_body-cell_c6tup_djrxv_93:not(#\9):not(.awsui_body-cell-selected_c6tup_djrxv_148).awsui_body-cell-next-selected_c6tup_djrxv_227 {
227
+ .awsui_body-cell_c6tup_xpjfg_93:not(#\9):not(.awsui_body-cell-selected_c6tup_xpjfg_148).awsui_body-cell-next-selected_c6tup_xpjfg_227 {
228
228
  border-bottom: 0;
229
229
  padding-bottom: calc(var(--space-scaled-xs-wbfgrv, 8px) + var(--border-divider-list-width-um3zli, 1px));
230
230
  }
231
- .awsui_body-cell-selected_c6tup_djrxv_148.awsui_body-cell-prev-selected_c6tup_djrxv_231:not(#\9) {
231
+ .awsui_body-cell-selected_c6tup_xpjfg_148.awsui_body-cell-prev-selected_c6tup_xpjfg_231:not(#\9) {
232
232
  padding-top: calc(
233
233
  var(--space-scaled-xs-wbfgrv, 8px) + (var(--border-item-width-y36svo, 2px) - var(--border-divider-list-width-um3zli, 1px))
234
234
  );
235
235
  border-top: var(--border-divider-list-width-um3zli, 1px) solid var(--color-border-item-placeholder-yrwdru, #0972d3);
236
236
  }
237
- .awsui_body-cell-selected_c6tup_djrxv_148.awsui_body-cell-next-selected_c6tup_djrxv_227:not(#\9) {
237
+ .awsui_body-cell-selected_c6tup_xpjfg_148.awsui_body-cell-next-selected_c6tup_xpjfg_227:not(#\9) {
238
238
  border-bottom-width: var(--border-divider-list-width-um3zli, 1px);
239
239
  }
240
- .awsui_body-cell-selected_c6tup_djrxv_148.awsui_body-cell-next-selected_c6tup_djrxv_227:not(#\9):first-child {
240
+ .awsui_body-cell-selected_c6tup_xpjfg_148.awsui_body-cell-next-selected_c6tup_xpjfg_227:not(#\9):first-child {
241
241
  border-bottom-left-radius: 0;
242
242
  }
243
- .awsui_body-cell-selected_c6tup_djrxv_148.awsui_body-cell-next-selected_c6tup_djrxv_227:not(#\9):last-child {
243
+ .awsui_body-cell-selected_c6tup_xpjfg_148.awsui_body-cell-next-selected_c6tup_xpjfg_227:not(#\9):last-child {
244
244
  border-bottom-right-radius: 0;
245
245
  }
246
- .awsui_body-cell-selected_c6tup_djrxv_148.awsui_body-cell-prev-selected_c6tup_djrxv_231:not(#\9):first-child {
246
+ .awsui_body-cell-selected_c6tup_xpjfg_148.awsui_body-cell-prev-selected_c6tup_xpjfg_231:not(#\9):first-child {
247
247
  border-top-left-radius: 0;
248
248
  }
249
- .awsui_body-cell-selected_c6tup_djrxv_148.awsui_body-cell-prev-selected_c6tup_djrxv_231:not(#\9):last-child {
249
+ .awsui_body-cell-selected_c6tup_xpjfg_148.awsui_body-cell-prev-selected_c6tup_xpjfg_231:not(#\9):last-child {
250
250
  border-top-right-radius: 0;
251
251
  }
252
- .awsui_body-cell-selected_c6tup_djrxv_148:not(#\9):not(.awsui_body-cell-prev-selected_c6tup_djrxv_231) {
252
+ .awsui_body-cell-selected_c6tup_xpjfg_148:not(#\9):not(.awsui_body-cell-prev-selected_c6tup_xpjfg_231) {
253
253
  padding-top: var(--space-scaled-xs-wbfgrv, 8px);
254
254
  }
255
- .awsui_body-cell-success_c6tup_djrxv_255:not(#\9), .awsui_body-cell-editor_c6tup_djrxv_255:not(#\9) {
255
+ .awsui_body-cell-editor_c6tup_xpjfg_255:not(#\9) {
256
+ padding: 0 calc(
257
+ var(--space-xs-edba2s, 8px) + var(--space-xxs-ja5cp8, 4px)
258
+ ) 0 0;
259
+ }
260
+ .awsui_body-cell-success_c6tup_xpjfg_260:not(#\9) {
261
+ padding: 0 calc(calc(
262
+ var(--space-xs-edba2s, 8px) + var(--space-xxs-ja5cp8, 4px)
263
+ ) + calc(var(--size-icon-normal-jq6jat, 16px) + var(--space-xs-edba2s, 8px))) 0 0;
264
+ }
265
+ .awsui_body-cell-success_c6tup_xpjfg_260:not(#\9), .awsui_body-cell-editor_c6tup_xpjfg_255:not(#\9) {
256
266
  top: 0;
257
267
  right: 0;
258
268
  bottom: 0;
@@ -264,72 +274,71 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
264
274
  outline: 0;
265
275
  background: 0;
266
276
  border: 0;
267
- padding: 0;
268
- padding-right: calc(var(--space-xs-edba2s, 8px) + var(--space-xxs-ja5cp8, 4px));
269
277
  color: var(--color-text-button-normal-default-x2bilf, #0972d3);
270
278
  }
271
- .awsui_body-cell-success_c6tup_djrxv_255:not(#\9):hover, .awsui_body-cell-editor_c6tup_djrxv_255:not(#\9):hover {
279
+ .awsui_body-cell-success_c6tup_xpjfg_260:not(#\9):hover, .awsui_body-cell-editor_c6tup_xpjfg_255:not(#\9):hover {
272
280
  color: var(--color-text-button-normal-hover-deauoa, #033160);
273
281
  }
274
- .awsui_body-cell-success_c6tup_djrxv_255:not(#\9):active, .awsui_body-cell-editor_c6tup_djrxv_255:not(#\9):active {
282
+ .awsui_body-cell-success_c6tup_xpjfg_260:not(#\9):active, .awsui_body-cell-editor_c6tup_xpjfg_255:not(#\9):active {
275
283
  color: var(--color-text-button-normal-active-avnl7f, #033160);
276
284
  }
277
- .awsui_body-cell-success-form_c6tup_djrxv_277:not(#\9), .awsui_body-cell-editor-form_c6tup_djrxv_277:not(#\9) {
285
+ .awsui_body-cell-success-form_c6tup_xpjfg_285:not(#\9), .awsui_body-cell-editor-form_c6tup_xpjfg_285:not(#\9) {
278
286
  margin: calc(-1 * var(--space-xs-edba2s, 8px)) calc(-1.5 * var(--space-xs-edba2s, 8px));
279
287
  }
280
- .awsui_is-visual-refresh_c6tup_djrxv_115.awsui_body-cell_c6tup_djrxv_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_djrxv_127 > .awsui_body-cell-success-form_c6tup_djrxv_277, .awsui_is-visual-refresh_c6tup_djrxv_115.awsui_body-cell_c6tup_djrxv_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_djrxv_127 > .awsui_body-cell-editor-form_c6tup_djrxv_277 {
288
+ .awsui_is-visual-refresh_c6tup_xpjfg_115.awsui_body-cell_c6tup_xpjfg_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_xpjfg_127 > .awsui_body-cell-success-form_c6tup_xpjfg_285, .awsui_is-visual-refresh_c6tup_xpjfg_115.awsui_body-cell_c6tup_xpjfg_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_xpjfg_127 > .awsui_body-cell-editor-form_c6tup_xpjfg_285 {
281
289
  margin-left: calc(-1 * var(--space-xxs-ja5cp8, 4px));
282
290
  }
283
- .awsui_is-visual-refresh_c6tup_djrxv_115.awsui_body-cell_c6tup_djrxv_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_djrxv_127) > .awsui_body-cell-success-form_c6tup_djrxv_277, .awsui_is-visual-refresh_c6tup_djrxv_115.awsui_body-cell_c6tup_djrxv_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_djrxv_127) > .awsui_body-cell-editor-form_c6tup_djrxv_277 {
291
+ .awsui_is-visual-refresh_c6tup_xpjfg_115.awsui_body-cell_c6tup_xpjfg_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_xpjfg_127) > .awsui_body-cell-success-form_c6tup_xpjfg_285, .awsui_is-visual-refresh_c6tup_xpjfg_115.awsui_body-cell_c6tup_xpjfg_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_xpjfg_127) > .awsui_body-cell-editor-form_c6tup_xpjfg_285 {
284
292
  margin-left: calc(-1 * var(--space-xxxs-j6dpcy, 2px));
285
293
  }
286
- .awsui_body-cell-success-row_c6tup_djrxv_286:not(#\9), .awsui_body-cell-editor-row_c6tup_djrxv_286:not(#\9) {
294
+ .awsui_body-cell-success-row_c6tup_xpjfg_294:not(#\9), .awsui_body-cell-editor-row_c6tup_xpjfg_294:not(#\9) {
287
295
  display: flex;
288
296
  flex-flow: row nowrap;
289
297
  align-items: center;
290
298
  justify-content: space-between;
291
299
  column-gap: var(--space-xxs-ja5cp8, 4px);
292
300
  }
293
- .awsui_body-cell-success-row_c6tup_djrxv_286 > :not(#\9):not(:last-child), .awsui_body-cell-editor-row_c6tup_djrxv_286 > :not(#\9):not(:last-child) {
301
+ .awsui_body-cell-success-row_c6tup_xpjfg_294 > :not(#\9):not(:last-child), .awsui_body-cell-editor-row_c6tup_xpjfg_294 > :not(#\9):not(:last-child) {
294
302
  flex-grow: 1;
295
303
  }
296
- .awsui_body-cell-success-controls_c6tup_djrxv_296:not(#\9), .awsui_body-cell-editor-controls_c6tup_djrxv_296:not(#\9) {
304
+ .awsui_body-cell-success-controls_c6tup_xpjfg_304:not(#\9), .awsui_body-cell-editor-controls_c6tup_xpjfg_304:not(#\9) {
297
305
  flex-shrink: 0;
298
306
  }
299
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9) {
307
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9) {
300
308
  position: relative;
301
309
  cursor: pointer;
302
310
  }
303
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130.awsui_sticky-cell_c6tup_djrxv_175:not(#\9) {
311
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130.awsui_sticky-cell_c6tup_xpjfg_175:not(#\9) {
304
312
  position: sticky;
305
313
  }
306
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130.awsui_body-cell-edit-active_c6tup_djrxv_130:not(#\9) {
314
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130.awsui_body-cell-edit-active_c6tup_xpjfg_130:not(#\9) {
307
315
  overflow: visible;
308
316
  }
309
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130.awsui_body-cell-edit-active_c6tup_djrxv_130.awsui_sticky-cell_c6tup_djrxv_175:not(#\9) {
317
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130.awsui_body-cell-edit-active_c6tup_xpjfg_130.awsui_sticky-cell_c6tup_xpjfg_175:not(#\9) {
310
318
  position: sticky;
311
319
  }
312
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130) > .awsui_body-cell-editor_c6tup_djrxv_255 {
320
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130) > .awsui_body-cell-editor_c6tup_xpjfg_255 {
313
321
  opacity: 0;
314
322
  }
315
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130).awsui_body-cell-has-success_c6tup_djrxv_315 {
323
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):focus-within {
316
324
  padding-right: calc(var(--space-scaled-l-2rs0gk, 20px) + var(--space-l-f4l5gr, 20px));
317
- }
318
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):focus-within {
319
325
  padding-right: calc(var(--space-scaled-l-2rs0gk, 20px) + var(--space-l-f4l5gr, 20px));
320
326
  position: relative;
321
327
  }
322
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):focus-within > .awsui_body-cell-editor_c6tup_djrxv_255 {
328
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):focus-within.awsui_body-cell-has-success_c6tup_xpjfg_328 {
329
+ padding-right: calc(var(--space-scaled-l-2rs0gk, 20px) + var(--space-l-f4l5gr, 20px) + calc(var(--size-icon-normal-jq6jat, 16px) + var(--space-xs-edba2s, 8px)));
330
+ }
331
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):focus-within > .awsui_body-cell-editor_c6tup_xpjfg_255 {
323
332
  opacity: 1;
324
333
  }
325
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):focus-within > .awsui_body-cell-success_c6tup_djrxv_255 {
326
- opacity: 0;
334
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):focus-within > .awsui_body-cell-success_c6tup_xpjfg_260 {
335
+ opacity: 1;
327
336
  }
328
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):focus-within {
337
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):focus-within {
329
338
  outline: 2px dotted transparent;
330
339
  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t2t62i, 4px)) - 1px);
331
340
  }
332
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):focus-within::before {
341
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):focus-within::before {
333
342
  content: " ";
334
343
  display: block;
335
344
  position: absolute;
@@ -340,10 +349,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
340
349
  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
341
350
  box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
342
351
  }
343
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):focus-within.awsui_sticky-cell_c6tup_djrxv_175 {
352
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):focus-within.awsui_sticky-cell_c6tup_xpjfg_175 {
344
353
  position: sticky;
345
354
  }
346
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover {
355
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover {
347
356
  position: relative;
348
357
  background-color: var(--color-background-dropdown-item-hover-gvdk4u, #f4f4f4);
349
358
  border: var(--border-divider-list-width-um3zli, 1px) solid var(--color-border-editable-cell-hover-zeuchn, #7d8998);
@@ -351,41 +360,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
351
360
  right: calc(-1 * var(--border-divider-list-width-um3zli, 1px));
352
361
  padding-right: calc(var(--space-scaled-l-2rs0gk, 20px) + var(--space-l-f4l5gr, 20px));
353
362
  }
354
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover > .awsui_body-cell-editor_c6tup_djrxv_255 {
363
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover > .awsui_body-cell-editor_c6tup_xpjfg_255 {
355
364
  opacity: 1;
356
365
  }
357
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover > .awsui_body-cell-success_c6tup_djrxv_255 {
358
- opacity: 0;
366
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover > .awsui_body-cell-success_c6tup_xpjfg_260 {
367
+ opacity: 1;
359
368
  }
360
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover:first-child {
369
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover:first-child {
361
370
  left: 0;
362
371
  right: 0;
363
372
  }
364
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover > .awsui_body-cell-editor_c6tup_djrxv_255 {
365
- padding-right: calc(var(--space-xs-edba2s, 8px) + var(--space-xxs-ja5cp8, 4px) - (2 * var(--border-divider-list-width-um3zli, 1px)));
373
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover > .awsui_body-cell-editor_c6tup_xpjfg_255 {
374
+ padding-right: calc(calc(
375
+ var(--space-xs-edba2s, 8px) + var(--space-xxs-ja5cp8, 4px)
376
+ ) - (2 * var(--border-divider-list-width-um3zli, 1px)));
377
+ }
378
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover > .awsui_body-cell-success_c6tup_xpjfg_260 {
379
+ padding-right: calc(calc(calc(
380
+ var(--space-xs-edba2s, 8px) + var(--space-xxs-ja5cp8, 4px)
381
+ ) + calc(var(--size-icon-normal-jq6jat, 16px) + var(--space-xs-edba2s, 8px))) - (2 * var(--border-divider-list-width-um3zli, 1px)));
366
382
  }
367
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover.awsui_body-cell-last-row_c6tup_djrxv_148.awsui_body-cell-selected_c6tup_djrxv_148, .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover.awsui_body-cell-next-selected_c6tup_djrxv_227 {
383
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover.awsui_body-cell-last-row_c6tup_xpjfg_148.awsui_body-cell-selected_c6tup_xpjfg_148, .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover.awsui_body-cell-next-selected_c6tup_xpjfg_227 {
368
384
  padding-top: calc(var(--space-scaled-xs-wbfgrv, 8px) - calc(var(--border-divider-list-width-um3zli, 1px) / 2));
369
385
  padding-bottom: calc(var(--space-scaled-xs-wbfgrv, 8px) - calc(var(--border-divider-list-width-um3zli, 1px) / 2));
370
386
  }
371
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover.awsui_body-cell-last-row_c6tup_djrxv_148:not(.awsui_body-cell-selected_c6tup_djrxv_148) {
387
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover.awsui_body-cell-last-row_c6tup_xpjfg_148:not(.awsui_body-cell-selected_c6tup_xpjfg_148) {
372
388
  padding-top: calc(var(--space-scaled-xs-wbfgrv, 8px) - calc(var(--border-divider-list-width-um3zli, 1px)));
373
389
  }
374
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover.awsui_body-cell-first-row_c6tup_djrxv_145:not(.awsui_body-cell-selected_c6tup_djrxv_148) {
390
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover.awsui_body-cell-first-row_c6tup_xpjfg_145:not(.awsui_body-cell-selected_c6tup_xpjfg_148) {
375
391
  padding-top: calc(var(--space-scaled-xs-wbfgrv, 8px) - calc(var(--border-divider-list-width-um3zli, 1px)));
376
392
  padding-bottom: calc(var(--space-scaled-xs-wbfgrv, 8px) - calc(var(--border-divider-list-width-um3zli, 1px)));
377
393
  }
378
- .awsui_body-cell_c6tup_djrxv_93.awsui_body-cell-editable_c6tup_djrxv_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover.awsui_sticky-cell_c6tup_djrxv_175 {
394
+ .awsui_body-cell_c6tup_xpjfg_93.awsui_body-cell-editable_c6tup_xpjfg_130:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover.awsui_sticky-cell_c6tup_xpjfg_175 {
379
395
  position: sticky;
380
396
  }
381
- .awsui_body-cell-editable_c6tup_djrxv_130.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover:first-child {
397
+ .awsui_body-cell-editable_c6tup_xpjfg_130.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover:first-child {
382
398
  border-top-left-radius: var(--border-radius-item-gyl0qr, 8px);
383
399
  border-bottom-left-radius: var(--border-radius-item-gyl0qr, 8px);
384
400
  }
385
- .awsui_body-cell-editable_c6tup_djrxv_130.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover:last-child {
401
+ .awsui_body-cell-editable_c6tup_xpjfg_130.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover:last-child {
386
402
  border-top-right-radius: var(--border-radius-item-gyl0qr, 8px);
387
403
  border-bottom-right-radius: var(--border-radius-item-gyl0qr, 8px);
388
404
  }
389
- .awsui_body-cell-editable_c6tup_djrxv_130.awsui_is-visual-refresh_c6tup_djrxv_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_djrxv_130):hover.awsui_body-cell-first-row_c6tup_djrxv_145 > .awsui_body-cell-editor_c6tup_djrxv_255 {
405
+ .awsui_body-cell-editable_c6tup_xpjfg_130.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover.awsui_body-cell-first-row_c6tup_xpjfg_145 > .awsui_body-cell-success_c6tup_xpjfg_260, .awsui_body-cell-editable_c6tup_xpjfg_130.awsui_is-visual-refresh_c6tup_xpjfg_115:not(#\9):not(.awsui_body-cell-edit-active_c6tup_xpjfg_130):hover.awsui_body-cell-first-row_c6tup_xpjfg_145 > .awsui_body-cell-editor_c6tup_xpjfg_255 {
390
406
  padding-top: var(--border-divider-list-width-um3zli, 1px);
391
407
  }
@@ -2,33 +2,33 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "body-cell": "awsui_body-cell_c6tup_djrxv_93",
6
- "body-cell-wrap": "awsui_body-cell-wrap_c6tup_djrxv_103",
7
- "is-visual-refresh": "awsui_is-visual-refresh_c6tup_djrxv_115",
8
- "has-striped-rows": "awsui_has-striped-rows_c6tup_djrxv_127",
9
- "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_djrxv_130",
10
- "body-cell-editable": "awsui_body-cell-editable_c6tup_djrxv_130",
11
- "has-striped-rows-sticky-cell-pad-left": "awsui_has-striped-rows-sticky-cell-pad-left_c6tup_djrxv_136",
12
- "has-selection": "awsui_has-selection_c6tup_djrxv_139",
13
- "body-cell-first-row": "awsui_body-cell-first-row_c6tup_djrxv_145",
14
- "body-cell-last-row": "awsui_body-cell-last-row_c6tup_djrxv_148",
15
- "body-cell-selected": "awsui_body-cell-selected_c6tup_djrxv_148",
16
- "has-footer": "awsui_has-footer_c6tup_djrxv_148",
17
- "body-cell-shaded": "awsui_body-cell-shaded_c6tup_djrxv_158",
18
- "sticky-cell": "awsui_sticky-cell_c6tup_djrxv_175",
19
- "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_c6tup_djrxv_183",
20
- "sticky-cell-last-right": "awsui_sticky-cell-last-right_c6tup_djrxv_200",
21
- "sticky-cell-last-left": "awsui_sticky-cell-last-left_c6tup_djrxv_204",
22
- "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_djrxv_227",
23
- "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_djrxv_231",
24
- "body-cell-success": "awsui_body-cell-success_c6tup_djrxv_255",
25
- "body-cell-editor": "awsui_body-cell-editor_c6tup_djrxv_255",
26
- "body-cell-success-form": "awsui_body-cell-success-form_c6tup_djrxv_277",
27
- "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_djrxv_277",
28
- "body-cell-success-row": "awsui_body-cell-success-row_c6tup_djrxv_286",
29
- "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_djrxv_286",
30
- "body-cell-success-controls": "awsui_body-cell-success-controls_c6tup_djrxv_296",
31
- "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_djrxv_296",
32
- "body-cell-has-success": "awsui_body-cell-has-success_c6tup_djrxv_315"
5
+ "body-cell": "awsui_body-cell_c6tup_xpjfg_93",
6
+ "body-cell-wrap": "awsui_body-cell-wrap_c6tup_xpjfg_103",
7
+ "is-visual-refresh": "awsui_is-visual-refresh_c6tup_xpjfg_115",
8
+ "has-striped-rows": "awsui_has-striped-rows_c6tup_xpjfg_127",
9
+ "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_xpjfg_130",
10
+ "body-cell-editable": "awsui_body-cell-editable_c6tup_xpjfg_130",
11
+ "has-striped-rows-sticky-cell-pad-left": "awsui_has-striped-rows-sticky-cell-pad-left_c6tup_xpjfg_136",
12
+ "has-selection": "awsui_has-selection_c6tup_xpjfg_139",
13
+ "body-cell-first-row": "awsui_body-cell-first-row_c6tup_xpjfg_145",
14
+ "body-cell-last-row": "awsui_body-cell-last-row_c6tup_xpjfg_148",
15
+ "body-cell-selected": "awsui_body-cell-selected_c6tup_xpjfg_148",
16
+ "has-footer": "awsui_has-footer_c6tup_xpjfg_148",
17
+ "body-cell-shaded": "awsui_body-cell-shaded_c6tup_xpjfg_158",
18
+ "sticky-cell": "awsui_sticky-cell_c6tup_xpjfg_175",
19
+ "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_c6tup_xpjfg_183",
20
+ "sticky-cell-last-right": "awsui_sticky-cell-last-right_c6tup_xpjfg_200",
21
+ "sticky-cell-last-left": "awsui_sticky-cell-last-left_c6tup_xpjfg_204",
22
+ "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_xpjfg_227",
23
+ "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_xpjfg_231",
24
+ "body-cell-editor": "awsui_body-cell-editor_c6tup_xpjfg_255",
25
+ "body-cell-success": "awsui_body-cell-success_c6tup_xpjfg_260",
26
+ "body-cell-success-form": "awsui_body-cell-success-form_c6tup_xpjfg_285",
27
+ "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_xpjfg_285",
28
+ "body-cell-success-row": "awsui_body-cell-success-row_c6tup_xpjfg_294",
29
+ "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_xpjfg_294",
30
+ "body-cell-success-controls": "awsui_body-cell-success-controls_c6tup_xpjfg_304",
31
+ "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_xpjfg_304",
32
+ "body-cell-has-success": "awsui_body-cell-has-success_c6tup_xpjfg_328"
33
33
  };
34
34