@dynatrace/strato-components 0.84.51 → 0.85.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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\
|
|
5
|
-
"mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAwB,kBAAkB;AACjD,SAAS,iBAAiB;AAE1B,OAAO,cAAc;
|
|
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\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynatrace/strato-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.85.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"lang": "lang/uncompiled",
|
|
@@ -66,26 +66,26 @@
|
|
|
66
66
|
"dependencies": {
|
|
67
67
|
"@dynatrace-sdk/units": "^0.13.1",
|
|
68
68
|
"@dynatrace/devkit": "^0.3.2",
|
|
69
|
-
"@formatjs/icu-messageformat-parser": "^2.
|
|
69
|
+
"@formatjs/icu-messageformat-parser": "^2.7.8",
|
|
70
70
|
"@jest/globals": "^29.7.0",
|
|
71
71
|
"clsx": "^2.1.1",
|
|
72
72
|
"lodash-es": "^4.17.21",
|
|
73
73
|
"wicg-inert": "^3.1.2",
|
|
74
74
|
"use-resize-observer": "^9.1.0",
|
|
75
75
|
"@dynatrace/strato-design-tokens": "0.20.30",
|
|
76
|
-
"@dynatrace/strato-icons": "0.
|
|
76
|
+
"@dynatrace/strato-icons": "0.39.0"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
79
|
-
"@dynatrace-sdk/app-environment": "
|
|
80
|
-
"@dynatrace-sdk/error-handlers": "
|
|
81
|
-
"@dynatrace-sdk/navigation": "
|
|
82
|
-
"@dynatrace-sdk/user-preferences": "
|
|
83
|
-
"@testing-library/react": "^
|
|
84
|
-
"@testing-library/user-event": "
|
|
85
|
-
"react": "^
|
|
86
|
-
"react-dom": "^
|
|
79
|
+
"@dynatrace-sdk/app-environment": "^1.0.0",
|
|
80
|
+
"@dynatrace-sdk/error-handlers": "^1.0.0",
|
|
81
|
+
"@dynatrace-sdk/navigation": "^1.0.0",
|
|
82
|
+
"@dynatrace-sdk/user-preferences": "^1.1.0",
|
|
83
|
+
"@testing-library/react": "^14.0.0 || ^15.0.0",
|
|
84
|
+
"@testing-library/user-event": "^14.0.0",
|
|
85
|
+
"react": "^18.0.0",
|
|
86
|
+
"react-dom": "^18.0.0",
|
|
87
87
|
"react-intl": "^6.0.8",
|
|
88
|
-
"react-is": "^
|
|
88
|
+
"react-is": "^18.0.0"
|
|
89
89
|
},
|
|
90
90
|
"peerDependenciesMeta": {
|
|
91
91
|
"@testing-library/react": {
|