@dynatrace/strato-components 1.4.0 → 1.6.0
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 +18 -22
- package/buttons/button/Button.d.ts +4 -4
- package/buttons/button/Button.js +48 -34
- package/buttons/button/Button.sty.js +5 -4
- package/buttons/button/Label.d.ts +2 -2
- package/buttons/button/Label.js +7 -5
- package/buttons/button/Prefix.d.ts +2 -2
- package/buttons/button/Prefix.js +7 -15
- package/buttons/button/Suffix.d.ts +3 -3
- package/buttons/button/Suffix.js +7 -15
- package/buttons/button/types/button-aria.js +1 -0
- package/buttons/button/utils/focus-without-scrolling.js +1 -0
- package/buttons/button/utils/is-virtual-event.js +1 -0
- package/buttons/index.js +1 -0
- package/buttons/intent-button/IntentButton.d.ts +2 -2
- package/buttons/intent-button/IntentButton.js +17 -21
- package/buttons/intent-button/useIntentButton.d.ts +4 -3
- package/buttons/intent-button/useIntentButton.js +1 -0
- package/content/index.js +1 -0
- package/content/progress/ProgressBar.css +71 -71
- package/content/progress/ProgressBar.d.ts +4 -5
- package/content/progress/ProgressBar.js +50 -41
- package/content/progress/ProgressBar.sty.js +6 -5
- package/content/progress/ProgressBarIcon.css +2 -2
- package/content/progress/ProgressBarIcon.d.ts +1 -2
- package/content/progress/ProgressBarIcon.js +7 -5
- package/content/progress/ProgressBarIcon.sty.js +2 -1
- package/content/progress/ProgressBarLabel.css +3 -3
- package/content/progress/ProgressBarLabel.d.ts +1 -2
- package/content/progress/ProgressBarLabel.js +7 -5
- package/content/progress/ProgressBarLabel.sty.js +2 -1
- package/content/progress/ProgressBarValue.css +5 -5
- package/content/progress/ProgressBarValue.d.ts +1 -2
- package/content/progress/ProgressBarValue.js +7 -5
- package/content/progress/ProgressBarValue.sty.js +2 -1
- package/content/progress/ProgressCircle.css +40 -40
- package/content/progress/ProgressCircle.d.ts +1 -2
- package/content/progress/ProgressCircle.js +61 -55
- package/content/progress/ProgressCircle.sty.js +6 -5
- package/content/progress/contexts/SharedProgressBarPropsContext.d.ts +1 -2
- package/content/progress/contexts/SharedProgressBarPropsContext.js +3 -12
- package/content/progress/hooks/useProgressAriaProps.js +1 -0
- package/content/progress/hooks/useProgressBarPropsContext.js +1 -0
- package/content/skeleton/Skeleton.css +6 -6
- package/content/skeleton/Skeleton.d.ts +2 -2
- package/content/skeleton/Skeleton.js +7 -5
- package/content/skeleton/Skeleton.sty.js +2 -1
- package/content/skeleton/SkeletonText.d.ts +2 -2
- package/content/skeleton/SkeletonText.js +10 -18
- package/core/components/app-root/AppRoot.d.ts +3 -3
- package/core/components/app-root/AppRoot.js +16 -24
- package/core/components/app-root/AppRoot.sty.js +1 -0
- package/core/components/focus-scope/FocusScope.d.ts +1 -2
- package/core/components/focus-scope/FocusScope.js +7 -15
- package/core/contexts/FocusContext.js +1 -0
- package/core/hooks/useActiveElement.js +1 -0
- package/core/hooks/useAriaLabelingProps.js +1 -0
- package/core/hooks/useCurrentTheme.js +1 -0
- package/core/hooks/useFocusContext.js +1 -0
- package/core/hooks/useFontsUpdated.js +2 -1
- package/core/hooks/useId.js +1 -0
- package/core/hooks/useMergeRefs.d.ts +2 -2
- package/core/hooks/useMergeRefs.js +1 -0
- package/core/hooks/useSafeForwardProps.js +1 -0
- package/core/index.js +1 -0
- package/core/providers/FocusProvider.d.ts +1 -2
- package/core/providers/FocusProvider.js +7 -15
- package/core/styles/focusRing.css +66 -66
- package/core/styles/focusRing.sty.js +3 -2
- package/core/styles/useFocusRing.d.ts +3 -3
- package/core/styles/useFocusRing.js +1 -0
- package/core/types/a11y-props.js +1 -0
- package/core/types/data-props.js +1 -0
- package/core/types/dom.js +1 -0
- package/core/types/heading.js +1 -0
- package/core/types/masking-props.js +1 -0
- package/core/types/polymorph.d.ts +1 -1
- package/core/types/polymorph.js +1 -0
- package/core/types/styling-props.d.ts +1 -1
- package/core/types/styling-props.js +1 -0
- package/core/types/with-children.d.ts +1 -1
- package/core/types/with-children.js +1 -0
- package/core/utils/_is-string-children.d.ts +2 -2
- package/core/utils/_is-string-children.js +3 -12
- package/core/utils/colorUtils.css +60 -60
- package/core/utils/colorUtils.sty.js +3 -2
- package/core/utils/focus-management/attempt-focus.js +1 -0
- package/core/utils/focus-management/focus-first-descendant.js +1 -0
- package/core/utils/focus-management/get-first-focusable-child.js +1 -0
- package/core/utils/focus-management/get-last-focusable-child.js +1 -0
- package/core/utils/focus-management/is-focusable.js +1 -0
- package/core/utils/isBrowser.js +1 -0
- package/core/utils/merge-props.js +1 -0
- package/core/utils/parse-boolean.js +1 -0
- package/core/utils/seed-random.js +1 -0
- package/core/utils/uuidv4.js +1 -0
- package/esm/buttons/button/Button.css +18 -22
- 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 +6 -5
- 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 +6 -5
- 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 +6 -5
- 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 +6 -5
- package/esm/core/components/focus-scope/FocusScope.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/providers/FocusProvider.js +6 -5
- 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/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/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 +2 -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 +8 -5
- package/esm/typography/text-ellipsis/TextEllipsis.js +16 -15
- package/esm/typography/text-ellipsis/TextEllipsis.js.map +2 -2
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js +4 -4
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +2 -2
- package/index.js +1 -0
- package/layouts/container/Container.css +4 -4
- package/layouts/container/Container.js +8 -6
- package/layouts/container/Container.sty.js +2 -1
- package/layouts/divider/Divider.css +6 -6
- package/layouts/divider/Divider.d.ts +1 -2
- package/layouts/divider/Divider.js +4 -2
- package/layouts/divider/Divider.sty.js +2 -1
- package/layouts/flex/Flex.js +7 -5
- package/layouts/grid/Grid.d.ts +1 -1
- package/layouts/grid/Grid.js +7 -5
- package/layouts/helpers/spacingToCss.js +1 -0
- package/layouts/hooks/useBreakpoint.js +1 -0
- package/layouts/hooks/useLayoutSizeProps.js +1 -0
- package/layouts/hooks/useLayoutStyles.js +1 -0
- package/layouts/hooks/useMarginProps.js +1 -0
- package/layouts/hooks/usePaddingProps.js +1 -0
- package/layouts/index.js +1 -0
- package/layouts/surface/Surface.css +39 -39
- package/layouts/surface/Surface.js +18 -14
- package/layouts/surface/Surface.sty.js +3 -2
- package/layouts/surface/variables.sty.js +2 -1
- package/layouts/types/layout.types.d.ts +1 -1
- package/layouts/types/layout.types.js +1 -0
- package/package.json +5 -5
- package/styles/colorUtils.css +60 -60
- package/styles/colorUtils.sty.js +3 -2
- package/styles/container.css +47 -47
- package/styles/container.sty.js +3 -2
- package/styles/ellipsis.css +1 -1
- package/styles/ellipsis.sty.js +2 -1
- package/styles/extract-util.js +1 -0
- package/styles/field.css +153 -153
- package/styles/field.sty.js +3 -2
- package/styles/getFlexStyles.d.ts +17 -17
- package/styles/getFlexStyles.js +1 -0
- package/styles/getGapSprinkles.js +1 -0
- package/styles/getGridFlexPositionSprinkles.js +1 -0
- package/styles/getGridStyles.d.ts +22 -22
- package/styles/getGridStyles.js +1 -0
- package/styles/getLayoutSizeStyles.d.ts +1 -1
- package/styles/getLayoutSizeStyles.js +1 -0
- package/styles/getSpacingSprinkles.js +1 -0
- package/styles/index.js +1 -0
- package/styles/safe-sprinkles.js +1 -0
- package/styles/sprinkle-properties.js +1 -0
- package/styles/sprinkles.css +262 -262
- package/styles/sprinkles.sty.js +2 -1
- package/styles/textStyle.css +8 -8
- package/styles/textStyle.sty.js +2 -1
- package/typography/block-quote/Blockquote.css +2 -2
- package/typography/block-quote/Blockquote.d.ts +1 -2
- package/typography/block-quote/Blockquote.js +7 -5
- package/typography/block-quote/Blockquote.sty.js +2 -1
- package/typography/code/Code.css +1 -1
- package/typography/code/Code.d.ts +1 -2
- package/typography/code/Code.js +7 -5
- package/typography/code/Code.sty.js +2 -1
- package/typography/emphasis/Emphasis.css +1 -1
- package/typography/emphasis/Emphasis.d.ts +1 -2
- package/typography/emphasis/Emphasis.js +7 -5
- package/typography/emphasis/Emphasis.sty.js +2 -1
- package/typography/external-link/ExternalLink.css +6 -6
- package/typography/external-link/ExternalLink.d.ts +2 -2
- package/typography/external-link/ExternalLink.js +23 -16
- package/typography/external-link/ExternalLink.sty.js +2 -1
- package/typography/heading/Heading.css +7 -7
- package/typography/heading/Heading.d.ts +1 -2
- package/typography/heading/Heading.js +7 -5
- package/typography/heading/Heading.sty.js +2 -1
- package/typography/highlight/Highlight.css +2 -1
- package/typography/highlight/Highlight.d.ts +1 -1
- package/typography/highlight/Highlight.js +22 -17
- package/typography/highlight/Highlight.sty.js +2 -1
- package/typography/index.js +1 -0
- package/typography/link/Link.css +4 -4
- package/typography/link/Link.d.ts +1 -1
- package/typography/link/Link.js +7 -5
- package/typography/link/Link.sty.js +2 -1
- package/typography/list/List.css +4 -4
- package/typography/list/List.d.ts +1 -2
- package/typography/list/List.js +11 -9
- package/typography/list/List.sty.js +3 -2
- package/typography/paragraph/Paragraph.css +3 -3
- package/typography/paragraph/Paragraph.d.ts +1 -2
- package/typography/paragraph/Paragraph.js +7 -5
- package/typography/paragraph/Paragraph.sty.js +2 -1
- package/typography/strikethrough/Strikethrough.css +1 -1
- package/typography/strikethrough/Strikethrough.d.ts +1 -2
- package/typography/strikethrough/Strikethrough.js +7 -5
- package/typography/strikethrough/Strikethrough.sty.js +2 -1
- package/typography/strong/Strong.css +1 -1
- package/typography/strong/Strong.d.ts +1 -2
- package/typography/strong/Strong.js +7 -5
- package/typography/strong/Strong.sty.js +2 -1
- package/typography/text/Text.css +3 -3
- package/typography/text/Text.js +7 -5
- package/typography/text/Text.sty.js +2 -1
- package/typography/text-ellipsis/TextEllipsis.css +8 -5
- package/typography/text-ellipsis/TextEllipsis.d.ts +2 -2
- package/typography/text-ellipsis/TextEllipsis.js +17 -15
- package/typography/text-ellipsis/TextEllipsis.sty.d.ts +7 -2
- package/typography/text-ellipsis/TextEllipsis.sty.js +5 -4
- package/typography/utils.js +1 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
._10kgnsa0-1-
|
|
1
|
+
._10kgnsa0-1-6-0 {
|
|
2
2
|
font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
|
|
3
3
|
font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
|
|
4
4
|
font-size: var(--dt-typography-text-base-default-size, 14px);
|
|
5
5
|
line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
|
|
6
6
|
text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
|
|
7
7
|
text-transform: none;
|
|
8
|
-
background: var(--_bx32h3-1-
|
|
9
|
-
color: var(--_bx32h0-1-
|
|
8
|
+
background: var(--_bx32h3-1-6-0);
|
|
9
|
+
color: var(--_bx32h0-1-6-0);
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
position: relative;
|
|
12
12
|
align-items: center;
|
|
@@ -19,50 +19,46 @@
|
|
|
19
19
|
border-style: solid;
|
|
20
20
|
border-width: 0;
|
|
21
21
|
border-radius: var(--dt-borders-radius-field-default, 8px);
|
|
22
|
-
transition-timing-function: var(--dt-animations-
|
|
23
|
-
transition-duration: var(--dt-animations-
|
|
22
|
+
transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
|
|
23
|
+
transition-duration: var(--dt-animations-hover-duration-base, 150ms);
|
|
24
24
|
transition-property: color, background-color, transform;
|
|
25
25
|
}
|
|
26
|
-
.
|
|
27
|
-
transition-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
|
|
28
|
-
transition-duration: var(--dt-animations-fade-in-duration-base, 250ms);
|
|
29
|
-
}
|
|
30
|
-
._10kgnsa1-1-4-0 {
|
|
26
|
+
._10kgnsa1-1-6-0 {
|
|
31
27
|
text-align: start;
|
|
32
28
|
justify-content: space-between;
|
|
33
29
|
}
|
|
34
|
-
._10kgnsa2-1-
|
|
30
|
+
._10kgnsa2-1-6-0 {
|
|
35
31
|
text-align: center;
|
|
36
32
|
justify-content: center;
|
|
37
33
|
}
|
|
38
|
-
._10kgnsa3-1-
|
|
34
|
+
._10kgnsa3-1-6-0 {
|
|
39
35
|
padding-top: var(--dt-spacings-size-2, 2px);
|
|
40
36
|
padding-bottom: var(--dt-spacings-size-2, 2px);
|
|
41
37
|
padding-left: var(--dt-spacings-size-4, 4px);
|
|
42
38
|
padding-right: var(--dt-spacings-size-4, 4px);
|
|
43
39
|
gap: var(--dt-spacings-size-2, 2px);
|
|
44
40
|
}
|
|
45
|
-
._10kgnsa4-1-
|
|
41
|
+
._10kgnsa4-1-6-0 {
|
|
46
42
|
padding-top: var(--dt-spacings-size-6, 6px);
|
|
47
43
|
padding-bottom: var(--dt-spacings-size-6, 6px);
|
|
48
44
|
padding-left: var(--dt-spacings-size-8, 8px);
|
|
49
45
|
padding-right: var(--dt-spacings-size-8, 8px);
|
|
50
46
|
gap: var(--dt-spacings-size-4, 4px);
|
|
51
47
|
}
|
|
52
|
-
._10kgnsa5-1-
|
|
48
|
+
._10kgnsa5-1-6-0 {
|
|
53
49
|
cursor: not-allowed;
|
|
54
50
|
}
|
|
55
|
-
._10kgnsa6-1-
|
|
51
|
+
._10kgnsa6-1-6-0 {
|
|
56
52
|
cursor: not-allowed;
|
|
57
|
-
background: var(--_bx32h2-1-
|
|
53
|
+
background: var(--_bx32h2-1-6-0);
|
|
58
54
|
}
|
|
59
|
-
._10kgnsa7-1-
|
|
55
|
+
._10kgnsa7-1-6-0 {
|
|
60
56
|
width: 100%;
|
|
61
57
|
}
|
|
62
|
-
._10kgnsa8-1-
|
|
58
|
+
._10kgnsa8-1-6-0 {
|
|
63
59
|
width: fit-content;
|
|
64
60
|
}
|
|
65
|
-
._10kgnsa9-1-
|
|
61
|
+
._10kgnsa9-1-6-0 {
|
|
66
62
|
position: absolute;
|
|
67
63
|
top: 0;
|
|
68
64
|
left: 0;
|
|
@@ -74,19 +70,19 @@
|
|
|
74
70
|
align-items: center;
|
|
75
71
|
z-index: 1;
|
|
76
72
|
}
|
|
77
|
-
._10kgnsa3-1-
|
|
73
|
+
._10kgnsa3-1-6-0 ._10kgnsaa-1-6-0:not(:has(svg:only-child)) {
|
|
78
74
|
padding-top: 0;
|
|
79
75
|
padding-bottom: 0;
|
|
80
76
|
padding-left: 2px;
|
|
81
77
|
padding-right: 2px;
|
|
82
78
|
}
|
|
83
|
-
._10kgnsa4-1-
|
|
79
|
+
._10kgnsa4-1-6-0 ._10kgnsaa-1-6-0:not(:has(svg:only-child)) {
|
|
84
80
|
padding-top: 0;
|
|
85
81
|
padding-bottom: 0;
|
|
86
82
|
padding-left: 4px;
|
|
87
83
|
padding-right: 4px;
|
|
88
84
|
}
|
|
89
|
-
._10kgnsac-1-
|
|
85
|
+
._10kgnsac-1-6-0 {
|
|
90
86
|
display: inline-flex;
|
|
91
87
|
min-width: 0;
|
|
92
88
|
max-width: 100%;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as CSS from 'csstype';
|
|
2
|
-
import
|
|
2
|
+
import { type ElementType, type MouseEventHandler, type ReactElement, type ReactNode } from 'react';
|
|
3
3
|
import { type AriaDisabledProps, type AriaLabelingProps } from '../../core/types/a11y-props.js';
|
|
4
4
|
import { type DataTestId } from '../../core/types/data-props.js';
|
|
5
5
|
import { type MaskingProps } from '../../core/types/masking-props.js';
|
|
@@ -88,8 +88,8 @@ export declare const _Button: <E extends ElementType = 'button'>(props: ButtonPr
|
|
|
88
88
|
* @public
|
|
89
89
|
*/
|
|
90
90
|
export declare const Button: (<E extends ElementType = "button">(props: ButtonProps<E>) => ReactElement | null) & {
|
|
91
|
-
Suffix: (props: import("./Suffix.js").ButtonSuffixProps &
|
|
92
|
-
Prefix: (props: import("./Prefix.js").ButtonPrefixProps &
|
|
93
|
-
Label: (props: import("./Label.js").ButtonLabelProps &
|
|
91
|
+
Suffix: (props: import("./Suffix.js").ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
|
92
|
+
Prefix: (props: import("./Prefix.js").ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
|
93
|
+
Label: (props: import("./Label.js").ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
|
94
94
|
};
|
|
95
95
|
export {};
|
package/buttons/button/Button.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -32,8 +33,9 @@ __export(Button_exports, {
|
|
|
32
33
|
default: () => getButtonSlots
|
|
33
34
|
});
|
|
34
35
|
module.exports = __toCommonJS(Button_exports);
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
37
|
var import_clsx = __toESM(require("clsx"));
|
|
36
|
-
var import_react =
|
|
38
|
+
var import_react = require("react");
|
|
37
39
|
var import_react_intl = require("react-intl");
|
|
38
40
|
var import_react_is = require("react-is");
|
|
39
41
|
var import_Button_css = require("./Button.sty.js");
|
|
@@ -50,7 +52,7 @@ var import_Grid = require("../../layouts/grid/Grid.js");
|
|
|
50
52
|
var import_field_css = require("../../styles/field.sty.js");
|
|
51
53
|
function getButtonSlots(children) {
|
|
52
54
|
const slots = {};
|
|
53
|
-
import_react.
|
|
55
|
+
import_react.Children.forEach(children, (child) => {
|
|
54
56
|
if ((0, import_react_is.isElement)(child)) {
|
|
55
57
|
switch (child.type) {
|
|
56
58
|
case import_Suffix.Suffix:
|
|
@@ -168,7 +170,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
|
|
|
168
170
|
const intl = (0, import_react_intl.useIntl)();
|
|
169
171
|
const Component = as || "button";
|
|
170
172
|
if (!hasChildren) {
|
|
171
|
-
return /* @__PURE__ */
|
|
173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
172
174
|
Component,
|
|
173
175
|
{
|
|
174
176
|
...buttonMergedProps,
|
|
@@ -194,7 +196,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
|
|
|
194
196
|
}
|
|
195
197
|
);
|
|
196
198
|
}
|
|
197
|
-
return /* @__PURE__ */
|
|
199
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
198
200
|
Component,
|
|
199
201
|
{
|
|
200
202
|
className: (0, import_clsx.default)(
|
|
@@ -221,36 +223,48 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
|
|
|
221
223
|
width: width !== "content" && width !== "full" ? width : void 0,
|
|
222
224
|
...consumerStyle
|
|
223
225
|
},
|
|
224
|
-
...buttonMergedProps
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
226
|
+
...buttonMergedProps,
|
|
227
|
+
children: [
|
|
228
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_Button_css.buttonLoadingCSS, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
229
|
+
import_ProgressCircle.ProgressCircle,
|
|
230
|
+
{
|
|
231
|
+
size: "small",
|
|
232
|
+
color,
|
|
233
|
+
"aria-label": intl.formatMessage({
|
|
234
|
+
defaultMessage: "Loading",
|
|
235
|
+
id: "cycz+bYG+VH7Of4e",
|
|
236
|
+
description: "Label for the loading state."
|
|
237
|
+
})
|
|
238
|
+
}
|
|
239
|
+
) }),
|
|
240
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
241
|
+
import_Grid.Grid,
|
|
242
|
+
{
|
|
243
|
+
gap: size === "default" ? 4 : 2,
|
|
244
|
+
grid: "auto / auto-flow auto",
|
|
245
|
+
width: "100%",
|
|
246
|
+
maxWidth: "100%",
|
|
247
|
+
alignItems: "center",
|
|
248
|
+
justifyContent: textAlign === "start" ? "space-between" : "center",
|
|
249
|
+
style: {
|
|
250
|
+
visibility: loading ? "hidden" : void 0
|
|
251
|
+
},
|
|
252
|
+
children: [
|
|
253
|
+
textAlign === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { minWidth: 0, gap: size === "default" ? 4 : 2, children: [
|
|
254
|
+
slots.prefix,
|
|
255
|
+
slots.label,
|
|
256
|
+
slots.freeform && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button.Label, { children: slots.freeform })
|
|
257
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
258
|
+
slots.prefix,
|
|
259
|
+
slots.label,
|
|
260
|
+
slots.freeform && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button.Label, { children: slots.freeform })
|
|
261
|
+
] }),
|
|
262
|
+
slots.suffix
|
|
263
|
+
]
|
|
264
|
+
}
|
|
265
|
+
)
|
|
266
|
+
]
|
|
267
|
+
}
|
|
254
268
|
);
|
|
255
269
|
}
|
|
256
270
|
);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -27,7 +28,7 @@ var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
|
|
|
27
28
|
var import_field_css_ts_vanilla = require("../../styles/field.css");
|
|
28
29
|
var import_Button_css_ts_vanilla = require("./Button.css");
|
|
29
30
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
30
|
-
var buttonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-1-
|
|
31
|
-
var buttonLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsaa-1-
|
|
32
|
-
var buttonLoadingCSS = "_10kgnsa9-1-
|
|
33
|
-
var buttonWidthsCSS = { full: "_10kgnsa7-1-
|
|
31
|
+
var buttonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-1-6-0", variantClassNames: { textAlign: { start: "_10kgnsa1-1-6-0", center: "_10kgnsa2-1-6-0" }, size: { condensed: "_10kgnsa3-1-6-0", "default": "_10kgnsa4-1-6-0" }, disabled: { true: "_10kgnsa5-1-6-0" }, readOnly: { true: "_10kgnsa6-1-6-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
|
|
32
|
+
var buttonLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsaa-1-6-0", variantClassNames: { textual: { true: "_oqqp1n0-1-6-0", false: "_10kgnsac-1-6-0" } }, defaultVariants: {}, compoundVariants: [] });
|
|
33
|
+
var buttonLoadingCSS = "_10kgnsa9-1-6-0";
|
|
34
|
+
var buttonWidthsCSS = { full: "_10kgnsa7-1-6-0", content: "_10kgnsa8-1-6-0" };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
2
|
import { type DataTestId } from '../../core/types/data-props.js';
|
|
3
3
|
import { type StylingProps } from '../../core/types/styling-props.js';
|
|
4
4
|
/**
|
|
@@ -13,4 +13,4 @@ export interface ButtonLabelProps extends StylingProps, DataTestId {
|
|
|
13
13
|
* Button Label component.
|
|
14
14
|
* @public
|
|
15
15
|
*/
|
|
16
|
-
export declare const Label: (props: ButtonLabelProps &
|
|
16
|
+
export declare const Label: (props: ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
package/buttons/button/Label.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -30,8 +31,9 @@ __export(Label_exports, {
|
|
|
30
31
|
Label: () => Label
|
|
31
32
|
});
|
|
32
33
|
module.exports = __toCommonJS(Label_exports);
|
|
34
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
35
|
var import_clsx = __toESM(require("clsx"));
|
|
34
|
-
var import_react =
|
|
36
|
+
var import_react = require("react");
|
|
35
37
|
var import_Button_css = require("./Button.sty.js");
|
|
36
38
|
var import_is_string_children = require("../../core/utils/_is-string-children.js");
|
|
37
39
|
const Label = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
|
|
@@ -42,7 +44,7 @@ const Label = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef)
|
|
|
42
44
|
"data-testid": dataTestId
|
|
43
45
|
} = props;
|
|
44
46
|
const textual = (0, import_is_string_children.isStringChildren)(children);
|
|
45
|
-
return /* @__PURE__ */
|
|
47
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
46
48
|
"div",
|
|
47
49
|
{
|
|
48
50
|
ref: forwardedRef,
|
|
@@ -52,9 +54,9 @@ const Label = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef)
|
|
|
52
54
|
(0, import_Button_css.buttonLabelCSS)({ textual }),
|
|
53
55
|
consumerClassName
|
|
54
56
|
),
|
|
55
|
-
style: consumerStyle
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
style: consumerStyle,
|
|
58
|
+
children
|
|
59
|
+
}
|
|
58
60
|
);
|
|
59
61
|
});
|
|
60
62
|
Label.displayName = "Button.Label";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
2
|
import { type DataTestId } from '../../core/types/data-props.js';
|
|
3
3
|
import { type StylingProps } from '../../core/types/styling-props.js';
|
|
4
4
|
/**
|
|
@@ -13,4 +13,4 @@ export interface ButtonPrefixProps extends StylingProps, DataTestId {
|
|
|
13
13
|
* Button Prefix component.
|
|
14
14
|
* @public
|
|
15
15
|
*/
|
|
16
|
-
export declare const Prefix: (props: ButtonPrefixProps &
|
|
16
|
+
export declare const Prefix: (props: ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
package/buttons/button/Prefix.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
@@ -16,21 +15,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
15
|
}
|
|
17
16
|
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
19
|
var Prefix_exports = {};
|
|
29
20
|
__export(Prefix_exports, {
|
|
30
21
|
Prefix: () => Prefix
|
|
31
22
|
});
|
|
32
23
|
module.exports = __toCommonJS(Prefix_exports);
|
|
33
|
-
var
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_react = require("react");
|
|
34
26
|
var import_Flex = require("../../layouts/flex/Flex.js");
|
|
35
27
|
const Prefix = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
|
|
36
28
|
const {
|
|
@@ -39,16 +31,16 @@ const Prefix = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef
|
|
|
39
31
|
style: consumerStyle,
|
|
40
32
|
"data-testid": dataTestId
|
|
41
33
|
} = props;
|
|
42
|
-
return /* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
43
35
|
import_Flex.Flex,
|
|
44
36
|
{
|
|
45
37
|
"data-testid": dataTestId,
|
|
46
38
|
ref: forwardedRef,
|
|
47
39
|
gap: 0,
|
|
48
40
|
className: consumerClassName,
|
|
49
|
-
style: consumerStyle
|
|
50
|
-
|
|
51
|
-
|
|
41
|
+
style: consumerStyle,
|
|
42
|
+
children
|
|
43
|
+
}
|
|
52
44
|
);
|
|
53
45
|
});
|
|
54
46
|
Prefix.displayName = "Button.Prefix";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
2
|
import { type DataTestId } from '../../core/types/data-props.js';
|
|
3
3
|
import { type StylingProps } from '../../core/types/styling-props.js';
|
|
4
4
|
/**
|
|
@@ -7,10 +7,10 @@ import { type StylingProps } from '../../core/types/styling-props.js';
|
|
|
7
7
|
*/
|
|
8
8
|
export interface ButtonSuffixProps extends StylingProps, DataTestId {
|
|
9
9
|
/** Elements to be displayed in the Button Suffix slot. */
|
|
10
|
-
children:
|
|
10
|
+
children: ReactNode;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
13
|
* Button Suffix component.
|
|
14
14
|
* @public
|
|
15
15
|
*/
|
|
16
|
-
export declare const Suffix: (props: ButtonSuffixProps &
|
|
16
|
+
export declare const Suffix: (props: ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
package/buttons/button/Suffix.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
@@ -16,21 +15,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
15
|
}
|
|
17
16
|
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
19
|
var Suffix_exports = {};
|
|
29
20
|
__export(Suffix_exports, {
|
|
30
21
|
Suffix: () => Suffix
|
|
31
22
|
});
|
|
32
23
|
module.exports = __toCommonJS(Suffix_exports);
|
|
33
|
-
var
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_react = require("react");
|
|
34
26
|
var import_Flex = require("../../layouts/flex/Flex.js");
|
|
35
27
|
const Suffix = (0, import_react.forwardRef)(
|
|
36
28
|
(props, forwardedRef) => {
|
|
@@ -40,16 +32,16 @@ const Suffix = (0, import_react.forwardRef)(
|
|
|
40
32
|
style: consumerStyle,
|
|
41
33
|
"data-testid": dataTestId
|
|
42
34
|
} = props;
|
|
43
|
-
return /* @__PURE__ */
|
|
35
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
44
36
|
import_Flex.Flex,
|
|
45
37
|
{
|
|
46
38
|
"data-testid": dataTestId,
|
|
47
39
|
gap: 0,
|
|
48
40
|
ref: forwardedRef,
|
|
49
41
|
className: consumerClassName,
|
|
50
|
-
style: consumerStyle
|
|
51
|
-
|
|
52
|
-
|
|
42
|
+
style: consumerStyle,
|
|
43
|
+
children
|
|
44
|
+
}
|
|
53
45
|
);
|
|
54
46
|
}
|
|
55
47
|
);
|
package/buttons/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
2
|
import { type IntentPayload } from '@dynatrace-sdk/navigation';
|
|
3
3
|
import { type AriaLabelingProps } from '../../core/types/a11y-props.js';
|
|
4
4
|
import { type DataTestId } from '../../core/types/data-props.js';
|
|
@@ -41,4 +41,4 @@ export type IntentButtonProps = IntentButtonPropsBase & ({
|
|
|
41
41
|
* in the AppShell context.
|
|
42
42
|
* @public
|
|
43
43
|
*/
|
|
44
|
-
export declare const IntentButton: (props: IntentButtonProps &
|
|
44
|
+
export declare const IntentButton: (props: IntentButtonProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
@@ -16,21 +15,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
15
|
}
|
|
17
16
|
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
19
|
var IntentButton_exports = {};
|
|
29
20
|
__export(IntentButton_exports, {
|
|
30
21
|
IntentButton: () => IntentButton
|
|
31
22
|
});
|
|
32
23
|
module.exports = __toCommonJS(IntentButton_exports);
|
|
33
|
-
var
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_react = require("react");
|
|
34
26
|
var import_react_intl = require("react-intl");
|
|
35
27
|
var import_strato_icons = require("@dynatrace/strato-icons");
|
|
36
28
|
var import_useIntentButton = require("./useIntentButton.js");
|
|
@@ -70,7 +62,7 @@ const IntentButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
|
|
|
70
62
|
onClickProp
|
|
71
63
|
);
|
|
72
64
|
if (disabled) {
|
|
73
|
-
return /* @__PURE__ */
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
66
|
import_Button.Button,
|
|
75
67
|
{
|
|
76
68
|
disabled: true,
|
|
@@ -81,13 +73,15 @@ const IntentButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
|
|
|
81
73
|
className: consumerClassName,
|
|
82
74
|
style: consumerStyle,
|
|
83
75
|
readOnly,
|
|
84
|
-
...remainingProps
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
76
|
+
...remainingProps,
|
|
77
|
+
children: [
|
|
78
|
+
label,
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Suffix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.OpenWithIcon, {}) })
|
|
80
|
+
]
|
|
81
|
+
}
|
|
88
82
|
);
|
|
89
83
|
}
|
|
90
|
-
return /* @__PURE__ */
|
|
84
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
91
85
|
import_Button.Button,
|
|
92
86
|
{
|
|
93
87
|
as: "a",
|
|
@@ -100,10 +94,12 @@ const IntentButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
|
|
|
100
94
|
style: consumerStyle,
|
|
101
95
|
readOnly,
|
|
102
96
|
...remainingProps,
|
|
103
|
-
...intentButtonProps
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
97
|
+
...intentButtonProps,
|
|
98
|
+
children: [
|
|
99
|
+
label,
|
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Suffix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.OpenWithIcon, {}) })
|
|
101
|
+
]
|
|
102
|
+
}
|
|
107
103
|
);
|
|
108
104
|
});
|
|
109
105
|
IntentButton.displayName = "IntentButton";
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type MouseEventHandler as ReactMouseEventHandler, type MouseEvent as ReactMouseEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react';
|
|
1
2
|
import { type IntentPayload } from '@dynatrace-sdk/navigation';
|
|
2
3
|
/**
|
|
3
4
|
* return shared intent button logic
|
|
@@ -5,8 +6,8 @@ import { type IntentPayload } from '@dynatrace-sdk/navigation';
|
|
|
5
6
|
* @returns intentLink and triggerIntent
|
|
6
7
|
* @internal
|
|
7
8
|
*/
|
|
8
|
-
export declare function useIntentButton(payload: IntentPayload, appId?: string, intentId?: string, onClickProp?:
|
|
9
|
+
export declare function useIntentButton(payload: IntentPayload, appId?: string, intentId?: string, onClickProp?: ReactMouseEventHandler): {
|
|
9
10
|
href: string;
|
|
10
|
-
onClick: (event:
|
|
11
|
-
onKeyDown: (event:
|
|
11
|
+
onClick: (event: ReactMouseEvent) => void;
|
|
12
|
+
onKeyDown: (event: ReactKeyboardEvent) => void;
|
|
12
13
|
};
|
package/content/index.js
CHANGED