@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,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 FocusScope_exports = {};
|
|
29
20
|
__export(FocusScope_exports, {
|
|
30
21
|
FocusScope: () => FocusScope
|
|
31
22
|
});
|
|
32
23
|
module.exports = __toCommonJS(FocusScope_exports);
|
|
33
|
-
var
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_react = require("react");
|
|
34
26
|
var import_useActiveElement = require("../../hooks/useActiveElement.js");
|
|
35
27
|
var import_useFocusContext = require("../../hooks/useFocusContext.js");
|
|
36
28
|
var import_focus_first_descendant = require("../../utils/focus-management/focus-first-descendant.js");
|
|
@@ -68,14 +60,14 @@ const FocusScope = (props) => {
|
|
|
68
60
|
triggerElementCopy.focus();
|
|
69
61
|
};
|
|
70
62
|
}, [contain, autoFocus]);
|
|
71
|
-
return /* @__PURE__ */
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
72
64
|
"div",
|
|
73
65
|
{
|
|
74
66
|
style: { display: "contents" },
|
|
75
67
|
ref: wrapperRef,
|
|
76
|
-
"aria-labelledby": triggerElement.current.id
|
|
77
|
-
|
|
78
|
-
|
|
68
|
+
"aria-labelledby": triggerElement.current.id,
|
|
69
|
+
children
|
|
70
|
+
}
|
|
79
71
|
);
|
|
80
72
|
};
|
|
81
73
|
FocusScope.displayName = "FocusScope";
|
|
@@ -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;
|
|
@@ -24,7 +25,7 @@ var import_lodash_es = require("lodash");
|
|
|
24
25
|
var import_react = require("react");
|
|
25
26
|
function useFontsUpdated(callback) {
|
|
26
27
|
const [fontsUpdated, setFontsUpdated] = (0, import_react.useState)(false);
|
|
27
|
-
const prevFontFamilies = (0, import_react.useRef)();
|
|
28
|
+
const prevFontFamilies = (0, import_react.useRef)([]);
|
|
28
29
|
const fontFamilies = [];
|
|
29
30
|
const firstRender = (0, import_react.useRef)(true);
|
|
30
31
|
if (document.fonts) {
|
package/core/hooks/useId.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type MutableRefObject, type LegacyRef, type SetStateAction, type Dispatch, type RefCallback } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* If you have multiple references (e.g. from different hooks) you need to apply to
|
|
4
4
|
* the same element, you can use the `useMergeRefs` hook to combine them into one
|
|
5
5
|
* reference.
|
|
6
6
|
*/
|
|
7
|
-
export declare function useMergeRefs<T = unknown>(refs: Array<
|
|
7
|
+
export declare function useMergeRefs<T = unknown>(refs: Array<MutableRefObject<T> | LegacyRef<T> | Dispatch<SetStateAction<T | null>> | undefined>): RefCallback<T>;
|
package/core/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { WithChildren } from '../types/with-children.js';
|
|
3
2
|
/**
|
|
4
3
|
* Type defining the modality options for the focus handling.
|
|
@@ -11,6 +10,6 @@ export type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';
|
|
|
11
10
|
* @internal
|
|
12
11
|
*/
|
|
13
12
|
export declare const FocusProvider: {
|
|
14
|
-
({ children }: WithChildren):
|
|
13
|
+
({ children }: WithChildren): import("react/jsx-runtime.js").JSX.Element;
|
|
15
14
|
displayName: string;
|
|
16
15
|
};
|
|
@@ -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 FocusProvider_exports = {};
|
|
29
20
|
__export(FocusProvider_exports, {
|
|
30
21
|
FocusProvider: () => FocusProvider
|
|
31
22
|
});
|
|
32
23
|
module.exports = __toCommonJS(FocusProvider_exports);
|
|
33
|
-
var
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_react = require("react");
|
|
34
26
|
var import_FocusContext = require("../contexts/FocusContext.js");
|
|
35
27
|
var import_useFocusContext = require("../hooks/useFocusContext.js");
|
|
36
28
|
var import_merge_props = require("../utils/merge-props.js");
|
|
@@ -129,7 +121,7 @@ const FocusProvider = ({ children }) => {
|
|
|
129
121
|
tabIndex: -1,
|
|
130
122
|
"aria-hidden": true
|
|
131
123
|
} : { inert: void 0, tabIndex: void 0, "aria-hidden": false };
|
|
132
|
-
return /* @__PURE__ */
|
|
124
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
133
125
|
import_FocusContext.FocusContext.Provider,
|
|
134
126
|
{
|
|
135
127
|
value: {
|
|
@@ -138,9 +130,9 @@ const FocusProvider = ({ children }) => {
|
|
|
138
130
|
setBackgroundInertness,
|
|
139
131
|
modality
|
|
140
132
|
})
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
|
|
133
|
+
},
|
|
134
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...focusProps, children })
|
|
135
|
+
}
|
|
144
136
|
);
|
|
145
137
|
};
|
|
146
138
|
FocusProvider["displayName"] = "FocusProvider";
|
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
._z2r50s3-1-
|
|
1
|
+
._z2r50s3-1-6-0 {
|
|
2
2
|
outline: none;
|
|
3
3
|
}
|
|
4
|
-
._z2r50s3-1-
|
|
4
|
+
._z2r50s3-1-6-0:focus-visible {
|
|
5
5
|
outline: none;
|
|
6
6
|
}
|
|
7
|
-
._z2r50s4-1-
|
|
7
|
+
._z2r50s4-1-6-0 {
|
|
8
8
|
border-radius: var(--dt-borders-radius-field-subdued, 4px);
|
|
9
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-
|
|
10
|
-
background-color: var(--_z2r50s2-1-
|
|
11
|
-
}
|
|
12
|
-
._z2r50s5-1-
|
|
13
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-
|
|
14
|
-
}
|
|
15
|
-
._z2r50s6-1-
|
|
16
|
-
--_z2r50s0-1-
|
|
17
|
-
--_z2r50s1-1-
|
|
18
|
-
--_z2r50s2-1-
|
|
19
|
-
}
|
|
20
|
-
._z2r50s7-1-
|
|
21
|
-
--_z2r50s0-1-
|
|
22
|
-
--_z2r50s1-1-
|
|
23
|
-
--_z2r50s2-1-
|
|
24
|
-
}
|
|
25
|
-
._z2r50s8-1-
|
|
26
|
-
--_z2r50s0-1-
|
|
27
|
-
--_z2r50s1-1-
|
|
28
|
-
--_z2r50s2-1-
|
|
29
|
-
}
|
|
30
|
-
._z2r50s9-1-
|
|
31
|
-
--_z2r50s0-1-
|
|
32
|
-
--_z2r50s1-1-
|
|
33
|
-
--_z2r50s2-1-
|
|
34
|
-
}
|
|
35
|
-
._z2r50sa-1-
|
|
36
|
-
--_z2r50s0-1-
|
|
37
|
-
--_z2r50s1-1-
|
|
38
|
-
--_z2r50s2-1-
|
|
39
|
-
}
|
|
40
|
-
._z2r50sb-1-
|
|
9
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-6-0);
|
|
10
|
+
background-color: var(--_z2r50s2-1-6-0);
|
|
11
|
+
}
|
|
12
|
+
._z2r50s5-1-6-0._z2r50s5-1-6-0 {
|
|
13
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-6-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-6-0);
|
|
14
|
+
}
|
|
15
|
+
._z2r50s6-1-6-0 {
|
|
16
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-neutral-accent, #545587);
|
|
17
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
18
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
|
|
19
|
+
}
|
|
20
|
+
._z2r50s7-1-6-0 {
|
|
21
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-primary-accent, #454cc9);
|
|
22
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-primary-default, #ccd3f3);
|
|
23
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
|
|
24
|
+
}
|
|
25
|
+
._z2r50s8-1-6-0 {
|
|
26
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-success-accent, #2c6360);
|
|
27
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-success-default, #cad6d7);
|
|
28
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-success-emphasized, #d4dddf);
|
|
29
|
+
}
|
|
30
|
+
._z2r50s9-1-6-0 {
|
|
31
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-warning-accent, #805100);
|
|
32
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-warning-default, #f4e5d5);
|
|
33
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
|
|
34
|
+
}
|
|
35
|
+
._z2r50sa-1-6-0 {
|
|
36
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-critical-accent, #b80031);
|
|
37
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-critical-default, #f1cdcf);
|
|
38
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
|
|
39
|
+
}
|
|
40
|
+
._z2r50sb-1-6-0:focus-within {
|
|
41
41
|
outline: none;
|
|
42
42
|
}
|
|
43
|
-
._z2r50sc-1-
|
|
43
|
+
._z2r50sc-1-6-0:focus-within {
|
|
44
44
|
border-radius: var(--dt-borders-radius-field-subdued, 4px);
|
|
45
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-
|
|
46
|
-
background-color: var(--_z2r50s2-1-
|
|
47
|
-
}
|
|
48
|
-
._z2r50sd-1-
|
|
49
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-
|
|
50
|
-
}
|
|
51
|
-
._z2r50se-1-
|
|
52
|
-
--_z2r50s0-1-
|
|
53
|
-
--_z2r50s1-1-
|
|
54
|
-
--_z2r50s2-1-
|
|
55
|
-
}
|
|
56
|
-
._z2r50sf-1-
|
|
57
|
-
--_z2r50s0-1-
|
|
58
|
-
--_z2r50s1-1-
|
|
59
|
-
--_z2r50s2-1-
|
|
60
|
-
}
|
|
61
|
-
._z2r50sg-1-
|
|
62
|
-
--_z2r50s0-1-
|
|
63
|
-
--_z2r50s1-1-
|
|
64
|
-
--_z2r50s2-1-
|
|
65
|
-
}
|
|
66
|
-
._z2r50sh-1-
|
|
67
|
-
--_z2r50s0-1-
|
|
68
|
-
--_z2r50s1-1-
|
|
69
|
-
--_z2r50s2-1-
|
|
70
|
-
}
|
|
71
|
-
._z2r50si-1-
|
|
72
|
-
--_z2r50s0-1-
|
|
73
|
-
--_z2r50s1-1-
|
|
74
|
-
--_z2r50s2-1-
|
|
45
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-6-0);
|
|
46
|
+
background-color: var(--_z2r50s2-1-6-0);
|
|
47
|
+
}
|
|
48
|
+
._z2r50sd-1-6-0:focus-within {
|
|
49
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-6-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-6-0);
|
|
50
|
+
}
|
|
51
|
+
._z2r50se-1-6-0 {
|
|
52
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-neutral-accent, #545587);
|
|
53
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
54
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
|
|
55
|
+
}
|
|
56
|
+
._z2r50sf-1-6-0 {
|
|
57
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-primary-accent, #454cc9);
|
|
58
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-primary-default, #ccd3f3);
|
|
59
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
|
|
60
|
+
}
|
|
61
|
+
._z2r50sg-1-6-0 {
|
|
62
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-success-accent, #2c6360);
|
|
63
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-success-default, #cad6d7);
|
|
64
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-success-emphasized, #d4dddf);
|
|
65
|
+
}
|
|
66
|
+
._z2r50sh-1-6-0 {
|
|
67
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-warning-accent, #805100);
|
|
68
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-warning-default, #f4e5d5);
|
|
69
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
|
|
70
|
+
}
|
|
71
|
+
._z2r50si-1-6-0 {
|
|
72
|
+
--_z2r50s0-1-6-0: var(--dt-colors-border-critical-accent, #b80031);
|
|
73
|
+
--_z2r50s1-1-6-0: var(--dt-colors-border-critical-default, #f1cdcf);
|
|
74
|
+
--_z2r50s2-1-6-0: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
|
|
75
75
|
}
|
|
@@ -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;
|
|
@@ -23,5 +24,5 @@ __export(focusRing_css_exports, {
|
|
|
23
24
|
module.exports = __toCommonJS(focusRing_css_exports);
|
|
24
25
|
var import_focusRing_css_ts_vanilla = require("./focusRing.css");
|
|
25
26
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
26
|
-
var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-
|
|
27
|
-
var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-
|
|
27
|
+
var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-6-0", variantClassNames: { minimal: { true: "_z2r50s4-1-6-0", false: "_z2r50s5-1-6-0" }, variant: { neutral: "_z2r50s6-1-6-0", primary: "_z2r50s7-1-6-0", success: "_z2r50s8-1-6-0", warning: "_z2r50s9-1-6-0", critical: "_z2r50sa-1-6-0" } }, defaultVariants: {}, compoundVariants: [] });
|
|
28
|
+
var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-6-0", variantClassNames: { minimal: { true: "_z2r50sc-1-6-0", false: "_z2r50sd-1-6-0" }, variant: { neutral: "_z2r50se-1-6-0", primary: "_z2r50sf-1-6-0", success: "_z2r50sg-1-6-0", warning: "_z2r50sh-1-6-0", critical: "_z2r50si-1-6-0" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FocusEvent } from 'react';
|
|
1
|
+
import { type FocusEvent as ReactFocusEvent } from 'react';
|
|
2
2
|
/** @internal */
|
|
3
3
|
export type VariantType = 'neutral' | 'primary' | 'success' | 'warning' | 'critical';
|
|
4
4
|
/** @internal */
|
|
@@ -32,8 +32,8 @@ export type FocusRingProps = {
|
|
|
32
32
|
focusClassName: string;
|
|
33
33
|
/** Focus handlers used to manage the focus state. Must be applied to the element that receives the focus.*/
|
|
34
34
|
focusProps: {
|
|
35
|
-
onFocus: (e:
|
|
36
|
-
onBlur: (e:
|
|
35
|
+
onFocus: (e: ReactFocusEvent) => void;
|
|
36
|
+
onBlur: (e: ReactFocusEvent) => void;
|
|
37
37
|
};
|
|
38
38
|
/** Whether or not the element got focus via keyboard. */
|
|
39
39
|
isFocusVisible: boolean;
|
package/core/types/a11y-props.js
CHANGED
package/core/types/data-props.js
CHANGED
package/core/types/dom.js
CHANGED
package/core/types/heading.js
CHANGED
package/core/types/polymorph.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Returns whether children only consist of text nodes.
|
|
4
4
|
* @internal
|
|
5
5
|
*/
|
|
6
|
-
export declare function isStringChildren(children:
|
|
6
|
+
export declare function isStringChildren(children: ReactNode): children is string;
|
|
@@ -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,25 +15,17 @@ 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 is_string_children_exports = {};
|
|
29
20
|
__export(is_string_children_exports, {
|
|
30
21
|
isStringChildren: () => isStringChildren
|
|
31
22
|
});
|
|
32
23
|
module.exports = __toCommonJS(is_string_children_exports);
|
|
33
|
-
var import_react =
|
|
24
|
+
var import_react = require("react");
|
|
34
25
|
var import_react_intl = require("react-intl");
|
|
35
26
|
var import_react_is = require("react-is");
|
|
36
27
|
function isStringChildren(children) {
|
|
37
|
-
const childrenArray = import_react.
|
|
28
|
+
const childrenArray = import_react.Children.toArray(children);
|
|
38
29
|
if (!childrenArray.some(import_react_is.isElement)) {
|
|
39
30
|
return true;
|
|
40
31
|
}
|