@codecademy/gamut 67.6.1-alpha.1b85c1.0 → 67.6.1-alpha.7d41e2.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/dist/Card/index.js +5 -1
- package/dist/Card/styles.d.ts +15 -0
- package/dist/Card/styles.js +16 -1
- package/dist/ConnectedForm/ConnectedFormGroup.d.ts +0 -5
- package/dist/ConnectedForm/ConnectedFormGroup.js +1 -1
- package/dist/Form/elements/FormGroupLabel.js +2 -8
- package/dist/GridForm/GridFormInputGroup/__fixtures__/renderers.d.ts +0 -4
- package/dist/GridForm/types.d.ts +0 -5
- 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 +0 -13
- package/dist/Tip/InfoTip/index.js +66 -36
- package/dist/Tip/__tests__/helpers.d.ts +26 -5
- package/dist/Tip/shared/FloatingTip.js +3 -3
- package/dist/Tip/shared/InlineTip.js +1 -4
- package/dist/Tip/shared/types.d.ts +1 -1
- package/package.json +2 -2
package/dist/Card/index.js
CHANGED
|
@@ -18,11 +18,15 @@ export const Card = ({
|
|
|
18
18
|
const trueBorderRadius = !borderRadius ? defaultBorderRadius : borderRadius;
|
|
19
19
|
const SelectedWrapper = variant === 'default' ? DynamicCardWrapper : StaticCardWrapper;
|
|
20
20
|
const hasPattern = shadow === 'patternLeft' || shadow === 'patternRight';
|
|
21
|
+
const isOutline = shadow === 'outline';
|
|
21
22
|
const setHoverShadow = shadow === 'patternRight' ? hoverShadowRight : hoverShadowLeft;
|
|
23
|
+
const initialVariant = isOutline ? 'initialOutline' : 'initial';
|
|
24
|
+
const animateVariant = isOutline ? 'animateOutline' : 'animate';
|
|
22
25
|
return /*#__PURE__*/_jsxs(MotionBox, {
|
|
23
26
|
height: height,
|
|
27
|
+
initial: initialVariant,
|
|
24
28
|
position: "relative",
|
|
25
|
-
whileHover: isInteractive ?
|
|
29
|
+
whileHover: isInteractive ? animateVariant : '',
|
|
26
30
|
width: width,
|
|
27
31
|
children: [hasPattern && /*#__PURE__*/_jsx(MotionBox, {
|
|
28
32
|
borderRadius: trueBorderRadius,
|
package/dist/Card/styles.d.ts
CHANGED
|
@@ -28,6 +28,13 @@ export declare const hoverShadowLeft: {
|
|
|
28
28
|
ease: string;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
|
+
initialOutline: {
|
|
32
|
+
boxShadow: string;
|
|
33
|
+
transition: {
|
|
34
|
+
duration: number;
|
|
35
|
+
ease: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
31
38
|
animate: {
|
|
32
39
|
transform: string;
|
|
33
40
|
boxShadow: string;
|
|
@@ -36,6 +43,14 @@ export declare const hoverShadowLeft: {
|
|
|
36
43
|
ease: string;
|
|
37
44
|
};
|
|
38
45
|
};
|
|
46
|
+
animateOutline: {
|
|
47
|
+
transform: string;
|
|
48
|
+
boxShadow: string;
|
|
49
|
+
transition: {
|
|
50
|
+
duration: number;
|
|
51
|
+
ease: string;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
39
54
|
};
|
|
40
55
|
export declare const hoverShadowRight: {
|
|
41
56
|
initial: {
|
package/dist/Card/styles.js
CHANGED
|
@@ -33,7 +33,7 @@ export const shadowVariants = variant({
|
|
|
33
33
|
patternLeft: {},
|
|
34
34
|
patternRight: {},
|
|
35
35
|
outline: {
|
|
36
|
-
boxShadow: `-
|
|
36
|
+
boxShadow: `-8px 8px ${theme.colors['background-current']}, -8px 8px 0 1px ${theme.colors['border-primary']}`
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
});
|
|
@@ -61,6 +61,13 @@ export const hoverShadowLeft = {
|
|
|
61
61
|
ease: 'easeOut'
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
|
+
initialOutline: {
|
|
65
|
+
boxShadow: `-6px 6px 0 0px ${theme.colors['background-current']}, -6px 6px 0 1px ${theme.colors['border-primary']}`,
|
|
66
|
+
transition: {
|
|
67
|
+
duration: timingValues.fast / 1000,
|
|
68
|
+
ease: 'easeOut'
|
|
69
|
+
}
|
|
70
|
+
},
|
|
64
71
|
animate: {
|
|
65
72
|
transform: 'translate(4px, -4px)',
|
|
66
73
|
boxShadow: `-8px 8px 0 ${theme.colors['shadow-primary']}`,
|
|
@@ -68,6 +75,14 @@ export const hoverShadowLeft = {
|
|
|
68
75
|
duration: timingValues.fast / 1000,
|
|
69
76
|
ease: 'easeIn'
|
|
70
77
|
}
|
|
78
|
+
},
|
|
79
|
+
animateOutline: {
|
|
80
|
+
transform: 'translate(4px, -4px)',
|
|
81
|
+
boxShadow: `-8px 8px 0 0px ${theme.colors['shadow-primary']}, -8px 8px 0 1px ${theme.colors['shadow-primary']}`,
|
|
82
|
+
transition: {
|
|
83
|
+
duration: timingValues.fast / 1000,
|
|
84
|
+
ease: 'easeIn'
|
|
85
|
+
}
|
|
71
86
|
}
|
|
72
87
|
};
|
|
73
88
|
export const hoverShadowRight = {
|
|
@@ -8,11 +8,6 @@ export interface ConnectedFormGroupBaseProps extends Omit<FormGroupProps, 'label
|
|
|
8
8
|
name: string;
|
|
9
9
|
label: React.ReactNode;
|
|
10
10
|
required?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* InfoTip to display next to the field label. String labels automatically
|
|
13
|
-
* label the InfoTip button. For ReactNode labels, provide `ariaLabel` or
|
|
14
|
-
* set `labelledByFieldLabel: true` to ensure the InfoTip is accessible.
|
|
15
|
-
*/
|
|
16
11
|
infotip?: InfoTipProps;
|
|
17
12
|
}
|
|
18
13
|
export interface ConnectedFormGroupProps<T extends ConnectedField> extends SubmitContextProps, ConnectedFormGroupBaseProps {
|
|
@@ -13,7 +13,7 @@ const ErrorAnchor = /*#__PURE__*/_styled(Anchor, {
|
|
|
13
13
|
label: "ErrorAnchor"
|
|
14
14
|
})(css({
|
|
15
15
|
color: 'feedback-error'
|
|
16
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
16
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JvQiIsImZpbGUiOiIuLi8uLi9zcmMvQ29ubmVjdGVkRm9ybS9Db25uZWN0ZWRGb3JtR3JvdXAudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgRm9ybUVycm9yLFxuICBGb3JtR3JvdXAsXG4gIEZvcm1Hcm91cExhYmVsLFxuICBGb3JtR3JvdXBQcm9wcyxcbiAgSW5mb1RpcFByb3BzLFxufSBmcm9tICcuLic7XG5pbXBvcnQgeyBBbmNob3IgfSBmcm9tICcuLi9BbmNob3InO1xuaW1wb3J0IHsgSGlkZGVuVGV4dCB9IGZyb20gJy4uL0hpZGRlblRleHQnO1xuaW1wb3J0IHsgTWFya2Rvd24gfSBmcm9tICcuLi9NYXJrZG93bic7XG5pbXBvcnQgeyBDb25uZWN0ZWRGaWVsZCwgRmllbGRQcm9wcywgU3VibWl0Q29udGV4dFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRFcnJvck1lc3NhZ2UsIHVzZUZpZWxkIH0gZnJvbSAnLi91dGlscyc7XG5cbmNvbnN0IEVycm9yQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgY29sb3I6ICdmZWVkYmFjay1lcnJvcicsXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbm5lY3RlZEZvcm1Hcm91cEJhc2VQcm9wc1xuICBleHRlbmRzIE9taXQ8XG4gICAgRm9ybUdyb3VwUHJvcHMsXG4gICAgJ2xhYmVsJyB8ICdkaXNhYmxlZCcgfCAnZGVzY3JpcHRpb24nIHwgJ2h0bWxGb3InXG4gID4ge1xuICBjdXN0b21FcnJvcj86IHN0cmluZztcbiAgZXJyb3JUeXBlPzogJ2luaXRpYWwnIHwgJ2Fic29sdXRlJztcbiAgaGlkZUxhYmVsPzogYm9vbGVhbjtcbiAgbmFtZTogc3RyaW5nO1xuICBsYWJlbDogUmVhY3QuUmVhY3ROb2RlO1xuICByZXF1aXJlZD86IGJvb2xlYW47XG4gIGluZm90aXA/OiBJbmZvVGlwUHJvcHM7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ29ubmVjdGVkRm9ybUdyb3VwUHJvcHM8VCBleHRlbmRzIENvbm5lY3RlZEZpZWxkPlxuICBleHRlbmRzIFN1Ym1pdENvbnRleHRQcm9wcyxcbiAgICBDb25uZWN0ZWRGb3JtR3JvdXBCYXNlUHJvcHMge1xuICAvKipcbiAgICogQW4gb2JqZWN0IGNvbnNpc3Rpbmcgb2YgYSBgY29tcG9uZW50YCBrZXkgdG8gc3BlY2lmeSB3aGF0IENvbm5lY3RlZEZvcm1JbnB1dCB0byByZW5kZXIgLSB0aGUgcmVtYWluaW5nIGtleS92YWx1ZSBwYWlycyBhcmUgdGhhdCBjb21wb25lbnRzIGRlc2lyZWQgcHJvcHMuXG4gICAqL1xuICBmaWVsZDogT21pdDxSZWFjdC5Db21wb25lbnRQcm9wczxUPiwgJ25hbWUnIHwgJ2Rpc2FibGVkJz4gJiBGaWVsZFByb3BzPFQ+O1xufVxuXG5leHBvcnQgZnVuY3Rpb24gQ29ubmVjdGVkRm9ybUdyb3VwPFQgZXh0ZW5kcyBDb25uZWN0ZWRGaWVsZD4oe1xuICBjdXN0b21FcnJvcixcbiAgY2hpbGRyZW4sXG4gIGRpc2FibGVkID0gZmFsc2UsXG4gIGVycm9yVHlwZSA9ICdhYnNvbHV0ZScsXG4gIGZpZWxkLFxuICBoaWRlTGFiZWwsXG4gIGlkLFxuICBsYWJlbCxcbiAgbmFtZSxcbiAgbGFiZWxTaXplLFxuICBzcGFjaW5nID0gJ2ZpdCcsXG4gIGlzU29sb0ZpZWxkLFxuICBpbmZvdGlwLFxufTogQ29ubmVjdGVkRm9ybUdyb3VwUHJvcHM8VD4pIHtcbiAgY29uc3QgeyBlcnJvciwgaXNGaXJzdEVycm9yLCBpc0Rpc2FibGVkLCBzZXRFcnJvciwgdmFsaWRhdGlvbiB9ID0gdXNlRmllbGQoe1xuICAgIG5hbWUsXG4gICAgZGlzYWJsZWQsXG4gIH0pO1xuICBjb25zdCB7IGNvbXBvbmVudDogQ29tcG9uZW50LCAuLi5yZXN0IH0gPSBmaWVsZDtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChjdXN0b21FcnJvcikge1xuICAgICAgc2V0RXJyb3IobmFtZSwge1xuICAgICAgICB0eXBlOiAnbWFudWFsJyxcbiAgICAgICAgbWVzc2FnZTogY3VzdG9tRXJyb3IsXG4gICAgICB9KTtcbiAgICB9XG4gIH0sIFtjdXN0b21FcnJvciwgbmFtZSwgc2V0RXJyb3JdKTtcblxuICBjb25zdCByZW5kZXJlZExhYmVsID0gKFxuICAgIDxGb3JtR3JvdXBMYWJlbFxuICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICBodG1sRm9yPXtpZCB8fCBuYW1lfVxuICAgICAgaW5mb3RpcD17aW5mb3RpcH1cbiAgICAgIGlzU29sb0ZpZWxkPXtpc1NvbG9GaWVsZH1cbiAgICAgIHJlcXVpcmVkPXshIXZhbGlkYXRpb24/LnJlcXVpcmVkfVxuICAgICAgc2l6ZT17bGFiZWxTaXplfVxuICAgID5cbiAgICAgIHtsYWJlbH1cbiAgICA8L0Zvcm1Hcm91cExhYmVsPlxuICApO1xuXG4gIGNvbnN0IHRleHRFcnJvciA9IGN1c3RvbUVycm9yIHx8IGdldEVycm9yTWVzc2FnZShlcnJvcik7XG4gIGNvbnN0IHNob3dFcnJvciA9ICEhKHRleHRFcnJvciAmJiAhaGlkZUxhYmVsKTtcbiAgY29uc3QgZXJyb3JJZCA9IHNob3dFcnJvciA/IGAke2lkIHx8IG5hbWV9X2Vycm9yYCA6IHVuZGVmaW5lZDtcblxuICByZXR1cm4gKFxuICAgIDxGb3JtR3JvdXAgc3BhY2luZz17aGlkZUxhYmVsID8gJ3RpZ2h0JyA6IHNwYWNpbmd9PlxuICAgICAge2hpZGVMYWJlbCA/IDxIaWRkZW5UZXh0PntyZW5kZXJlZExhYmVsfTwvSGlkZGVuVGV4dD4gOiByZW5kZXJlZExhYmVsfVxuICAgICAgPENvbXBvbmVudFxuICAgICAgICB7Li4uKHJlc3QgYXMgYW55KX1cbiAgICAgICAgYXJpYS1kZXNjcmliZWRieT17ZXJyb3JJZH1cbiAgICAgICAgYXJpYS1pbnZhbGlkPXtzaG93RXJyb3J9XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgIC8+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICB7c2hvd0Vycm9yICYmIChcbiAgICAgICAgPEZvcm1FcnJvclxuICAgICAgICAgIGFyaWEtbGl2ZT17aXNGaXJzdEVycm9yID8gJ2Fzc2VydGl2ZScgOiAnb2ZmJ31cbiAgICAgICAgICBpZD17ZXJyb3JJZH1cbiAgICAgICAgICByb2xlPXtpc0ZpcnN0RXJyb3IgPyAnYWxlcnQnIDogJ3N0YXR1cyd9XG4gICAgICAgICAgdmFyaWFudD17ZXJyb3JUeXBlfVxuICAgICAgICA+XG4gICAgICAgICAgPE1hcmtkb3duXG4gICAgICAgICAgICBpbmxpbmVcbiAgICAgICAgICAgIG92ZXJyaWRlcz17e1xuICAgICAgICAgICAgICBhOiB7XG4gICAgICAgICAgICAgICAgYWxsb3dlZEF0dHJpYnV0ZXM6IFsnaHJlZicsICd0YXJnZXQnXSxcbiAgICAgICAgICAgICAgICBjb21wb25lbnQ6IEVycm9yQW5jaG9yLFxuICAgICAgICAgICAgICAgIHByb2Nlc3NOb2RlOiAoXG4gICAgICAgICAgICAgICAgICBub2RlOiB1bmtub3duLFxuICAgICAgICAgICAgICAgICAgcHJvcHM6IHsgb25DbGljaz86ICgpID0+IHZvaWQgfVxuICAgICAgICAgICAgICAgICkgPT4gPEVycm9yQW5jaG9yIHsuLi5wcm9wc30gLz4sXG4gICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICB9fVxuICAgICAgICAgICAgc2tpcERlZmF1bHRPdmVycmlkZXM9e3sgYTogdHJ1ZSB9fVxuICAgICAgICAgICAgc3BhY2luZz1cIm5vbmVcIlxuICAgICAgICAgICAgdGV4dD17dGV4dEVycm9yfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvRm9ybUVycm9yPlxuICAgICAgKX1cbiAgICA8L0Zvcm1Hcm91cD5cbiAgKTtcbn1cbiJdfQ== */");
|
|
17
17
|
export function ConnectedFormGroup({
|
|
18
18
|
customError,
|
|
19
19
|
children,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _styled from "@emotion/styled/base";
|
|
2
2
|
import { states, variant } from '@codecademy/gamut-styles';
|
|
3
|
-
import { useId } from 'react';
|
|
4
3
|
import * as React from 'react';
|
|
5
4
|
import { FlexBox } from '../..';
|
|
6
5
|
import { InfoTip } from '../../Tip/InfoTip';
|
|
@@ -31,7 +30,7 @@ const labelStates = states({
|
|
|
31
30
|
const Label = /*#__PURE__*/_styled("label", {
|
|
32
31
|
target: "e1t0n89n0",
|
|
33
32
|
label: "Label"
|
|
34
|
-
})(labelSizeVariants, labelStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
33
|
+
})(labelSizeVariants, labelStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Gb3JtL2VsZW1lbnRzL0Zvcm1Hcm91cExhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRGMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0Zvcm0vZWxlbWVudHMvRm9ybUdyb3VwTGFiZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3RhdGVzLCB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBIVE1MQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJy4uLy4uJztcbmltcG9ydCB7IEluZm9UaXAsIEluZm9UaXBQcm9wcyB9IGZyb20gJy4uLy4uL1RpcC9JbmZvVGlwJztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi9UeXBvZ3JhcGh5L1RleHQnO1xuaW1wb3J0IHsgZm9ybUJhc2VTdHlsZXMsIGZvcm1GaWVsZFRleHREaXNhYmxlZFN0eWxlcyB9IGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgeyBCYXNlSW5wdXRQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgbGFiZWxTaXplVmFyaWFudHMgPSB2YXJpYW50KHtcbiAgZGVmYXVsdFZhcmlhbnQ6ICdzbWFsbCcsXG4gIHByb3A6ICdzaXplJyxcbiAgYmFzZTogeyBkaXNwbGF5OiAnYmxvY2snLCAuLi5mb3JtQmFzZVN0eWxlcyB9LFxuICB2YXJpYW50czoge1xuICAgIHNtYWxsOiB7XG4gICAgICBsaW5lSGVpZ2h0OiAnYmFzZScsXG4gICAgfSxcbiAgICBsYXJnZToge1xuICAgICAgZm9udFNpemU6IDIyLFxuICAgICAgbGluZUhlaWdodDogJ2Jhc2UnLFxuICAgICAgZm9udFdlaWdodDogJ3RpdGxlJyxcbiAgICB9LFxuICB9LFxufSk7XG5cbmNvbnN0IGxhYmVsU3RhdGVzID0gc3RhdGVzKHtcbiAgZGlzYWJsZWQ6IGZvcm1GaWVsZFRleHREaXNhYmxlZFN0eWxlcyxcbn0pO1xuXG5leHBvcnQgaW50ZXJmYWNlIExhYmVsVmFyaWFudHNcbiAgZXh0ZW5kcyBTdHlsZVByb3BzPHR5cGVvZiBsYWJlbFNpemVWYXJpYW50cz4sXG4gICAgU3R5bGVQcm9wczx0eXBlb2YgbGFiZWxTdGF0ZXM+IHt9XG5cbmV4cG9ydCB0eXBlIEZvcm1Hcm91cExhYmVsUHJvcHMgPSBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4gJlxuICBIVE1MQXR0cmlidXRlczxIVE1MTGFiZWxFbGVtZW50PiAmXG4gIExhYmVsVmFyaWFudHMgJlxuICBQaWNrPEJhc2VJbnB1dFByb3BzLCAnaHRtbEZvcicgfCAncmVxdWlyZWQnPiAmIHtcbiAgICAvKipcbiAgICAgKiBbVGhlIGZvci9pZCBzdHJpbmcgb2YgYSBsYWJlbCBvciBsYWJlbGFibGUgZm9ybS1yZWxhdGVkIGVsZW1lbnRdKGh0dHBzOi8vZGV2ZWxvcGVyLm1vemlsbGEub3JnL2VuLVVTL2RvY3MvV2ViL0FQSS9IVE1MTGFiZWxFbGVtZW50L2h0bWxGb3IpLiBUaGUgb3V0ZXIgRm9ybUdyb3VwIG9yIEZvcm1MYWJlbCBzaG91bGQgaGF2ZSBhbiBpZGVudGljYWwgc3RyaW5nIGFzIHRoZSBpbm5lciBGb3JtRWxlbWVudCBmb3IgYWNjZXNzaWJpbGl0eSBwdXJwb3Nlcy5cbiAgICAgKi9cbiAgICBpbmZvdGlwPzogSW5mb1RpcFByb3BzO1xuICAgIHNpemU/OiAnc21hbGwnIHwgJ2xhcmdlJztcbiAgICAvKipcbiAgICAgKiBTb2xvIGZpZWxkcyBzaG91bGQgYWx3YXlzIGJlIHJlcXVpcmVkIGFuZCBoYXZlIG5vIG9wdGlvbmFsL3JlcXVpcmVkIHRleHRcbiAgICAgKi9cbiAgICBpc1NvbG9GaWVsZD86IGJvb2xlYW47XG4gIH07XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmxhYmVsPEZvcm1Hcm91cExhYmVsUHJvcHM+KGxhYmVsU2l6ZVZhcmlhbnRzLCBsYWJlbFN0YXRlcyk7XG5cbmV4cG9ydCBjb25zdCBGb3JtR3JvdXBMYWJlbDogUmVhY3QuRkM8Rm9ybUdyb3VwTGFiZWxQcm9wcz4gPSAoe1xuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBkaXNhYmxlZCxcbiAgaHRtbEZvcixcbiAgaW5mb3RpcCxcbiAgaXNTb2xvRmllbGQsXG4gIHJlcXVpcmVkLFxuICBzaXplLFxuICAuLi5yZXN0XG59KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEZsZXhCb3gganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCIgbWI9ezR9PlxuICAgICAgPExhYmVsXG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgICBhcz17aHRtbEZvciA/ICdsYWJlbCcgOiAnZGl2J31cbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgaHRtbEZvcj17aHRtbEZvcn1cbiAgICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgICB7IWlzU29sb0ZpZWxkICYmXG4gICAgICAgICAgKHJlcXVpcmVkID8gKFxuICAgICAgICAgICAgPFRleHQgYXJpYS1oaWRkZW4gYXM9XCJzcGFuXCI+XG4gICAgICAgICAgICAgICpcbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICApIDogKFxuICAgICAgICAgICAgJ1xcdTAwQTAob3B0aW9uYWwpJ1xuICAgICAgICAgICkpfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtpbmZvdGlwICYmIDxJbmZvVGlwIHsuLi5pbmZvdGlwfSAvPn1cbiAgICA8L0ZsZXhCb3g+XG4gICk7XG59O1xuIl19 */");
|
|
35
34
|
export const FormGroupLabel = ({
|
|
36
35
|
children,
|
|
37
36
|
className,
|
|
@@ -43,9 +42,6 @@ export const FormGroupLabel = ({
|
|
|
43
42
|
size,
|
|
44
43
|
...rest
|
|
45
44
|
}) => {
|
|
46
|
-
const labelId = useId();
|
|
47
|
-
const isStringLabel = typeof children === 'string';
|
|
48
|
-
const shouldLabelInfoTip = (isStringLabel || infotip?.labelledByFieldLabel) && !infotip?.ariaLabel && !infotip?.ariaLabelledby;
|
|
49
45
|
return /*#__PURE__*/_jsxs(FlexBox, {
|
|
50
46
|
justifyContent: "space-between",
|
|
51
47
|
mb: 4,
|
|
@@ -55,7 +51,6 @@ export const FormGroupLabel = ({
|
|
|
55
51
|
className: className,
|
|
56
52
|
disabled: disabled,
|
|
57
53
|
htmlFor: htmlFor,
|
|
58
|
-
id: infotip && shouldLabelInfoTip ? labelId : undefined,
|
|
59
54
|
size: size,
|
|
60
55
|
children: [children, !isSoloField && (required ? /*#__PURE__*/_jsx(Text, {
|
|
61
56
|
"aria-hidden": true,
|
|
@@ -63,8 +58,7 @@ export const FormGroupLabel = ({
|
|
|
63
58
|
children: "*"
|
|
64
59
|
}) : '\u00A0(optional)')]
|
|
65
60
|
}), infotip && /*#__PURE__*/_jsx(InfoTip, {
|
|
66
|
-
...infotip
|
|
67
|
-
ariaLabelledby: shouldLabelInfoTip ? labelId : infotip.ariaLabelledby
|
|
61
|
+
...infotip
|
|
68
62
|
})]
|
|
69
63
|
});
|
|
70
64
|
};
|
|
@@ -21,10 +21,6 @@ export declare const getComponent: (componentName: string) => {
|
|
|
21
21
|
};
|
|
22
22
|
type GridFormInputGroupTestComponentProps = GridFormInputGroupProps & {
|
|
23
23
|
mode?: 'onSubmit' | 'onChange';
|
|
24
|
-
externalLabel?: {
|
|
25
|
-
id: string;
|
|
26
|
-
text: string;
|
|
27
|
-
};
|
|
28
24
|
};
|
|
29
25
|
export declare const GridFormInputGroupTestComponent: React.FC<GridFormInputGroupTestComponentProps>;
|
|
30
26
|
export {};
|
package/dist/GridForm/types.d.ts
CHANGED
|
@@ -25,11 +25,6 @@ export type BaseFormField<Value> = {
|
|
|
25
25
|
* HTML id to use instead of the name.
|
|
26
26
|
*/
|
|
27
27
|
id?: string;
|
|
28
|
-
/**
|
|
29
|
-
* InfoTip to display next to the field label. String labels automatically
|
|
30
|
-
* label the InfoTip button. For ReactNode labels, provide `ariaLabel` or
|
|
31
|
-
* set `labelledByFieldLabel: true` to ensure the InfoTip is accessible.
|
|
32
|
-
*/
|
|
33
28
|
infotip?: InfoTipProps;
|
|
34
29
|
isSoloField?: boolean;
|
|
35
30
|
name: string;
|
|
@@ -8,17 +8,14 @@ export const InfoTipButton = /*#__PURE__*/forwardRef(({
|
|
|
8
8
|
active,
|
|
9
9
|
children,
|
|
10
10
|
emphasis,
|
|
11
|
-
'aria-label': ariaLabel,
|
|
12
|
-
'aria-labelledby': ariaLabelledby,
|
|
13
11
|
...props
|
|
14
12
|
}, ref) => {
|
|
15
13
|
const Icon = emphasis === 'high' ? MiniInfoCircleIcon : MiniInfoOutlineIcon;
|
|
16
14
|
return /*#__PURE__*/_jsxs(InfoTipButtonBase, {
|
|
17
|
-
...props,
|
|
18
15
|
active: active,
|
|
19
16
|
"aria-expanded": active,
|
|
20
|
-
"aria-label":
|
|
21
|
-
|
|
17
|
+
"aria-label": "Show information",
|
|
18
|
+
...props,
|
|
22
19
|
ref: ref,
|
|
23
20
|
children: [Icon && /*#__PURE__*/_jsx(Icon, {
|
|
24
21
|
"aria-hidden": true,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const ScreenreaderNavigableText: import("@emotion/styled").StyledComponent<(((Omit<{
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
|
+
} & import("../..").TextTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "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<{
|
|
6
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
7
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
8
|
+
} & import("../..").TextNoTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "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>) & {
|
|
9
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
10
|
+
}) & {
|
|
11
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
+
}, {}, {}>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import _styled from "@emotion/styled/base";
|
|
2
|
+
import { css } from '@codecademy/gamut-styles';
|
|
3
|
+
import { Text } from '../../Typography';
|
|
4
|
+
export const ScreenreaderNavigableText = /*#__PURE__*/_styled(Text, {
|
|
5
|
+
target: "e1rvjfdo0",
|
|
6
|
+
label: "ScreenreaderNavigableText"
|
|
7
|
+
})(css({
|
|
8
|
+
position: 'absolute'
|
|
9
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9UaXAvSW5mb1RpcC9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3lDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9UaXAvSW5mb1RpcC9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vLi4vVHlwb2dyYXBoeSc7XG5cbmV4cG9ydCBjb25zdCBTY3JlZW5yZWFkZXJOYXZpZ2FibGVUZXh0ID0gc3R5bGVkKFRleHQpKFxuICBjc3MoeyBwb3NpdGlvbjogJ2Fic29sdXRlJyB9KVxuKTtcbiJdfQ== */");
|
|
@@ -2,20 +2,7 @@
|
|
|
2
2
|
import { TipBaseAlignment, TipBaseProps } from '../shared/types';
|
|
3
3
|
export type InfoTipProps = TipBaseProps & {
|
|
4
4
|
alignment?: TipBaseAlignment;
|
|
5
|
-
/**
|
|
6
|
-
* Accessible label for the InfoTip button. Its recommended to provide either `ariaLabel` or `ariaLabelledby`.
|
|
7
|
-
*/
|
|
8
|
-
ariaLabel?: string;
|
|
9
|
-
/**
|
|
10
|
-
* ID of an element that labels the InfoTip button. Its recommended to provide either `ariaLabel` or `ariaLabelledby`.
|
|
11
|
-
*/
|
|
12
|
-
ariaLabelledby?: string;
|
|
13
5
|
emphasis?: 'low' | 'high';
|
|
14
|
-
/**
|
|
15
|
-
* When true, the InfoTip button will be labelled by the form field's label element.
|
|
16
|
-
* This is automatic for string labels, but can be opted into for ReactNode labels.
|
|
17
|
-
*/
|
|
18
|
-
labelledByFieldLabel?: boolean;
|
|
19
6
|
/**
|
|
20
7
|
* Called when the info tip is clicked - the onClick function is called after the DOM updates and the tip is mounted.
|
|
21
8
|
*/
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { getFocusableElements as getFocusableElementsUtil } from '../../utils/focus';
|
|
3
|
+
import { extractTextContent } from '../../utils/react';
|
|
3
4
|
import { FloatingTip } from '../shared/FloatingTip';
|
|
4
5
|
import { InlineTip } from '../shared/InlineTip';
|
|
5
6
|
import { tipDefaultProps } from '../shared/types';
|
|
6
7
|
import { isElementVisible } from '../shared/utils';
|
|
8
|
+
import { ScreenreaderNavigableText } from './elements';
|
|
7
9
|
import { InfoTipButton } from './InfoTipButton';
|
|
8
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
const ARIA_HIDDEN_DELAY_MS = 1000;
|
|
12
|
+
|
|
13
|
+
// Match native dialogs with open attribute, and role-based dialogs that aren't aria-hidden
|
|
9
14
|
const MODAL_SELECTOR = 'dialog[open],[role="dialog"]:not([aria-hidden="true"]),[role="alertdialog"]:not([aria-hidden="true"])';
|
|
10
15
|
export const InfoTip = ({
|
|
11
16
|
alignment = 'top-right',
|
|
12
|
-
ariaLabel,
|
|
13
|
-
ariaLabelledby,
|
|
14
17
|
emphasis = 'low',
|
|
15
18
|
info,
|
|
16
19
|
onClick,
|
|
@@ -19,14 +22,25 @@ export const InfoTip = ({
|
|
|
19
22
|
}) => {
|
|
20
23
|
const isFloating = placement === 'floating';
|
|
21
24
|
const [isTipHidden, setHideTip] = useState(true);
|
|
25
|
+
const [isAriaHidden, setIsAriaHidden] = useState(false);
|
|
26
|
+
const [shouldAnnounce, setShouldAnnounce] = useState(false);
|
|
22
27
|
const [loaded, setLoaded] = useState(false);
|
|
23
28
|
const wrapperRef = useRef(null);
|
|
24
29
|
const buttonRef = useRef(null);
|
|
25
30
|
const popoverContentNodeRef = useRef(null);
|
|
26
31
|
const isInitialMount = useRef(true);
|
|
32
|
+
const ariaHiddenTimeoutRef = useRef(null);
|
|
33
|
+
const announceTimeoutRef = useRef(null);
|
|
27
34
|
const getFocusableElements = useCallback(() => {
|
|
28
35
|
return getFocusableElementsUtil(popoverContentNodeRef.current);
|
|
29
36
|
}, []);
|
|
37
|
+
const clearAndSetTimeout = useCallback((timeoutRef, callback, delay) => {
|
|
38
|
+
clearTimeout(timeoutRef.current ?? undefined);
|
|
39
|
+
timeoutRef.current = setTimeout(() => {
|
|
40
|
+
callback();
|
|
41
|
+
timeoutRef.current = null;
|
|
42
|
+
}, delay);
|
|
43
|
+
}, []);
|
|
30
44
|
const popoverContentRef = useCallback(node => {
|
|
31
45
|
popoverContentNodeRef.current = node;
|
|
32
46
|
if (node && !isTipHidden && isFloating) {
|
|
@@ -37,10 +51,24 @@ export const InfoTip = ({
|
|
|
37
51
|
}, [onClick, isTipHidden, isFloating]);
|
|
38
52
|
useEffect(() => {
|
|
39
53
|
setLoaded(true);
|
|
54
|
+
const ariaHiddenTimeout = ariaHiddenTimeoutRef.current;
|
|
55
|
+
const announceTimeout = announceTimeoutRef.current;
|
|
56
|
+
return () => {
|
|
57
|
+
clearTimeout(ariaHiddenTimeout ?? undefined);
|
|
58
|
+
clearTimeout(announceTimeout ?? undefined);
|
|
59
|
+
};
|
|
40
60
|
}, []);
|
|
41
61
|
const setTipIsHidden = useCallback(nextTipState => {
|
|
42
62
|
setHideTip(nextTipState);
|
|
43
|
-
|
|
63
|
+
if (!nextTipState && !isFloating) {
|
|
64
|
+
clearAndSetTimeout(ariaHiddenTimeoutRef, () => setIsAriaHidden(true), ARIA_HIDDEN_DELAY_MS);
|
|
65
|
+
} else if (nextTipState) {
|
|
66
|
+
if (isAriaHidden) setIsAriaHidden(false);
|
|
67
|
+
setShouldAnnounce(false);
|
|
68
|
+
clearTimeout(ariaHiddenTimeoutRef.current ?? undefined);
|
|
69
|
+
ariaHiddenTimeoutRef.current = null;
|
|
70
|
+
}
|
|
71
|
+
}, [isAriaHidden, isFloating, clearAndSetTimeout]);
|
|
44
72
|
const handleOutsideClick = useCallback(e => {
|
|
45
73
|
const wrapper = wrapperRef.current;
|
|
46
74
|
const isOutside = wrapper && (!(e.target instanceof HTMLElement) || !wrapper.contains(e.target));
|
|
@@ -51,7 +79,10 @@ export const InfoTip = ({
|
|
|
51
79
|
const clickHandler = useCallback(() => {
|
|
52
80
|
const currentTipState = !isTipHidden;
|
|
53
81
|
setTipIsHidden(currentTipState);
|
|
54
|
-
|
|
82
|
+
if (!currentTipState) {
|
|
83
|
+
clearAndSetTimeout(announceTimeoutRef, () => setShouldAnnounce(true), 0);
|
|
84
|
+
}
|
|
85
|
+
}, [isTipHidden, setTipIsHidden, clearAndSetTimeout]);
|
|
55
86
|
useLayoutEffect(() => {
|
|
56
87
|
if (isInitialMount.current) {
|
|
57
88
|
isInitialMount.current = false;
|
|
@@ -89,18 +120,7 @@ export const InfoTip = ({
|
|
|
89
120
|
const handleTabKeyInPopover = event => {
|
|
90
121
|
if (event.key !== 'Tab' || event.shiftKey) return;
|
|
91
122
|
const focusableElements = getFocusableElements();
|
|
92
|
-
|
|
93
|
-
activeElement
|
|
94
|
-
} = document;
|
|
95
|
-
|
|
96
|
-
// If no focusable elements and popover itself has focus, wrap to button
|
|
97
|
-
if (focusableElements.length === 0) {
|
|
98
|
-
if (activeElement === popoverContentNodeRef.current) {
|
|
99
|
-
event.preventDefault();
|
|
100
|
-
buttonRef.current?.focus();
|
|
101
|
-
}
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
123
|
+
if (focusableElements.length === 0) return;
|
|
104
124
|
const lastElement = focusableElements[focusableElements.length - 1];
|
|
105
125
|
|
|
106
126
|
// Only wrap forward: if on last element, wrap to button
|
|
@@ -121,35 +141,45 @@ export const InfoTip = ({
|
|
|
121
141
|
};
|
|
122
142
|
}
|
|
123
143
|
return () => document.removeEventListener('keydown', handleGlobalEscapeKey, true);
|
|
124
|
-
}, [isTipHidden, isFloating,
|
|
125
|
-
useEffect(() => {
|
|
126
|
-
if (isTipHidden) return;
|
|
127
|
-
const timeoutId = setTimeout(() => {
|
|
128
|
-
popoverContentNodeRef.current?.focus();
|
|
129
|
-
}, 0);
|
|
130
|
-
return () => clearTimeout(timeoutId);
|
|
131
|
-
}, [isTipHidden]);
|
|
144
|
+
}, [isTipHidden, isFloating, setTipIsHidden, getFocusableElements]);
|
|
132
145
|
const Tip = loaded && isFloating ? FloatingTip : InlineTip;
|
|
133
146
|
const tipProps = useMemo(() => ({
|
|
134
147
|
alignment,
|
|
135
148
|
info,
|
|
136
149
|
isTipHidden,
|
|
137
|
-
contentRef: popoverContentRef,
|
|
138
150
|
wrapperRef,
|
|
151
|
+
...(isFloating && {
|
|
152
|
+
popoverContentRef
|
|
153
|
+
}),
|
|
139
154
|
...rest
|
|
140
|
-
}), [alignment, info, isTipHidden,
|
|
155
|
+
}), [alignment, info, isTipHidden, wrapperRef, isFloating, popoverContentRef, rest]);
|
|
156
|
+
const extractedTextContent = useMemo(() => extractTextContent(info), [info]);
|
|
157
|
+
const screenreaderInfo = shouldAnnounce && !isTipHidden ? extractedTextContent : '\xa0';
|
|
158
|
+
const screenreaderText = useMemo(() => /*#__PURE__*/_jsx(ScreenreaderNavigableText, {
|
|
159
|
+
"aria-hidden": isAriaHidden,
|
|
160
|
+
"aria-live": "assertive",
|
|
161
|
+
screenreader: true,
|
|
162
|
+
children: screenreaderInfo
|
|
163
|
+
}), [isAriaHidden, screenreaderInfo]);
|
|
164
|
+
const button = useMemo(() => /*#__PURE__*/_jsx(InfoTipButton, {
|
|
165
|
+
active: !isTipHidden,
|
|
166
|
+
"aria-expanded": !isTipHidden,
|
|
167
|
+
emphasis: emphasis,
|
|
168
|
+
ref: buttonRef,
|
|
169
|
+
onClick: clickHandler
|
|
170
|
+
}), [isTipHidden, emphasis, clickHandler]);
|
|
171
|
+
|
|
172
|
+
/*
|
|
173
|
+
* For floating placement, screenreader text comes before button to maintain
|
|
174
|
+
* correct DOM order despite Portal rendering. See GMT-64 for planned fix.
|
|
175
|
+
*/
|
|
141
176
|
return /*#__PURE__*/_jsx(Tip, {
|
|
142
177
|
...tipProps,
|
|
143
178
|
type: "info",
|
|
144
|
-
children: /*#__PURE__*/
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
"aria-labelledby": ariaLabelledby,
|
|
149
|
-
"aria-roledescription": "More information button",
|
|
150
|
-
emphasis: emphasis,
|
|
151
|
-
ref: buttonRef,
|
|
152
|
-
onClick: clickHandler
|
|
179
|
+
children: isFloating && alignment.includes('top') ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
180
|
+
children: [screenreaderText, button]
|
|
181
|
+
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
182
|
+
children: [button, screenreaderText]
|
|
153
183
|
})
|
|
154
184
|
});
|
|
155
185
|
};
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
/// <reference types="testing-library__jest-dom" />
|
|
3
3
|
import { setupRtl } from '@codecademy/gamut-tests';
|
|
4
4
|
import { RefObject } from 'react';
|
|
5
|
-
import { InfoTip } from '../InfoTip';
|
|
5
|
+
import { InfoTip, InfoTipProps } from '../InfoTip';
|
|
6
6
|
import { TipPlacements } from '../shared/types';
|
|
7
7
|
type InfoTipView = ReturnType<ReturnType<typeof setupRtl<typeof InfoTip>>>['view'];
|
|
8
|
+
type Placement = NonNullable<InfoTipProps['placement']>;
|
|
8
9
|
type ViewParam = {
|
|
9
10
|
view: InfoTipView;
|
|
10
11
|
};
|
|
@@ -15,7 +16,7 @@ type InfoParam = {
|
|
|
15
16
|
info: string;
|
|
16
17
|
};
|
|
17
18
|
type PlacementParam = {
|
|
18
|
-
placement:
|
|
19
|
+
placement: Placement;
|
|
19
20
|
};
|
|
20
21
|
export declare const createFocusOnClick: (ref: RefObject<HTMLDivElement>) => ({ isTipHidden }: {
|
|
21
22
|
isTipHidden: boolean;
|
|
@@ -47,10 +48,13 @@ export declare const pressKey: (key: string) => Promise<void>;
|
|
|
47
48
|
export declare const waitForLinkToHaveFocus: ({ view, linkText, }: ViewParam & LinkTextParam) => Promise<HTMLElement>;
|
|
48
49
|
export declare const openTipAndWaitForLink: ({ view, linkText, }: ViewParam & LinkTextParam) => Promise<HTMLElement>;
|
|
49
50
|
export declare const openTipTabToLinkAndWaitForFocus: (view: InfoTipView, linkText: string) => Promise<HTMLElement>;
|
|
50
|
-
export declare const
|
|
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>;
|
|
51
55
|
direction: 'forward' | 'backward';
|
|
52
56
|
}) => Promise<void>;
|
|
53
|
-
export declare const
|
|
57
|
+
export declare const getTipContent: (view: InfoTipView, text: string, useQuery?: boolean) => HTMLElement;
|
|
54
58
|
export declare const testTabbingBetweenLinks: ({ view, firstLinkText, secondLinkText, placement, }: ViewParam & {
|
|
55
59
|
firstLinkText: string;
|
|
56
60
|
secondLinkText: string;
|
|
@@ -58,6 +62,7 @@ export declare const testTabbingBetweenLinks: ({ view, firstLinkText, secondLink
|
|
|
58
62
|
}) => Promise<void>;
|
|
59
63
|
export declare const setupLinkTestWithPlacement: (linkText: string, placement: TipPlacements, renderView: ReturnType<typeof setupRtl<typeof InfoTip>>) => {
|
|
60
64
|
view: import("@testing-library/react").RenderResult;
|
|
65
|
+
containerRef: RefObject<HTMLDivElement>;
|
|
61
66
|
info: import("react/jsx-runtime").JSX.Element;
|
|
62
67
|
onClick: ({ isTipHidden }: {
|
|
63
68
|
isTipHidden: boolean;
|
|
@@ -81,12 +86,28 @@ type ViewWithQueries = {
|
|
|
81
86
|
getAllByText: (text: string) => HTMLElement[];
|
|
82
87
|
getAllByLabelText: (text: string) => HTMLElement[];
|
|
83
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;
|
|
84
101
|
export declare const openInfoTipsWithKeyboard: ({ view, count, }: {
|
|
85
102
|
view: ViewWithQueries;
|
|
86
103
|
count: number;
|
|
87
104
|
}) => Promise<void>;
|
|
88
105
|
export declare const expectTipsVisible: (tips: {
|
|
89
106
|
text: string;
|
|
107
|
+
placement?: 'inline' | 'floating';
|
|
108
|
+
}[]) => void;
|
|
109
|
+
export declare const expectTipsClosed: (tips: {
|
|
110
|
+
text: string;
|
|
111
|
+
placement?: 'inline' | 'floating';
|
|
90
112
|
}[]) => void;
|
|
91
|
-
export declare const expectTipsClosed: () => void;
|
|
92
113
|
export {};
|
|
@@ -18,7 +18,7 @@ export const FloatingTip = ({
|
|
|
18
18
|
loading,
|
|
19
19
|
narrow,
|
|
20
20
|
overline,
|
|
21
|
-
|
|
21
|
+
popoverContentRef,
|
|
22
22
|
truncateLines,
|
|
23
23
|
type,
|
|
24
24
|
username,
|
|
@@ -123,7 +123,7 @@ export const FloatingTip = ({
|
|
|
123
123
|
width: inheritDims ? 'inherit' : undefined,
|
|
124
124
|
onBlur: toolOnlyEventFunc,
|
|
125
125
|
onFocus: toolOnlyEventFunc,
|
|
126
|
-
onKeyDown: escapeKeyPressHandler,
|
|
126
|
+
onKeyDown: escapeKeyPressHandler ? e => escapeKeyPressHandler(e) : undefined,
|
|
127
127
|
onMouseDown: e => e.preventDefault(),
|
|
128
128
|
onMouseEnter: toolOnlyEventFunc,
|
|
129
129
|
children: children
|
|
@@ -134,7 +134,7 @@ export const FloatingTip = ({
|
|
|
134
134
|
horizontalOffset: offset,
|
|
135
135
|
isOpen: isPopoverOpen,
|
|
136
136
|
outline: true,
|
|
137
|
-
popoverContainerRef:
|
|
137
|
+
popoverContainerRef: popoverContentRef,
|
|
138
138
|
skipFocusTrap: true,
|
|
139
139
|
targetRef: ref,
|
|
140
140
|
variant: "secondary",
|
|
@@ -17,7 +17,6 @@ export const InlineTip = ({
|
|
|
17
17
|
loading,
|
|
18
18
|
narrow,
|
|
19
19
|
overline,
|
|
20
|
-
contentRef,
|
|
21
20
|
truncateLines,
|
|
22
21
|
type,
|
|
23
22
|
username,
|
|
@@ -43,7 +42,7 @@ export const InlineTip = ({
|
|
|
43
42
|
height: inheritDims ? 'inherit' : undefined,
|
|
44
43
|
ref: wrapperRef,
|
|
45
44
|
width: inheritDims ? 'inherit' : undefined,
|
|
46
|
-
onKeyDown: escapeKeyPressHandler,
|
|
45
|
+
onKeyDown: escapeKeyPressHandler ? e => escapeKeyPressHandler(e) : undefined,
|
|
47
46
|
children: children
|
|
48
47
|
});
|
|
49
48
|
const tipBody = /*#__PURE__*/_jsx(InlineTipBodyWrapper, {
|
|
@@ -56,9 +55,7 @@ export const InlineTip = ({
|
|
|
56
55
|
color: "currentColor",
|
|
57
56
|
horizNarrow: narrow && isHorizontalCenter,
|
|
58
57
|
id: id,
|
|
59
|
-
ref: contentRef,
|
|
60
58
|
role: type === 'tool' ? 'tooltip' : undefined,
|
|
61
|
-
tabIndex: type === 'info' ? -1 : undefined,
|
|
62
59
|
width: narrow && !isHorizontalCenter ? narrowWidth : 'max-content',
|
|
63
60
|
zIndex: "auto",
|
|
64
61
|
children: type === 'preview' ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
@@ -46,7 +46,7 @@ export type TipPlacementComponentProps = Omit<TipNewBaseProps, 'placement' | 'em
|
|
|
46
46
|
escapeKeyPressHandler?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
47
47
|
id?: string;
|
|
48
48
|
isTipHidden?: boolean;
|
|
49
|
-
|
|
49
|
+
popoverContentRef?: React.RefObject<HTMLDivElement> | ((node: HTMLDivElement | null) => void);
|
|
50
50
|
type: 'info' | 'tool' | 'preview';
|
|
51
51
|
wrapperRef?: React.RefObject<HTMLDivElement>;
|
|
52
52
|
zIndex?: number;
|
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.6.1-alpha.
|
|
4
|
+
"version": "67.6.1-alpha.7d41e2.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@codecademy/gamut-icons": "9.53.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": "b841002bd67de449d6e5d80709adac6a31054434"
|
|
60
60
|
}
|