@dynatrace/strato-components 1.5.1 → 1.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/buttons/button/Button.css +16 -16
- package/buttons/button/Button.d.ts +4 -4
- package/buttons/button/Button.js +47 -34
- package/buttons/button/Button.sty.js +4 -4
- package/buttons/button/Label.d.ts +2 -2
- package/buttons/button/Label.js +8 -7
- package/buttons/button/Prefix.d.ts +2 -2
- package/buttons/button/Prefix.js +6 -15
- package/buttons/button/Suffix.d.ts +3 -3
- package/buttons/button/Suffix.js +6 -15
- package/buttons/intent-button/IntentButton.d.ts +2 -2
- package/buttons/intent-button/IntentButton.js +16 -21
- package/buttons/intent-button/useIntentButton.d.ts +4 -3
- package/content/progress/ProgressBar.css +71 -71
- package/content/progress/ProgressBar.d.ts +4 -5
- package/content/progress/ProgressBar.js +49 -41
- package/content/progress/ProgressBar.sty.js +5 -5
- package/content/progress/ProgressBarIcon.css +2 -2
- package/content/progress/ProgressBarIcon.d.ts +1 -2
- package/content/progress/ProgressBarIcon.js +6 -5
- package/content/progress/ProgressBarIcon.sty.js +1 -1
- package/content/progress/ProgressBarLabel.css +3 -3
- package/content/progress/ProgressBarLabel.d.ts +1 -2
- package/content/progress/ProgressBarLabel.js +8 -7
- package/content/progress/ProgressBarLabel.sty.js +1 -1
- package/content/progress/ProgressBarValue.css +5 -5
- package/content/progress/ProgressBarValue.d.ts +1 -2
- package/content/progress/ProgressBarValue.js +8 -7
- package/content/progress/ProgressBarValue.sty.js +1 -1
- package/content/progress/ProgressCircle.css +40 -40
- package/content/progress/ProgressCircle.d.ts +1 -2
- package/content/progress/ProgressCircle.js +60 -55
- package/content/progress/ProgressCircle.sty.js +5 -5
- package/content/progress/contexts/SharedProgressBarPropsContext.d.ts +1 -2
- package/content/progress/contexts/SharedProgressBarPropsContext.js +2 -12
- package/content/skeleton/Skeleton.css +6 -6
- package/content/skeleton/Skeleton.d.ts +2 -2
- package/content/skeleton/Skeleton.js +6 -5
- package/content/skeleton/Skeleton.sty.js +1 -1
- package/content/skeleton/SkeletonText.d.ts +2 -2
- package/content/skeleton/SkeletonText.js +9 -18
- package/core/components/app-root/AppRoot.d.ts +3 -3
- package/core/components/app-root/AppRoot.js +15 -24
- package/core/components/focus-scope/FocusScope.d.ts +1 -2
- package/core/components/focus-scope/FocusScope.js +7 -16
- package/core/contexts/FocusContext.d.ts +1 -0
- package/core/contexts/FocusContext.js +2 -1
- package/core/hooks/useFontsUpdated.js +1 -1
- package/core/hooks/useMergeRefs.d.ts +2 -2
- package/core/index.d.ts +2 -1
- package/core/index.js +3 -1
- package/core/providers/FocusProvider.d.ts +1 -2
- package/core/providers/FocusProvider.js +35 -18
- package/core/styles/focusRing.css +66 -66
- package/core/styles/focusRing.sty.js +2 -2
- package/core/styles/useFocusRing.d.ts +3 -3
- package/core/types/polymorph.d.ts +1 -1
- package/core/types/styling-props.d.ts +1 -1
- package/core/types/with-children.d.ts +1 -1
- package/core/utils/_is-string-children.d.ts +2 -2
- package/core/utils/_is-string-children.js +2 -12
- package/core/utils/can-receive-default-text-format.d.ts +9 -0
- package/core/utils/can-receive-default-text-format.js +31 -0
- package/core/utils/colorUtils.css +60 -60
- package/core/utils/colorUtils.sty.js +2 -2
- package/core/utils/get-inert-value.d.ts +8 -0
- package/core/utils/get-inert-value.js +31 -0
- package/esm/buttons/button/Button.css +16 -16
- package/esm/buttons/button/Button.js +49 -35
- package/esm/buttons/button/Button.js.map +2 -2
- package/esm/buttons/button/Button.sty.js +4 -4
- package/esm/buttons/button/Button.sty.js.map +1 -1
- package/esm/buttons/button/Label.js +8 -7
- package/esm/buttons/button/Label.js.map +2 -2
- package/esm/buttons/button/Prefix.js +6 -5
- package/esm/buttons/button/Prefix.js.map +2 -2
- package/esm/buttons/button/Suffix.js +6 -5
- package/esm/buttons/button/Suffix.js.map +2 -2
- package/esm/buttons/intent-button/IntentButton.js +16 -11
- package/esm/buttons/intent-button/IntentButton.js.map +2 -2
- package/esm/buttons/intent-button/useIntentButton.js +4 -1
- package/esm/buttons/intent-button/useIntentButton.js.map +2 -2
- package/esm/content/progress/ProgressBar.css +71 -71
- package/esm/content/progress/ProgressBar.js +53 -41
- package/esm/content/progress/ProgressBar.js.map +2 -2
- package/esm/content/progress/ProgressBar.sty.js +5 -5
- package/esm/content/progress/ProgressBar.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarIcon.css +2 -2
- package/esm/content/progress/ProgressBarIcon.js +6 -5
- package/esm/content/progress/ProgressBarIcon.js.map +2 -2
- package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
- package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarLabel.css +3 -3
- package/esm/content/progress/ProgressBarLabel.js +8 -7
- package/esm/content/progress/ProgressBarLabel.js.map +2 -2
- package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
- package/esm/content/progress/ProgressBarLabel.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarValue.css +5 -5
- package/esm/content/progress/ProgressBarValue.js +8 -7
- package/esm/content/progress/ProgressBarValue.js.map +2 -2
- package/esm/content/progress/ProgressBarValue.sty.js +1 -1
- package/esm/content/progress/ProgressBarValue.sty.js.map +1 -1
- package/esm/content/progress/ProgressCircle.css +40 -40
- package/esm/content/progress/ProgressCircle.js +60 -55
- package/esm/content/progress/ProgressCircle.js.map +2 -2
- package/esm/content/progress/ProgressCircle.sty.js +5 -5
- package/esm/content/progress/ProgressCircle.sty.js.map +1 -1
- package/esm/content/progress/contexts/SharedProgressBarPropsContext.js +2 -2
- package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map +2 -2
- package/esm/content/skeleton/Skeleton.css +6 -6
- package/esm/content/skeleton/Skeleton.js +6 -5
- package/esm/content/skeleton/Skeleton.js.map +2 -2
- package/esm/content/skeleton/Skeleton.sty.js +1 -1
- package/esm/content/skeleton/Skeleton.sty.js.map +1 -1
- package/esm/content/skeleton/SkeletonText.js +9 -8
- package/esm/content/skeleton/SkeletonText.js.map +2 -2
- package/esm/core/components/app-root/AppRoot.js +15 -14
- package/esm/core/components/app-root/AppRoot.js.map +2 -2
- package/esm/core/components/focus-scope/FocusScope.js +7 -6
- package/esm/core/components/focus-scope/FocusScope.js.map +2 -2
- package/esm/core/contexts/FocusContext.js +2 -1
- package/esm/core/contexts/FocusContext.js.map +2 -2
- package/esm/core/hooks/useFontsUpdated.js +1 -1
- package/esm/core/hooks/useFontsUpdated.js.map +2 -2
- package/esm/core/hooks/useMergeRefs.js +3 -1
- package/esm/core/hooks/useMergeRefs.js.map +2 -2
- package/esm/core/index.js +3 -1
- package/esm/core/index.js.map +2 -2
- package/esm/core/providers/FocusProvider.js +35 -8
- package/esm/core/providers/FocusProvider.js.map +2 -2
- package/esm/core/styles/focusRing.css +66 -66
- package/esm/core/styles/focusRing.sty.js +2 -2
- package/esm/core/styles/focusRing.sty.js.map +1 -1
- package/esm/core/styles/useFocusRing.js.map +1 -1
- package/esm/core/utils/_is-string-children.js +2 -2
- package/esm/core/utils/_is-string-children.js.map +2 -2
- package/esm/core/utils/can-receive-default-text-format.js +15 -0
- package/esm/core/utils/can-receive-default-text-format.js.map +7 -0
- package/esm/core/utils/colorUtils.css +60 -60
- package/esm/core/utils/colorUtils.sty.js +2 -2
- package/esm/core/utils/colorUtils.sty.js.map +1 -1
- package/esm/core/utils/get-inert-value.js +12 -0
- package/esm/core/utils/get-inert-value.js.map +7 -0
- package/esm/layouts/container/Container.css +4 -4
- package/esm/layouts/container/Container.js +7 -6
- package/esm/layouts/container/Container.js.map +2 -2
- package/esm/layouts/container/Container.sty.js +1 -1
- package/esm/layouts/container/Container.sty.js.map +1 -1
- package/esm/layouts/divider/Divider.css +6 -6
- package/esm/layouts/divider/Divider.js +3 -2
- package/esm/layouts/divider/Divider.js.map +2 -2
- package/esm/layouts/divider/Divider.sty.js +1 -1
- package/esm/layouts/divider/Divider.sty.js.map +1 -1
- package/esm/layouts/flex/Flex.js +6 -5
- package/esm/layouts/flex/Flex.js.map +2 -2
- package/esm/layouts/grid/Grid.js +6 -5
- package/esm/layouts/grid/Grid.js.map +2 -2
- package/esm/layouts/surface/Surface.css +39 -39
- package/esm/layouts/surface/Surface.js +17 -14
- package/esm/layouts/surface/Surface.js.map +2 -2
- package/esm/layouts/surface/Surface.sty.js +2 -2
- package/esm/layouts/surface/Surface.sty.js.map +1 -1
- package/esm/layouts/surface/variables.sty.js +1 -1
- package/esm/layouts/surface/variables.sty.js.map +1 -1
- package/esm/styles/colorUtils.css +60 -60
- package/esm/styles/colorUtils.sty.js +2 -2
- package/esm/styles/colorUtils.sty.js.map +1 -1
- package/esm/styles/container.css +47 -47
- package/esm/styles/container.sty.js +2 -2
- package/esm/styles/container.sty.js.map +1 -1
- package/esm/styles/ellipsis.css +1 -1
- package/esm/styles/ellipsis.sty.js +1 -1
- package/esm/styles/ellipsis.sty.js.map +1 -1
- package/esm/styles/field.css +153 -153
- package/esm/styles/field.sty.js +2 -2
- package/esm/styles/field.sty.js.map +1 -1
- package/esm/styles/getFlexStyles.js.map +1 -1
- package/esm/styles/getGridStyles.js.map +1 -1
- package/esm/styles/getLayoutSizeStyles.js.map +1 -1
- package/esm/styles/sprinkles.css +262 -262
- package/esm/styles/sprinkles.sty.js +1 -1
- package/esm/styles/sprinkles.sty.js.map +1 -1
- package/esm/styles/textStyle.css +8 -8
- package/esm/styles/textStyle.sty.js +1 -1
- package/esm/styles/textStyle.sty.js.map +1 -1
- package/esm/typography/block-quote/Blockquote.css +2 -2
- package/esm/typography/block-quote/Blockquote.js +6 -5
- package/esm/typography/block-quote/Blockquote.js.map +2 -2
- package/esm/typography/block-quote/Blockquote.sty.js +1 -1
- package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
- package/esm/typography/code/Code.css +1 -1
- package/esm/typography/code/Code.js +6 -5
- package/esm/typography/code/Code.js.map +2 -2
- package/esm/typography/code/Code.sty.js +1 -1
- package/esm/typography/code/Code.sty.js.map +1 -1
- package/esm/typography/emphasis/Emphasis.css +1 -1
- package/esm/typography/emphasis/Emphasis.js +6 -5
- package/esm/typography/emphasis/Emphasis.js.map +2 -2
- package/esm/typography/emphasis/Emphasis.sty.js +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
- package/esm/typography/external-link/ExternalLink.css +6 -6
- package/esm/typography/external-link/ExternalLink.js +22 -16
- package/esm/typography/external-link/ExternalLink.js.map +2 -2
- package/esm/typography/external-link/ExternalLink.sty.js +1 -1
- package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
- package/esm/typography/heading/Heading.css +7 -7
- package/esm/typography/heading/Heading.js +6 -5
- package/esm/typography/heading/Heading.js.map +2 -2
- package/esm/typography/heading/Heading.sty.js +1 -1
- package/esm/typography/heading/Heading.sty.js.map +1 -1
- package/esm/typography/highlight/Highlight.css +1 -1
- package/esm/typography/highlight/Highlight.js +31 -18
- package/esm/typography/highlight/Highlight.js.map +3 -3
- package/esm/typography/highlight/Highlight.sty.js +1 -1
- package/esm/typography/highlight/Highlight.sty.js.map +1 -1
- package/esm/typography/link/Link.css +4 -4
- package/esm/typography/link/Link.js +6 -5
- package/esm/typography/link/Link.js.map +2 -2
- package/esm/typography/link/Link.sty.js +1 -1
- package/esm/typography/link/Link.sty.js.map +1 -1
- package/esm/typography/list/List.css +4 -4
- package/esm/typography/list/List.js +14 -9
- package/esm/typography/list/List.js.map +2 -2
- package/esm/typography/list/List.sty.js +2 -2
- package/esm/typography/list/List.sty.js.map +1 -1
- package/esm/typography/paragraph/Paragraph.css +3 -3
- package/esm/typography/paragraph/Paragraph.js +6 -5
- package/esm/typography/paragraph/Paragraph.js.map +2 -2
- package/esm/typography/paragraph/Paragraph.sty.js +1 -1
- package/esm/typography/paragraph/Paragraph.sty.js.map +1 -1
- package/esm/typography/strikethrough/Strikethrough.css +1 -1
- package/esm/typography/strikethrough/Strikethrough.js +6 -5
- package/esm/typography/strikethrough/Strikethrough.js.map +2 -2
- package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
- package/esm/typography/strong/Strong.css +1 -1
- package/esm/typography/strong/Strong.js +6 -5
- package/esm/typography/strong/Strong.js.map +2 -2
- package/esm/typography/strong/Strong.sty.js +1 -1
- package/esm/typography/strong/Strong.sty.js.map +1 -1
- package/esm/typography/text/Text.css +3 -3
- package/esm/typography/text/Text.js +6 -5
- package/esm/typography/text/Text.js.map +2 -2
- package/esm/typography/text/Text.sty.js +1 -1
- package/esm/typography/text/Text.sty.js.map +1 -1
- package/esm/typography/text-ellipsis/TextEllipsis.css +6 -6
- package/esm/typography/text-ellipsis/TextEllipsis.js +12 -11
- package/esm/typography/text-ellipsis/TextEllipsis.js.map +2 -2
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +1 -1
- package/layouts/container/Container.css +4 -4
- package/layouts/container/Container.js +7 -6
- package/layouts/container/Container.sty.js +1 -1
- package/layouts/divider/Divider.css +6 -6
- package/layouts/divider/Divider.d.ts +1 -2
- package/layouts/divider/Divider.js +3 -2
- package/layouts/divider/Divider.sty.js +1 -1
- package/layouts/flex/Flex.js +6 -5
- package/layouts/grid/Grid.d.ts +1 -1
- package/layouts/grid/Grid.js +6 -5
- package/layouts/surface/Surface.css +39 -39
- package/layouts/surface/Surface.js +17 -14
- package/layouts/surface/Surface.sty.js +2 -2
- package/layouts/surface/variables.sty.js +1 -1
- package/layouts/types/layout.types.d.ts +1 -1
- package/package.json +2 -2
- package/styles/colorUtils.css +60 -60
- package/styles/colorUtils.sty.js +2 -2
- package/styles/container.css +47 -47
- package/styles/container.sty.js +2 -2
- package/styles/ellipsis.css +1 -1
- package/styles/ellipsis.sty.js +1 -1
- package/styles/field.css +153 -153
- package/styles/field.sty.js +2 -2
- package/styles/getFlexStyles.d.ts +17 -17
- package/styles/getGridStyles.d.ts +22 -22
- package/styles/getLayoutSizeStyles.d.ts +1 -1
- package/styles/sprinkles.css +262 -262
- package/styles/sprinkles.sty.js +1 -1
- package/styles/textStyle.css +8 -8
- package/styles/textStyle.sty.js +1 -1
- package/typography/block-quote/Blockquote.css +2 -2
- package/typography/block-quote/Blockquote.d.ts +1 -2
- package/typography/block-quote/Blockquote.js +6 -5
- package/typography/block-quote/Blockquote.sty.js +1 -1
- package/typography/code/Code.css +1 -1
- package/typography/code/Code.d.ts +1 -2
- package/typography/code/Code.js +6 -5
- package/typography/code/Code.sty.js +1 -1
- package/typography/emphasis/Emphasis.css +1 -1
- package/typography/emphasis/Emphasis.d.ts +1 -2
- package/typography/emphasis/Emphasis.js +6 -5
- package/typography/emphasis/Emphasis.sty.js +1 -1
- package/typography/external-link/ExternalLink.css +6 -6
- package/typography/external-link/ExternalLink.d.ts +2 -2
- package/typography/external-link/ExternalLink.js +22 -16
- package/typography/external-link/ExternalLink.sty.js +1 -1
- package/typography/heading/Heading.css +7 -7
- package/typography/heading/Heading.d.ts +1 -2
- package/typography/heading/Heading.js +6 -5
- package/typography/heading/Heading.sty.js +1 -1
- package/typography/highlight/Highlight.css +1 -1
- package/typography/highlight/Highlight.d.ts +1 -1
- package/typography/highlight/Highlight.js +21 -17
- package/typography/highlight/Highlight.sty.js +1 -1
- package/typography/link/Link.css +4 -4
- package/typography/link/Link.d.ts +1 -1
- package/typography/link/Link.js +6 -5
- package/typography/link/Link.sty.js +1 -1
- package/typography/list/List.css +4 -4
- package/typography/list/List.d.ts +1 -2
- package/typography/list/List.js +10 -9
- package/typography/list/List.sty.js +2 -2
- package/typography/paragraph/Paragraph.css +3 -3
- package/typography/paragraph/Paragraph.d.ts +1 -2
- package/typography/paragraph/Paragraph.js +6 -5
- package/typography/paragraph/Paragraph.sty.js +1 -1
- package/typography/strikethrough/Strikethrough.css +1 -1
- package/typography/strikethrough/Strikethrough.d.ts +1 -2
- package/typography/strikethrough/Strikethrough.js +6 -5
- package/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/typography/strong/Strong.css +1 -1
- package/typography/strong/Strong.d.ts +1 -2
- package/typography/strong/Strong.js +6 -5
- package/typography/strong/Strong.sty.js +1 -1
- package/typography/text/Text.css +3 -3
- package/typography/text/Text.js +6 -5
- package/typography/text/Text.sty.js +1 -1
- package/typography/text-ellipsis/TextEllipsis.css +6 -6
- package/typography/text-ellipsis/TextEllipsis.d.ts +2 -2
- package/typography/text-ellipsis/TextEllipsis.js +12 -11
- package/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
2
3
|
import { Flex } from "../../layouts/flex/Flex.js";
|
|
3
4
|
const Suffix = forwardRef(
|
|
4
5
|
(props, forwardedRef) => {
|
|
@@ -8,16 +9,16 @@ const Suffix = forwardRef(
|
|
|
8
9
|
style: consumerStyle,
|
|
9
10
|
"data-testid": dataTestId
|
|
10
11
|
} = props;
|
|
11
|
-
return /* @__PURE__ */
|
|
12
|
+
return /* @__PURE__ */ jsx(
|
|
12
13
|
Flex,
|
|
13
14
|
{
|
|
14
15
|
"data-testid": dataTestId,
|
|
15
16
|
gap: 0,
|
|
16
17
|
ref: forwardedRef,
|
|
17
18
|
className: consumerClassName,
|
|
18
|
-
style: consumerStyle
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
style: consumerStyle,
|
|
20
|
+
children
|
|
21
|
+
}
|
|
21
22
|
);
|
|
22
23
|
}
|
|
23
24
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/buttons/button/Suffix.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\n\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\n//#region Typings\n/**\n * Accepted properties for the Button Suffix.\n * @public\n */\nexport interface ButtonSuffixProps extends StylingProps, DataTestId {\n /** Elements to be displayed in the Button Suffix slot. */\n children: ReactNode;\n}\n//#endregion\n\n/**\n * Button Suffix component.\n * @public\n */\nexport const Suffix = forwardRef<HTMLDivElement, ButtonSuffixProps>(\n (props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n }: ButtonSuffixProps = props;\n\n return (\n <Flex\n data-testid={dataTestId}\n gap={0}\n ref={forwardedRef}\n className={consumerClassName}\n style={consumerStyle}\n >\n {children}\n </Flex>\n );\n },\n);\n\n(Suffix as typeof Suffix & { displayName: string }).displayName =\n 'Button.Suffix';\n"],
|
|
5
|
+
"mappings": "AA+BM;AA/BN,SAAS,kBAAkC;AAI3C,SAAS,YAAY;AAiBd,MAAM,SAAS;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,IACjB,IAAuB;AAEvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QAEN;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAClD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
2
3
|
import { useIntl } from "react-intl";
|
|
3
4
|
import { OpenWithIcon } from "@dynatrace/strato-icons";
|
|
4
5
|
import { useIntentButton } from "./useIntentButton.js";
|
|
@@ -38,7 +39,7 @@ const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
|
|
|
38
39
|
onClickProp
|
|
39
40
|
);
|
|
40
41
|
if (disabled) {
|
|
41
|
-
return /* @__PURE__ */
|
|
42
|
+
return /* @__PURE__ */ jsxs(
|
|
42
43
|
Button,
|
|
43
44
|
{
|
|
44
45
|
disabled: true,
|
|
@@ -49,13 +50,15 @@ const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
|
|
|
49
50
|
className: consumerClassName,
|
|
50
51
|
style: consumerStyle,
|
|
51
52
|
readOnly,
|
|
52
|
-
...remainingProps
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
...remainingProps,
|
|
54
|
+
children: [
|
|
55
|
+
label,
|
|
56
|
+
/* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(OpenWithIcon, {}) })
|
|
57
|
+
]
|
|
58
|
+
}
|
|
56
59
|
);
|
|
57
60
|
}
|
|
58
|
-
return /* @__PURE__ */
|
|
61
|
+
return /* @__PURE__ */ jsxs(
|
|
59
62
|
Button,
|
|
60
63
|
{
|
|
61
64
|
as: "a",
|
|
@@ -68,10 +71,12 @@ const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
|
|
|
68
71
|
style: consumerStyle,
|
|
69
72
|
readOnly,
|
|
70
73
|
...remainingProps,
|
|
71
|
-
...intentButtonProps
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
74
|
+
...intentButtonProps,
|
|
75
|
+
children: [
|
|
76
|
+
label,
|
|
77
|
+
/* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(OpenWithIcon, {}) })
|
|
78
|
+
]
|
|
79
|
+
}
|
|
75
80
|
);
|
|
76
81
|
});
|
|
77
82
|
IntentButton.displayName = "IntentButton";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/buttons/intent-button/IntentButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { OpenWithIcon } from '@dynatrace/strato-icons';\nimport { type IntentPayload } from '@dynatrace-sdk/navigation';\n\nimport { useIntentButton } from './useIntentButton.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { Button, type ButtonOwnProps } from '../button/Button.js';\n\n//#region Typings\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface IntentButtonPropsBase\n extends Omit<ButtonOwnProps, 'loading' | 'type'>,\n AriaLabelingProps,\n DOMProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** Intent payload passed between apps.*/\n payload: IntentPayload;\n\n /** Intended for setting a custom button label. When nothing is set, no label is shown. */\n children?: ReactNode;\n}\n\n/**\n * Merge own props with ID props.\n * Props for recommending an app to receive the intent. Either both properties or none of them needs to be specified.\n * @public\n */\nexport type IntentButtonProps = IntentButtonPropsBase &\n (\n | {\n appId?: never;\n intentId?: never;\n }\n | {\n /**\n * ID of the app that will be launched to handle the intent.\n */\n appId: string;\n\n /**\n * ID of the action that will be passed to the app.\n */\n intentId: string;\n }\n );\n\n//#endregion\n\n/**\n * The `IntentButton` is a dedicated button component for sending\n * {@link https://developer.dynatrace.com/develop/intents/ | intents}.\n * It takes care of opening the intent dialog. An `IntentButton` only works\n * in the AppShell context.\n * @public\n */\nexport const IntentButton = /* @__PURE__ */ forwardRef<\n HTMLAnchorElement,\n IntentButtonProps\n>((props, forwardedRef) => {\n const intl = useIntl();\n const {\n children,\n payload,\n appId,\n intentId,\n disabled,\n onClick: onClickProp,\n 'aria-label': ariaLabelProp,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n // eslint-disable-next-line deprecation/deprecation\n readOnly,\n ...remainingProps\n }: IntentButtonProps = props;\n\n let label = children;\n if (typeof label === 'string') {\n label = label.trim();\n }\n\n const ariaLabel =\n ariaLabelProp ||\n intl.formatMessage({\n description: 'Intent button open label',\n defaultMessage: 'Open with',\n id: 'JQOGuaGgqJObmSY1',\n });\n\n const intentButtonProps = useIntentButton(\n payload,\n appId,\n intentId,\n onClickProp,\n );\n\n // polymorph it back to a button in case it's disabled.\n // Keep the button focusable if disabled for better screen reader support.\n if (disabled) {\n return (\n <Button\n disabled\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line deprecated-jsx-props/deprecated-props\n readOnly={readOnly}\n {...remainingProps}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n }\n\n return (\n <Button\n as=\"a\"\n ref={forwardedRef}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel ?? label}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line deprecated-jsx-props/deprecated-props\n readOnly={readOnly}\n {...remainingProps}\n {...intentButtonProps}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n});\n\n(IntentButton as typeof IntentButton & { displayName: string }).displayName =\n 'IntentButton';\n"],
|
|
5
|
+
"mappings": "AAiHM,SAcI,KAdJ;AAjHN,SAAS,kBAAkC;AAC3C,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,uBAAuB;AAMhC,SAAS,cAAmC;AAsDrC,MAAM,eAA+B,2BAG1C,CAAC,OAAO,iBAAiB;AACzB,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB;AAAA,IACA,GAAG;AAAA,EACL,IAAuB;AAEvB,MAAI,QAAQ;AACZ,MAAI,OAAO,UAAU,UAAU;AAC7B,YAAQ,MAAM,KAAK;AAAA,EACrB;AAEA,QAAM,YACJ,iBACA,KAAK,cAAc;AAAA,IACjB,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,WAAW;AAAA,QACX,OAAO;AAAA,QAEP;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACD,oBAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,MACX,OAAO;AAAA,MAEP;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,aAA+D,cAC9D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/buttons/intent-button/useIntentButton.ts"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "AAAA,
|
|
4
|
+
"sourcesContent": ["import {\n useCallback,\n useMemo,\n type MouseEventHandler as ReactMouseEventHandler,\n type MouseEvent as ReactMouseEvent,\n type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport {\n getIntentLink,\n type IntentPayload,\n sendIntent,\n} from '@dynatrace-sdk/navigation';\n\n/**\n * return shared intent button logic\n * @param payload - an intent payload\n * @returns intentLink and triggerIntent\n * @internal\n */\nexport function useIntentButton(\n payload: IntentPayload,\n appId?: string,\n intentId?: string,\n onClickProp?: ReactMouseEventHandler,\n) {\n /**\n * Contains the url created via the getIntentLink SDK method.\n * @returns a url to be used\n */\n const href = useMemo(\n () =>\n // SDK documentation is invalid. appId & intentId are in fact mandatory.\n // This is why the ternary is necessary to ensure to call the correct signature.\n appId && intentId\n ? getIntentLink(payload, appId, intentId)\n : getIntentLink(payload),\n [appId, intentId, payload],\n );\n\n /**\n * Sends intent to shell.\n * @returns void\n */\n const triggerIntent = useCallback(() => {\n // SDK documentation is invalid. appId & intentId are in fact mandatory.\n // This is why the ternary is necessary to ensure to call the correct signature.\n appId && intentId\n ? sendIntent(payload, {\n recommendedAppId: appId,\n recommendedIntentId: intentId,\n })\n : sendIntent(payload);\n }, [appId, intentId, payload]);\n\n /**\n * Mouse event handler, send intent on left button click without using any modifiers.\n */\n const onClick = useCallback(\n (event: ReactMouseEvent) => {\n onClickProp?.(event);\n if (event.isDefaultPrevented()) {\n // already handled\n return;\n }\n\n const nativeEvent = event.nativeEvent;\n\n if (\n nativeEvent.button !== 0 ||\n nativeEvent.metaKey ||\n nativeEvent.ctrlKey ||\n nativeEvent.shiftKey\n ) {\n return; // let the browser handle the event\n }\n\n event.preventDefault();\n triggerIntent();\n },\n [onClickProp, triggerIntent],\n );\n\n /**\n * KeyDown event handler, sent intent on Space and ENTER\n */\n const onKeyDown = useCallback(\n (event: ReactKeyboardEvent) => {\n const nativeEvent = event.nativeEvent;\n\n if (nativeEvent.code !== 'Space' && nativeEvent.code !== 'Enter') {\n return; // let the browser handle the event\n }\n\n event.preventDefault();\n\n // open intent link in new tab while pressing ctrl/meta\n if (nativeEvent.metaKey || nativeEvent.ctrlKey) {\n window.open(href);\n return;\n }\n\n // open intent link in new window\n if (nativeEvent.shiftKey) {\n window.open(href, '_blank', 'menubar');\n return;\n }\n\n // let the shell handle the intent\n triggerIntent();\n },\n [href, triggerIntent],\n );\n\n return { href, onClick, onKeyDown };\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAEP;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AAQA,SAAS,gBACd,SACA,OACA,UACA,aACA;AAKA,QAAM,OAAO;AAAA,IACX;AAAA;AAAA;AAAA,MAGE,SAAS,WACL,cAAc,SAAS,OAAO,QAAQ,IACtC,cAAc,OAAO;AAAA;AAAA,IAC3B,CAAC,OAAO,UAAU,OAAO;AAAA,EAC3B;AAMA,QAAM,gBAAgB,YAAY,MAAM;AAGtC,aAAS,WACL,WAAW,SAAS;AAAA,MAClB,kBAAkB;AAAA,MAClB,qBAAqB;AAAA,IACvB,CAAC,IACD,WAAW,OAAO;AAAA,EACxB,GAAG,CAAC,OAAO,UAAU,OAAO,CAAC;AAK7B,QAAM,UAAU;AAAA,IACd,CAAC,UAA2B;AAC1B,oBAAc,KAAK;AACnB,UAAI,MAAM,mBAAmB,GAAG;AAE9B;AAAA,MACF;AAEA,YAAM,cAAc,MAAM;AAE1B,UACE,YAAY,WAAW,KACvB,YAAY,WACZ,YAAY,WACZ,YAAY,UACZ;AACA;AAAA,MACF;AAEA,YAAM,eAAe;AACrB,oBAAc;AAAA,IAChB;AAAA,IACA,CAAC,aAAa,aAAa;AAAA,EAC7B;AAKA,QAAM,YAAY;AAAA,IAChB,CAAC,UAA8B;AAC7B,YAAM,cAAc,MAAM;AAE1B,UAAI,YAAY,SAAS,WAAW,YAAY,SAAS,SAAS;AAChE;AAAA,MACF;AAEA,YAAM,eAAe;AAGrB,UAAI,YAAY,WAAW,YAAY,SAAS;AAC9C,eAAO,KAAK,IAAI;AAChB;AAAA,MACF;AAGA,UAAI,YAAY,UAAU;AACxB,eAAO,KAAK,MAAM,UAAU,SAAS;AACrC;AAAA,MACF;AAGA,oBAAc;AAAA,IAChB;AAAA,IACA,CAAC,MAAM,aAAa;AAAA,EACtB;AAEA,SAAO,EAAE,MAAM,SAAS,UAAU;AACpC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes _13n9uwh0-1-
|
|
1
|
+
@keyframes _13n9uwh0-1-6-2 {
|
|
2
2
|
0% {
|
|
3
3
|
transform: translateX(-100%) scaleX(0);
|
|
4
4
|
}
|
|
@@ -6,92 +6,92 @@
|
|
|
6
6
|
transform: translateX(100%) scaleX(1.5);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
._13n9uwh5-1-
|
|
10
|
-
color: var(--_13n9uwh1-1-
|
|
11
|
-
}
|
|
12
|
-
._13n9uwhd-1-
|
|
13
|
-
--_13n9uwh1-1-
|
|
14
|
-
--_13n9uwh4-1-
|
|
15
|
-
--_13n9uwh2-1-
|
|
16
|
-
--_13n9uwh3-1-
|
|
17
|
-
}
|
|
18
|
-
._13n9uwhe-1-
|
|
19
|
-
--_13n9uwh1-1-
|
|
20
|
-
--_13n9uwh4-1-
|
|
21
|
-
--_13n9uwh2-1-
|
|
22
|
-
--_13n9uwh3-1-
|
|
23
|
-
}
|
|
24
|
-
._13n9uwhf-1-
|
|
25
|
-
--_13n9uwh1-1-
|
|
26
|
-
--_13n9uwh4-1-
|
|
27
|
-
--_13n9uwh2-1-
|
|
28
|
-
--_13n9uwh3-1-
|
|
29
|
-
}
|
|
30
|
-
._13n9uwhg-1-
|
|
31
|
-
--_13n9uwh1-1-
|
|
32
|
-
--_13n9uwh4-1-
|
|
33
|
-
--_13n9uwh2-1-
|
|
34
|
-
--_13n9uwh3-1-
|
|
35
|
-
}
|
|
36
|
-
._13n9uwhh-1-
|
|
37
|
-
--_13n9uwh1-1-
|
|
38
|
-
--_13n9uwh4-1-
|
|
39
|
-
--_13n9uwh2-1-
|
|
40
|
-
--_13n9uwh3-1-
|
|
9
|
+
._13n9uwh5-1-6-2 {
|
|
10
|
+
color: var(--_13n9uwh1-1-6-2);
|
|
11
|
+
}
|
|
12
|
+
._13n9uwhd-1-6-2 {
|
|
13
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
|
|
14
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
|
|
15
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
16
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-primary-accent, #454cc9);
|
|
17
|
+
}
|
|
18
|
+
._13n9uwhe-1-6-2 {
|
|
19
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
|
|
20
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
|
|
21
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
22
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-success-accent, #2c6360);
|
|
23
|
+
}
|
|
24
|
+
._13n9uwhf-1-6-2 {
|
|
25
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
|
|
26
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
|
|
27
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
28
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-warning-accent, #805100);
|
|
29
|
+
}
|
|
30
|
+
._13n9uwhg-1-6-2 {
|
|
31
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
|
|
32
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
|
|
33
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
34
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-critical-accent, #b80031);
|
|
35
|
+
}
|
|
36
|
+
._13n9uwhh-1-6-2 {
|
|
37
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
|
|
38
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
|
|
39
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
40
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-neutral-accent, #545587);
|
|
41
41
|
color: var(--dt-colors-text-neutral-default, #2b2a58);
|
|
42
42
|
}
|
|
43
|
-
._13n9uwhi-1-
|
|
44
|
-
--_13n9uwh1-1-
|
|
45
|
-
--_13n9uwh4-1-
|
|
46
|
-
--_13n9uwh2-1-
|
|
47
|
-
--_13n9uwh3-1-
|
|
48
|
-
}
|
|
49
|
-
._13n9uwhj-1-
|
|
50
|
-
--_13n9uwh1-1-
|
|
51
|
-
--_13n9uwh4-1-
|
|
52
|
-
--_13n9uwh2-1-
|
|
53
|
-
--_13n9uwh3-1-
|
|
54
|
-
}
|
|
55
|
-
._13n9uwhk-1-
|
|
56
|
-
--_13n9uwh1-1-
|
|
57
|
-
--_13n9uwh4-1-
|
|
58
|
-
--_13n9uwh2-1-
|
|
59
|
-
--_13n9uwh3-1-
|
|
60
|
-
}
|
|
61
|
-
._13n9uwhl-1-
|
|
62
|
-
--_13n9uwh1-1-
|
|
63
|
-
--_13n9uwh4-1-
|
|
64
|
-
--_13n9uwh2-1-
|
|
65
|
-
--_13n9uwh3-1-
|
|
66
|
-
}
|
|
67
|
-
._13n9uwhm-1-
|
|
68
|
-
--_13n9uwh1-1-
|
|
69
|
-
--_13n9uwh4-1-
|
|
70
|
-
--_13n9uwh2-1-
|
|
71
|
-
--_13n9uwh3-1-
|
|
72
|
-
}
|
|
73
|
-
._13n9uwhn-1-
|
|
43
|
+
._13n9uwhi-1-6-2 {
|
|
44
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
45
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
46
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
|
|
47
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
|
|
48
|
+
}
|
|
49
|
+
._13n9uwhj-1-6-2 {
|
|
50
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
51
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
52
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
|
|
53
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
|
|
54
|
+
}
|
|
55
|
+
._13n9uwhk-1-6-2 {
|
|
56
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
57
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
58
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-warning-on-accent-disabled, #27202533);
|
|
59
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-warning-on-accent-default, #272025);
|
|
60
|
+
}
|
|
61
|
+
._13n9uwhl-1-6-2 {
|
|
62
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
63
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
64
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
|
|
65
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
|
|
66
|
+
}
|
|
67
|
+
._13n9uwhm-1-6-2 {
|
|
68
|
+
--_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
69
|
+
--_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
70
|
+
--_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
|
|
71
|
+
--_13n9uwh3-1-6-2: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
|
|
72
|
+
}
|
|
73
|
+
._13n9uwhn-1-6-2 {
|
|
74
74
|
width: 100%;
|
|
75
75
|
border-radius: var(--dt-borders-radius-container-subdued, 8px);
|
|
76
76
|
overflow: hidden;
|
|
77
77
|
position: relative;
|
|
78
|
-
background: var(--_13n9uwh2-1-
|
|
78
|
+
background: var(--_13n9uwh2-1-6-2);
|
|
79
79
|
}
|
|
80
|
-
._13n9uwho-1-
|
|
80
|
+
._13n9uwho-1-6-2 {
|
|
81
81
|
height: 6px;
|
|
82
82
|
}
|
|
83
|
-
._13n9uwhp-1-
|
|
83
|
+
._13n9uwhp-1-6-2 {
|
|
84
84
|
height: 8px;
|
|
85
85
|
}
|
|
86
|
-
._13n9uwhq-1-
|
|
86
|
+
._13n9uwhq-1-6-2 {
|
|
87
87
|
height: 100%;
|
|
88
88
|
transition-duration: var(--dt-timings-fast-default, 170ms);
|
|
89
89
|
transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
|
|
90
|
-
background-color: var(--_13n9uwh3-1-
|
|
90
|
+
background-color: var(--_13n9uwh3-1-6-2);
|
|
91
91
|
}
|
|
92
|
-
._13n9uwhr-1-
|
|
92
|
+
._13n9uwhr-1-6-2 {
|
|
93
93
|
width: 100%;
|
|
94
|
-
animation-name: _13n9uwh0-1-
|
|
94
|
+
animation-name: _13n9uwh0-1-6-2;
|
|
95
95
|
animation-duration: var(--dt-timings-slow-gentle, 800ms);
|
|
96
96
|
animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
|
|
97
97
|
animation-iteration-count: infinite;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1
2
|
import clsx from "clsx";
|
|
2
|
-
import
|
|
3
|
+
import {
|
|
4
|
+
forwardRef,
|
|
5
|
+
useId,
|
|
6
|
+
Children
|
|
7
|
+
} from "react";
|
|
3
8
|
import { isElement } from "react-is";
|
|
4
9
|
import { SharedProgressBarPropsContext } from "./contexts/SharedProgressBarPropsContext.js";
|
|
5
10
|
import { useProgressAriaProps } from "./hooks/useProgressAriaProps.js";
|
|
@@ -22,7 +27,7 @@ function getProgressBarSlots(children) {
|
|
|
22
27
|
label: null,
|
|
23
28
|
icon: null
|
|
24
29
|
};
|
|
25
|
-
|
|
30
|
+
Children.forEach(children, (child) => {
|
|
26
31
|
if (isElement(child)) {
|
|
27
32
|
switch (child.type) {
|
|
28
33
|
case ProgressBarLabel:
|
|
@@ -88,7 +93,7 @@ const _ProgressBar = forwardRef(
|
|
|
88
93
|
const percentage = (value - min) / (max - min);
|
|
89
94
|
progressStyles["width"] = `${Math.round(percentage * 100)}%`;
|
|
90
95
|
}
|
|
91
|
-
return /* @__PURE__ */
|
|
96
|
+
return /* @__PURE__ */ jsx(SharedProgressBarPropsContext.Provider, { value: { id, density }, children: /* @__PURE__ */ jsxs(
|
|
92
97
|
Flex,
|
|
93
98
|
{
|
|
94
99
|
flexDirection: "column",
|
|
@@ -110,44 +115,51 @@ const _ProgressBar = forwardRef(
|
|
|
110
115
|
"data-dtrum-mask": dataDtrumMask,
|
|
111
116
|
"data-dtrum-allow": dataDtrumAllow,
|
|
112
117
|
ref: forwardedRef,
|
|
113
|
-
...forwardProps
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
118
|
+
...forwardProps,
|
|
119
|
+
children: [
|
|
120
|
+
/* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", gap: 8, children: [
|
|
121
|
+
density === "condensed" ? /* @__PURE__ */ jsxs(
|
|
122
|
+
Flex,
|
|
123
|
+
{
|
|
124
|
+
justifyContent: "space-between",
|
|
125
|
+
alignItems: "flex-end",
|
|
126
|
+
flex: 1,
|
|
127
|
+
gap: 16,
|
|
128
|
+
minWidth: 0,
|
|
129
|
+
children: [
|
|
130
|
+
slots.label,
|
|
131
|
+
slots.value
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
) : slots.label,
|
|
135
|
+
slots.icon
|
|
136
|
+
] }),
|
|
137
|
+
/* @__PURE__ */ jsx(
|
|
138
|
+
"div",
|
|
139
|
+
{
|
|
140
|
+
className: progressCSS({
|
|
141
|
+
size: density
|
|
142
|
+
}),
|
|
143
|
+
id,
|
|
144
|
+
...progressAriaProps,
|
|
145
|
+
...ariaLabelingProps,
|
|
146
|
+
children: /* @__PURE__ */ jsx(
|
|
147
|
+
"div",
|
|
148
|
+
{
|
|
149
|
+
className: clsx(
|
|
150
|
+
progressBarFillCSS({
|
|
151
|
+
indeterminate: isIndeterminate
|
|
152
|
+
})
|
|
153
|
+
),
|
|
154
|
+
style: progressStyles
|
|
155
|
+
}
|
|
156
|
+
)
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
density === "default" && slots.value
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
) });
|
|
151
163
|
}
|
|
152
164
|
);
|
|
153
165
|
_ProgressBar.displayName = "ProgressBar";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/content/progress/ProgressBar.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable deprecation/deprecation */\n\nimport clsx from 'clsx';\nimport
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable deprecation/deprecation */\n\nimport clsx from 'clsx';\nimport {\n type CSSProperties,\n forwardRef,\n useId,\n type ReactNode,\n Children,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { SharedProgressBarPropsContext } from './contexts/SharedProgressBarPropsContext.js';\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport {\n progressBarFillCSS,\n progressCSS,\n progressRoot,\n} from './ProgressBar.sty.js';\nimport { ProgressBarIcon } from './ProgressBarIcon.js';\nimport { ProgressBarLabel } from './ProgressBarLabel.js';\nimport { ProgressBarValue } from './ProgressBarValue.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { useContainerColoring } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\n\n/**\n * Accepted properties for ProgressBar.\n * @public\n */\nexport interface ProgressBarProps\n extends WithChildren,\n DOMProps,\n AriaLabelingProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * The current value.\n * @defaultValue 'indeterminate'\n */\n value?: number | 'indeterminate';\n /**\n * The minimum allowed value.\n * @defaultValue 0\n */\n min?: number;\n /**\n * The maximum allowed value.\n * @defaultValue 100\n */\n max?: number;\n /**\n * Controls the density of the rendering.\n * @defaultValue 'default'\n */\n density?: 'default' | 'condensed';\n /**\n * Controls the color of the progress.\n * @defaultValue 'primary' or a container's color.\n */\n color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n /**\n * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n * By default, the value will be given as a percentage. If the value is not a percentage, you should provide aria-valuetext.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n * @defaultValue the value of the progress as percentage.\n */\n 'aria-valuetext'?: string;\n}\n\ntype ProgressBarSlots = {\n value?: ReactNode;\n label?: ReactNode;\n icon?: ReactNode;\n};\n\nfunction getProgressBarSlots(children: ReactNode) {\n const slots: ProgressBarSlots = {\n value: null,\n label: null,\n icon: null,\n };\n\n Children.forEach(children, (child) => {\n if (isElement(child)) {\n switch (child.type) {\n case ProgressBarLabel:\n slots.label = child;\n break;\n case ProgressBarIcon:\n slots.icon = child;\n break;\n case ProgressBarValue:\n default:\n slots.value = child;\n break;\n }\n } else {\n if (!slots.value) {\n slots.value = child;\n }\n }\n });\n\n return slots;\n}\n\nconst _ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n (props, forwardedRef) => {\n const {\n value: originalValue,\n max = 100,\n min = 0,\n density = 'default',\n color,\n children,\n id: propId,\n 'aria-valuetext': ariaValuetext,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n }: ProgressBarProps = props;\n\n const containerColoring = useContainerColoring();\n\n // for the color in the ProgressCircle the fallback logic is a bit different - usually\n // the fallback from the container is \"neutral\" - but in the case of the progress circle the default\n // fallback color is \"primary\"\n const fallbackColor = containerColoring.default\n ? 'primary'\n : containerColoring.color;\n\n const derivedColor = color ?? fallbackColor;\n const onAccent = containerColoring.variant === 'accent';\n\n const slots = getProgressBarSlots(children);\n const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n originalValue,\n min,\n max,\n ariaValuetext,\n );\n const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n const generatedId = useId();\n const id = propId ?? generatedId;\n\n if (\n !slots.label &&\n !ariaLabelingProps['aria-label'] &&\n !ariaLabelingProps['aria-labelledby']\n ) {\n process.env.NODE_ENV === 'development' &&\n // eslint-disable-next-line no-console\n console.warn(\n 'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n );\n }\n\n const progressStyles: CSSProperties = {};\n if (!isIndeterminate && value !== undefined) {\n const percentage = (value - min) / (max - min);\n progressStyles['width'] = `${Math.round(percentage * 100)}%`;\n }\n\n return (\n <SharedProgressBarPropsContext.Provider value={{ id, density }}>\n <Flex\n flexDirection=\"column\"\n gap={6}\n width=\"100%\"\n className={clsx(\n containerColorsCSS({\n color: derivedColor,\n variant: containerColoring.variant,\n }),\n\n progressRoot({\n onAccent,\n color: derivedColor,\n }),\n consumerClassName,\n )}\n style={consumerStyle}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n ref={forwardedRef}\n {...forwardProps}\n >\n <Flex justifyContent=\"space-between\" gap={8}>\n {density === 'condensed' ? (\n <Flex\n justifyContent=\"space-between\"\n alignItems=\"flex-end\"\n flex={1}\n gap={16}\n minWidth={0}\n >\n {slots.label}\n {slots.value}\n </Flex>\n ) : (\n slots.label\n )}\n {slots.icon}\n </Flex>\n <div\n className={progressCSS({\n size: density,\n })}\n id={id}\n {...progressAriaProps}\n {...ariaLabelingProps}\n >\n <div\n className={clsx(\n progressBarFillCSS({\n indeterminate: isIndeterminate,\n }),\n )}\n style={progressStyles}\n />\n </div>\n {density === 'default' && slots.value}\n </Flex>\n </SharedProgressBarPropsContext.Provider>\n );\n },\n);\n\n(_ProgressBar as typeof _ProgressBar & { displayName: string }).displayName =\n 'ProgressBar';\n\n/**\n * Use the `ProgressBar` component to show your users that a system operation such as downloading, uploading, or processing is progressing.\n * The `ProgressBar` can be used to visualize determinate or indeterminate progress.\n * @public\n */\nexport const ProgressBar = Object.assign(_ProgressBar, {\n Value: ProgressBarValue,\n Label: ProgressBarLabel,\n Icon: ProgressBarIcon,\n});\n"],
|
|
5
|
+
"mappings": "AA6Mc,SAuBF,KAvBE;AA3Md,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,qCAAqC;AAC9C,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAOpC,SAAS,4BAA4B;AACrC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AAqDnC,SAAS,oBAAoB,UAAqB;AAChD,QAAM,QAA0B;AAAA,IAC9B,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,QAAQ;AACd;AAAA,QACF,KAAK;AACH,gBAAM,OAAO;AACb;AAAA,QACF,KAAK;AAAA,QACL;AACE,gBAAM,QAAQ;AACd;AAAA,MACJ;AAAA,IACF,OAAO;AACL,UAAI,CAAC,MAAM,OAAO;AAChB,cAAM,QAAQ;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,eAAe;AAAA,EACnB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MACJ,kBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAsB;AAEtB,UAAM,oBAAoB,qBAAqB;AAK/C,UAAM,gBAAgB,kBAAkB,UACpC,YACA,kBAAkB;AAEtB,UAAM,eAAe,SAAS;AAC9B,UAAM,WAAW,kBAAkB,YAAY;AAE/C,UAAM,QAAQ,oBAAoB,QAAQ;AAC1C,UAAM,EAAE,OAAO,iBAAiB,kBAAkB,IAAI;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,UAAM,oBAAoB,qBAAqB,cAAc;AAC7D,UAAM,eAAe,oBAAoB,gBAAgB,iBAAiB;AAE1E,UAAM,cAAc,MAAM;AAC1B,UAAM,KAAK,UAAU;AAErB,QACE,CAAC,MAAM,SACP,CAAC,kBAAkB,YAAY,KAC/B,CAAC,kBAAkB,iBAAiB,GACpC;AACA;AAAA,MAEE,QAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACJ;AAEA,UAAM,iBAAgC,CAAC;AACvC,QAAI,CAAC,mBAAmB,UAAU,QAAW;AAC3C,YAAM,cAAc,QAAQ,QAAQ,MAAM;AAC1C,qBAAe,OAAO,IAAI,GAAG,KAAK,MAAM,aAAa,GAAG,CAAC;AAAA,IAC3D;AAEA,WACE,oBAAC,8BAA8B,UAA9B,EAAuC,OAAO,EAAE,IAAI,QAAQ,GAC3D;AAAA,MAAC;AAAA;AAAA,QACC,eAAc;AAAA,QACd,KAAK;AAAA,QACL,OAAM;AAAA,QACN,WAAW;AAAA,UACT,mBAAmB;AAAA,YACjB,OAAO;AAAA,YACP,SAAS,kBAAkB;AAAA,UAC7B,CAAC;AAAA,UAED,aAAa;AAAA,YACX;AAAA,YACA,OAAO;AAAA,UACT,CAAC;AAAA,UACD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACJ,GAAG;AAAA,QAEJ;AAAA,+BAAC,QAAK,gBAAe,iBAAgB,KAAK,GACvC;AAAA,wBAAY,cACX;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,YAAW;AAAA,gBACX,MAAM;AAAA,gBACN,KAAK;AAAA,gBACL,UAAU;AAAA,gBAET;AAAA,wBAAM;AAAA,kBACN,MAAM;AAAA;AAAA;AAAA,YACT,IAEA,MAAM;AAAA,YAEP,MAAM;AAAA,aACT;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,YAAY;AAAA,gBACrB,MAAM;AAAA,cACR,CAAC;AAAA,cACD;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cAEJ;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT,mBAAmB;AAAA,sBACjB,eAAe;AAAA,oBACjB,CAAC;AAAA,kBACH;AAAA,kBACA,OAAO;AAAA;AAAA,cACT;AAAA;AAAA,UACF;AAAA,UACC,YAAY,aAAa,MAAM;AAAA;AAAA;AAAA,IAClC,GACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;AAOK,MAAM,cAAc,OAAO,OAAO,cAAc;AAAA,EACrD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "./ProgressBar.css";
|
|
2
2
|
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
|
-
var progressBarFillCSS = _7a468({ defaultClassName: "_13n9uwhq-1-
|
|
4
|
-
var progressCSS = _7a468({ defaultClassName: "_13n9uwhn-1-
|
|
5
|
-
var progressIndicatorColorVar = "var(--_13n9uwh3-1-
|
|
6
|
-
var progressRoot = _7a468({ defaultClassName: "_13n9uwh5-1-
|
|
7
|
-
var progressValueColorVar = "var(--_13n9uwh4-1-
|
|
3
|
+
var progressBarFillCSS = _7a468({ defaultClassName: "_13n9uwhq-1-6-2", variantClassNames: { indeterminate: { true: "_13n9uwhr-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4
|
+
var progressCSS = _7a468({ defaultClassName: "_13n9uwhn-1-6-2", variantClassNames: { size: { condensed: "_13n9uwho-1-6-2", "default": "_13n9uwhp-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
|
|
5
|
+
var progressIndicatorColorVar = "var(--_13n9uwh3-1-6-2)";
|
|
6
|
+
var progressRoot = _7a468({ defaultClassName: "_13n9uwh5-1-6-2", variantClassNames: { color: { primary: "_13n9uwh6-1-6-2", success: "_13n9uwh7-1-6-2", warning: "_13n9uwh8-1-6-2", critical: "_13n9uwh9-1-6-2", neutral: "_13n9uwha-1-6-2" }, onAccent: { true: "_13n9uwhb-1-6-2", false: "_13n9uwhc-1-6-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-1-6-2"], [{ color: "success", onAccent: false }, "_13n9uwhe-1-6-2"], [{ color: "warning", onAccent: false }, "_13n9uwhf-1-6-2"], [{ color: "critical", onAccent: false }, "_13n9uwhg-1-6-2"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-1-6-2"], [{ color: "primary", onAccent: true }, "_13n9uwhi-1-6-2"], [{ color: "success", onAccent: true }, "_13n9uwhj-1-6-2"], [{ color: "warning", onAccent: true }, "_13n9uwhk-1-6-2"], [{ color: "critical", onAccent: true }, "_13n9uwhl-1-6-2"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-1-6-2"]] });
|
|
7
|
+
var progressValueColorVar = "var(--_13n9uwh4-1-6-2)";
|
|
8
8
|
export {
|
|
9
9
|
progressBarFillCSS,
|
|
10
10
|
progressCSS,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/content/progress/ProgressBar.css.ts"],
|
|
4
|
-
"sourcesContent": ["import './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'_13n9uwhq-1-
|
|
4
|
+
"sourcesContent": ["import './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'_13n9uwhq-1-6-2',variantClassNames:{indeterminate:{true:'_13n9uwhr-1-6-2'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({defaultClassName:'_13n9uwhn-1-6-2',variantClassNames:{size:{condensed:'_13n9uwho-1-6-2','default':'_13n9uwhp-1-6-2'}},defaultVariants:{},compoundVariants:[]});\nexport var progressIndicatorColorVar = 'var(--_13n9uwh3-1-6-2)';\nexport var progressRoot = _7a468({defaultClassName:'_13n9uwh5-1-6-2',variantClassNames:{color:{primary:'_13n9uwh6-1-6-2',success:'_13n9uwh7-1-6-2',warning:'_13n9uwh8-1-6-2',critical:'_13n9uwh9-1-6-2',neutral:'_13n9uwha-1-6-2'},onAccent:{true:'_13n9uwhb-1-6-2',false:'_13n9uwhc-1-6-2'}},defaultVariants:{},compoundVariants:[[{color:'primary',onAccent:false},'_13n9uwhd-1-6-2'],[{color:'success',onAccent:false},'_13n9uwhe-1-6-2'],[{color:'warning',onAccent:false},'_13n9uwhf-1-6-2'],[{color:'critical',onAccent:false},'_13n9uwhg-1-6-2'],[{color:'neutral',onAccent:false},'_13n9uwhh-1-6-2'],[{color:'primary',onAccent:true},'_13n9uwhi-1-6-2'],[{color:'success',onAccent:true},'_13n9uwhj-1-6-2'],[{color:'warning',onAccent:true},'_13n9uwhk-1-6-2'],[{color:'critical',onAccent:true},'_13n9uwhl-1-6-2'],[{color:'neutral',onAccent:true},'_13n9uwhm-1-6-2']]});\nexport var progressValueColorVar = 'var(--_13n9uwh4-1-6-2)';"],
|
|
5
5
|
"mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtK,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvL,IAAI,4BAA4B;AAChC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,mBAAkB,SAAQ,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AAC50B,IAAI,wBAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
1
2
|
import clsx from "clsx";
|
|
2
|
-
import
|
|
3
|
+
import { forwardRef } from "react";
|
|
3
4
|
import { progressBarIconContainerCSS } from "./ProgressBarIcon.sty.js";
|
|
4
5
|
const ProgressBarIcon = forwardRef(
|
|
5
6
|
(props, forwardedRef) => {
|
|
@@ -10,16 +11,16 @@ const ProgressBarIcon = forwardRef(
|
|
|
10
11
|
"data-testid": dataTestId,
|
|
11
12
|
...remainingProps
|
|
12
13
|
} = props;
|
|
13
|
-
return /* @__PURE__ */
|
|
14
|
+
return /* @__PURE__ */ jsx(
|
|
14
15
|
"div",
|
|
15
16
|
{
|
|
16
17
|
"data-testid": dataTestId,
|
|
17
18
|
ref: forwardedRef,
|
|
18
19
|
className: clsx(consumerClassName, progressBarIconContainerCSS),
|
|
19
20
|
style: consumerStyle,
|
|
20
|
-
...remainingProps
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
...remainingProps,
|
|
22
|
+
children
|
|
23
|
+
}
|
|
23
24
|
);
|
|
24
25
|
}
|
|
25
26
|
);
|