@codecademy/gamut 67.4.2-alpha.fd987d.0 → 67.4.2
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/index.d.ts +1 -0
- package/dist/ConnectedForm/utils.d.ts +5 -5
- 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/Form/types.d.ts +1 -2
- 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/InfoTipButton.js +2 -5
- package/dist/Tip/InfoTip/elements.d.ts +12 -0
- package/dist/Tip/InfoTip/elements.js +9 -0
- package/dist/Tip/InfoTip/index.d.ts +1 -9
- package/dist/Tip/InfoTip/index.js +105 -102
- 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/FloatingTip.js +3 -3
- package/dist/Tip/shared/InlineTip.js +1 -4
- 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 -95
- package/dist/utils/focus.d.ts +0 -19
- package/dist/utils/focus.js +0 -34
|
@@ -123,7 +123,7 @@ export declare const ToggleTrack: import("@emotion/styled").StyledComponent<{
|
|
|
123
123
|
export declare const Circle: import("@emotion/styled").StyledComponent<{
|
|
124
124
|
theme?: import("@emotion/react").Theme | undefined;
|
|
125
125
|
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
126
|
-
} & import("../Box").BoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "
|
|
126
|
+
} & import("../Box").BoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "className" | "aria-hidden" | "slot" | "style" | "title" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | keyof import("react").ClassAttributes<HTMLDivElement> | "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"> & {
|
|
127
127
|
theme?: import("@emotion/react").Theme | undefined;
|
|
128
128
|
}, {}, {}>;
|
|
129
129
|
export declare const ToggleInput: import("@emotion/styled").StyledComponent<{
|
|
@@ -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,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut",
|
|
3
3
|
"description": "Styleguide & Component library for Codecademy",
|
|
4
|
-
"version": "67.4.2
|
|
4
|
+
"version": "67.4.2",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@codecademy/gamut-icons": "9.52.1",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"react-aria-components": "1.8.0",
|
|
22
22
|
"react-aria-tabpanel": "^4.4.0",
|
|
23
23
|
"react-focus-on": "^3.10.0",
|
|
24
|
-
"react-hook-form": "^7.
|
|
24
|
+
"react-hook-form": "^7.65.0",
|
|
25
25
|
"react-player": "^2.16.0",
|
|
26
26
|
"react-select": "^5.2.2",
|
|
27
27
|
"react-truncate-markup": "^5.1.2",
|
|
@@ -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": "744ff3c93e9b07a521e644609f13a30ec53232ab"
|
|
60
60
|
}
|
|
@@ -1,95 +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 testFocusWrap: ({ view, direction, }: ViewParam & {
|
|
52
|
-
direction: 'forward' | 'backward';
|
|
53
|
-
}) => Promise<void>;
|
|
54
|
-
export declare const testTabFromPopoverWithNoInteractiveElements: (view: InfoTipView) => Promise<void>;
|
|
55
|
-
export declare const testTabbingBetweenLinks: ({ view, firstLinkText, secondLinkText, placement, }: ViewParam & {
|
|
56
|
-
firstLinkText: string;
|
|
57
|
-
secondLinkText: string;
|
|
58
|
-
placement: TipPlacements;
|
|
59
|
-
}) => Promise<void>;
|
|
60
|
-
export declare const setupLinkTestWithPlacement: (linkText: string, placement: TipPlacements, renderView: ReturnType<typeof setupRtl<typeof InfoTip>>) => {
|
|
61
|
-
view: import("@testing-library/react").RenderResult;
|
|
62
|
-
containerRef: RefObject<HTMLDivElement>;
|
|
63
|
-
info: import("react/jsx-runtime").JSX.Element;
|
|
64
|
-
onClick: ({ isTipHidden }: {
|
|
65
|
-
isTipHidden: boolean;
|
|
66
|
-
}) => void;
|
|
67
|
-
};
|
|
68
|
-
export declare const setupMultiLinkTestWithPlacement: (firstLinkText: string, secondLinkText: string, placement: TipPlacements, renderView: ReturnType<typeof setupRtl<typeof InfoTip>>) => {
|
|
69
|
-
view: import("@testing-library/react").RenderResult;
|
|
70
|
-
info: import("react/jsx-runtime").JSX.Element;
|
|
71
|
-
onClick: ({ isTipHidden }: {
|
|
72
|
-
isTipHidden: boolean;
|
|
73
|
-
}) => void;
|
|
74
|
-
};
|
|
75
|
-
export declare const testEscapeKeyWithOutsideFocus: ({ view, info, }: ViewParam & InfoParam) => Promise<void>;
|
|
76
|
-
export declare const testOutsideClick: ({ view, info, placement, }: ViewParam & InfoParam & PlacementParam) => Promise<void>;
|
|
77
|
-
export declare const testModalDoesNotCloseInfoTip: ({ view, info, placement, }: ViewParam & InfoParam & PlacementParam) => Promise<void>;
|
|
78
|
-
export declare const testRapidToggle: ({ view, onClick, }: ViewParam & {
|
|
79
|
-
onClick: jest.Mock;
|
|
80
|
-
}) => Promise<void>;
|
|
81
|
-
export declare const testInfoTipInsideModalClosesOnEscape: ({ info, placement, }: InfoParam & PlacementParam) => Promise<void>;
|
|
82
|
-
type ViewWithQueries = {
|
|
83
|
-
getAllByText: (text: string) => HTMLElement[];
|
|
84
|
-
getAllByLabelText: (text: string) => HTMLElement[];
|
|
85
|
-
};
|
|
86
|
-
export declare const openInfoTipsWithKeyboard: ({ view, count, }: {
|
|
87
|
-
view: ViewWithQueries;
|
|
88
|
-
count: number;
|
|
89
|
-
}) => Promise<void>;
|
|
90
|
-
export declare const expectTipsVisible: (tips: {
|
|
91
|
-
text: string;
|
|
92
|
-
placement?: 'inline' | 'floating';
|
|
93
|
-
}[]) => void;
|
|
94
|
-
export declare const expectTipsClosed: () => void;
|
|
95
|
-
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
|
-
};
|