@codecademy/gamut 67.5.1-alpha.69d169.0 → 67.5.1
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/dist/Alert/elements.d.ts +3 -3
- package/dist/Anchor/index.d.ts +6 -6
- package/dist/Badge/index.d.ts +1 -1
- package/dist/Box/Box.d.ts +1 -1
- package/dist/Box/FlexBox.d.ts +1 -1
- package/dist/Box/GridBox.d.ts +1 -1
- package/dist/Button/CTAButton.d.ts +2 -2
- package/dist/Button/FillButton.d.ts +4 -4
- package/dist/Button/IconButton.d.ts +4 -4
- package/dist/Button/StrokeButton.d.ts +4 -4
- package/dist/Button/TextButton.d.ts +4 -4
- package/dist/Button/shared/InlineIconButton.d.ts +2 -2
- package/dist/Button/shared/styles.d.ts +3 -3
- package/dist/ButtonBase/ButtonBase.d.ts +2 -2
- package/dist/Card/elements.d.ts +21 -21
- package/dist/ConnectedForm/utils.d.ts +2 -2
- package/dist/ContentContainer/index.d.ts +1 -1
- package/dist/Disclosure/elements.d.ts +13 -13
- package/dist/Form/elements/Form.d.ts +5 -5
- package/dist/Form/elements/FormGroup.d.ts +1 -1
- package/dist/GridForm/GridFormButtons/index.d.ts +4 -4
- package/dist/InternalFloatingCard/InternalFloatingCard.d.ts +5 -5
- package/dist/Layout/Column.d.ts +1 -1
- package/dist/Layout/LayoutGrid.d.ts +1 -1
- package/dist/List/elements.d.ts +12 -12
- package/dist/Menu/Menu.d.ts +1 -1
- package/dist/Menu/elements.d.ts +4 -4
- package/dist/Pagination/AnimatedPaginationButtons.d.ts +11 -11
- package/dist/Pagination/EllipsisButton.d.ts +4 -4
- package/dist/Pagination/PaginationButton.d.ts +6 -6
- package/dist/Pagination/utils.d.ts +9 -9
- package/dist/Popover/elements.d.ts +2 -2
- package/dist/Popover/styles/base.js +1 -2
- package/dist/Tabs/TabButton.d.ts +2 -2
- package/dist/Tabs/TabNav.d.ts +1 -1
- package/dist/Tabs/TabNavLink.d.ts +2 -2
- package/dist/Tag/elements.d.ts +11 -11
- package/dist/Tip/InfoTip/InfoTipButton.d.ts +4 -4
- package/dist/Tip/InfoTip/elements.d.ts +2 -2
- package/dist/Tip/InfoTip/index.d.ts +1 -1
- package/dist/Tip/InfoTip/index.js +90 -123
- package/dist/Tip/InfoTip/styles.d.ts +1 -1
- package/dist/Tip/PreviewTip/elements.d.ts +6 -6
- package/dist/Tip/ToolTip/elements.d.ts +1 -1
- package/dist/Tip/__tests__/mocks.d.ts +0 -8
- package/dist/Tip/shared/elements.d.ts +3 -3
- package/dist/Tip/shared/types.d.ts +1 -1
- package/dist/Toggle/elements.d.ts +1 -1
- package/dist/Typography/Text.d.ts +2 -2
- package/dist/utils/focusVisibleStyle.d.ts +6 -0
- package/dist/utils/focusVisibleStyle.js +11 -0
- package/dist/utils/index.d.ts +1 -1
- package/dist/utils/index.js +1 -1
- package/package.json +3 -3
- package/dist/Tip/__tests__/helpers.d.ts +0 -113
- package/dist/utils/focus.d.ts +0 -19
- package/dist/utils/focus.js +0 -34
- package/dist/utils/react.d.ts +0 -18
- package/dist/utils/react.js +0 -36
|
@@ -281,8 +281,8 @@ export type TextProps = TextTruncateProps | TextNoTruncateProps;
|
|
|
281
281
|
export declare const Text: import("react").ForwardRefExoticComponent<(Omit<{
|
|
282
282
|
theme?: import("@emotion/react").Theme | undefined;
|
|
283
283
|
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
284
|
-
} & TextTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "
|
|
284
|
+
} & TextTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children" | "className" | "aria-hidden" | "slot" | "style" | "title" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("react").ClassAttributes<HTMLSpanElement>>, "ref"> | Omit<{
|
|
285
285
|
theme?: import("@emotion/react").Theme | undefined;
|
|
286
286
|
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
287
|
-
} & TextNoTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "
|
|
287
|
+
} & TextNoTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children" | "className" | "aria-hidden" | "slot" | "style" | "title" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("react").ClassAttributes<HTMLSpanElement>>, "ref">) & import("react").RefAttributes<HTMLSpanElement>>;
|
|
288
288
|
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { theme } from '@codecademy/gamut-styles';
|
|
2
|
+
export const focusVisibleStyle = (outlineOffset = '4px') => ({
|
|
3
|
+
'&:focus-visible': {
|
|
4
|
+
outlineOffset,
|
|
5
|
+
/*
|
|
6
|
+
We use !important here to ensure this overrides other browser default focus styles.
|
|
7
|
+
Gamut's reset css does a good job wiping most of these out but this accounts for some edge cases.
|
|
8
|
+
*/
|
|
9
|
+
outline: `2px solid ${theme.colors.primary} !important`
|
|
10
|
+
}
|
|
11
|
+
});
|
package/dist/utils/index.d.ts
CHANGED
package/dist/utils/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut",
|
|
3
3
|
"description": "Styleguide & Component library for Codecademy",
|
|
4
|
-
"version": "67.5.1
|
|
4
|
+
"version": "67.5.1",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@codecademy/gamut-icons": "9.52.1",
|
|
8
|
-
"@codecademy/gamut-illustrations": "0.
|
|
8
|
+
"@codecademy/gamut-illustrations": "0.57.0",
|
|
9
9
|
"@codecademy/gamut-patterns": "0.10.19",
|
|
10
10
|
"@codecademy/gamut-styles": "17.11.0",
|
|
11
11
|
"@codecademy/variance": "0.25.0",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"dist/**/[A-Z]**/[A-Z]*.js",
|
|
57
57
|
"dist/**/[A-Z]**/index.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "9a805de40307ff4e9517cd2443d0d850116c6d15"
|
|
60
60
|
}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
/// <reference types="jest" />
|
|
2
|
-
/// <reference types="testing-library__jest-dom" />
|
|
3
|
-
import { setupRtl } from '@codecademy/gamut-tests';
|
|
4
|
-
import { RefObject } from 'react';
|
|
5
|
-
import { InfoTip, InfoTipProps } from '../InfoTip';
|
|
6
|
-
import { TipPlacements } from '../shared/types';
|
|
7
|
-
type InfoTipView = ReturnType<ReturnType<typeof setupRtl<typeof InfoTip>>>['view'];
|
|
8
|
-
type Placement = NonNullable<InfoTipProps['placement']>;
|
|
9
|
-
type ViewParam = {
|
|
10
|
-
view: InfoTipView;
|
|
11
|
-
};
|
|
12
|
-
type LinkTextParam = {
|
|
13
|
-
linkText: string;
|
|
14
|
-
};
|
|
15
|
-
type InfoParam = {
|
|
16
|
-
info: string;
|
|
17
|
-
};
|
|
18
|
-
type PlacementParam = {
|
|
19
|
-
placement: Placement;
|
|
20
|
-
};
|
|
21
|
-
export declare const createFocusOnClick: (ref: RefObject<HTMLDivElement>) => ({ isTipHidden }: {
|
|
22
|
-
isTipHidden: boolean;
|
|
23
|
-
}) => void;
|
|
24
|
-
export declare const createLinkSetup: ({ linkText, href, }: {
|
|
25
|
-
linkText: string;
|
|
26
|
-
href?: string | undefined;
|
|
27
|
-
}) => {
|
|
28
|
-
containerRef: RefObject<HTMLDivElement>;
|
|
29
|
-
info: import("react/jsx-runtime").JSX.Element;
|
|
30
|
-
onClick: ({ isTipHidden }: {
|
|
31
|
-
isTipHidden: boolean;
|
|
32
|
-
}) => void;
|
|
33
|
-
};
|
|
34
|
-
export declare const createMultiLinkSetup: ({ firstLinkText, secondLinkText, firstHref, secondHref, }: {
|
|
35
|
-
firstLinkText: string;
|
|
36
|
-
secondLinkText: string;
|
|
37
|
-
firstHref?: string | undefined;
|
|
38
|
-
secondHref?: string | undefined;
|
|
39
|
-
}) => {
|
|
40
|
-
containerRef: RefObject<HTMLDivElement>;
|
|
41
|
-
info: import("react/jsx-runtime").JSX.Element;
|
|
42
|
-
onClick: ({ isTipHidden }: {
|
|
43
|
-
isTipHidden: boolean;
|
|
44
|
-
}) => void;
|
|
45
|
-
};
|
|
46
|
-
export declare const clickButton: (view: InfoTipView) => Promise<HTMLElement>;
|
|
47
|
-
export declare const pressKey: (key: string) => Promise<void>;
|
|
48
|
-
export declare const waitForLinkToHaveFocus: ({ view, linkText, }: ViewParam & LinkTextParam) => Promise<HTMLElement>;
|
|
49
|
-
export declare const openTipAndWaitForLink: ({ view, linkText, }: ViewParam & LinkTextParam) => Promise<HTMLElement>;
|
|
50
|
-
export declare const openTipTabToLinkAndWaitForFocus: (view: InfoTipView, linkText: string) => Promise<HTMLElement>;
|
|
51
|
-
export declare const testShowTipOnClick: ({ view, info, placement, }: ViewParam & InfoParam & PlacementParam) => Promise<void>;
|
|
52
|
-
export declare const testEscapeKeyReturnsFocus: ({ view, info, placement, }: ViewParam & InfoParam & PlacementParam) => Promise<void>;
|
|
53
|
-
export declare const testFocusWrap: ({ view, containerRef, direction, }: ViewParam & {
|
|
54
|
-
containerRef: RefObject<HTMLDivElement>;
|
|
55
|
-
direction: 'forward' | 'backward';
|
|
56
|
-
}) => Promise<void>;
|
|
57
|
-
export declare const getTipContent: (view: InfoTipView, text: string, useQuery?: boolean) => HTMLElement;
|
|
58
|
-
export declare const testTabbingBetweenLinks: ({ view, firstLinkText, secondLinkText, placement, }: ViewParam & {
|
|
59
|
-
firstLinkText: string;
|
|
60
|
-
secondLinkText: string;
|
|
61
|
-
placement: TipPlacements;
|
|
62
|
-
}) => Promise<void>;
|
|
63
|
-
export declare const setupLinkTestWithPlacement: (linkText: string, placement: TipPlacements, renderView: ReturnType<typeof setupRtl<typeof InfoTip>>) => {
|
|
64
|
-
view: import("@testing-library/react").RenderResult;
|
|
65
|
-
containerRef: RefObject<HTMLDivElement>;
|
|
66
|
-
info: import("react/jsx-runtime").JSX.Element;
|
|
67
|
-
onClick: ({ isTipHidden }: {
|
|
68
|
-
isTipHidden: boolean;
|
|
69
|
-
}) => void;
|
|
70
|
-
};
|
|
71
|
-
export declare const setupMultiLinkTestWithPlacement: (firstLinkText: string, secondLinkText: string, placement: TipPlacements, renderView: ReturnType<typeof setupRtl<typeof InfoTip>>) => {
|
|
72
|
-
view: import("@testing-library/react").RenderResult;
|
|
73
|
-
info: import("react/jsx-runtime").JSX.Element;
|
|
74
|
-
onClick: ({ isTipHidden }: {
|
|
75
|
-
isTipHidden: boolean;
|
|
76
|
-
}) => void;
|
|
77
|
-
};
|
|
78
|
-
export declare const testEscapeKeyWithOutsideFocus: ({ view, info, }: ViewParam & InfoParam) => Promise<void>;
|
|
79
|
-
export declare const testOutsideClick: ({ view, info, placement, }: ViewParam & InfoParam & PlacementParam) => Promise<void>;
|
|
80
|
-
export declare const testModalDoesNotCloseInfoTip: ({ view, info, placement, }: ViewParam & InfoParam & PlacementParam) => Promise<void>;
|
|
81
|
-
export declare const testRapidToggle: ({ view, onClick, }: ViewParam & {
|
|
82
|
-
onClick: jest.Mock;
|
|
83
|
-
}) => Promise<void>;
|
|
84
|
-
export declare const testInfoTipInsideModalClosesOnEscape: ({ info, placement, }: InfoParam & PlacementParam) => Promise<void>;
|
|
85
|
-
type ViewWithQueries = {
|
|
86
|
-
getAllByText: (text: string) => HTMLElement[];
|
|
87
|
-
getAllByLabelText: (text: string) => HTMLElement[];
|
|
88
|
-
};
|
|
89
|
-
export declare const getVisibleTip: ({ text, placement, }: {
|
|
90
|
-
text: string;
|
|
91
|
-
placement?: "inline" | "floating" | undefined;
|
|
92
|
-
}) => HTMLElement | undefined;
|
|
93
|
-
export declare const expectTipToBeVisible: ({ text, placement, }: {
|
|
94
|
-
text: string;
|
|
95
|
-
placement?: "inline" | "floating" | undefined;
|
|
96
|
-
}) => void;
|
|
97
|
-
export declare const expectTipToBeClosed: ({ text, placement, }: {
|
|
98
|
-
text: string;
|
|
99
|
-
placement?: "inline" | "floating" | undefined;
|
|
100
|
-
}) => void;
|
|
101
|
-
export declare const openInfoTipsWithKeyboard: ({ view, count, }: {
|
|
102
|
-
view: ViewWithQueries;
|
|
103
|
-
count: number;
|
|
104
|
-
}) => Promise<void>;
|
|
105
|
-
export declare const expectTipsVisible: (tips: {
|
|
106
|
-
text: string;
|
|
107
|
-
placement?: 'inline' | 'floating';
|
|
108
|
-
}[]) => void;
|
|
109
|
-
export declare const expectTipsClosed: (tips: {
|
|
110
|
-
text: string;
|
|
111
|
-
placement?: 'inline' | 'floating';
|
|
112
|
-
}[]) => void;
|
|
113
|
-
export {};
|
package/dist/utils/focus.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export declare const focusVisibleStyle: (outlineOffset?: string) => {
|
|
2
|
-
'&:focus-visible': {
|
|
3
|
-
outlineOffset: string;
|
|
4
|
-
outline: string;
|
|
5
|
-
};
|
|
6
|
-
};
|
|
7
|
-
/**
|
|
8
|
-
* Gets all focusable elements within a container element.
|
|
9
|
-
*
|
|
10
|
-
* @param container - The container element to search within
|
|
11
|
-
* @returns Array of focusable HTML elements, or empty array if container is null
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```tsx
|
|
15
|
-
* const focusableElements = getFocusableElements(popoverRef.current);
|
|
16
|
-
* focusableElements[0]?.focus();
|
|
17
|
-
* ```
|
|
18
|
-
*/
|
|
19
|
-
export declare const getFocusableElements: (container: HTMLElement | null) => HTMLElement[];
|
package/dist/utils/focus.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { theme } from '@codecademy/gamut-styles';
|
|
2
|
-
export const focusVisibleStyle = (outlineOffset = '4px') => ({
|
|
3
|
-
'&:focus-visible': {
|
|
4
|
-
outlineOffset,
|
|
5
|
-
/*
|
|
6
|
-
We use !important here to ensure this overrides other browser default focus styles.
|
|
7
|
-
Gamut's reset css does a good job wiping most of these out but this accounts for some edge cases.
|
|
8
|
-
*/
|
|
9
|
-
outline: `2px solid ${theme.colors.primary} !important`
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Selector for all focusable elements in the DOM.
|
|
15
|
-
* Includes links, buttons, form controls, and elements with non-negative tabindex.
|
|
16
|
-
*/
|
|
17
|
-
const FOCUSABLE_SELECTORS = ['[contentEditable=true]:not([tabindex="-1"])', '[tabindex]:not([tabindex="-1"])', 'a[href]:not([tabindex="-1"])', 'audio[controls]:not([tabindex="-1"])', 'button:not([disabled]):not([tabindex="-1"])', 'details:not([tabindex="-1"])', 'dialog', 'embed:not([tabindex="-1"])', 'iframe:not([tabindex="-1"])', 'input:not([disabled]):not([tabindex="-1"])', 'map[name] area[href]:not([tabindex="-1"])', 'object:not([tabindex="-1"])', 'select:not([disabled]):not([tabindex="-1"])', 'summary:not([tabindex="-1"])', 'textarea:not([disabled]):not([tabindex="-1"])', 'video[controls]:not([tabindex="-1"])'];
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Gets all focusable elements within a container element.
|
|
21
|
-
*
|
|
22
|
-
* @param container - The container element to search within
|
|
23
|
-
* @returns Array of focusable HTML elements, or empty array if container is null
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* ```tsx
|
|
27
|
-
* const focusableElements = getFocusableElements(popoverRef.current);
|
|
28
|
-
* focusableElements[0]?.focus();
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export const getFocusableElements = container => {
|
|
32
|
-
if (!container) return [];
|
|
33
|
-
return Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS.join(',')));
|
|
34
|
-
};
|
package/dist/utils/react.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Recursively extracts plain text content from React children.
|
|
3
|
-
*
|
|
4
|
-
* Useful for converting JSX to plain text for accessibility purposes
|
|
5
|
-
* like screenreader announcements or aria-labels.
|
|
6
|
-
*
|
|
7
|
-
* @param children - React children to extract text from
|
|
8
|
-
* @returns Plain text string with all text content joined by spaces
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```tsx
|
|
12
|
-
* const text = extractTextContent(
|
|
13
|
-
* <div>Hello <strong>world</strong>!</div>
|
|
14
|
-
* );
|
|
15
|
-
* // Returns: "Hello world !"
|
|
16
|
-
* ```
|
|
17
|
-
*/
|
|
18
|
-
export declare const extractTextContent: (children: React.ReactNode) => string;
|
package/dist/utils/react.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { Children, isValidElement } from 'react';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Recursively extracts plain text content from React children.
|
|
5
|
-
*
|
|
6
|
-
* Useful for converting JSX to plain text for accessibility purposes
|
|
7
|
-
* like screenreader announcements or aria-labels.
|
|
8
|
-
*
|
|
9
|
-
* @param children - React children to extract text from
|
|
10
|
-
* @returns Plain text string with all text content joined by spaces
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```tsx
|
|
14
|
-
* const text = extractTextContent(
|
|
15
|
-
* <div>Hello <strong>world</strong>!</div>
|
|
16
|
-
* );
|
|
17
|
-
* // Returns: "Hello world !"
|
|
18
|
-
* ```
|
|
19
|
-
*/
|
|
20
|
-
export const extractTextContent = children => {
|
|
21
|
-
if (typeof children === 'string' || typeof children === 'number') {
|
|
22
|
-
return String(children);
|
|
23
|
-
}
|
|
24
|
-
return Children.toArray(children).map(child => {
|
|
25
|
-
if (typeof child === 'string' || typeof child === 'number') {
|
|
26
|
-
return String(child);
|
|
27
|
-
}
|
|
28
|
-
if (typeof child === 'boolean' || child == null) {
|
|
29
|
-
return '';
|
|
30
|
-
}
|
|
31
|
-
if (/*#__PURE__*/isValidElement(child)) {
|
|
32
|
-
return extractTextContent(child.props.children);
|
|
33
|
-
}
|
|
34
|
-
return '';
|
|
35
|
-
}).filter(Boolean).join(' ');
|
|
36
|
-
};
|