@dynatrace/strato-components 0.84.31 → 0.84.51
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/content/index.d.ts +7 -0
- package/content/index.js +25 -0
- package/content/progress/ProgressBar.css +52 -0
- package/content/progress/ProgressBar.d.ts +56 -0
- package/content/progress/ProgressBar.js +191 -0
- package/content/progress/ProgressBar.sty.d.ts +42 -0
- package/content/progress/ProgressBar.sty.js +28 -0
- package/content/progress/ProgressBarIcon.css +5 -0
- package/content/progress/ProgressBarIcon.d.ts +15 -0
- package/content/progress/ProgressBarIcon.js +68 -0
- package/content/progress/ProgressBarIcon.sty.d.ts +1 -0
- package/content/progress/ProgressBarIcon.sty.js +25 -0
- package/content/progress/ProgressBarLabel.css +9 -0
- package/content/progress/ProgressBarLabel.d.ts +15 -0
- package/content/progress/ProgressBarLabel.js +75 -0
- package/content/progress/ProgressBarLabel.sty.d.ts +13 -0
- package/content/progress/ProgressBarLabel.sty.js +26 -0
- package/content/progress/ProgressBarValue.css +28 -0
- package/content/progress/ProgressBarValue.d.ts +15 -0
- package/content/progress/ProgressBarValue.js +72 -0
- package/content/progress/ProgressBarValue.sty.d.ts +34 -0
- package/content/progress/ProgressBarValue.sty.js +26 -0
- package/content/progress/ProgressCircle.css +52 -0
- package/content/progress/ProgressCircle.d.ts +51 -0
- package/content/progress/ProgressCircle.js +174 -0
- package/content/progress/ProgressCircle.sty.d.ts +41 -0
- package/content/progress/ProgressCircle.sty.js +37 -0
- package/content/progress/contexts/SharedProgressBarPropsContext.d.ts +9 -0
- package/content/progress/contexts/SharedProgressBarPropsContext.js +38 -0
- package/content/progress/hooks/useProgressAriaProps.d.ts +38 -0
- package/content/progress/hooks/useProgressAriaProps.js +63 -0
- package/content/progress/hooks/useProgressBarPropsContext.d.ts +2 -0
- package/content/progress/hooks/useProgressBarPropsContext.js +32 -0
- package/content/progress/utils.d.ts +2 -0
- package/content/progress/utils.js +50 -0
- package/core/components/app-root/AppRoot.d.ts +4 -4
- package/core/hooks/useAriaLabelingProps.d.ts +6 -0
- package/core/hooks/useAriaLabelingProps.js +30 -0
- package/core/hooks/useCurrentTheme.d.ts +1 -1
- package/core/hooks/useFontsUpdated.d.ts +9 -0
- package/core/hooks/useFontsUpdated.js +51 -0
- package/core/hooks/useId.d.ts +12 -0
- package/core/hooks/useId.js +32 -0
- package/core/hooks/useMergeRefs.d.ts +7 -0
- package/core/hooks/useMergeRefs.js +34 -0
- package/core/hooks/useSafeForwardProps.d.ts +10 -0
- package/core/hooks/useSafeForwardProps.js +34 -0
- package/core/index.d.ts +12 -0
- package/core/index.js +12 -0
- package/core/styles/focusRing.css +88 -0
- package/core/styles/focusRing.sty.d.ts +96 -0
- package/core/styles/focusRing.sty.js +27 -0
- package/core/styles/useFocusRing.d.ts +49 -0
- package/core/styles/useFocusRing.js +83 -0
- package/core/types/a11y-props.d.ts +26 -0
- package/core/types/a11y-props.js +15 -0
- package/core/types/data-props.d.ts +1 -1
- package/core/types/dom.d.ts +8 -0
- package/core/types/dom.js +15 -0
- package/core/types/heading.d.ts +9 -0
- package/core/types/heading.js +15 -0
- package/core/types/masking-props.d.ts +2 -1
- package/core/types/polymorph.d.ts +28 -0
- package/core/types/polymorph.js +15 -0
- package/core/types/role-variant.d.ts +10 -0
- package/core/types/role-variant.js +30 -0
- 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 +6 -0
- package/core/utils/_is-string-children.js +44 -0
- package/core/utils/colorUtils.css +80 -0
- package/core/utils/colorUtils.sty.d.ts +48 -0
- package/core/utils/colorUtils.sty.js +27 -0
- package/core/utils/isBrowser.d.ts +1 -1
- package/core/utils/merge-props.d.ts +4 -5
- package/core/utils/seed-random.d.ts +5 -0
- package/core/utils/seed-random.js +34 -0
- package/core/utils/uuidv4.d.ts +5 -0
- package/core/utils/uuidv4.js +31 -0
- package/esm/content/index.js +7 -0
- package/esm/content/index.js.map +7 -0
- package/esm/content/progress/ProgressBar.css +52 -0
- package/esm/content/progress/ProgressBar.js +163 -0
- package/esm/content/progress/ProgressBar.js.map +7 -0
- package/esm/content/progress/ProgressBar.sty.js +10 -0
- package/esm/content/progress/ProgressBar.sty.js.map +7 -0
- package/esm/content/progress/ProgressBarIcon.css +5 -0
- package/esm/content/progress/ProgressBarIcon.js +40 -0
- package/esm/content/progress/ProgressBarIcon.js.map +7 -0
- package/esm/content/progress/ProgressBarIcon.sty.js +7 -0
- package/esm/content/progress/ProgressBarIcon.sty.js.map +7 -0
- package/esm/content/progress/ProgressBarLabel.css +9 -0
- package/esm/content/progress/ProgressBarLabel.js +47 -0
- package/esm/content/progress/ProgressBarLabel.js.map +7 -0
- package/esm/content/progress/ProgressBarLabel.sty.js +8 -0
- package/esm/content/progress/ProgressBarLabel.sty.js.map +7 -0
- package/esm/content/progress/ProgressBarValue.css +28 -0
- package/esm/content/progress/ProgressBarValue.js +44 -0
- package/esm/content/progress/ProgressBarValue.js.map +7 -0
- package/esm/content/progress/ProgressBarValue.sty.js +8 -0
- package/esm/content/progress/ProgressBarValue.sty.js.map +7 -0
- package/esm/content/progress/ProgressCircle.css +52 -0
- package/esm/content/progress/ProgressCircle.js +153 -0
- package/esm/content/progress/ProgressCircle.js.map +7 -0
- package/esm/content/progress/ProgressCircle.sty.js +19 -0
- package/esm/content/progress/ProgressCircle.sty.js.map +7 -0
- package/esm/content/progress/contexts/SharedProgressBarPropsContext.js +10 -0
- package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map +7 -0
- package/esm/content/progress/hooks/useProgressAriaProps.js +45 -0
- package/esm/content/progress/hooks/useProgressAriaProps.js.map +7 -0
- package/esm/content/progress/hooks/useProgressBarPropsContext.js +16 -0
- package/esm/content/progress/hooks/useProgressBarPropsContext.js.map +7 -0
- package/esm/content/progress/utils.js +22 -0
- package/esm/content/progress/utils.js.map +7 -0
- package/esm/core/components/app-root/AppRoot.js.map +1 -1
- package/esm/core/hooks/useAriaLabelingProps.js +12 -0
- package/esm/core/hooks/useAriaLabelingProps.js.map +7 -0
- package/esm/core/hooks/useCurrentTheme.js.map +1 -1
- package/esm/core/hooks/useFontsUpdated.js +33 -0
- package/esm/core/hooks/useFontsUpdated.js.map +7 -0
- package/esm/core/hooks/useId.js +14 -0
- package/esm/core/hooks/useId.js.map +7 -0
- package/esm/core/hooks/useMergeRefs.js +16 -0
- package/esm/core/hooks/useMergeRefs.js.map +7 -0
- package/esm/core/hooks/useSafeForwardProps.js +16 -0
- package/esm/core/hooks/useSafeForwardProps.js.map +7 -0
- package/esm/core/index.js +12 -0
- package/esm/core/index.js.map +2 -2
- package/esm/core/styles/focusRing.css +88 -0
- package/esm/core/styles/focusRing.sty.js +9 -0
- package/esm/core/styles/focusRing.sty.js.map +7 -0
- package/esm/core/styles/useFocusRing.js +69 -0
- package/esm/core/styles/useFocusRing.js.map +7 -0
- package/esm/core/types/a11y-props.js +1 -0
- package/esm/core/types/a11y-props.js.map +7 -0
- package/esm/core/types/dom.js +1 -0
- package/esm/core/types/dom.js.map +7 -0
- package/esm/core/types/heading.js +1 -0
- package/esm/core/types/heading.js.map +7 -0
- package/esm/core/types/polymorph.js +1 -0
- package/esm/core/types/polymorph.js.map +7 -0
- package/esm/core/types/role-variant.js +12 -0
- package/esm/core/types/role-variant.js.map +7 -0
- package/esm/core/utils/_is-string-children.js +16 -0
- package/esm/core/utils/_is-string-children.js.map +7 -0
- package/esm/core/utils/colorUtils.css +80 -0
- package/esm/core/utils/colorUtils.sty.js +9 -0
- package/esm/core/utils/colorUtils.sty.js.map +7 -0
- package/esm/core/utils/isBrowser.js.map +1 -1
- package/esm/core/utils/merge-props.js.map +2 -2
- package/esm/core/utils/seed-random.js +16 -0
- package/esm/core/utils/seed-random.js.map +7 -0
- package/esm/core/utils/uuidv4.js +13 -0
- package/esm/core/utils/uuidv4.js.map +7 -0
- package/esm/index.js +4 -0
- package/esm/index.js.map +2 -2
- package/esm/layouts/Divider/Divider.css +23 -0
- package/esm/layouts/Divider/Divider.js +39 -0
- package/esm/layouts/Divider/Divider.js.map +7 -0
- package/esm/layouts/Divider/Divider.sty.js +8 -0
- package/esm/layouts/Divider/Divider.sty.js.map +7 -0
- package/esm/layouts/container/Container.css +8 -0
- package/esm/layouts/container/Container.js +55 -0
- package/esm/layouts/container/Container.js.map +7 -0
- package/esm/layouts/container/Container.sty.js +7 -0
- package/esm/layouts/container/Container.sty.js.map +7 -0
- package/esm/layouts/flex/Flex.js +46 -0
- package/esm/layouts/flex/Flex.js.map +7 -0
- package/esm/layouts/grid/Grid.js +46 -0
- package/esm/layouts/grid/Grid.js.map +7 -0
- package/esm/layouts/index.js +11 -0
- package/esm/layouts/index.js.map +7 -0
- package/esm/styles/colorUtils.css +80 -0
- package/esm/styles/colorUtils.sty.js +9 -0
- package/esm/styles/colorUtils.sty.js.map +7 -0
- package/esm/styles/container.css +64 -0
- package/esm/styles/container.sty.js +9 -0
- package/esm/styles/container.sty.js.map +7 -0
- package/esm/styles/ellipsis.css +5 -0
- package/esm/styles/ellipsis.sty.js +6 -0
- package/esm/styles/ellipsis.sty.js.map +7 -0
- package/esm/styles/extract-util.js +15 -0
- package/esm/styles/extract-util.js.map +7 -0
- package/esm/styles/getFlexStyles.js +69 -0
- package/esm/styles/getFlexStyles.js.map +7 -0
- package/esm/styles/getGapSprinkles.js +18 -0
- package/esm/styles/getGapSprinkles.js.map +7 -0
- package/esm/styles/getGridFlexPositionSprinkles.js +25 -0
- package/esm/styles/getGridFlexPositionSprinkles.js.map +7 -0
- package/esm/styles/getGridStyles.js +78 -0
- package/esm/styles/getGridStyles.js.map +7 -0
- package/esm/styles/getLayoutSizeStyles.js +21 -0
- package/esm/styles/getLayoutSizeStyles.js.map +7 -0
- package/esm/styles/getSpacingSprinkles.js +50 -0
- package/esm/styles/getSpacingSprinkles.js.map +7 -0
- package/esm/styles/index.js +49 -0
- package/esm/styles/index.js.map +7 -0
- package/esm/styles/safe-sprinkles.js +17 -0
- package/esm/styles/safe-sprinkles.js.map +7 -0
- package/esm/styles/sprinkle-properties.js +137 -0
- package/esm/styles/sprinkle-properties.js.map +7 -0
- package/esm/styles/sprinkles.css +786 -0
- package/esm/styles/sprinkles.sty.js +9 -0
- package/esm/styles/sprinkles.sty.js.map +7 -0
- package/esm/styles/textStyle.css +64 -0
- package/esm/styles/textStyle.sty.js +7 -0
- package/esm/styles/textStyle.sty.js.map +7 -0
- package/esm/typography/BlockQuote/Blockquote.css +17 -0
- package/esm/typography/BlockQuote/Blockquote.js +34 -0
- package/esm/typography/BlockQuote/Blockquote.js.map +7 -0
- package/esm/typography/BlockQuote/Blockquote.sty.js +6 -0
- package/esm/typography/BlockQuote/Blockquote.sty.js.map +7 -0
- package/esm/typography/Code/Code.css +16 -0
- package/esm/typography/Code/Code.js +34 -0
- package/esm/typography/Code/Code.js.map +7 -0
- package/esm/typography/Code/Code.sty.js +6 -0
- package/esm/typography/Code/Code.sty.js.map +7 -0
- package/esm/typography/Emphasis/Emphasis.css +4 -0
- package/esm/typography/Emphasis/Emphasis.js +34 -0
- package/esm/typography/Emphasis/Emphasis.js.map +7 -0
- package/esm/typography/Emphasis/Emphasis.sty.js +6 -0
- package/esm/typography/Emphasis/Emphasis.sty.js.map +7 -0
- package/esm/typography/ExternalLink/ExternalLink.css +28 -0
- package/esm/typography/ExternalLink/ExternalLink.js +56 -0
- package/esm/typography/ExternalLink/ExternalLink.js.map +7 -0
- package/esm/typography/ExternalLink/ExternalLink.sty.js +6 -0
- package/esm/typography/ExternalLink/ExternalLink.sty.js.map +7 -0
- package/esm/typography/Heading/Heading.css +54 -0
- package/esm/typography/Heading/Heading.js +36 -0
- package/esm/typography/Heading/Heading.js.map +7 -0
- package/esm/typography/Heading/Heading.sty.js +7 -0
- package/esm/typography/Heading/Heading.sty.js.map +7 -0
- package/esm/typography/Highlight/Highlight.css +4 -0
- package/esm/typography/Highlight/Highlight.js +111 -0
- package/esm/typography/Highlight/Highlight.js.map +7 -0
- package/esm/typography/Highlight/Highlight.sty.js +6 -0
- package/esm/typography/Highlight/Highlight.sty.js.map +7 -0
- package/esm/typography/Link/Link.css +15 -0
- package/esm/typography/Link/Link.js +49 -0
- package/esm/typography/Link/Link.js.map +7 -0
- package/esm/typography/Link/Link.sty.js +6 -0
- package/esm/typography/Link/Link.sty.js.map +7 -0
- package/esm/typography/List/List.css +16 -0
- package/esm/typography/List/List.js +81 -0
- package/esm/typography/List/List.js.map +7 -0
- package/esm/typography/List/List.sty.js +8 -0
- package/esm/typography/List/List.sty.js.map +7 -0
- package/esm/typography/Paragraph/Paragraph.css +19 -0
- package/esm/typography/Paragraph/Paragraph.js +49 -0
- package/esm/typography/Paragraph/Paragraph.js.map +7 -0
- package/esm/typography/Paragraph/Paragraph.sty.js +7 -0
- package/esm/typography/Paragraph/Paragraph.sty.js.map +7 -0
- package/esm/typography/Strikethrough/Strikethrough.css +5 -0
- package/esm/typography/Strikethrough/Strikethrough.js +32 -0
- package/esm/typography/Strikethrough/Strikethrough.js.map +7 -0
- package/esm/typography/Strikethrough/Strikethrough.sty.js +6 -0
- package/esm/typography/Strikethrough/Strikethrough.sty.js.map +7 -0
- package/esm/typography/Strong/Strong.css +4 -0
- package/esm/typography/Strong/Strong.js +34 -0
- package/esm/typography/Strong/Strong.js.map +7 -0
- package/esm/typography/Strong/Strong.sty.js +6 -0
- package/esm/typography/Strong/Strong.sty.js.map +7 -0
- package/esm/typography/Text/Text.css +18 -0
- package/esm/typography/Text/Text.js +43 -0
- package/esm/typography/Text/Text.js.map +7 -0
- package/esm/typography/Text/Text.sty.js +7 -0
- package/esm/typography/Text/Text.sty.js.map +7 -0
- package/esm/typography/TextEllipsis/TextEllipsis.css +22 -0
- package/esm/typography/TextEllipsis/TextEllipsis.js +143 -0
- package/esm/typography/TextEllipsis/TextEllipsis.js.map +7 -0
- package/esm/typography/TextEllipsis/TextEllipsis.sty.js +7 -0
- package/esm/typography/TextEllipsis/TextEllipsis.sty.js.map +7 -0
- package/esm/typography/index.js +43 -0
- package/esm/typography/index.js.map +7 -0
- package/esm/typography/utils.js +101 -0
- package/esm/typography/utils.js.map +7 -0
- package/index.d.ts +4 -0
- package/index.js +4 -0
- package/lang/en.json +12 -0
- package/lang/uncompiled/en.json +10 -1
- package/layouts/Divider/Divider.css +23 -0
- package/layouts/Divider/Divider.d.ts +39 -0
- package/layouts/Divider/Divider.js +67 -0
- package/layouts/Divider/Divider.sty.d.ts +16 -0
- package/layouts/Divider/Divider.sty.js +26 -0
- package/layouts/container/Container.css +8 -0
- package/layouts/container/Container.d.ts +34 -0
- package/layouts/container/Container.js +80 -0
- package/layouts/container/Container.sty.d.ts +1 -0
- package/layouts/container/Container.sty.js +25 -0
- package/layouts/flex/Flex.d.ts +23 -0
- package/layouts/flex/Flex.js +72 -0
- package/layouts/grid/Grid.d.ts +23 -0
- package/layouts/grid/Grid.js +72 -0
- package/layouts/index.d.ts +6 -0
- package/layouts/index.js +29 -0
- package/package.json +34 -4
- package/styles/colorUtils.css +80 -0
- package/styles/colorUtils.sty.d.ts +56 -0
- package/styles/colorUtils.sty.js +27 -0
- package/styles/container.css +64 -0
- package/styles/container.sty.d.ts +54 -0
- package/styles/container.sty.js +27 -0
- package/styles/ellipsis.css +5 -0
- package/styles/ellipsis.sty.d.ts +5 -0
- package/styles/ellipsis.sty.js +24 -0
- package/styles/extract-util.d.ts +9 -0
- package/styles/extract-util.js +33 -0
- package/styles/getFlexStyles.d.ts +64 -0
- package/styles/getFlexStyles.js +95 -0
- package/styles/getGapSprinkles.d.ts +19 -0
- package/styles/getGapSprinkles.js +36 -0
- package/styles/getGridFlexPositionSprinkles.d.ts +35 -0
- package/styles/getGridFlexPositionSprinkles.js +43 -0
- package/styles/getGridStyles.d.ts +74 -0
- package/styles/getGridStyles.js +100 -0
- package/styles/getLayoutSizeStyles.d.ts +29 -0
- package/styles/getLayoutSizeStyles.js +39 -0
- package/styles/getSpacingSprinkles.d.ts +74 -0
- package/styles/getSpacingSprinkles.js +68 -0
- package/styles/index.d.ts +11 -0
- package/styles/index.js +47 -0
- package/styles/safe-sprinkles.d.ts +6 -0
- package/styles/safe-sprinkles.js +35 -0
- package/styles/sprinkle-properties.d.ts +257 -0
- package/styles/sprinkle-properties.js +165 -0
- package/styles/sprinkles.css +786 -0
- package/styles/sprinkles.sty.d.ts +913 -0
- package/styles/sprinkles.sty.js +27 -0
- package/styles/textStyle.css +64 -0
- package/styles/textStyle.sty.d.ts +13 -0
- package/styles/textStyle.sty.js +25 -0
- package/testing/mocks/canvas-mock.js +6 -1
- package/testing/mocks/text-ellipsis-mock.d.ts +1 -1
- package/testing/mocks/text-ellipsis-mock.js +8 -3
- package/typography/BlockQuote/Blockquote.css +17 -0
- package/typography/BlockQuote/Blockquote.d.ts +19 -0
- package/typography/BlockQuote/Blockquote.js +62 -0
- package/typography/BlockQuote/Blockquote.sty.d.ts +1 -0
- package/typography/BlockQuote/Blockquote.sty.js +24 -0
- package/typography/Code/Code.css +16 -0
- package/typography/Code/Code.d.ts +17 -0
- package/typography/Code/Code.js +62 -0
- package/typography/Code/Code.sty.d.ts +1 -0
- package/typography/Code/Code.sty.js +24 -0
- package/typography/Emphasis/Emphasis.css +4 -0
- package/typography/Emphasis/Emphasis.d.ts +14 -0
- package/typography/Emphasis/Emphasis.js +62 -0
- package/typography/Emphasis/Emphasis.sty.d.ts +1 -0
- package/typography/Emphasis/Emphasis.sty.js +24 -0
- package/typography/ExternalLink/ExternalLink.css +28 -0
- package/typography/ExternalLink/ExternalLink.d.ts +21 -0
- package/typography/ExternalLink/ExternalLink.js +82 -0
- package/typography/ExternalLink/ExternalLink.sty.d.ts +1 -0
- package/typography/ExternalLink/ExternalLink.sty.js +24 -0
- package/typography/Heading/Heading.css +54 -0
- package/typography/Heading/Heading.d.ts +24 -0
- package/typography/Heading/Heading.js +64 -0
- package/typography/Heading/Heading.sty.d.ts +52 -0
- package/typography/Heading/Heading.sty.js +25 -0
- package/typography/Highlight/Highlight.css +4 -0
- package/typography/Highlight/Highlight.d.ts +27 -0
- package/typography/Highlight/Highlight.js +139 -0
- package/typography/Highlight/Highlight.sty.d.ts +1 -0
- package/typography/Highlight/Highlight.sty.js +24 -0
- package/typography/Link/Link.css +15 -0
- package/typography/Link/Link.d.ts +16 -0
- package/typography/Link/Link.js +75 -0
- package/typography/Link/Link.sty.d.ts +1 -0
- package/typography/Link/Link.sty.js +24 -0
- package/typography/List/List.css +16 -0
- package/typography/List/List.d.ts +39 -0
- package/typography/List/List.js +109 -0
- package/typography/List/List.sty.d.ts +2 -0
- package/typography/List/List.sty.js +26 -0
- package/typography/Paragraph/Paragraph.css +19 -0
- package/typography/Paragraph/Paragraph.d.ts +19 -0
- package/typography/Paragraph/Paragraph.js +77 -0
- package/typography/Paragraph/Paragraph.sty.d.ts +16 -0
- package/typography/Paragraph/Paragraph.sty.js +25 -0
- package/typography/Strikethrough/Strikethrough.css +5 -0
- package/typography/Strikethrough/Strikethrough.d.ts +15 -0
- package/typography/Strikethrough/Strikethrough.js +60 -0
- package/typography/Strikethrough/Strikethrough.sty.d.ts +1 -0
- package/typography/Strikethrough/Strikethrough.sty.js +24 -0
- package/typography/Strong/Strong.css +4 -0
- package/typography/Strong/Strong.d.ts +14 -0
- package/typography/Strong/Strong.js +62 -0
- package/typography/Strong/Strong.sty.d.ts +1 -0
- package/typography/Strong/Strong.sty.js +24 -0
- package/typography/Text/Text.css +18 -0
- package/typography/Text/Text.d.ts +26 -0
- package/typography/Text/Text.js +71 -0
- package/typography/Text/Text.sty.d.ts +16 -0
- package/typography/Text/Text.sty.js +25 -0
- package/typography/TextEllipsis/TextEllipsis.css +22 -0
- package/typography/TextEllipsis/TextEllipsis.d.ts +32 -0
- package/typography/TextEllipsis/TextEllipsis.js +167 -0
- package/typography/TextEllipsis/TextEllipsis.sty.d.ts +15 -0
- package/typography/TextEllipsis/TextEllipsis.sty.js +25 -0
- package/typography/index.d.ts +28 -0
- package/typography/index.js +54 -0
- package/typography/utils.d.ts +52 -0
- package/typography/utils.js +119 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var seed_random_exports = {};
|
|
19
|
+
__export(seed_random_exports, {
|
|
20
|
+
mulberry32: () => mulberry32
|
|
21
|
+
});
|
|
22
|
+
module.exports = __toCommonJS(seed_random_exports);
|
|
23
|
+
const memoizedRandomGenerators = {};
|
|
24
|
+
function mulberry32(seed) {
|
|
25
|
+
if (memoizedRandomGenerators[seed] === void 0) {
|
|
26
|
+
memoizedRandomGenerators[seed] = () => {
|
|
27
|
+
let t = seed += 1831565813;
|
|
28
|
+
t = Math.imul(t ^ t >>> 15, t | 1);
|
|
29
|
+
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
|
|
30
|
+
return ((t ^ t >>> 14) >>> 0) / 4294967296;
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
return memoizedRandomGenerators[seed];
|
|
34
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var uuidv4_exports = {};
|
|
19
|
+
__export(uuidv4_exports, {
|
|
20
|
+
uuidv4: () => uuidv4
|
|
21
|
+
});
|
|
22
|
+
module.exports = __toCommonJS(uuidv4_exports);
|
|
23
|
+
var import_seed_random = require("./seed-random.js");
|
|
24
|
+
function uuidv4(seed) {
|
|
25
|
+
const random = seed !== void 0 ? (0, import_seed_random.mulberry32)(seed) : Math.random;
|
|
26
|
+
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
|
|
27
|
+
const randomNumber = random() * 16 | 0;
|
|
28
|
+
const value = char === "x" ? randomNumber : randomNumber & 3 | 8;
|
|
29
|
+
return value.toString(16);
|
|
30
|
+
});
|
|
31
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/content/index.ts"],
|
|
4
|
+
"sourcesContent": ["export { ProgressBar } from './progress/ProgressBar.js';\nexport type { ProgressBarProps } from './progress/ProgressBar.js';\nexport type { ProgressBarIconProps } from './progress/ProgressBarIcon.js';\nexport type { ProgressBarLabelProps } from './progress/ProgressBarLabel.js';\nexport type { ProgressBarValueProps } from './progress/ProgressBarValue.js';\nexport { ProgressCircle } from './progress/ProgressCircle.js';\nexport type { ProgressCircleProps } from './progress/ProgressCircle.js';\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@keyframes ProgressBar_indeterminateAnimationKeyframes__13n9uwh0 {
|
|
2
|
+
0% {
|
|
3
|
+
transform: translateX(-100%) scaleX(0);
|
|
4
|
+
}
|
|
5
|
+
100% {
|
|
6
|
+
transform: translateX(100%) scaleX(1.5);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
.ProgressBar_progressCSS__13n9uwh1 {
|
|
10
|
+
width: 100%;
|
|
11
|
+
border-radius: var(--dt-borders-radius-container-subdued, 8px);
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
15
|
+
.ProgressBar_progressCSS_size_condensed__13n9uwh2 {
|
|
16
|
+
height: 6px;
|
|
17
|
+
}
|
|
18
|
+
.ProgressBar_progressCSS_size_default__13n9uwh3 {
|
|
19
|
+
height: 8px;
|
|
20
|
+
}
|
|
21
|
+
.ProgressBar_progressCSS_variant_onAccent__13n9uwh4 {
|
|
22
|
+
background-color: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
|
|
23
|
+
}
|
|
24
|
+
.ProgressBar_progressCSS_variant_primary__13n9uwh5 {
|
|
25
|
+
background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
26
|
+
}
|
|
27
|
+
.ProgressBar_progressCSS_variant_success__13n9uwh6 {
|
|
28
|
+
background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
29
|
+
}
|
|
30
|
+
.ProgressBar_progressCSS_variant_warning__13n9uwh7 {
|
|
31
|
+
background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
32
|
+
}
|
|
33
|
+
.ProgressBar_progressCSS_variant_critical__13n9uwh8 {
|
|
34
|
+
background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
35
|
+
}
|
|
36
|
+
.ProgressBar_progressCSS_variant_neutral__13n9uwh9 {
|
|
37
|
+
background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
38
|
+
}
|
|
39
|
+
.ProgressBar_progressBarFillCSS__13n9uwha {
|
|
40
|
+
height: 100%;
|
|
41
|
+
transition-duration: var(--dt-timings-fast-default, 170ms);
|
|
42
|
+
transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
|
|
43
|
+
background-color: var(--vars_borderColor__17bwkb02);
|
|
44
|
+
}
|
|
45
|
+
.ProgressBar_progressBarFillCSS_indeterminate_true__13n9uwhb {
|
|
46
|
+
width: 100%;
|
|
47
|
+
animation-name: ProgressBar_indeterminateAnimationKeyframes__13n9uwh0;
|
|
48
|
+
animation-duration: var(--dt-timings-slow-gentle, 800ms);
|
|
49
|
+
animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
|
|
50
|
+
animation-iteration-count: infinite;
|
|
51
|
+
transform-origin: left center;
|
|
52
|
+
}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
import React, { forwardRef } from "react";
|
|
3
|
+
import { isElement } from "react-is";
|
|
4
|
+
import Spacings from "@dynatrace/strato-design-tokens/spacings";
|
|
5
|
+
import { SharedProgressBarPropsContext } from "./contexts/SharedProgressBarPropsContext.js";
|
|
6
|
+
import { useProgressAriaProps } from "./hooks/useProgressAriaProps.js";
|
|
7
|
+
import { progressBarFillCSS, progressCSS } from "./ProgressBar.sty.js";
|
|
8
|
+
import { ProgressBarIcon } from "./ProgressBarIcon.js";
|
|
9
|
+
import { ProgressBarLabel } from "./ProgressBarLabel.js";
|
|
10
|
+
import { ProgressBarValue } from "./ProgressBarValue.js";
|
|
11
|
+
import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
|
|
12
|
+
import { useId } from "../../core/hooks/useId.js";
|
|
13
|
+
import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
|
|
14
|
+
import { colorUtilsCSS } from "../../styles/colorUtils.sty.js";
|
|
15
|
+
function getProgressBarSlots(children) {
|
|
16
|
+
const slots = {
|
|
17
|
+
value: null,
|
|
18
|
+
label: null,
|
|
19
|
+
icon: null
|
|
20
|
+
};
|
|
21
|
+
React.Children.forEach(children, (child) => {
|
|
22
|
+
if (isElement(child)) {
|
|
23
|
+
switch (child.type) {
|
|
24
|
+
case ProgressBarLabel:
|
|
25
|
+
slots.label = child;
|
|
26
|
+
break;
|
|
27
|
+
case ProgressBarIcon:
|
|
28
|
+
slots.icon = child;
|
|
29
|
+
break;
|
|
30
|
+
case ProgressBarValue:
|
|
31
|
+
default:
|
|
32
|
+
slots.value = child;
|
|
33
|
+
break;
|
|
34
|
+
}
|
|
35
|
+
} else {
|
|
36
|
+
if (!slots.value) {
|
|
37
|
+
slots.value = child;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
return slots;
|
|
42
|
+
}
|
|
43
|
+
const _ProgressBar = forwardRef(
|
|
44
|
+
(props, forwardedRef) => {
|
|
45
|
+
const {
|
|
46
|
+
value: originalValue,
|
|
47
|
+
max = 100,
|
|
48
|
+
min = 0,
|
|
49
|
+
density = "default",
|
|
50
|
+
variant = "primary",
|
|
51
|
+
children,
|
|
52
|
+
id: propId,
|
|
53
|
+
"aria-valuetext": ariaValuetext,
|
|
54
|
+
className: consumerClassName,
|
|
55
|
+
style: consumerStyle,
|
|
56
|
+
"data-testid": dataTestId,
|
|
57
|
+
"data-dtrum-mask": dataDtrumMask,
|
|
58
|
+
"data-dtrum-allow": dataDtrumAllow,
|
|
59
|
+
...remainingProps
|
|
60
|
+
} = props;
|
|
61
|
+
const slots = getProgressBarSlots(children);
|
|
62
|
+
const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(
|
|
63
|
+
originalValue,
|
|
64
|
+
min,
|
|
65
|
+
max,
|
|
66
|
+
ariaValuetext
|
|
67
|
+
);
|
|
68
|
+
const ariaLabelingProps = useAriaLabelingProps(remainingProps);
|
|
69
|
+
const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);
|
|
70
|
+
const generatedId = useId({ prefix: "progress-bar" });
|
|
71
|
+
const id = propId ?? generatedId;
|
|
72
|
+
if (!slots.label && !ariaLabelingProps["aria-label"] && !ariaLabelingProps["aria-labelledby"]) {
|
|
73
|
+
// eslint-disable-next-line no-console
|
|
74
|
+
console.warn(
|
|
75
|
+
"If no label is provided please make sure to provide an aria label on your progressCircle element."
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
const progressStyles = {};
|
|
79
|
+
if (!isIndeterminate && value !== void 0) {
|
|
80
|
+
const percentage = (value - min) / (max - min);
|
|
81
|
+
progressStyles["width"] = `${Math.round(percentage * 100)}%`;
|
|
82
|
+
}
|
|
83
|
+
return /* @__PURE__ */ React.createElement(SharedProgressBarPropsContext.Provider, { value: { id, variant, density } }, /* @__PURE__ */ React.createElement(
|
|
84
|
+
"div",
|
|
85
|
+
{
|
|
86
|
+
className: consumerClassName,
|
|
87
|
+
style: {
|
|
88
|
+
display: "flex",
|
|
89
|
+
flexDirection: "column",
|
|
90
|
+
gap: Spacings.Size6,
|
|
91
|
+
width: "100%",
|
|
92
|
+
...consumerStyle
|
|
93
|
+
},
|
|
94
|
+
"data-testid": dataTestId,
|
|
95
|
+
"data-dtrum-mask": dataDtrumMask,
|
|
96
|
+
"data-dtrum-allow": dataDtrumAllow,
|
|
97
|
+
ref: forwardedRef,
|
|
98
|
+
...forwardProps
|
|
99
|
+
},
|
|
100
|
+
/* @__PURE__ */ React.createElement(
|
|
101
|
+
"div",
|
|
102
|
+
{
|
|
103
|
+
style: {
|
|
104
|
+
display: "flex",
|
|
105
|
+
justifyContent: "space-between",
|
|
106
|
+
gap: Spacings.Size8
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
density === "condensed" ? /* @__PURE__ */ React.createElement(
|
|
110
|
+
"div",
|
|
111
|
+
{
|
|
112
|
+
style: {
|
|
113
|
+
display: "flex",
|
|
114
|
+
justifyContent: "space-between",
|
|
115
|
+
alignItems: "flex-end",
|
|
116
|
+
flex: 1,
|
|
117
|
+
gap: Spacings.Size16,
|
|
118
|
+
minWidth: 0
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
slots.label,
|
|
122
|
+
density === "condensed" && slots.value
|
|
123
|
+
) : slots.label,
|
|
124
|
+
slots.icon
|
|
125
|
+
),
|
|
126
|
+
/* @__PURE__ */ React.createElement(
|
|
127
|
+
"div",
|
|
128
|
+
{
|
|
129
|
+
className: progressCSS({ size: density, variant }),
|
|
130
|
+
id,
|
|
131
|
+
...progressAriaProps,
|
|
132
|
+
...ariaLabelingProps
|
|
133
|
+
},
|
|
134
|
+
/* @__PURE__ */ React.createElement(
|
|
135
|
+
"div",
|
|
136
|
+
{
|
|
137
|
+
className: clsx(
|
|
138
|
+
colorUtilsCSS({
|
|
139
|
+
color: variant,
|
|
140
|
+
variant: variant === "onAccent" ? "default" : "accent"
|
|
141
|
+
}),
|
|
142
|
+
progressBarFillCSS({
|
|
143
|
+
indeterminate: isIndeterminate
|
|
144
|
+
})
|
|
145
|
+
),
|
|
146
|
+
style: progressStyles
|
|
147
|
+
}
|
|
148
|
+
)
|
|
149
|
+
),
|
|
150
|
+
density === "default" && slots.value
|
|
151
|
+
));
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
_ProgressBar.displayName = "ProgressBar";
|
|
155
|
+
const ProgressBar = Object.assign(_ProgressBar, {
|
|
156
|
+
Value: ProgressBarValue,
|
|
157
|
+
Label: ProgressBarLabel,
|
|
158
|
+
Icon: ProgressBarIcon
|
|
159
|
+
});
|
|
160
|
+
export {
|
|
161
|
+
ProgressBar
|
|
162
|
+
};
|
|
163
|
+
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/content/progress/ProgressBar.tsx"],
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport React, { CSSProperties, forwardRef } from 'react';\nimport { isElement } from 'react-is';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\n// asd\n\nimport { SharedProgressBarPropsContext } from './contexts/SharedProgressBarPropsContext.js';\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport { progressBarFillCSS, progressCSS } 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 { useId } from '../../core/hooks/useId.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 RoleVariantType } from '../../core/types/role-variant.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.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 appearance of the progress.\n * @defaultValue 'primary'\n */\n variant?: RoleVariantType;\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?: React.ReactNode;\n label?: React.ReactNode;\n icon?: React.ReactNode;\n};\n\nfunction getProgressBarSlots(children: React.ReactNode) {\n const slots: ProgressBarSlots = {\n value: null,\n label: null,\n icon: null,\n };\n\n React.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 variant = 'primary',\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 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({ prefix: 'progress-bar' });\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, variant, density }}>\n {/* TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n <div\n className={consumerClassName}\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: Spacings.Size6,\n width: '100%',\n ...consumerStyle,\n }}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n ref={forwardedRef}\n {...forwardProps}\n >\n {/* //TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n gap: Spacings.Size8,\n }}\n >\n {density === 'condensed' ? (\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'flex-end',\n flex: 1,\n gap: Spacings.Size16,\n minWidth: 0,\n }}\n >\n {/* //TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n {slots.label}\n {density === 'condensed' && slots.value}\n </div>\n ) : (\n slots.label\n )}\n {slots.icon}\n </div>\n <div\n className={progressCSS({ size: density, variant })}\n id={id}\n {...progressAriaProps}\n {...ariaLabelingProps}\n >\n <div\n className={clsx(\n colorUtilsCSS({\n color: variant,\n variant: variant === 'onAccent' ? 'default' : 'accent',\n }),\n progressBarFillCSS({\n indeterminate: isIndeterminate,\n }),\n )}\n style={progressStyles}\n />\n </div>\n {density === 'default' && slots.value}\n </div>\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": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAwB,kBAAkB;AACjD,SAAS,iBAAiB;AAE1B,OAAO,cAAc;AAIrB,SAAS,qCAAqC;AAC9C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB,mBAAmB;AAChD,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAQpC,SAAS,qBAAqB;AAqD9B,SAAS,oBAAoB,UAA2B;AACtD,QAAM,QAA0B;AAAA,IAC9B,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,QAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,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,UAAU;AAAA,MACV;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,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,EAAE,QAAQ,eAAe,CAAC;AACpD,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,oCAAC,8BAA8B,UAA9B,EAAuC,OAAO,EAAE,IAAI,SAAS,QAAQ,KAEpE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK,SAAS;AAAA,UACd,OAAO;AAAA,UACP,GAAG;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACJ,GAAG;AAAA;AAAA,MAGJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,KAAK,SAAS;AAAA,UAChB;AAAA;AAAA,QAEC,YAAY,cACX;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,MAAM;AAAA,cACN,KAAK,SAAS;AAAA,cACd,UAAU;AAAA,YACZ;AAAA;AAAA,UAGC,MAAM;AAAA,UACN,YAAY,eAAe,MAAM;AAAA,QACpC,IAEA,MAAM;AAAA,QAEP,MAAM;AAAA,MACT;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,YAAY,EAAE,MAAM,SAAS,QAAQ,CAAC;AAAA,UACjD;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,cAAc;AAAA,gBACZ,OAAO;AAAA,gBACP,SAAS,YAAY,aAAa,YAAY;AAAA,cAChD,CAAC;AAAA,cACD,mBAAmB;AAAA,gBACjB,eAAe;AAAA,cACjB,CAAC;AAAA,YACH;AAAA,YACA,OAAO;AAAA;AAAA,QACT;AAAA,MACF;AAAA,MACC,YAAY,aAAa,MAAM;AAAA,IAClC,CACF;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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import "../../styles/colorUtils.css";
|
|
2
|
+
import "./ProgressBar.css";
|
|
3
|
+
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
4
|
+
var progressBarFillCSS = _7a468({ defaultClassName: "ProgressBar_progressBarFillCSS__13n9uwha", variantClassNames: { indeterminate: { true: "ProgressBar_progressBarFillCSS_indeterminate_true__13n9uwhb" } }, defaultVariants: {}, compoundVariants: [] });
|
|
5
|
+
var progressCSS = _7a468({ defaultClassName: "ProgressBar_progressCSS__13n9uwh1", variantClassNames: { size: { condensed: "ProgressBar_progressCSS_size_condensed__13n9uwh2", "default": "ProgressBar_progressCSS_size_default__13n9uwh3" }, variant: { onAccent: "ProgressBar_progressCSS_variant_onAccent__13n9uwh4", primary: "ProgressBar_progressCSS_variant_primary__13n9uwh5", success: "ProgressBar_progressCSS_variant_success__13n9uwh6", warning: "ProgressBar_progressCSS_variant_warning__13n9uwh7", critical: "ProgressBar_progressCSS_variant_critical__13n9uwh8", neutral: "ProgressBar_progressCSS_variant_neutral__13n9uwh9" } }, defaultVariants: {}, compoundVariants: [] });
|
|
6
|
+
export {
|
|
7
|
+
progressBarFillCSS,
|
|
8
|
+
progressCSS
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=ProgressBar.sty.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/content/progress/ProgressBar.css.ts"],
|
|
4
|
+
"sourcesContent": ["import '../../styles/colorUtils.css';\nimport './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'ProgressBar_progressBarFillCSS__13n9uwha',variantClassNames:{indeterminate:{true:'ProgressBar_progressBarFillCSS_indeterminate_true__13n9uwhb'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({defaultClassName:'ProgressBar_progressCSS__13n9uwh1',variantClassNames:{size:{condensed:'ProgressBar_progressCSS_size_condensed__13n9uwh2','default':'ProgressBar_progressCSS_size_default__13n9uwh3'},variant:{onAccent:'ProgressBar_progressCSS_variant_onAccent__13n9uwh4',primary:'ProgressBar_progressCSS_variant_primary__13n9uwh5',success:'ProgressBar_progressCSS_variant_success__13n9uwh6',warning:'ProgressBar_progressCSS_variant_warning__13n9uwh7',critical:'ProgressBar_progressCSS_variant_critical__13n9uwh8',neutral:'ProgressBar_progressCSS_variant_neutral__13n9uwh9'}},defaultVariants:{},compoundVariants:[]});"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,4CAA2C,mBAAkB,EAAC,eAAc,EAAC,MAAK,8DAA6D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3O,IAAI,cAAc,OAAO,EAAC,kBAAiB,qCAAoC,mBAAkB,EAAC,MAAK,EAAC,WAAU,oDAAmD,WAAU,iDAAgD,GAAE,SAAQ,EAAC,UAAS,sDAAqD,SAAQ,qDAAoD,SAAQ,qDAAoD,SAAQ,qDAAoD,UAAS,sDAAqD,SAAQ,oDAAmD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
import React, { forwardRef } from "react";
|
|
3
|
+
import { _useSharedProgressBarPropsContext } from "./hooks/useProgressBarPropsContext.js";
|
|
4
|
+
import { progressBarIconContainerCSS } from "./ProgressBarIcon.sty.js";
|
|
5
|
+
import { colorUtilsCSS } from "../../styles/colorUtils.sty.js";
|
|
6
|
+
const ProgressBarIcon = forwardRef(
|
|
7
|
+
(props, forwardedRef) => {
|
|
8
|
+
const {
|
|
9
|
+
children,
|
|
10
|
+
className: consumerClassName,
|
|
11
|
+
style: consumerStyle,
|
|
12
|
+
"data-testid": dataTestId,
|
|
13
|
+
...remainingProps
|
|
14
|
+
} = props;
|
|
15
|
+
const { variant } = _useSharedProgressBarPropsContext();
|
|
16
|
+
return /* @__PURE__ */ React.createElement(
|
|
17
|
+
"div",
|
|
18
|
+
{
|
|
19
|
+
"data-testid": dataTestId,
|
|
20
|
+
ref: forwardedRef,
|
|
21
|
+
className: clsx(
|
|
22
|
+
consumerClassName,
|
|
23
|
+
colorUtilsCSS({
|
|
24
|
+
color: variant,
|
|
25
|
+
variant: variant === "onAccent" ? "default" : "accent"
|
|
26
|
+
}),
|
|
27
|
+
progressBarIconContainerCSS
|
|
28
|
+
),
|
|
29
|
+
style: consumerStyle,
|
|
30
|
+
...remainingProps
|
|
31
|
+
},
|
|
32
|
+
children
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
ProgressBarIcon.displayName = "ProgressBar.Icon";
|
|
37
|
+
export {
|
|
38
|
+
ProgressBarIcon
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=ProgressBarIcon.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/content/progress/ProgressBarIcon.tsx"],
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { _useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarIconContainerCSS } from './ProgressBarIcon.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.sty.js';\n\n/**\n * Accepted properties for ProgressBarIcon.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarIconProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * The ProgressBarIcon subcomponent is rendered inside the ProgressBar component.\n * @public\n */\nexport const ProgressBarIcon = forwardRef<HTMLDivElement, ProgressBarIconProps>(\n (props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarIconProps = props;\n const { variant } = _useSharedProgressBarPropsContext();\n return (\n <div\n data-testid={dataTestId}\n ref={forwardedRef}\n className={clsx(\n consumerClassName,\n colorUtilsCSS({\n color: variant,\n variant: variant === 'onAccent' ? 'default' : 'accent',\n }),\n progressBarIconContainerCSS,\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </div>\n );\n },\n);\n\n(\n ProgressBarIcon as typeof ProgressBarIcon & { displayName: string }\n).displayName = 'ProgressBar.Icon';\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,yCAAyC;AAClD,SAAS,mCAAmC;AAI5C,SAAS,qBAAqB;AAgBvB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA0B;AAC1B,UAAM,EAAE,QAAQ,IAAI,kCAAkC;AACtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,cAAc;AAAA,YACZ,OAAO;AAAA,YACP,SAAS,YAAY,aAAa,YAAY;AAAA,UAChD,CAAC;AAAA,UACD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAGE,gBACA,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/content/progress/ProgressBarIcon.css.ts"],
|
|
4
|
+
"sourcesContent": ["import '../../styles/colorUtils.css';\nimport './ProgressBarIcon.css';\nexport var progressBarIconContainerCSS = 'ProgressBarIcon_progressBarIconContainerCSS__szm9t40';"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,8BAA8B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
.ProgressBarLabel_progressBarLabelCSS__1ceb8vp0 {
|
|
2
|
+
color: var(--vars_text__6levse0);
|
|
3
|
+
}
|
|
4
|
+
.ProgressBarLabel_progressBarLabelCSS_size_default__1ceb8vp2 {
|
|
5
|
+
word-break: break-word;
|
|
6
|
+
}
|
|
7
|
+
.ProgressBarLabel_progressBarLabelCSS_childIsText_false__1ceb8vp3 {
|
|
8
|
+
word-break: break-word;
|
|
9
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
import React, { forwardRef } from "react";
|
|
3
|
+
import { _useSharedProgressBarPropsContext } from "./hooks/useProgressBarPropsContext.js";
|
|
4
|
+
import { progressBarLabelCSS } from "./ProgressBarLabel.sty.js";
|
|
5
|
+
import { isStringChildren } from "../../core/utils/_is-string-children.js";
|
|
6
|
+
import { containerColorsCSS } from "../../styles/container.sty.js";
|
|
7
|
+
import { ellipsisCSS } from "../../styles/ellipsis.sty.js";
|
|
8
|
+
import { textStyleCSS } from "../../styles/textStyle.sty.js";
|
|
9
|
+
const ProgressBarLabel = forwardRef((props, forwardedRef) => {
|
|
10
|
+
const {
|
|
11
|
+
children,
|
|
12
|
+
className: consumerClassName,
|
|
13
|
+
style: consumerStyle,
|
|
14
|
+
"data-testid": dataTestId,
|
|
15
|
+
...remainingProps
|
|
16
|
+
} = props;
|
|
17
|
+
const { id, variant, density } = _useSharedProgressBarPropsContext();
|
|
18
|
+
const childIsText = isStringChildren(children);
|
|
19
|
+
return /* @__PURE__ */ React.createElement(
|
|
20
|
+
"label",
|
|
21
|
+
{
|
|
22
|
+
"data-testid": dataTestId,
|
|
23
|
+
ref: forwardedRef,
|
|
24
|
+
htmlFor: id,
|
|
25
|
+
className: clsx(
|
|
26
|
+
{
|
|
27
|
+
[ellipsisCSS]: density === "condensed" && childIsText
|
|
28
|
+
},
|
|
29
|
+
consumerClassName,
|
|
30
|
+
containerColorsCSS({
|
|
31
|
+
color: "neutral",
|
|
32
|
+
variant: variant === "onAccent" ? "accent" : "default"
|
|
33
|
+
}),
|
|
34
|
+
progressBarLabelCSS({ size: density, childIsText }),
|
|
35
|
+
textStyleCSS({ textStyle: "base" })
|
|
36
|
+
),
|
|
37
|
+
style: consumerStyle,
|
|
38
|
+
...remainingProps
|
|
39
|
+
},
|
|
40
|
+
children
|
|
41
|
+
);
|
|
42
|
+
});
|
|
43
|
+
ProgressBarLabel.displayName = "ProgressBar.Label";
|
|
44
|
+
export {
|
|
45
|
+
ProgressBarLabel
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=ProgressBarLabel.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/content/progress/ProgressBarLabel.tsx"],
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { _useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarLabelCSS } from './ProgressBarLabel.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { isStringChildren } from '../../core/utils/_is-string-children.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport { ellipsisCSS } from '../../styles/ellipsis.sty.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressBarLabel.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarLabelProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * ProgressBarLabel sub-component is rendered inside ProgressBar component.\n * @public\n */\nexport const ProgressBarLabel = forwardRef<\n HTMLLabelElement,\n ProgressBarLabelProps\n>((props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarLabelProps = props;\n\n const { id, variant, density } = _useSharedProgressBarPropsContext();\n\n const childIsText = isStringChildren(children);\n\n return (\n <label\n data-testid={dataTestId}\n ref={forwardedRef}\n htmlFor={id}\n className={clsx(\n {\n [ellipsisCSS]: density === 'condensed' && childIsText,\n },\n consumerClassName,\n containerColorsCSS({\n color: 'neutral',\n variant: variant === 'onAccent' ? 'accent' : 'default',\n }),\n progressBarLabelCSS({ size: density, childIsText }),\n textStyleCSS({ textStyle: 'base' }),\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </label>\n );\n});\n\n(\n ProgressBarLabel as typeof ProgressBarLabel & { displayName: string }\n).displayName = 'ProgressBar.Label';\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,yCAAyC;AAClD,SAAS,2BAA2B;AAIpC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAgBtB,MAAM,mBAAmB,WAG9B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAA2B;AAE3B,QAAM,EAAE,IAAI,SAAS,QAAQ,IAAI,kCAAkC;AAEnE,QAAM,cAAc,iBAAiB,QAAQ;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,UACE,CAAC,WAAW,GAAG,YAAY,eAAe;AAAA,QAC5C;AAAA,QACA;AAAA,QACA,mBAAmB;AAAA,UACjB,OAAO;AAAA,UACP,SAAS,YAAY,aAAa,WAAW;AAAA,QAC/C,CAAC;AAAA,QACD,oBAAoB,EAAE,MAAM,SAAS,YAAY,CAAC;AAAA,QAClD,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,MACpC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AAGC,iBACA,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import "../../styles/container.css";
|
|
2
|
+
import "./ProgressBarLabel.css";
|
|
3
|
+
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
4
|
+
var progressBarLabelCSS = _7a468({ defaultClassName: "ProgressBarLabel_progressBarLabelCSS__1ceb8vp0", variantClassNames: { size: { condensed: "ProgressBarLabel_progressBarLabelCSS_size_condensed__1ceb8vp1", "default": "ProgressBarLabel_progressBarLabelCSS_size_default__1ceb8vp2" }, childIsText: { false: "ProgressBarLabel_progressBarLabelCSS_childIsText_false__1ceb8vp3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
5
|
+
export {
|
|
6
|
+
progressBarLabelCSS
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=ProgressBarLabel.sty.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/content/progress/ProgressBarLabel.css.ts"],
|
|
4
|
+
"sourcesContent": ["import '../../styles/container.css';\nimport './ProgressBarLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarLabelCSS = _7a468({defaultClassName:'ProgressBarLabel_progressBarLabelCSS__1ceb8vp0',variantClassNames:{size:{condensed:'ProgressBarLabel_progressBarLabelCSS_size_condensed__1ceb8vp1','default':'ProgressBarLabel_progressBarLabelCSS_size_default__1ceb8vp2'},childIsText:{false:'ProgressBarLabel_progressBarLabelCSS_childIsText_false__1ceb8vp3'}},defaultVariants:{},compoundVariants:[]});"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,kDAAiD,mBAAkB,EAAC,MAAK,EAAC,WAAU,iEAAgE,WAAU,8DAA6D,GAAE,aAAY,EAAC,OAAM,mEAAkE,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.ProgressBarValue_progressBarValueCSS_variant_onAccent__1ri4i7o1 {
|
|
2
|
+
color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
3
|
+
}
|
|
4
|
+
.ProgressBarValue_progressBarValueCSS_variant_primary__1ri4i7o2 {
|
|
5
|
+
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
6
|
+
}
|
|
7
|
+
.ProgressBarValue_progressBarValueCSS_variant_success__1ri4i7o3 {
|
|
8
|
+
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
9
|
+
}
|
|
10
|
+
.ProgressBarValue_progressBarValueCSS_variant_warning__1ri4i7o4 {
|
|
11
|
+
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
12
|
+
}
|
|
13
|
+
.ProgressBarValue_progressBarValueCSS_variant_critical__1ri4i7o5 {
|
|
14
|
+
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
15
|
+
}
|
|
16
|
+
.ProgressBarValue_progressBarValueCSS_variant_neutral__1ri4i7o6 {
|
|
17
|
+
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
18
|
+
}
|
|
19
|
+
.ProgressBarValue_progressBarValueCSS_size_default__1ri4i7o8 {
|
|
20
|
+
word-break: break-word;
|
|
21
|
+
}
|
|
22
|
+
.ProgressBarValue_progressBarValueCSS_childIsText_false__1ri4i7oa {
|
|
23
|
+
word-break: break-word;
|
|
24
|
+
}
|
|
25
|
+
.ProgressBarValue_progressBarValueCSS_compound_0__1ri4i7ob {
|
|
26
|
+
margin-left: auto;
|
|
27
|
+
align-self: center;
|
|
28
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
import React, { forwardRef } from "react";
|
|
3
|
+
import { useIntl } from "react-intl";
|
|
4
|
+
import { _useSharedProgressBarPropsContext } from "./hooks/useProgressBarPropsContext.js";
|
|
5
|
+
import { progressBarValueCSS } from "./ProgressBarValue.sty.js";
|
|
6
|
+
import { isStringChildren } from "../../core/utils/_is-string-children.js";
|
|
7
|
+
import { textStyleCSS } from "../../styles/textStyle.sty.js";
|
|
8
|
+
const ProgressBarValue = forwardRef((props, forwardedRef) => {
|
|
9
|
+
const {
|
|
10
|
+
children,
|
|
11
|
+
className: consumerClassName,
|
|
12
|
+
style: consumerStyle,
|
|
13
|
+
"data-testid": dataTestId,
|
|
14
|
+
...remainingProps
|
|
15
|
+
} = props;
|
|
16
|
+
const intl = useIntl();
|
|
17
|
+
const progressBarDefaultLabel = intl.formatMessage({
|
|
18
|
+
defaultMessage: "Loading",
|
|
19
|
+
id: "3J6qHQEUwDxvZuIl",
|
|
20
|
+
description: "Default label for the progress-bar."
|
|
21
|
+
});
|
|
22
|
+
const { variant, density } = _useSharedProgressBarPropsContext();
|
|
23
|
+
const childIsText = isStringChildren(children);
|
|
24
|
+
return /* @__PURE__ */ React.createElement(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
"data-testid": dataTestId,
|
|
28
|
+
ref: forwardedRef,
|
|
29
|
+
className: clsx(
|
|
30
|
+
consumerClassName,
|
|
31
|
+
progressBarValueCSS({ variant, size: density, childIsText }),
|
|
32
|
+
textStyleCSS({ textStyle: "small" })
|
|
33
|
+
),
|
|
34
|
+
style: consumerStyle,
|
|
35
|
+
...remainingProps
|
|
36
|
+
},
|
|
37
|
+
children || progressBarDefaultLabel
|
|
38
|
+
);
|
|
39
|
+
});
|
|
40
|
+
ProgressBarValue.displayName = "ProgressBar.Value";
|
|
41
|
+
export {
|
|
42
|
+
ProgressBarValue
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=ProgressBarValue.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/content/progress/ProgressBarValue.tsx"],
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarValueCSS } from './ProgressBarValue.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { isStringChildren } from '../../core/utils/_is-string-children.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressBarValue.\n * @public\n * */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarValueProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * ProgressBarValue sub-component is rendered inside ProgressBar component.\n * @public\n */\nexport const ProgressBarValue = forwardRef<\n HTMLDivElement,\n ProgressBarValueProps\n>((props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarValueProps = props;\n const intl = useIntl();\n\n const progressBarDefaultLabel = intl.formatMessage({\n defaultMessage: 'Loading',\n id: '3J6qHQEUwDxvZuIl',\n description: 'Default label for the progress-bar.',\n });\n\n const { variant, density } = _useSharedProgressBarPropsContext();\n\n const childIsText = isStringChildren(children);\n\n return (\n <div\n data-testid={dataTestId}\n ref={forwardedRef}\n className={clsx(\n consumerClassName,\n progressBarValueCSS({ variant, size: density, childIsText }),\n textStyleCSS({ textStyle: 'small' }),\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children || progressBarDefaultLabel}\n </div>\n );\n});\n\n(\n ProgressBarValue as typeof ProgressBarValue & { displayName: string }\n).displayName = 'ProgressBar.Value';\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAClC,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2BAA2B;AAIpC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAgBtB,MAAM,mBAAmB,WAG9B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAA2B;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,0BAA0B,KAAK,cAAc;AAAA,IACjD,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,EAAE,SAAS,QAAQ,IAAI,kCAAkC;AAE/D,QAAM,cAAc,iBAAiB,QAAQ;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,oBAAoB,EAAE,SAAS,MAAM,SAAS,YAAY,CAAC;AAAA,QAC3D,aAAa,EAAE,WAAW,QAAQ,CAAC;AAAA,MACrC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEH,YAAY;AAAA,EACf;AAEJ,CAAC;AAGC,iBACA,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import "../../styles/ellipsis.css";
|
|
2
|
+
import "./ProgressBarValue.css";
|
|
3
|
+
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
4
|
+
var progressBarValueCSS = _7a468({ defaultClassName: "ProgressBarValue__1ri4i7o0", variantClassNames: { variant: { onAccent: "ProgressBarValue_progressBarValueCSS_variant_onAccent__1ri4i7o1", primary: "ProgressBarValue_progressBarValueCSS_variant_primary__1ri4i7o2", success: "ProgressBarValue_progressBarValueCSS_variant_success__1ri4i7o3", warning: "ProgressBarValue_progressBarValueCSS_variant_warning__1ri4i7o4", critical: "ProgressBarValue_progressBarValueCSS_variant_critical__1ri4i7o5", neutral: "ProgressBarValue_progressBarValueCSS_variant_neutral__1ri4i7o6" }, size: { condensed: "ProgressBarValue_progressBarValueCSS_size_condensed__1ri4i7o7", "default": "ProgressBarValue_progressBarValueCSS_size_default__1ri4i7o8" }, childIsText: { true: "ProgressBarValue_progressBarValueCSS_childIsText_true__1ri4i7o9", false: "ProgressBarValue_progressBarValueCSS_childIsText_false__1ri4i7oa" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "ProgressBarValue_progressBarValueCSS_compound_0__1ri4i7ob ellipsis_ellipsisCSS__oqqp1n0"]] });
|
|
5
|
+
export {
|
|
6
|
+
progressBarValueCSS
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=ProgressBarValue.sty.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/content/progress/ProgressBarValue.css.ts"],
|
|
4
|
+
"sourcesContent": ["import '../../styles/ellipsis.css';\nimport './ProgressBarValue.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarValueCSS = _7a468({defaultClassName:'ProgressBarValue__1ri4i7o0',variantClassNames:{variant:{onAccent:'ProgressBarValue_progressBarValueCSS_variant_onAccent__1ri4i7o1',primary:'ProgressBarValue_progressBarValueCSS_variant_primary__1ri4i7o2',success:'ProgressBarValue_progressBarValueCSS_variant_success__1ri4i7o3',warning:'ProgressBarValue_progressBarValueCSS_variant_warning__1ri4i7o4',critical:'ProgressBarValue_progressBarValueCSS_variant_critical__1ri4i7o5',neutral:'ProgressBarValue_progressBarValueCSS_variant_neutral__1ri4i7o6'},size:{condensed:'ProgressBarValue_progressBarValueCSS_size_condensed__1ri4i7o7','default':'ProgressBarValue_progressBarValueCSS_size_default__1ri4i7o8'},childIsText:{true:'ProgressBarValue_progressBarValueCSS_childIsText_true__1ri4i7o9',false:'ProgressBarValue_progressBarValueCSS_childIsText_false__1ri4i7oa'}},defaultVariants:{},compoundVariants:[[{size:'condensed',childIsText:true},'ProgressBarValue_progressBarValueCSS_compound_0__1ri4i7ob ellipsis_ellipsisCSS__oqqp1n0']]});"],
|
|
5
|
+
"mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,8BAA6B,mBAAkB,EAAC,SAAQ,EAAC,UAAS,mEAAkE,SAAQ,kEAAiE,SAAQ,kEAAiE,SAAQ,kEAAiE,UAAS,mEAAkE,SAAQ,iEAAgE,GAAE,MAAK,EAAC,WAAU,iEAAgE,WAAU,8DAA6D,GAAE,aAAY,EAAC,MAAK,mEAAkE,OAAM,mEAAkE,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,MAAK,aAAY,aAAY,KAAI,GAAE,yFAAyF,CAAC,EAAC,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|