@pega/cosmos-react-core 9.0.0-build.24.5 → 9.0.0-build.24.6
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/lib/components/Drawer/ResizeHandle.d.ts +1 -0
- package/lib/components/Drawer/ResizeHandle.d.ts.map +1 -1
- package/lib/components/Drawer/ResizeHandle.js +3 -2
- package/lib/components/Drawer/ResizeHandle.js.map +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts.map +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js +44 -14
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
- package/lib/hooks/useFocusWithin.js +3 -3
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +2 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +2 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +2 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +2 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/utils/getParentWindow.d.ts +3 -0
- package/lib/utils/getParentWindow.d.ts.map +1 -0
- package/lib/utils/getParentWindow.js +12 -0
- package/lib/utils/getParentWindow.js.map +1 -0
- package/lib/utils/index.d.ts +1 -0
- package/lib/utils/index.d.ts.map +1 -1
- package/lib/utils/index.js +1 -0
- package/lib/utils/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@ import type { MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent
|
|
|
2
2
|
export interface ResizeHandleProps {
|
|
3
3
|
onKeyDown: (e: ReactKeyboardEvent, grabbed: boolean) => void;
|
|
4
4
|
onMouseDown: (e: ReactMouseEvent) => void;
|
|
5
|
+
contextualLabel?: string;
|
|
5
6
|
}
|
|
6
7
|
export declare const StyledResizeHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
8
|
declare const ResizeHandle: import("react").ForwardRefExoticComponent<ResizeHandleProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAef,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,CAAC,CAAC,EAAE,kBAAkB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAef,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,CAAC,CAAC,EAAE,kBAAkB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAyBD,eAAO,MAAM,kBAAkB,6NA8B7B,CAAC;AAIH,QAAA,MAAM,YAAY,8GAuEhB,CAAC;AAEH,eAAe,YAAY,CAAC"}
|
|
@@ -63,7 +63,7 @@ export const StyledResizeHandle = styled.div(({ theme }) => {
|
|
|
63
63
|
`;
|
|
64
64
|
});
|
|
65
65
|
StyledResizeHandle.defaultProps = defaultThemeProp;
|
|
66
|
-
const ResizeHandle = forwardRef(function ResizeHandle({ onMouseDown, onKeyDown }, ref) {
|
|
66
|
+
const ResizeHandle = forwardRef(function ResizeHandle({ onMouseDown, onKeyDown, contextualLabel }, ref) {
|
|
67
67
|
const resizeHandleRef = useConsolidatedRef(ref);
|
|
68
68
|
const t = useI18n();
|
|
69
69
|
const [mouseGrabbed, setMouseGrabbed] = useState(false);
|
|
@@ -99,7 +99,8 @@ const ResizeHandle = forwardRef(function ResizeHandle({ onMouseDown, onKeyDown }
|
|
|
99
99
|
targetNode.style.removeProperty('user-select');
|
|
100
100
|
setMouseGrabbed(false);
|
|
101
101
|
};
|
|
102
|
-
|
|
102
|
+
const label = contextualLabel || t('resize');
|
|
103
|
+
return (_jsx(StyledResizeHandle, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ref: resizeHandleRef, children: _jsx(StyledResizeButton, { tabIndex: 0, icon: true, label: !mouseGrabbed && !keyboardGrabbed ? label : undefined, "aria-label": !mouseGrabbed && !keyboardGrabbed
|
|
103
104
|
? t('drag_handle_activate_description')
|
|
104
105
|
: t('drag_handle_cancel_description'), onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onBlur: () => {
|
|
105
106
|
setKeyboardGrabbed(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizeHandle.js","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,eAAe,MAAM,wCAAwC,CAAC;AAE1E,YAAY,CAAC,QAAQ,CAAC,CAAC;AACvB,YAAY,CAAC,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ResizeHandle.js","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type {\n PropsWithoutRef,\n Ref,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Button, { StyledButton } from '../Button';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport { useConsolidatedRef, useEscape, useI18n } from '../../hooks';\nimport { getChildOfRootNode } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport * as DragIcon from '../Icon/icons/drag.icon';\nimport * as ArrowUpDownIcon from '../Icon/icons/arrow-micro-up-down.icon';\n\nregisterIcon(DragIcon);\nregisterIcon(ArrowUpDownIcon);\n\nexport interface ResizeHandleProps {\n onKeyDown: (e: ReactKeyboardEvent, grabbed: boolean) => void;\n onMouseDown: (e: ReactMouseEvent) => void;\n contextualLabel?: string;\n}\n\nconst StyledResizeButton = styled(Button)<{\n rotateIcon?: boolean;\n}>(({ rotateIcon }) => {\n return css`\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n\n &:not(:focus) {\n ${hideVisually};\n }\n\n ${rotateIcon &&\n css`\n ${StyledIcon} {\n transform: rotate(90deg);\n }\n `}\n `;\n});\n\nexport const StyledResizeHandle = styled.div(({ theme }) => {\n return css`\n position: absolute;\n inset-inline-start: 0;\n inset-block: 0;\n inline-size: 0.125rem;\n background-color: transparent;\n transition: background-color ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n cursor: ew-resize;\n z-index: ${theme.base['z-index'].max};\n\n ::before {\n content: '';\n position: absolute;\n inset: 0;\n width: calc(${theme.base['hit-area'].compact} * 0.75);\n }\n\n &:hover {\n background-color: ${theme.base.palette.interactive};\n }\n\n ${StyledButton} {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: calc(-2 * ${theme.base.spacing});\n translate: 0 -50%;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledResizeHandle.defaultProps = defaultThemeProp;\n\nconst ResizeHandle = forwardRef(function ResizeHandle(\n { onMouseDown, onKeyDown, contextualLabel }: PropsWithoutRef<ResizeHandleProps>,\n ref: Ref<HTMLDivElement>\n) {\n const resizeHandleRef = useConsolidatedRef<HTMLDivElement>(ref);\n const t = useI18n();\n\n const [mouseGrabbed, setMouseGrabbed] = useState(false);\n const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);\n\n useEscape(() => {\n setMouseGrabbed(false);\n setKeyboardGrabbed(false);\n });\n\n const handleKeyDown = (e: ReactKeyboardEvent) => {\n if (e.code === 'Space') {\n e.preventDefault();\n if (keyboardGrabbed) {\n setKeyboardGrabbed(false);\n } else {\n setKeyboardGrabbed(true);\n }\n }\n\n onKeyDown?.(e, keyboardGrabbed);\n };\n\n const handleMouseDown = (e: ReactMouseEvent) => {\n const targetNode = getChildOfRootNode(resizeHandleRef);\n if (!targetNode) return;\n targetNode.style.setProperty('user-select', 'none');\n setMouseGrabbed(true);\n onMouseDown?.(e);\n };\n\n const handleMouseUp = () => {\n const targetNode = getChildOfRootNode(resizeHandleRef);\n if (!targetNode) return;\n targetNode.style.removeProperty('user-select');\n setMouseGrabbed(false);\n };\n\n const label = contextualLabel || t('resize');\n\n return (\n <StyledResizeHandle\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n ref={resizeHandleRef}\n >\n <StyledResizeButton\n tabIndex={0}\n icon\n label={!mouseGrabbed && !keyboardGrabbed ? label : undefined}\n aria-label={\n !mouseGrabbed && !keyboardGrabbed\n ? t('drag_handle_activate_description')\n : t('drag_handle_cancel_description')\n }\n onMouseDown={handleMouseDown}\n onKeyDown={handleKeyDown}\n onBlur={() => {\n setKeyboardGrabbed(false);\n }}\n rotateIcon={keyboardGrabbed}\n >\n <Icon name={keyboardGrabbed ? 'arrow-micro-up-down' : 'drag'} />\n </StyledResizeButton>\n </StyledResizeHandle>\n );\n});\n\nexport default ResizeHandle;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACF,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OAwBhC,CAAC;;;;AAkMH,wBAAuE"}
|
|
@@ -4,14 +4,15 @@ import styled, { css } from 'styled-components';
|
|
|
4
4
|
import FormField from '../FormField';
|
|
5
5
|
import { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';
|
|
6
6
|
import Flex from '../Flex';
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
7
|
+
import { defaultThemeProp } from '../../theme';
|
|
8
|
+
import { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';
|
|
9
9
|
import { StyledImageContainer, StyledSelectionCard, StyledSelectionCardInline } from '../SelectionCard/SelectionCard.styles';
|
|
10
10
|
import { getActiveElement, withTestIds } from '../../utils';
|
|
11
11
|
import { StyledRadioCheck } from '../RadioCheck/RadioCheck';
|
|
12
12
|
import { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';
|
|
13
13
|
export const StyledRadioCheckGroup = styled.fieldset(() => {
|
|
14
14
|
return css `
|
|
15
|
+
container-type: inline-size;
|
|
15
16
|
flex-wrap: nowrap;
|
|
16
17
|
|
|
17
18
|
&[disabled] {
|
|
@@ -34,11 +35,50 @@ export const StyledRadioCheckGroup = styled.fieldset(() => {
|
|
|
34
35
|
}
|
|
35
36
|
`;
|
|
36
37
|
});
|
|
38
|
+
const getCardGridContainerStyles = (theme) => {
|
|
39
|
+
const cardWidth = theme.base['content-width'].md;
|
|
40
|
+
return css `
|
|
41
|
+
display: grid;
|
|
42
|
+
gap: ${theme.base.spacing};
|
|
43
|
+
grid-template-columns: 1fr;
|
|
44
|
+
grid-auto-rows: 1fr;
|
|
45
|
+
|
|
46
|
+
@container (min-width: calc(2 * ${cardWidth})) {
|
|
47
|
+
grid-template-columns: repeat(2, 1fr);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@container (min-width: calc(3 * ${cardWidth})) {
|
|
51
|
+
grid-template-columns: repeat(3, 1fr);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@container (min-width: calc(4 * ${cardWidth})) {
|
|
55
|
+
grid-template-columns: repeat(4, 1fr);
|
|
56
|
+
}
|
|
57
|
+
`;
|
|
58
|
+
};
|
|
59
|
+
const StyledCardGrid = styled.div(({ theme, renderInline, autoStack, childCount }) => {
|
|
60
|
+
if (!renderInline) {
|
|
61
|
+
return css `
|
|
62
|
+
display: grid;
|
|
63
|
+
gap: ${theme.base.spacing};
|
|
64
|
+
grid-template-columns: minmax(min-content, max-content);
|
|
65
|
+
grid-auto-rows: 1fr;
|
|
66
|
+
`;
|
|
67
|
+
}
|
|
68
|
+
return autoStack
|
|
69
|
+
? getCardGridContainerStyles(theme)
|
|
70
|
+
: css `
|
|
71
|
+
display: grid;
|
|
72
|
+
gap: ${theme.base.spacing};
|
|
73
|
+
grid-template-columns: repeat(${childCount}, 1fr);
|
|
74
|
+
grid-auto-rows: 1fr;
|
|
75
|
+
`;
|
|
76
|
+
});
|
|
77
|
+
StyledCardGrid.defaultProps = defaultThemeProp;
|
|
37
78
|
const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
|
|
38
79
|
const uid = useUID();
|
|
39
80
|
const { testId, children, name = uid, disabled = false, required = false, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', arrowNavigation = true, onClear, ...restProps } = props;
|
|
40
81
|
const testIds = useTestIds(testId, getRadioCheckGroupTestIds);
|
|
41
|
-
const theme = useTheme();
|
|
42
82
|
const [optionsEl, setOptionsEl] = useElement();
|
|
43
83
|
const [renderInline, setRenderInline] = useState(inline);
|
|
44
84
|
const renderInlineRef = useRef(inline);
|
|
@@ -102,17 +142,7 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
|
|
|
102
142
|
if (!(e.target instanceof Element) || !e.target.closest('label'))
|
|
103
143
|
return;
|
|
104
144
|
e.preventDefault();
|
|
105
|
-
}, children: variant === 'card-grid' ? (_jsx(
|
|
106
|
-
gap: 1,
|
|
107
|
-
cols: (() => {
|
|
108
|
-
if (!renderInline)
|
|
109
|
-
return 'minmax(min-content, max-content)';
|
|
110
|
-
if (autoStack)
|
|
111
|
-
return `repeat(auto-fit, minmax(min(${theme.base['content-width'].md}, 100%), 1fr))`;
|
|
112
|
-
return `repeat(${Children.count(children)}, 1fr)`;
|
|
113
|
-
})(),
|
|
114
|
-
autoRows: '1fr'
|
|
115
|
-
}, children: mapChildren })) : (_jsx(Flex, { ref: setOptionsEl, container: {
|
|
145
|
+
}, children: variant === 'card-grid' ? (_jsx(StyledCardGrid, { ref: setOptionsEl, renderInline: renderInline, autoStack: autoStack, childCount: Children.count(children), children: mapChildren })) : (_jsx(Flex, { ref: setOptionsEl, container: {
|
|
116
146
|
direction: renderInline ? 'row' : 'column',
|
|
117
147
|
colGap: renderInline ? 1.5 : 2,
|
|
118
148
|
rowGap: variant === 'card' ? 1 : 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport {\n useArrows,\n useConsolidatedRef,\n useElement,\n useTestIds,\n useTheme,\n useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> & {\n /** Accepts Checkboxes or RadioButtons as children. */\n children: ReactElement | ReactElement[];\n /**\n * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n onClear?: FormFieldProps['onClear'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: FormFieldProps['inline'];\n /** Used to toggle the auto stacking feature of an inlined group.\n * @default true\n */\n autoStack?: boolean;\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /**\n * Controls the styling of the child RadioChecks.\n * @default 'simple'\n */\n variant?: RadioCheckProps['variant'] | 'card-grid';\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /**\n * Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n */\n arrowNavigation?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(() => {\n return css`\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n /* To enlarge the image containers to the size of the biggest one */\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n `;\n});\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const theme = useTheme();\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(\n () =>\n Children.map(children, child =>\n cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled || child.props.disabled,\n readOnly: readOnly || child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly || child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n })\n ),\n [children, name, disabled, readOnly, variant, onChange]\n );\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n labelAs='legend'\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) || !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {variant === 'card-grid' ? (\n <Grid\n container={{\n gap: 1,\n cols: (() => {\n if (!renderInline) return 'minmax(min-content, max-content)';\n if (autoStack)\n return `repeat(auto-fit, minmax(min(${theme.base['content-width'].md}, 100%), 1fr))`;\n return `repeat(${Children.count(children)}, 1fr)`;\n })(),\n autoRows: '1fr'\n }}\n >\n {mapChildren}\n </Grid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n )}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> & {\n /** Accepts Checkboxes or RadioButtons as children. */\n children: ReactElement | ReactElement[];\n /**\n * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n onClear?: FormFieldProps['onClear'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: FormFieldProps['inline'];\n /** Used to toggle the auto stacking feature of an inlined group.\n * @default true\n */\n autoStack?: boolean;\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /**\n * Controls the styling of the child RadioChecks.\n * @default 'simple'\n */\n variant?: RadioCheckProps['variant'] | 'card-grid';\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /**\n * Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n */\n arrowNavigation?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(() => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n /* To enlarge the image containers to the size of the biggest one */\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n `;\n});\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const cardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n @container (min-width: calc(2 * ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(\n () =>\n Children.map(children, child =>\n cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled || child.props.disabled,\n readOnly: readOnly || child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly || child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n })\n ),\n [children, name, disabled, readOnly, variant, onChange]\n );\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n labelAs='legend'\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) || !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n )}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
|
2
|
-
import { getAllPopovers, isInstance, normalizeTargets } from '../utils';
|
|
2
|
+
import { getAllPopovers, getParentWindow, isInstance, normalizeTargets } from '../utils';
|
|
3
3
|
import useConfiguration from './useConfiguration';
|
|
4
4
|
const getElements = (els) => normalizeTargets(els)
|
|
5
5
|
.flatMap(el => [el, ...getAllPopovers(el)])
|
|
@@ -78,11 +78,11 @@ const useFocusWithin = (els, onFocusChange) => {
|
|
|
78
78
|
};
|
|
79
79
|
try {
|
|
80
80
|
// When in iframe, we need to listen to parent window events as well.
|
|
81
|
-
|
|
81
|
+
getParentWindow()?.document.addEventListener('focusin', parentWindowHandler, {
|
|
82
82
|
once: true,
|
|
83
83
|
signal: handlerAbortController.signal
|
|
84
84
|
});
|
|
85
|
-
|
|
85
|
+
getParentWindow()?.document.addEventListener('mouseup', parentWindowHandler, {
|
|
86
86
|
once: true,
|
|
87
87
|
signal: handlerAbortController.signal
|
|
88
88
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { getAllPopovers, isInstance, normalizeTargets } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst getElements = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[]\n) =>\n normalizeTargets(els)\n .flatMap(el => [el, ...getAllPopovers(el)])\n .filter((el): el is HTMLElement => isInstance(el, HTMLElement));\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[],\n onFocusChange?: (isFocused: boolean, element: T | Element | null) => void\n): boolean => {\n const [hasFocus, setFocus] = useState(false);\n const focusedElRef = useRef<T | Element | null>(null);\n const { portalTarget } = useConfiguration();\n\n const handlerAbortControllerRef = useRef<AbortController>();\n useEffect(() => {\n return () => {\n handlerAbortControllerRef.current?.abort();\n };\n }, []);\n\n const onBlur = useCallback(\n (e: FocusEvent | Event) => {\n if (!hasFocus) return;\n\n const relatedTarget = isInstance(e, FocusEvent) ? e.relatedTarget : null;\n\n // Gather observed elements along with their popovers to probe for element which gains focus.\n const elements = normalizeTargets(els).flatMap(el => [el, ...getAllPopovers(el)]);\n\n if (isInstance(relatedTarget, Node)) {\n // changing focus to another relevant child doesn't count\n const focusedEl = elements.find(el => el?.contains(relatedTarget));\n if (focusedEl) {\n // ... just update the currently focused item\n focusedElRef.current = focusedEl;\n return;\n }\n }\n\n // Code below is similar to the useOuterEvent hook, but single-shot only and need to be attached\n // after blur event only. Due to various order of events between browsers and OSes, we need to\n // postpone calling 'onBlur' callback until next element gets focus or on outer click to check\n // if the relevant element contains the target element, which means the focus is retained.\n const handlerAbortController = new AbortController();\n const handler = (fe: Event | FocusEvent | MouseEvent) => {\n if (\n !elements.some(el => {\n return fe.composedPath().some(target => {\n return isInstance(target, Node) && el.contains(target);\n });\n })\n ) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n handlerAbortController.abort();\n };\n\n // For keyboard and SR navigation - wait for 'focusin'.\n // attach to root node of the first element is enough, since all should share the same root\n (elements[0] ?? portalTarget)\n ?.getRootNode({ composed: false })\n .addEventListener('focusin', handler, {\n once: true,\n signal: handlerAbortController.signal\n });\n\n // For mouse and touch navigation - wait for 'mouseup'.\n // The chosen event need to occur before 'click' to allow the given callback code finish before\n // 'click' handlers.\n // attach to root node of the first element is enough, since all should share the same root\n (elements[0] ?? portalTarget)\n ?.getRootNode({ composed: true })\n .addEventListener('mouseup', handler, {\n once: true,\n signal: handlerAbortController.signal\n });\n\n // For parent window we do not need to verify element placement in DOM.\n const parentWindowHandler = () => {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n handlerAbortController.abort();\n };\n\n try {\n // When in iframe, we need to listen to parent window events as well.\n window.parent?.document.addEventListener('focusin', parentWindowHandler, {\n once: true,\n signal: handlerAbortController.signal\n });\n window.parent?.document.addEventListener('mouseup', parentWindowHandler, {\n once: true,\n signal: handlerAbortController.signal\n });\n } catch {\n // IFrame parent document is not accessible when cross-origin.\n // Don't attach handlers in that case.\n }\n\n handlerAbortControllerRef.current = handlerAbortController;\n },\n [hasFocus, onFocusChange, els]\n );\n\n const onFocus = useCallback(\n (e: Event | FocusEvent) => {\n if (!hasFocus) {\n setFocus(true);\n const targetEl = e.currentTarget as T;\n onFocusChange?.(true, targetEl);\n focusedElRef.current = targetEl;\n }\n },\n [hasFocus, onFocusChange]\n );\n\n useEffect(() => {\n const elements = getElements(els);\n\n // Programmatically trigger focus callback on initial render to handle autoFocus\n elements.forEach(el => {\n if (el?.contains(document.activeElement)) {\n onFocus(new FocusEvent('focusin', { relatedTarget: document.activeElement }));\n }\n });\n }, []);\n\n useEffect(() => {\n const elements = normalizeTargets(els);\n\n elements.forEach(el => {\n el?.addEventListener('focusin', onFocus);\n el?.addEventListener('popover:focusin', onFocus);\n el?.addEventListener('focusout', onBlur);\n el?.addEventListener('popover:focusout', onBlur);\n });\n return () => {\n elements.forEach(el => {\n el?.removeEventListener('focusin', onFocus);\n el?.removeEventListener('popover:focusin', onFocus);\n el?.removeEventListener('focusout', onBlur);\n el?.removeEventListener('popover:focusout', onBlur);\n });\n };\n }, [els, onFocus, onBlur]);\n\n return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
|
|
1
|
+
{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEzF,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,MAAM,WAAW,GAAG,CAClB,GAAuC,EACvC,EAAE,CACF,gBAAgB,CAAC,GAAG,CAAC;KAClB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC;KAC1C,MAAM,CAAC,CAAC,EAAE,EAAqB,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;AAEpE;;;;GAIG;AACH,MAAM,cAAc,GAAG,CACrB,GAAuC,EACvC,aAAyE,EAChE,EAAE;IACX,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5C,MAAM,yBAAyB,GAAG,MAAM,EAAmB,CAAC;IAC5D,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,yBAAyB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7C,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,CAAqB,EAAE,EAAE;QACxB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC;QAEzE,6FAA6F;QAC7F,MAAM,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAElF,IAAI,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC;YACpC,yDAAyD;YACzD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;YACnE,IAAI,SAAS,EAAE,CAAC;gBACd,6CAA6C;gBAC7C,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;gBACjC,OAAO;YACT,CAAC;QACH,CAAC;QAED,gGAAgG;QAChG,8FAA8F;QAC9F,8FAA8F;QAC9F,0FAA0F;QAC1F,MAAM,sBAAsB,GAAG,IAAI,eAAe,EAAE,CAAC;QACrD,MAAM,OAAO,GAAG,CAAC,EAAmC,EAAE,EAAE;YACtD,IACE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBAClB,OAAO,EAAE,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;oBACrC,OAAO,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;gBACzD,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,EACF,CAAC;gBACD,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;gBAC7C,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,CAAC;YACD,sBAAsB,CAAC,KAAK,EAAE,CAAC;QACjC,CAAC,CAAC;QAEF,uDAAuD;QACvD,2FAA2F;QAC3F,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC;YAC3B,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;aACjC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE;YACpC,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,sBAAsB,CAAC,MAAM;SACtC,CAAC,CAAC;QAEL,uDAAuD;QACvD,+FAA+F;QAC/F,oBAAoB;QACpB,2FAA2F;QAC3F,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC;YAC3B,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;aAChC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE;YACpC,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,sBAAsB,CAAC,MAAM;SACtC,CAAC,CAAC;QAEL,uEAAuE;QACvE,MAAM,mBAAmB,GAAG,GAAG,EAAE;YAC/B,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7C,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,sBAAsB,CAAC,KAAK,EAAE,CAAC;QACjC,CAAC,CAAC;QAEF,IAAI,CAAC;YACH,qEAAqE;YACrE,eAAe,EAAE,EAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,mBAAmB,EAAE;gBAC3E,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,sBAAsB,CAAC,MAAM;aACtC,CAAC,CAAC;YACH,eAAe,EAAE,EAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,mBAAmB,EAAE;gBAC3E,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,sBAAsB,CAAC,MAAM;aACtC,CAAC,CAAC;QACL,CAAC;QAAC,MAAM,CAAC;YACP,8DAA8D;YAC9D,sCAAsC;QACxC,CAAC;QAED,yBAAyB,CAAC,OAAO,GAAG,sBAAsB,CAAC;IAC7D,CAAC,EACD,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,CAAC,CAC/B,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,CAAqB,EAAE,EAAE;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,CAAC,IAAI,CAAC,CAAC;YACf,MAAM,QAAQ,GAAG,CAAC,CAAC,aAAkB,CAAC;YACtC,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YAChC,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC;QAClC,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,aAAa,CAAC,CAC1B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;QAElC,gFAAgF;QAChF,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YACpB,IAAI,EAAE,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBACzC,OAAO,CAAC,IAAI,UAAU,CAAC,SAAS,EAAE,EAAE,aAAa,EAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;YAChF,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAEvC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YACpB,EAAE,EAAE,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACzC,EAAE,EAAE,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;YACjD,EAAE,EAAE,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YACzC,EAAE,EAAE,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBAC5C,EAAE,EAAE,mBAAmB,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;gBACpD,EAAE,EAAE,mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;gBAC5C,EAAE,EAAE,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;YACtD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3B,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useState, useEffect, useCallback, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { getAllPopovers, getParentWindow, isInstance, normalizeTargets } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst getElements = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[]\n) =>\n normalizeTargets(els)\n .flatMap(el => [el, ...getAllPopovers(el)])\n .filter((el): el is HTMLElement => isInstance(el, HTMLElement));\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n els: (T | null | RefObject<T | null>)[],\n onFocusChange?: (isFocused: boolean, element: T | Element | null) => void\n): boolean => {\n const [hasFocus, setFocus] = useState(false);\n const focusedElRef = useRef<T | Element | null>(null);\n const { portalTarget } = useConfiguration();\n\n const handlerAbortControllerRef = useRef<AbortController>();\n useEffect(() => {\n return () => {\n handlerAbortControllerRef.current?.abort();\n };\n }, []);\n\n const onBlur = useCallback(\n (e: FocusEvent | Event) => {\n if (!hasFocus) return;\n\n const relatedTarget = isInstance(e, FocusEvent) ? e.relatedTarget : null;\n\n // Gather observed elements along with their popovers to probe for element which gains focus.\n const elements = normalizeTargets(els).flatMap(el => [el, ...getAllPopovers(el)]);\n\n if (isInstance(relatedTarget, Node)) {\n // changing focus to another relevant child doesn't count\n const focusedEl = elements.find(el => el?.contains(relatedTarget));\n if (focusedEl) {\n // ... just update the currently focused item\n focusedElRef.current = focusedEl;\n return;\n }\n }\n\n // Code below is similar to the useOuterEvent hook, but single-shot only and need to be attached\n // after blur event only. Due to various order of events between browsers and OSes, we need to\n // postpone calling 'onBlur' callback until next element gets focus or on outer click to check\n // if the relevant element contains the target element, which means the focus is retained.\n const handlerAbortController = new AbortController();\n const handler = (fe: Event | FocusEvent | MouseEvent) => {\n if (\n !elements.some(el => {\n return fe.composedPath().some(target => {\n return isInstance(target, Node) && el.contains(target);\n });\n })\n ) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n handlerAbortController.abort();\n };\n\n // For keyboard and SR navigation - wait for 'focusin'.\n // attach to root node of the first element is enough, since all should share the same root\n (elements[0] ?? portalTarget)\n ?.getRootNode({ composed: false })\n .addEventListener('focusin', handler, {\n once: true,\n signal: handlerAbortController.signal\n });\n\n // For mouse and touch navigation - wait for 'mouseup'.\n // The chosen event need to occur before 'click' to allow the given callback code finish before\n // 'click' handlers.\n // attach to root node of the first element is enough, since all should share the same root\n (elements[0] ?? portalTarget)\n ?.getRootNode({ composed: true })\n .addEventListener('mouseup', handler, {\n once: true,\n signal: handlerAbortController.signal\n });\n\n // For parent window we do not need to verify element placement in DOM.\n const parentWindowHandler = () => {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n handlerAbortController.abort();\n };\n\n try {\n // When in iframe, we need to listen to parent window events as well.\n getParentWindow()?.document.addEventListener('focusin', parentWindowHandler, {\n once: true,\n signal: handlerAbortController.signal\n });\n getParentWindow()?.document.addEventListener('mouseup', parentWindowHandler, {\n once: true,\n signal: handlerAbortController.signal\n });\n } catch {\n // IFrame parent document is not accessible when cross-origin.\n // Don't attach handlers in that case.\n }\n\n handlerAbortControllerRef.current = handlerAbortController;\n },\n [hasFocus, onFocusChange, els]\n );\n\n const onFocus = useCallback(\n (e: Event | FocusEvent) => {\n if (!hasFocus) {\n setFocus(true);\n const targetEl = e.currentTarget as T;\n onFocusChange?.(true, targetEl);\n focusedElRef.current = targetEl;\n }\n },\n [hasFocus, onFocusChange]\n );\n\n useEffect(() => {\n const elements = getElements(els);\n\n // Programmatically trigger focus callback on initial render to handle autoFocus\n elements.forEach(el => {\n if (el?.contains(document.activeElement)) {\n onFocus(new FocusEvent('focusin', { relatedTarget: document.activeElement }));\n }\n });\n }, []);\n\n useEffect(() => {\n const elements = normalizeTargets(els);\n\n elements.forEach(el => {\n el?.addEventListener('focusin', onFocus);\n el?.addEventListener('popover:focusin', onFocus);\n el?.addEventListener('focusout', onBlur);\n el?.addEventListener('popover:focusout', onBlur);\n });\n return () => {\n elements.forEach(el => {\n el?.removeEventListener('focusin', onFocus);\n el?.removeEventListener('popover:focusin', onFocus);\n el?.removeEventListener('focusout', onBlur);\n el?.removeEventListener('popover:focusout', onBlur);\n });\n };\n }, [els, onFocus, onBlur]);\n\n return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -74,6 +74,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
74
74
|
critical: string;
|
|
75
75
|
similarity_score: string;
|
|
76
76
|
workflow: string;
|
|
77
|
+
panel: string;
|
|
77
78
|
remove: string;
|
|
78
79
|
follow: string;
|
|
79
80
|
unfollow: string;
|
|
@@ -157,6 +158,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
157
158
|
create_noun: string;
|
|
158
159
|
choose_noun: string;
|
|
159
160
|
select_noun: string;
|
|
161
|
+
resize_noun: string;
|
|
160
162
|
actions_for: string;
|
|
161
163
|
edited: string;
|
|
162
164
|
deleted: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -70,6 +70,7 @@ declare const _default: {
|
|
|
70
70
|
critical: string;
|
|
71
71
|
similarity_score: string;
|
|
72
72
|
workflow: string;
|
|
73
|
+
panel: string;
|
|
73
74
|
remove: string;
|
|
74
75
|
follow: string;
|
|
75
76
|
unfollow: string;
|
|
@@ -153,6 +154,7 @@ declare const _default: {
|
|
|
153
154
|
create_noun: string;
|
|
154
155
|
choose_noun: string;
|
|
155
156
|
select_noun: string;
|
|
157
|
+
resize_noun: string;
|
|
156
158
|
actions_for: string;
|
|
157
159
|
edited: string;
|
|
158
160
|
deleted: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmnDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwNxB,6CAA6C;;;;;;;;;;IAY7C,6CAA6C;;;;;;;;IAS7C,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmGzC,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,wCAAwC;;IAGxC,oCAAoC;;;;;IAMpC,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;IAQ7C,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5gEzC,wBAmkEE"}
|
package/lib/i18n/default.js
CHANGED
|
@@ -74,6 +74,7 @@ export default {
|
|
|
74
74
|
critical: 'Critical',
|
|
75
75
|
similarity_score: 'Similarity score',
|
|
76
76
|
workflow: 'Workflow',
|
|
77
|
+
panel: 'Panel',
|
|
77
78
|
/* Verbs */
|
|
78
79
|
remove: 'Remove',
|
|
79
80
|
follow: 'Follow',
|
|
@@ -160,6 +161,7 @@ export default {
|
|
|
160
161
|
create_noun: 'Create {0}',
|
|
161
162
|
choose_noun: 'Choose {0}',
|
|
162
163
|
select_noun: 'Select {0}',
|
|
164
|
+
resize_noun: 'Resize {0}',
|
|
163
165
|
/* Contextual actions label */
|
|
164
166
|
actions_for: 'Actions - {0}',
|
|
165
167
|
/* States */
|