@pega/cosmos-react-core 3.0.0-dev.4.1 → 3.0.0-dev.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Badges/Selection.d.ts.map +1 -1
- package/lib/components/Badges/Selection.js +3 -2
- package/lib/components/Badges/Selection.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +10 -3
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +8 -6
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
- package/lib/components/Drawer/Drawer.d.ts.map +1 -1
- package/lib/components/Drawer/Drawer.js +1 -1
- package/lib/components/Drawer/Drawer.js.map +1 -1
- package/lib/components/Icon/icons/open.icon.js +1 -1
- package/lib/components/Icon/icons/open.icon.js.map +1 -1
- package/lib/components/Menu/Menu.d.ts.map +1 -1
- package/lib/components/Menu/Menu.js +10 -39
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/hooks/index.d.ts +1 -1
- package/lib/hooks/index.d.ts.map +1 -1
- package/lib/hooks/index.js +1 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useActiveDescendant.d.ts +9 -0
- package/lib/hooks/useActiveDescendant.d.ts.map +1 -1
- package/lib/hooks/useActiveDescendant.js +29 -0
- package/lib/hooks/useActiveDescendant.js.map +1 -1
- package/lib/hooks/useArrows.d.ts +2 -1
- package/lib/hooks/useArrows.d.ts.map +1 -1
- package/lib/hooks/useArrows.js +3 -2
- package/lib/hooks/useArrows.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +24 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/hooks/useItemIntersection.d.ts.map +1 -1
- package/lib/hooks/useItemIntersection.js +18 -20
- package/lib/hooks/useItemIntersection.js.map +1 -1
- package/lib/i18n/default.d.ts +24 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +25 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +48 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/theme/themes/buildTheme.json +1 -2
- package/package.json +1 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIlD,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,yGAsD3B,CAAC;AAEH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIlD,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,yGAsD3B,CAAC;AAEH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA6ClD,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { tryCatch } from '../../utils/utils';
|
|
|
6
6
|
import BareButton, { StyledBareButton } from '../Button/BareButton';
|
|
7
7
|
import Icon, { registerIcon, StyledIcon } from '../Icon';
|
|
8
8
|
import * as timesIcon from '../Icon/icons/times.icon';
|
|
9
|
-
import { useConsolidatedRef } from '../../hooks';
|
|
9
|
+
import { useConsolidatedRef, useI18n } from '../../hooks';
|
|
10
10
|
registerIcon(timesIcon);
|
|
11
11
|
export const StyledSelectable = styled.div(props => {
|
|
12
12
|
const { foreground, background } = props.theme.components.badges.selectable.base;
|
|
@@ -63,6 +63,7 @@ export const StyledSelectable = styled.div(props => {
|
|
|
63
63
|
});
|
|
64
64
|
const Selectable = forwardRef((props, ref) => {
|
|
65
65
|
const consolidatedRef = useConsolidatedRef(ref);
|
|
66
|
+
const t = useI18n();
|
|
66
67
|
const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;
|
|
67
68
|
const handleClick = (e) => {
|
|
68
69
|
onClick?.(e);
|
|
@@ -82,7 +83,7 @@ const Selectable = forwardRef((props, ref) => {
|
|
|
82
83
|
onRemove?.(id);
|
|
83
84
|
}
|
|
84
85
|
};
|
|
85
|
-
return (_jsxs(BareButton, { role: 'button', tabIndex: '0', as: StyledSelectable, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [children, _jsx(BareButton, { tabIndex: '-1', onClick: handleCloseClick, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0));
|
|
86
|
+
return (_jsxs(BareButton, { role: 'button', tabIndex: '0', as: StyledSelectable, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [children, _jsx(BareButton, { tabIndex: '-1', onClick: handleCloseClick, "aria-label": `${t('remove')}`, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0));
|
|
86
87
|
});
|
|
87
88
|
export default Selectable;
|
|
88
89
|
//# sourceMappingURL=Selection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,UAAU,EAAuC,MAAM,OAAO,CAAC;AACxF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport { FormControlProps } from '../FormControl';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps {\n /** An id that is used by the onSelect and onRemove functions if they are provided. */\n id: string;\n /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n onSelect?: (id: string) => void;\n /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n onRemove?: (id: string) => void;\n /** The content of the Badge. */\n children: string;\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Event handler called when the Badge is clicked. */\n onClick?: (event: MouseEvent) => void;\n /** Event handler fired on every keyup event. */\n onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.div(props => {\n const { foreground, background } = props.theme.components.badges.selectable.base;\n const { dark } = props.theme.base.palette;\n const borderRadius = props.theme.base['border-radius'];\n const { spacing } = props.theme.base;\n\n const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n const height = 1.125;\n return css`\n background: ${displayBackground};\n border: 0 solid transparent;\n border-radius: calc(${height} * ${borderRadius});\n color: ${foreground};\n cursor: default;\n display: inline-flex;\n align-items: center;\n font-size: 0.75rem;\n height: ${height}rem;\n padding: 0 ${spacing};\n min-width: max-content;\n line-height: 1;\n\n &:hover {\n color: ${props.theme.base.palette.interactive};\n box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n ${StyledBareButton} {\n color: ${props.theme.base.palette.interactive};\n }\n }\n\n &:active {\n box-shadow: inset 0 0 0 0.0625rem ${background};\n }\n\n &:focus {\n color: ${props.theme.base.palette.interactive};\n box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n outline: none;\n\n ${StyledBareButton} {\n color: ${props.theme.base.palette.interactive};\n }\n }\n\n ${StyledIcon} {\n margin-inline-start: ${spacing};\n height: 1em;\n width: 1em;\n }\n `;\n});\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SelectableProps>, ref: Ref<HTMLButtonElement>) => {\n const consolidatedRef = useConsolidatedRef(ref);\n const t = useI18n();\n const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;\n\n const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n onClick?.(e);\n onSelect?.(id);\n };\n\n const handleCloseClick = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onRemove?.(id);\n };\n\n const handleKeyUp = (e: KeyboardEvent) => {\n onKeyUp?.(e);\n if (e.key === 'Enter') {\n onSelect?.(id);\n }\n\n if (e.key === 'Backspace' || e.key === 'Delete') {\n onRemove?.(id);\n }\n };\n\n return (\n <BareButton\n role='button'\n tabIndex='0'\n as={StyledSelectable}\n ref={consolidatedRef}\n onClick={handleClick}\n onKeyUp={handleKeyUp}\n {...restProps}\n >\n {children}\n <BareButton tabIndex='-1' onClick={handleCloseClick} aria-label={`${t('remove')}`}>\n <Icon name='times' />\n </BareButton>\n </BareButton>\n );\n }\n);\n\nexport default Selectable;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAa3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAO7C,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAa3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAO7C,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAgN7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -46,6 +46,13 @@ const ComboBox = forwardRef((props, ref) => {
|
|
|
46
46
|
if (!menu || readOnly)
|
|
47
47
|
return;
|
|
48
48
|
switch (e.key) {
|
|
49
|
+
case 'ArrowUp':
|
|
50
|
+
if (e.altKey) {
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
if (open)
|
|
53
|
+
setOpen(false);
|
|
54
|
+
}
|
|
55
|
+
break;
|
|
49
56
|
case 'ArrowDown':
|
|
50
57
|
e.preventDefault();
|
|
51
58
|
if (!open)
|
|
@@ -65,7 +72,7 @@ const ComboBox = forwardRef((props, ref) => {
|
|
|
65
72
|
setOpen(!open);
|
|
66
73
|
}, [open, onDropdownButtonClickProp]);
|
|
67
74
|
const dropdownButton = useMemo(() => {
|
|
68
|
-
return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (_jsx(Button, { "aria-
|
|
75
|
+
return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (_jsx(Button, { "aria-label": t(open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'), icon: true, variant: 'simple', onClick: onDropdownButtonClick, onMouseDown: (e) => {
|
|
69
76
|
e.preventDefault();
|
|
70
77
|
inputRef.current?.focus();
|
|
71
78
|
}, disabled: disabled, tabIndex: '-1', children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }, void 0) }, void 0)) : null;
|
|
@@ -84,7 +91,7 @@ const ComboBox = forwardRef((props, ref) => {
|
|
|
84
91
|
// Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.
|
|
85
92
|
// The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.
|
|
86
93
|
const inputActions = (_jsxs(_Fragment, { children: [dropdownButton, actions] }, void 0));
|
|
87
|
-
const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, children: [_jsx(ComboBoxInput, { ref: inputRef, role: 'combobox', "aria-haspopup": 'listbox', "aria-expanded": !readOnly && !disabled && open, "aria-autocomplete": 'list', "aria-describedby": `${id}-inputDescription`, selected: selected?.items, spellCheck: false, ...{
|
|
94
|
+
const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, children: [_jsx(ComboBoxInput, { ref: inputRef, role: 'combobox', "aria-haspopup": 'listbox', "aria-expanded": !readOnly && !disabled && open, "aria-autocomplete": 'list', "aria-describedby": info ? `${id}-inputDescription ${id}-info` : `${id}-inputDescription`, selected: selected?.items, spellCheck: false, ...{
|
|
88
95
|
id,
|
|
89
96
|
readOnly,
|
|
90
97
|
disabled,
|
|
@@ -92,7 +99,7 @@ const ComboBox = forwardRef((props, ref) => {
|
|
|
92
99
|
value,
|
|
93
100
|
mode,
|
|
94
101
|
status
|
|
95
|
-
}, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, ...restProps }, void 0), _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : '' }, void 0), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [
|
|
102
|
+
}, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, ...restProps }, void 0), _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : '' }, void 0), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [
|
|
96
103
|
{
|
|
97
104
|
name: 'flip',
|
|
98
105
|
options: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n KeyboardEvent as ReactKeyboardEvent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu, { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n const uid = useUID();\n const {\n value,\n required,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n readOnly,\n disabled,\n mode = 'single-select',\n selected,\n onChange,\n actions,\n onFocus,\n onBlur,\n onDropdownButtonClick: onDropdownButtonClickProp,\n onClick,\n menu,\n ...restProps\n } = props;\n\n const t = useI18n();\n const inputRef = useRef<HTMLInputElement>(null);\n const [open, setOpen] = useState(false);\n const menuRef: MenuProps['ref'] = useRef(null);\n const menuComponentId = `${id}-listbox`;\n\n // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n const [, setContainerEl] = useElement();\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n const focus = useFocusWithin([containerRef], focused => {\n if (!focused) {\n setOpen(false);\n onBlur?.(selected?.items);\n } else {\n onFocus?.(selected?.items);\n if (isMobile) {\n setTimeout(() => {\n containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 150); // delay it to let keyboard expand first\n }\n }\n });\n\n const onInputKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n if (!menu || readOnly) return;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!open) setOpen(true);\n break;\n case 'Escape':\n e.preventDefault();\n if (open) e.stopPropagation();\n setOpen(false);\n break;\n default:\n }\n },\n [open, readOnly, menu, value]\n );\n\n const onDropdownButtonClick = useCallback(() => {\n onDropdownButtonClickProp?.(!open);\n setOpen(!open);\n }, [open, onDropdownButtonClickProp]);\n\n const dropdownButton = useMemo(() => {\n return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n <Button\n aria-hidden='true'\n aria-label={t(\n open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n )}\n icon\n variant='simple'\n onClick={onDropdownButtonClick}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n disabled={disabled}\n tabIndex='-1'\n >\n <Icon name={open ? 'caret-up' : 'caret-down'} />\n </Button>\n ) : null;\n }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n const onInputClick = useCallback(\n (e: MouseEvent) => {\n if (readOnly) return;\n setOpen(true);\n onClick?.(e);\n },\n [readOnly, onClick]\n );\n\n useEffect(() => {\n if (focus && menu && value && value.length > 0) {\n setOpen(true);\n }\n }, [menu, value, focus]);\n\n // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n const inputActions = (\n <>\n {dropdownButton}\n {actions}\n </>\n );\n\n const Comp = (\n <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n <ComboBoxInput\n ref={inputRef}\n role='combobox'\n aria-haspopup='listbox'\n aria-expanded={!readOnly && !disabled && open}\n aria-autocomplete='list'\n aria-describedby={`${id}-inputDescription`}\n selected={selected?.items}\n spellCheck={false}\n {...{\n id,\n readOnly,\n disabled,\n onChange,\n value,\n mode,\n status\n }}\n actions={inputActions}\n onRemove={selected?.onRemove}\n onClick={onInputClick}\n onKeyDown={onInputKeyDown}\n {...restProps}\n />\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : ''}\n </VisuallyHiddenText>\n\n <Popover\n show={open && menu !== undefined}\n target={containerRef.current}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n sameWidth\n ]}\n strategy={isMobile ? 'absolute' : 'fixed'}\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n {menu && (\n <Menu\n ref={menuRef}\n id={menuComponentId}\n role='listbox'\n mode={mode}\n {...menu}\n items={menu.items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={(itemId, e) => {\n if (mode === 'single-select') {\n setOpen(false);\n }\n menu.onItemClick?.(itemId, e);\n\n const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n if (clickedItem?.primary && !clickedItem?.selected) {\n selected?.onNew?.(clickedItem?.primary);\n }\n }}\n arrowNavigationUnsupported\n />\n )}\n </Popover>\n </StyledComboBox>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default ComboBox;\n"]}
|
|
1
|
+
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n KeyboardEvent as ReactKeyboardEvent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu, { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n const uid = useUID();\n const {\n value,\n required,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n readOnly,\n disabled,\n mode = 'single-select',\n selected,\n onChange,\n actions,\n onFocus,\n onBlur,\n onDropdownButtonClick: onDropdownButtonClickProp,\n onClick,\n menu,\n ...restProps\n } = props;\n\n const t = useI18n();\n const inputRef = useRef<HTMLInputElement>(null);\n const [open, setOpen] = useState(false);\n const menuRef: MenuProps['ref'] = useRef(null);\n const menuComponentId = `${id}-listbox`;\n\n // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n const [, setContainerEl] = useElement();\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n const focus = useFocusWithin([containerRef], focused => {\n if (!focused) {\n setOpen(false);\n onBlur?.(selected?.items);\n } else {\n onFocus?.(selected?.items);\n if (isMobile) {\n setTimeout(() => {\n containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 150); // delay it to let keyboard expand first\n }\n }\n });\n\n const onInputKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n if (!menu || readOnly) return;\n switch (e.key) {\n case 'ArrowUp':\n if (e.altKey) {\n e.preventDefault();\n if (open) setOpen(false);\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!open) setOpen(true);\n break;\n case 'Escape':\n e.preventDefault();\n if (open) e.stopPropagation();\n setOpen(false);\n break;\n default:\n }\n },\n [open, readOnly, menu, value]\n );\n\n const onDropdownButtonClick = useCallback(() => {\n onDropdownButtonClickProp?.(!open);\n setOpen(!open);\n }, [open, onDropdownButtonClickProp]);\n\n const dropdownButton = useMemo(() => {\n return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n <Button\n aria-label={t(\n open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n )}\n icon\n variant='simple'\n onClick={onDropdownButtonClick}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n disabled={disabled}\n tabIndex='-1'\n >\n <Icon name={open ? 'caret-up' : 'caret-down'} />\n </Button>\n ) : null;\n }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n const onInputClick = useCallback(\n (e: MouseEvent) => {\n if (readOnly) return;\n setOpen(true);\n onClick?.(e);\n },\n [readOnly, onClick]\n );\n\n useEffect(() => {\n if (focus && menu && value && value.length > 0) {\n setOpen(true);\n }\n }, [menu, value, focus]);\n\n // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n const inputActions = (\n <>\n {dropdownButton}\n {actions}\n </>\n );\n\n const Comp = (\n <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n <ComboBoxInput\n ref={inputRef}\n role='combobox'\n aria-haspopup='listbox'\n aria-expanded={!readOnly && !disabled && open}\n aria-autocomplete='list'\n aria-describedby={info ? `${id}-inputDescription ${id}-info` : `${id}-inputDescription`}\n selected={selected?.items}\n spellCheck={false}\n {...{\n id,\n readOnly,\n disabled,\n onChange,\n value,\n mode,\n status\n }}\n actions={inputActions}\n onRemove={selected?.onRemove}\n onClick={onInputClick}\n onKeyDown={onInputKeyDown}\n required={required}\n {...restProps}\n />\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : ''}\n </VisuallyHiddenText>\n\n <Popover\n show={open && menu !== undefined}\n target={containerRef.current}\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-start']\n }\n },\n sameWidth\n ]}\n strategy={isMobile ? 'absolute' : 'fixed'}\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n >\n {menu && (\n <Menu\n ref={menuRef}\n id={menuComponentId}\n role='listbox'\n mode={mode}\n {...menu}\n items={menu.items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={(itemId, e) => {\n if (mode === 'single-select') {\n setOpen(false);\n }\n menu.onItemClick?.(itemId, e);\n\n const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n if (clickedItem?.primary && !clickedItem?.selected) {\n selected?.onNew?.(clickedItem?.primary);\n }\n }}\n arrowNavigationUnsupported\n />\n )}\n </Popover>\n </StyledComboBox>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default ComboBox;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAwG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -24,7 +24,12 @@ const MultiSelectInput = forwardRef((props, ref) => {
|
|
|
24
24
|
const { selected = [], value, onRemove, onChange, onKeyDown, actions, readOnly, disabled, status, placeholder, autoFocus, ...restProps } = props;
|
|
25
25
|
const inputRef = useConsolidatedRef(ref);
|
|
26
26
|
const listRef = useRef(null);
|
|
27
|
-
useArrows(listRef, {
|
|
27
|
+
useArrows(listRef, {
|
|
28
|
+
selector: 'div[role="button"], input',
|
|
29
|
+
cycle: false,
|
|
30
|
+
dir: 'left-right',
|
|
31
|
+
allowTabFocus: false
|
|
32
|
+
});
|
|
28
33
|
const onInputKeyDown = useCallback((e) => {
|
|
29
34
|
const lastIndex = selected.length - 1;
|
|
30
35
|
if (e.key === 'Backspace' && !value && selected.length > 0) {
|
|
@@ -38,9 +43,6 @@ const MultiSelectInput = forwardRef((props, ref) => {
|
|
|
38
43
|
disabled,
|
|
39
44
|
status
|
|
40
45
|
}, children: [_jsxs(Flex, { ref: listRef, as: 'ul', item: { grow: 1 }, container: { alignItems: 'center', wrap: 'wrap' }, onBlur: () => {
|
|
41
|
-
listRef.current?.querySelectorAll('div[role="button"]').forEach(el => {
|
|
42
|
-
el.tabIndex = -1;
|
|
43
|
-
});
|
|
44
46
|
if (inputRef.current)
|
|
45
47
|
inputRef.current.tabIndex = 0;
|
|
46
48
|
}, children: [selected.map((element, idx) => {
|
|
@@ -53,8 +55,8 @@ const MultiSelectInput = forwardRef((props, ref) => {
|
|
|
53
55
|
e.preventDefault();
|
|
54
56
|
if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)
|
|
55
57
|
inputRef.current?.focus();
|
|
56
|
-
}, children: element.text }, void 0) }, element.id));
|
|
57
|
-
}), _jsx(Flex, { as: 'li', item: { grow: 1 }, container: true, children: _jsx("input", { size: 5, ref: inputRef, value: value,
|
|
58
|
+
}, tabIndex: '-1', children: element.text }, void 0) }, element.id));
|
|
59
|
+
}), _jsx(Flex, { as: 'li', role: 'presentation', item: { grow: 1 }, container: true, children: _jsx("input", { size: 5, ref: inputRef, value: value,
|
|
58
60
|
// no-op avoids react uncontrolled warning
|
|
59
61
|
onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off',
|
|
60
62
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,MAAM,EACN,WAAW,EACZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAIvD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,OAAO,GAAG,CAAA;;;;;MAKN,gBAAgB;4BACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CAAC,KAA6C,EAAE,GAA0B,EAAE,EAAE;IAC5E,MAAM,EACJ,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,kBAAkB,CAAmB,GAAG,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,SAAS,CAAC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';\nimport { cap } from '../../../utils';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n return css`\n ul {\n list-style: none;\n }\n\n ${StyledSelectable} {\n margin: calc(0.25 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n useArrows(listRef, {\n selector: 'div[role=\"button\"], input',\n cycle: false,\n dir: 'left-right',\n allowTabFocus: false\n });\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n const lastIndex = selected.length - 1;\n if (e.key === 'Backspace' && !value && selected.length > 0) {\n onRemove?.(selected[lastIndex].id, lastIndex);\n }\n onKeyDown?.(e);\n },\n [onKeyDown, value, selected]\n );\n\n const { end } = useDirection();\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n ref={listRef}\n as='ul'\n item={{ grow: 1 }}\n container={{ alignItems: 'center', wrap: 'wrap' }}\n onBlur={() => {\n if (inputRef.current) inputRef.current.tabIndex = 0;\n }}\n >\n {selected.map((element, idx) => {\n return (\n <li key={element.id}>\n <Selectable\n id={element.id.toString()}\n disabled={readOnly || disabled}\n status={status}\n onRemove={id => {\n onRemove?.(id, idx);\n inputRef.current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)\n inputRef.current?.focus();\n }}\n tabIndex='-1'\n >\n {element.text}\n </Selectable>\n </li>\n );\n })}\n <Flex as='li' role='presentation' item={{ grow: 1 }} container>\n <input\n size={5}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange || (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly || !onChange}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n {...restProps}\n />\n </Flex>\n </Flex>\n {actions}\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAEjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,aAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;UAkCzE,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAEjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,aAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;UAkCzE,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAyEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -70,7 +70,7 @@ const Drawer = forwardRef((props, ref) => {
|
|
|
70
70
|
return;
|
|
71
71
|
setState(open ? 'open' : 'closed');
|
|
72
72
|
}, [open]);
|
|
73
|
-
return state === 'closed' && !open && nullWhenClosed ? null : (_jsx(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size,
|
|
73
|
+
return state === 'closed' && !open && nullWhenClosed ? null : (_jsx(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, state: state, onTransitionEnd: onTransitionEnd, ...restProps, children: children }, void 0));
|
|
74
74
|
});
|
|
75
75
|
export default Drawer;
|
|
76
76
|
//# sourceMappingURL=Drawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useEffect,\n Ref,\n useCallback,\n FunctionComponent,\n forwardRef,\n ReactNode,\n TransitionEvent,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';\nimport { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface DrawerProps extends AsProp, BaseProps {\n /**\n * If true, the Drawer will be visible.\n * @default false\n */\n open: boolean;\n /** Content of the Drawer. */\n children?: ReactNode;\n /**\n * Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n * @default false\n */\n shadow?: boolean;\n /**\n * Used to determine which side of the viewport the Drawer should open from.\n * @default \"right\"\n */\n placement?: 'top' | 'right' | 'bottom' | 'left';\n /**\n * The position of the Drawer.\n * @default \"absolute\"\n */\n position?: 'absolute' | 'fixed';\n /**\n * Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n */\n transitionSpeed?: string;\n /**\n * The width or height that the Drawer will open to, depending on its placement.\n * @default \"100%\"\n */\n size?: string;\n /** Callback fired after Drawer opens. */\n onAfterOpen?: () => void;\n /** Callback fired after Drawer closes. */\n onAfterClose?: () => void;\n /** Callback fired before Drawer opens. */\n onBeforeOpen?: () => void;\n /** Callback fired before Drawer closes. */\n onBeforeClose?: () => void;\n /** Callback fired when a click action occurs outside of the Drawer. */\n onOuterClick?: () => void;\n /**\n * If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenClosed?: boolean;\n}\n\ntype State = 'open' | 'closed' | 'opening' | 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n const { state, shadow, position, placement, transitionSpeed, size, theme } = props;\n let dimension = 'horizontal';\n let axis = 'X';\n let anchor = 'top';\n\n if (placement === 'top' || placement === 'bottom') {\n dimension = 'vertical';\n axis = 'Y';\n anchor = 'left';\n }\n\n const translate = state === 'open' || state === 'opening' ? 0 : '100%';\n const speed = transitionSpeed || theme.base.animation.speed;\n\n return css`\n z-index: ${theme.base['z-index'].drawer};\n position: ${position};\n ${placement}: 0;\n ${anchor}: 0;\n height: ${dimension === 'vertical' ? size : '100%'};\n width: ${dimension === 'horizontal' ? size : '100%'};\n transition-property: transform, box-shadow, opacity;\n transition-duration: max(${speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n transform: ${state === 'open'\n ? 'none'\n : `translate${axis}(${placement === 'top' || placement === 'left' ? '-' : ''}${translate})`};\n\n ${shadow &&\n css`\n box-shadow: ${theme.base.shadow.high};\n `}\n `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nconst Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(\n (props: DrawerProps, ref: Ref<HTMLElement>) => {\n const {\n open = false,\n shadow = false,\n position = 'absolute',\n children,\n placement = 'right',\n transitionSpeed,\n size = '100%',\n onAfterOpen,\n onAfterClose,\n onBeforeOpen,\n onBeforeClose,\n onOuterClick,\n nullWhenClosed = false,\n ...restProps\n } = props;\n\n const drawerRef = useConsolidatedRef(ref);\n\n const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n let prevState = usePrevious(state);\n if (!prevState) prevState = state;\n\n useOuterEvent(\n 'mousedown',\n [drawerRef.current],\n useCallback(() => {\n if (open) onOuterClick?.();\n }, [open, onOuterClick])\n );\n\n useEffect(() => {\n if (open && (state === 'closed' || state === 'closing')) {\n onBeforeOpen?.();\n reflow(drawerRef.current);\n setState('opening');\n } else if (!open && (state === 'open' || state === 'opening')) {\n onBeforeClose?.();\n setState('closing');\n } else if (open && state === 'open' && prevState !== 'open') {\n onAfterOpen?.();\n } else if (!open && state === 'closed' && prevState !== 'closed') {\n onAfterClose?.();\n }\n }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent): void => {\n if (e.target !== drawerRef.current || e.propertyName !== 'transform') return;\n setState(open ? 'open' : 'closed');\n },\n [open]\n );\n\n return state === 'closed' && !open && nullWhenClosed ? null : (\n <StyledDrawer\n ref={drawerRef}\n position={position}\n shadow={shadow && open}\n transitionSpeed={transitionSpeed}\n placement={placement}\n size={size}\n state={state}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n >\n {children}\n </StyledDrawer>\n );\n }\n);\n\nexport default Drawer;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const name = 'open';
|
|
4
|
-
export const Component = () => (_jsx("path", { d: '
|
|
4
|
+
export const Component = () => (_jsx("path", { d: 'm20.9992187 12h-.9578125c0-4.21614583 0-6.32421875 0-6.32421875s-2.975 2.975-8.925 8.92499995l-.7179687-.7179687c5.95-5.95 8.925-8.925 8.925-8.925s-2.1078125 0-6.3234375 0v-.9578125h8zm-1.9992187 2h-1v5.5c0 .3351562-.1648438.5-.5.5h-12.01484375c-.33515625 0-.5265625-.1648438-.5265625-.5v-12.015625c0-.33515625.19140625-.5265625.5265625-.5265625h5.51484375v-.9578125h-5.51484375c-.43125 0-.76640625.14375-1.05390625.43125s-.43125.62265625-.43125 1.05390625v12.01484375c0 .43125.14375.7125.43125 1s.62265625.5 1.05390625.5h12.01484375c.43125 0 .7125-.2125 1-.5s.5-.56875.5-1c0 0 0-1.8333333 0-5.5z' }, void 0));
|
|
5
5
|
export const viewBox = '0 0 25 25';
|
|
6
6
|
//# sourceMappingURL=open.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"open.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/open.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,
|
|
1
|
+
{"version":3,"file":"open.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/open.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,slBAAslB,WAAG,CAClmB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'open';\n\nexport const Component = () => (\n <path d='m20.9992187 12h-.9578125c0-4.21614583 0-6.32421875 0-6.32421875s-2.975 2.975-8.925 8.92499995l-.7179687-.7179687c5.95-5.95 8.925-8.925 8.925-8.925s-2.1078125 0-6.3234375 0v-.9578125h8zm-1.9992187 2h-1v5.5c0 .3351562-.1648438.5-.5.5h-12.01484375c-.33515625 0-.5265625-.1648438-.5265625-.5v-12.015625c0-.33515625.19140625-.5265625.5265625-.5265625h5.51484375v-.9578125h-5.51484375c-.43125 0-.76640625.14375-1.05390625.43125s-.43125.62265625-.43125 1.05390625v12.01484375c0 .43125.14375.7125.43125 1s.62265625.5 1.05390625.5h12.01484375c.43125 0 .7125-.2125 1-.5s.5-.56875.5-1c0 0 0-1.8333333 0-5.5z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA4SrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback, useEffect, useState, useRef, useMemo } from 'react';
|
|
3
|
-
import { useConsolidatedRef, useUID, useActiveDescendant, useI18n, usePrevious, useDirection } from '../../hooks';
|
|
3
|
+
import { useConsolidatedRef, useUID, useActiveDescendant, useLazyDescendant, useI18n, usePrevious, useDirection } from '../../hooks';
|
|
4
4
|
import { cap } from '../../utils';
|
|
5
5
|
import VisuallyHiddenText from '../VisuallyHiddenText';
|
|
6
6
|
import FlyoutMenuList from './FlyoutMenuList';
|
|
@@ -72,6 +72,15 @@ const Menu = forwardRef((props, ref) => {
|
|
|
72
72
|
activeDescendantUpdateId
|
|
73
73
|
]);
|
|
74
74
|
const previousActiveDescendant = usePrevious(activeDescendant);
|
|
75
|
+
useLazyDescendant({
|
|
76
|
+
loading,
|
|
77
|
+
descendants,
|
|
78
|
+
previousActiveDescendant,
|
|
79
|
+
activeDescendant,
|
|
80
|
+
focusReturnEl,
|
|
81
|
+
setFocusReturnEl,
|
|
82
|
+
scrollEl: uadConfig.scope?.querySelector(uadConfig.scopeSelector)?.querySelector('ul')
|
|
83
|
+
});
|
|
75
84
|
// ## Bind Menu-specific navigation keyDown.
|
|
76
85
|
useEffect(() => {
|
|
77
86
|
const expandOrCollapse = (action = null) => {
|
|
@@ -152,44 +161,6 @@ const Menu = forwardRef((props, ref) => {
|
|
|
152
161
|
updateActiveDescendants();
|
|
153
162
|
}, 0);
|
|
154
163
|
}, [items]);
|
|
155
|
-
// ## Bump scroll & set return element when descendant focused in loading state.
|
|
156
|
-
useEffect(() => {
|
|
157
|
-
const activeDescendantChanged = previousActiveDescendant?.id !== activeDescendant?.id;
|
|
158
|
-
if (!activeDescendantChanged)
|
|
159
|
-
return;
|
|
160
|
-
if (loading && descendants && descendants.length && activeDescendant) {
|
|
161
|
-
const descendantList = [...descendants];
|
|
162
|
-
const lastItem = descendantList.pop();
|
|
163
|
-
const lastId = lastItem?.id || undefined;
|
|
164
|
-
if (lastId === activeDescendant.id) {
|
|
165
|
-
const scrollRegion = uadConfig.scope
|
|
166
|
-
?.querySelector(uadConfig.scopeSelector)
|
|
167
|
-
?.querySelector('ul');
|
|
168
|
-
if (scrollRegion) {
|
|
169
|
-
scrollRegion.scrollTop = scrollRegion.scrollHeight - scrollRegion.offsetHeight;
|
|
170
|
-
}
|
|
171
|
-
if (focusReturnEl?.id !== activeDescendant.id) {
|
|
172
|
-
// Set focus return on 'nextTick' and avoid looping calls with immediate siblings.
|
|
173
|
-
setTimeout(() => {
|
|
174
|
-
setFocusReturnEl(lastItem);
|
|
175
|
-
}, 0);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
else if (focusReturnEl?.id !== activeDescendant.id) {
|
|
179
|
-
// Set focus return on 'nextTick' and avoid looping calls with immediate siblings.
|
|
180
|
-
setTimeout(() => {
|
|
181
|
-
setFocusReturnEl(activeDescendant);
|
|
182
|
-
}, 0);
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}, [
|
|
186
|
-
loading,
|
|
187
|
-
descendants,
|
|
188
|
-
previousActiveDescendant,
|
|
189
|
-
activeDescendant,
|
|
190
|
-
uadConfig,
|
|
191
|
-
focusReturnEl
|
|
192
|
-
]);
|
|
193
164
|
const contextValue = useMemo(() => {
|
|
194
165
|
return {
|
|
195
166
|
componentId: id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState,\n useRef,\n useMemo\n} from 'react';\n\nimport {\n useConsolidatedRef,\n useUID,\n useActiveDescendant,\n useI18n,\n usePrevious,\n useDirection\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { StyledMenu, StyledMenuListWrapper } from './Menu.styles';\nimport { MenuContextProps, MenuProps } from './Menu.types';\nimport MenuList from './MenuList';\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MenuProps>, ref: MenuProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n items = [],\n mode = 'action',\n accent,\n scrollAt = 7,\n emptyText,\n onItemClick,\n onItemActive,\n onItemExpand,\n loadMore,\n onItemCollapse,\n loading = false,\n currentItemId,\n header,\n footer,\n variant = 'drill-down',\n focusControlEl,\n focusElOnClose = true,\n arrowNavigationUnsupported,\n 'aria-describedby': ariaDescribedBy,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const { end: endDirection, start: startDirection } = useDirection();\n const radioName = useUID();\n const menuRef = useConsolidatedRef(ref);\n const previousItemCount = useRef(0);\n const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState([id]);\n const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n const [preventInitialScroll, setPreventInitialScroll] = useState(false);\n const activeFlyoutSelector = useMemo(\n () =>\n `fieldset[data-flyout-menu-id=\"${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}\"]`,\n [flyOutActiveIdStack]\n );\n const focusControl = useMemo(() => {\n return focusControlEl || menuRef.current;\n }, [focusControlEl, menuRef.current]);\n\n const pushFlyoutId = useCallback(\n (flyoutId: string) => {\n setFlyoutActiveIdStack([...flyOutActiveIdStack, flyoutId]);\n },\n [flyOutActiveIdStack]\n );\n\n const getScopedItemId = useCallback(\n (itemId: string) => {\n return `${id}-item-${itemId}`;\n },\n [id]\n );\n\n const getUnscopedItemId = useCallback(\n (itemId: string) => {\n return itemId.split(`${id}-item-`)[1];\n },\n [id]\n );\n\n const updateActiveDescendants: MenuContextProps['updateActiveDescendants'] = useCallback(\n ({ preventScroll = false } = {}) => {\n setPreventInitialScroll(preventScroll);\n setActiveDescendantUpdateId(Math.random());\n },\n []\n );\n\n const uadConfig = useMemo(\n () => ({\n focusEl: focusControl,\n scope: menuRef.current,\n scopeSelector:\n variant === 'drill-down'\n ? ('fieldset[aria-hidden=\"false\"]' as keyof HTMLElementTagNameMap)\n : activeFlyoutSelector,\n selector: '[role=\"menuitem\"], legend button' as keyof HTMLElementTagNameMap,\n focusDescendantEl: focusDescendant,\n clearFocusDescendant: () => {\n setFocusDescendant(null);\n if (focusElOnClose) focusControl?.focus();\n },\n focusReturnEl,\n clearFocusReturn: () => {\n setFocusReturnEl(null);\n },\n currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,\n preventInitialScroll,\n clearPreventScroll: () => {\n setPreventInitialScroll(false);\n }\n }),\n [\n focusControl,\n menuRef.current,\n activeFlyoutSelector,\n focusReturnEl,\n focusDescendant,\n currentItemId,\n preventInitialScroll\n ]\n );\n\n const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n activeDescendantUpdateId\n ]);\n\n const previousActiveDescendant = usePrevious(activeDescendant);\n\n // ## Bind Menu-specific navigation keyDown.\n useEffect(() => {\n const expandOrCollapse: (action?: 'collapse' | 'expand' | null) => void = (action = null) => {\n if (activeDescendant) {\n // expand\n if (activeDescendant.dataset.expand === 'true' && action !== 'collapse') {\n (activeDescendant!.querySelector('button') as HTMLElement)?.click();\n\n return;\n }\n\n // collapse\n if (activeDescendant.dataset.collapse === 'true' && action !== 'expand') {\n activeDescendant.click();\n }\n }\n };\n\n const additionalKeydown = (e: KeyboardEvent) => {\n switch (e.key) {\n case `Arrow${cap(endDirection)}`: {\n if (arrowNavigationUnsupported) break;\n expandOrCollapse('expand');\n break;\n }\n case `Arrow${cap(startDirection)}`: {\n if (arrowNavigationUnsupported) break;\n expandOrCollapse('collapse');\n break;\n }\n case 'Escape': {\n if (variant === 'flyout' && flyOutActiveIdStack.length > 1) {\n e.preventDefault();\n e.stopPropagation();\n\n const newStack = [...flyOutActiveIdStack];\n newStack.pop();\n setFlyoutActiveIdStack(newStack);\n }\n break;\n }\n default:\n break;\n }\n\n if (arrowNavigationUnsupported && (e.key === ' ' || e.key === 'Spacebar') && e.shiftKey) {\n e.preventDefault();\n expandOrCollapse();\n }\n };\n\n if (activeDescendant) onItemActive?.(getUnscopedItemId(activeDescendant.id));\n\n focusControl?.addEventListener('keydown', additionalKeydown);\n\n return () => focusControl?.removeEventListener('keydown', additionalKeydown);\n }, [focusControl, activeDescendant]);\n\n // ## Update useActiveDescendant on change of items, not selection of items.\n useEffect(() => {\n // Next tick for DOM updates.\n setTimeout(() => {\n if (items.length === previousItemCount.current) {\n const previousDescendantIds = descendants?.map(node => node.id);\n const newDescendants = uadConfig.scope\n ?.querySelector(uadConfig.scopeSelector)\n ?.querySelectorAll(uadConfig.selector);\n\n if (!newDescendants) {\n updateActiveDescendants();\n return;\n }\n\n const scopedDescendants = Array.from(newDescendants);\n\n if (scopedDescendants?.length !== previousDescendantIds?.length) {\n updateActiveDescendants();\n return;\n }\n\n const itemsUnchanged = scopedDescendants.every(\n (node, index) => node.id === previousDescendantIds[index]\n );\n\n if (!itemsUnchanged) {\n updateActiveDescendants();\n }\n\n return;\n }\n\n previousItemCount.current = items.length;\n updateActiveDescendants();\n }, 0);\n }, [items]);\n\n // ## Bump scroll & set return element when descendant focused in loading state.\n useEffect(() => {\n const activeDescendantChanged = previousActiveDescendant?.id !== activeDescendant?.id;\n if (!activeDescendantChanged) return;\n\n if (loading && descendants && descendants.length && activeDescendant) {\n const descendantList = [...descendants];\n const lastItem = descendantList.pop();\n const lastId = lastItem?.id || undefined;\n\n if (lastId === activeDescendant.id) {\n const scrollRegion = uadConfig.scope\n ?.querySelector(uadConfig.scopeSelector)\n ?.querySelector('ul');\n\n if (scrollRegion) {\n scrollRegion.scrollTop = scrollRegion.scrollHeight - scrollRegion.offsetHeight;\n }\n\n if (focusReturnEl?.id !== activeDescendant.id) {\n // Set focus return on 'nextTick' and avoid looping calls with immediate siblings.\n setTimeout(() => {\n setFocusReturnEl(lastItem);\n }, 0);\n }\n } else if (focusReturnEl?.id !== activeDescendant.id) {\n // Set focus return on 'nextTick' and avoid looping calls with immediate siblings.\n setTimeout(() => {\n setFocusReturnEl(activeDescendant);\n }, 0);\n }\n }\n }, [\n loading,\n descendants,\n previousActiveDescendant,\n activeDescendant,\n uadConfig,\n focusReturnEl\n ]);\n\n const contextValue = useMemo(() => {\n return {\n componentId: id,\n mode,\n arrowNavigationUnsupported,\n onItemClick,\n onItemActive,\n onItemExpand,\n onItemCollapse,\n accent,\n scrollAt,\n emptyText,\n radioName,\n loadMore,\n loading,\n variant,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n setFocusDescendant,\n getScopedItemId,\n pushFlyoutId,\n flyOutActiveIdStack\n };\n }, [\n id,\n mode,\n arrowNavigationUnsupported,\n onItemClick,\n onItemActive,\n onItemExpand,\n onItemCollapse,\n accent,\n scrollAt,\n emptyText,\n radioName,\n loadMore,\n loading,\n variant,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n setFocusDescendant,\n getScopedItemId,\n pushFlyoutId,\n flyOutActiveIdStack\n ]);\n\n return (\n <StyledMenu\n id={id}\n role='menu'\n aria-describedby={!focusControlEl ? `${id}-menuDescription` : undefined}\n {...restProps}\n ref={menuRef}\n >\n {!focusControlEl && (\n <VisuallyHiddenText id={`${id}-menuDescription`}>\n {(`${t('menu_selection_instructions')} ` && ariaDescribedBy) || ''}\n </VisuallyHiddenText>\n )}\n\n {header && <header>{header}</header>}\n\n <StyledMenuListWrapper>\n <MenuContext.Provider value={contextValue}>\n {variant === 'drill-down' ? (\n <MenuList items={items} />\n ) : (\n <FlyoutMenuList items={items} />\n )}\n </MenuContext.Provider>\n </StyledMenuListWrapper>\n {footer && <footer>{footer}</footer>}\n </StyledMenu>\n );\n }\n);\n\nexport default Menu;\n"]}
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,WAAW,EACX,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,QAAQ,GAAG,CAAC,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,OAAO,GAAG,KAAK,EACf,aAAa,EACb,MAAM,EACN,MAAM,EACN,OAAO,GAAG,YAAY,EACtB,cAAc,EACd,cAAc,GAAG,IAAI,EACrB,0BAA0B,EAC1B,kBAAkB,EAAE,eAAe,EACnC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IACpE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IACjF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACzE,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,oBAAoB,GAAG,OAAO,CAClC,GAAG,EAAE,CACH,iCAAiC,mBAAmB,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAC1F,CAAC,mBAAmB,CAAC,CACtB,CAAC;IACF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC;IAC3C,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEtC,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAgB,EAAE,EAAE;QACnB,sBAAsB,CAAC,CAAC,GAAG,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7D,CAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAc,EAAE,EAAE;QACjB,OAAO,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,CAAC,EACD,CAAC,EAAE,CAAC,CACL,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,MAAc,EAAE,EAAE;QACjB,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,EAAE,CAAC,CACL,CAAC;IAEF,MAAM,uBAAuB,GAAgD,WAAW,CACtF,CAAC,EAAE,aAAa,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;QACjC,uBAAuB,CAAC,aAAa,CAAC,CAAC;QACvC,2BAA2B,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,OAAO,CAAC,OAAO;QACtB,aAAa,EACX,OAAO,KAAK,YAAY;YACtB,CAAC,CAAE,+BAA+D;YAClE,CAAC,CAAC,oBAAoB;QAC1B,QAAQ,EAAE,kCAAiE;QAC3E,iBAAiB,EAAE,eAAe;QAClC,oBAAoB,EAAE,GAAG,EAAE;YACzB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,cAAc;gBAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QAC5C,CAAC;QACD,aAAa;QACb,gBAAgB,EAAE,GAAG,EAAE;YACrB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;QACD,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;QAC/E,oBAAoB;QACpB,kBAAkB,EAAE,GAAG,EAAE;YACvB,uBAAuB,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;KACF,CAAC,EACF;QACE,YAAY;QACZ,OAAO,CAAC,OAAO;QACf,oBAAoB;QACpB,aAAa;QACb,eAAe;QACf,aAAa;QACb,oBAAoB;KACrB,CACF,CAAC;IAEF,MAAM,EAAE,gBAAgB,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,SAAS,EAAE;QACvE,wBAAwB;KACzB,CAAC,CAAC;IAEH,MAAM,wBAAwB,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAE/D,iBAAiB,CAAC;QAChB,OAAO;QACP,WAAW;QACX,wBAAwB;QACxB,gBAAgB;QAChB,aAAa;QACb,gBAAgB;QAChB,QAAQ,EAAE,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC;KACvF,CAAC,CAAC;IAEH,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAoD,CAAC,MAAM,GAAG,IAAI,EAAE,EAAE;YAC1F,IAAI,gBAAgB,EAAE;gBACpB,SAAS;gBACT,IAAI,gBAAgB,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,UAAU,EAAE;oBACtE,gBAAiB,CAAC,aAAa,CAAC,QAAQ,CAAiB,EAAE,KAAK,EAAE,CAAC;oBAEpE,OAAO;iBACR;gBAED,WAAW;gBACX,IAAI,gBAAgB,CAAC,OAAO,CAAC,QAAQ,KAAK,MAAM,IAAI,MAAM,KAAK,QAAQ,EAAE;oBACvE,gBAAgB,CAAC,KAAK,EAAE,CAAC;iBAC1B;aACF;QACH,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC7C,QAAQ,CAAC,CAAC,GAAG,EAAE;gBACb,KAAK,QAAQ,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;oBAChC,IAAI,0BAA0B;wBAAE,MAAM;oBACtC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;oBAC3B,MAAM;iBACP;gBACD,KAAK,QAAQ,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;oBAClC,IAAI,0BAA0B;wBAAE,MAAM;oBACtC,gBAAgB,CAAC,UAAU,CAAC,CAAC;oBAC7B,MAAM;iBACP;gBACD,KAAK,QAAQ,CAAC,CAAC;oBACb,IAAI,OAAO,KAAK,QAAQ,IAAI,mBAAmB,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBAEpB,MAAM,QAAQ,GAAG,CAAC,GAAG,mBAAmB,CAAC,CAAC;wBAC1C,QAAQ,CAAC,GAAG,EAAE,CAAC;wBACf,sBAAsB,CAAC,QAAQ,CAAC,CAAC;qBAClC;oBACD,MAAM;iBACP;gBACD;oBACE,MAAM;aACT;YAED,IAAI,0BAA0B,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;gBACvF,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,gBAAgB,EAAE,CAAC;aACpB;QACH,CAAC,CAAC;QAEF,IAAI,gBAAgB;YAAE,YAAY,EAAE,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC;QAE7E,YAAY,EAAE,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;QAE7D,OAAO,GAAG,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErC,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,6BAA6B;QAC7B,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,KAAK,CAAC,MAAM,KAAK,iBAAiB,CAAC,OAAO,EAAE;gBAC9C,MAAM,qBAAqB,GAAG,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBAChE,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK;oBACpC,EAAE,aAAa,CAAC,SAAS,CAAC,aAAa,CAAC;oBACxC,EAAE,gBAAgB,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBAEzC,IAAI,CAAC,cAAc,EAAE;oBACnB,uBAAuB,EAAE,CAAC;oBAC1B,OAAO;iBACR;gBAED,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBAErD,IAAI,iBAAiB,EAAE,MAAM,KAAK,qBAAqB,EAAE,MAAM,EAAE;oBAC/D,uBAAuB,EAAE,CAAC;oBAC1B,OAAO;iBACR;gBAED,MAAM,cAAc,GAAG,iBAAiB,CAAC,KAAK,CAC5C,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,qBAAqB,CAAC,KAAK,CAAC,CAC1D,CAAC;gBAEF,IAAI,CAAC,cAAc,EAAE;oBACnB,uBAAuB,EAAE,CAAC;iBAC3B;gBAED,OAAO;aACR;YAED,iBAAiB,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;YACzC,uBAAuB,EAAE,CAAC;QAC5B,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO;YACL,WAAW,EAAE,EAAE;YACf,IAAI;YACJ,0BAA0B;YAC1B,WAAW;YACX,YAAY;YACZ,YAAY;YACZ,cAAc;YACd,MAAM;YACN,QAAQ;YACR,SAAS;YACT,SAAS;YACT,QAAQ;YACR,OAAO;YACP,OAAO;YACP,YAAY;YACZ,uBAAuB;YACvB,gBAAgB;YAChB,kBAAkB;YAClB,eAAe;YACf,YAAY;YACZ,mBAAmB;SACpB,CAAC;IACJ,CAAC,EAAE;QACD,EAAE;QACF,IAAI;QACJ,0BAA0B;QAC1B,WAAW;QACX,YAAY;QACZ,YAAY;QACZ,cAAc;QACd,MAAM;QACN,QAAQ;QACR,SAAS;QACT,SAAS;QACT,QAAQ;QACR,OAAO;QACP,OAAO;QACP,YAAY;QACZ,uBAAuB;QACvB,gBAAgB;QAChB,kBAAkB;QAClB,eAAe;QACf,YAAY;QACZ,mBAAmB;KACpB,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,sBACO,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC,CAAC,SAAS,KACnE,SAAS,EACb,GAAG,EAAE,OAAO,aAEX,CAAC,cAAc,IAAI,CAClB,KAAC,kBAAkB,IAAC,EAAE,EAAE,GAAG,EAAE,kBAAkB,YAC5C,CAAC,GAAG,CAAC,CAAC,6BAA6B,CAAC,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,WAC/C,CACtB,EAEA,MAAM,IAAI,2BAAS,MAAM,WAAU,EAEpC,KAAC,qBAAqB,cACpB,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACtC,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,CAC1B,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,WAAI,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,WAAI,CACjC,WACoB,WACD,EACvB,MAAM,IAAI,2BAAS,MAAM,WAAU,YACzB,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState,\n useRef,\n useMemo\n} from 'react';\n\nimport {\n useConsolidatedRef,\n useUID,\n useActiveDescendant,\n useLazyDescendant,\n useI18n,\n usePrevious,\n useDirection\n} from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport FlyoutMenuList from './FlyoutMenuList';\nimport MenuContext from './Menu.context';\nimport { StyledMenu, StyledMenuListWrapper } from './Menu.styles';\nimport { MenuContextProps, MenuProps } from './Menu.types';\nimport MenuList from './MenuList';\n\nconst Menu: FunctionComponent<MenuProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MenuProps>, ref: MenuProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n items = [],\n mode = 'action',\n accent,\n scrollAt = 7,\n emptyText,\n onItemClick,\n onItemActive,\n onItemExpand,\n loadMore,\n onItemCollapse,\n loading = false,\n currentItemId,\n header,\n footer,\n variant = 'drill-down',\n focusControlEl,\n focusElOnClose = true,\n arrowNavigationUnsupported,\n 'aria-describedby': ariaDescribedBy,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const { end: endDirection, start: startDirection } = useDirection();\n const radioName = useUID();\n const menuRef = useConsolidatedRef(ref);\n const previousItemCount = useRef(0);\n const [activeDescendantUpdateId, setActiveDescendantUpdateId] = useState(0);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [flyOutActiveIdStack, setFlyoutActiveIdStack] = useState([id]);\n const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n const [preventInitialScroll, setPreventInitialScroll] = useState(false);\n const activeFlyoutSelector = useMemo(\n () =>\n `fieldset[data-flyout-menu-id=\"${flyOutActiveIdStack[flyOutActiveIdStack.length - 1]}\"]`,\n [flyOutActiveIdStack]\n );\n const focusControl = useMemo(() => {\n return focusControlEl || menuRef.current;\n }, [focusControlEl, menuRef.current]);\n\n const pushFlyoutId = useCallback(\n (flyoutId: string) => {\n setFlyoutActiveIdStack([...flyOutActiveIdStack, flyoutId]);\n },\n [flyOutActiveIdStack]\n );\n\n const getScopedItemId = useCallback(\n (itemId: string) => {\n return `${id}-item-${itemId}`;\n },\n [id]\n );\n\n const getUnscopedItemId = useCallback(\n (itemId: string) => {\n return itemId.split(`${id}-item-`)[1];\n },\n [id]\n );\n\n const updateActiveDescendants: MenuContextProps['updateActiveDescendants'] = useCallback(\n ({ preventScroll = false } = {}) => {\n setPreventInitialScroll(preventScroll);\n setActiveDescendantUpdateId(Math.random());\n },\n []\n );\n\n const uadConfig = useMemo(\n () => ({\n focusEl: focusControl,\n scope: menuRef.current,\n scopeSelector:\n variant === 'drill-down'\n ? ('fieldset[aria-hidden=\"false\"]' as keyof HTMLElementTagNameMap)\n : activeFlyoutSelector,\n selector: '[role=\"menuitem\"], legend button' as keyof HTMLElementTagNameMap,\n focusDescendantEl: focusDescendant,\n clearFocusDescendant: () => {\n setFocusDescendant(null);\n if (focusElOnClose) focusControl?.focus();\n },\n focusReturnEl,\n clearFocusReturn: () => {\n setFocusReturnEl(null);\n },\n currentDescendantId: currentItemId ? getScopedItemId(currentItemId) : undefined,\n preventInitialScroll,\n clearPreventScroll: () => {\n setPreventInitialScroll(false);\n }\n }),\n [\n focusControl,\n menuRef.current,\n activeFlyoutSelector,\n focusReturnEl,\n focusDescendant,\n currentItemId,\n preventInitialScroll\n ]\n );\n\n const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [\n activeDescendantUpdateId\n ]);\n\n const previousActiveDescendant = usePrevious(activeDescendant);\n\n useLazyDescendant({\n loading,\n descendants,\n previousActiveDescendant,\n activeDescendant,\n focusReturnEl,\n setFocusReturnEl,\n scrollEl: uadConfig.scope?.querySelector(uadConfig.scopeSelector)?.querySelector('ul')\n });\n\n // ## Bind Menu-specific navigation keyDown.\n useEffect(() => {\n const expandOrCollapse: (action?: 'collapse' | 'expand' | null) => void = (action = null) => {\n if (activeDescendant) {\n // expand\n if (activeDescendant.dataset.expand === 'true' && action !== 'collapse') {\n (activeDescendant!.querySelector('button') as HTMLElement)?.click();\n\n return;\n }\n\n // collapse\n if (activeDescendant.dataset.collapse === 'true' && action !== 'expand') {\n activeDescendant.click();\n }\n }\n };\n\n const additionalKeydown = (e: KeyboardEvent) => {\n switch (e.key) {\n case `Arrow${cap(endDirection)}`: {\n if (arrowNavigationUnsupported) break;\n expandOrCollapse('expand');\n break;\n }\n case `Arrow${cap(startDirection)}`: {\n if (arrowNavigationUnsupported) break;\n expandOrCollapse('collapse');\n break;\n }\n case 'Escape': {\n if (variant === 'flyout' && flyOutActiveIdStack.length > 1) {\n e.preventDefault();\n e.stopPropagation();\n\n const newStack = [...flyOutActiveIdStack];\n newStack.pop();\n setFlyoutActiveIdStack(newStack);\n }\n break;\n }\n default:\n break;\n }\n\n if (arrowNavigationUnsupported && (e.key === ' ' || e.key === 'Spacebar') && e.shiftKey) {\n e.preventDefault();\n expandOrCollapse();\n }\n };\n\n if (activeDescendant) onItemActive?.(getUnscopedItemId(activeDescendant.id));\n\n focusControl?.addEventListener('keydown', additionalKeydown);\n\n return () => focusControl?.removeEventListener('keydown', additionalKeydown);\n }, [focusControl, activeDescendant]);\n\n // ## Update useActiveDescendant on change of items, not selection of items.\n useEffect(() => {\n // Next tick for DOM updates.\n setTimeout(() => {\n if (items.length === previousItemCount.current) {\n const previousDescendantIds = descendants?.map(node => node.id);\n const newDescendants = uadConfig.scope\n ?.querySelector(uadConfig.scopeSelector)\n ?.querySelectorAll(uadConfig.selector);\n\n if (!newDescendants) {\n updateActiveDescendants();\n return;\n }\n\n const scopedDescendants = Array.from(newDescendants);\n\n if (scopedDescendants?.length !== previousDescendantIds?.length) {\n updateActiveDescendants();\n return;\n }\n\n const itemsUnchanged = scopedDescendants.every(\n (node, index) => node.id === previousDescendantIds[index]\n );\n\n if (!itemsUnchanged) {\n updateActiveDescendants();\n }\n\n return;\n }\n\n previousItemCount.current = items.length;\n updateActiveDescendants();\n }, 0);\n }, [items]);\n\n const contextValue = useMemo(() => {\n return {\n componentId: id,\n mode,\n arrowNavigationUnsupported,\n onItemClick,\n onItemActive,\n onItemExpand,\n onItemCollapse,\n accent,\n scrollAt,\n emptyText,\n radioName,\n loadMore,\n loading,\n variant,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n setFocusDescendant,\n getScopedItemId,\n pushFlyoutId,\n flyOutActiveIdStack\n };\n }, [\n id,\n mode,\n arrowNavigationUnsupported,\n onItemClick,\n onItemActive,\n onItemExpand,\n onItemCollapse,\n accent,\n scrollAt,\n emptyText,\n radioName,\n loadMore,\n loading,\n variant,\n focusControl,\n updateActiveDescendants,\n setFocusReturnEl,\n setFocusDescendant,\n getScopedItemId,\n pushFlyoutId,\n flyOutActiveIdStack\n ]);\n\n return (\n <StyledMenu\n id={id}\n role='menu'\n aria-describedby={!focusControlEl ? `${id}-menuDescription` : undefined}\n {...restProps}\n ref={menuRef}\n >\n {!focusControlEl && (\n <VisuallyHiddenText id={`${id}-menuDescription`}>\n {(`${t('menu_selection_instructions')} ` && ariaDescribedBy) || ''}\n </VisuallyHiddenText>\n )}\n\n {header && <header>{header}</header>}\n\n <StyledMenuListWrapper>\n <MenuContext.Provider value={contextValue}>\n {variant === 'drill-down' ? (\n <MenuList items={items} />\n ) : (\n <FlyoutMenuList items={items} />\n )}\n </MenuContext.Provider>\n </StyledMenuListWrapper>\n {footer && <footer>{footer}</footer>}\n </StyledMenu>\n );\n }\n);\n\nexport default Menu;\n"]}
|
package/lib/hooks/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as useActiveDescendant, UseActiveDescendantConfig } from './useActiveDescendant';
|
|
1
|
+
export { default as useActiveDescendant, UseActiveDescendantConfig, useLazyDescendant } from './useActiveDescendant';
|
|
2
2
|
export { default as useAfterInitialEffect } from './useAfterInitialEffect';
|
|
3
3
|
export { default as useArrows } from './useArrows';
|
|
4
4
|
export { default as useAutoResize } from './useAutoResize';
|
package/lib/hooks/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,yBAAyB,EACzB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
package/lib/hooks/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as useActiveDescendant } from './useActiveDescendant';
|
|
1
|
+
export { default as useActiveDescendant, useLazyDescendant } from './useActiveDescendant';
|
|
2
2
|
export { default as useAfterInitialEffect } from './useAfterInitialEffect';
|
|
3
3
|
export { default as useArrows } from './useArrows';
|
|
4
4
|
export { default as useAutoResize } from './useAutoResize';
|
package/lib/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAE9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export {\n default as useActiveDescendant,\n UseActiveDescendantConfig,\n useLazyDescendant\n} from './useActiveDescendant';\nexport { default as useAfterInitialEffect } from './useAfterInitialEffect';\nexport { default as useArrows } from './useArrows';\nexport { default as useAutoResize } from './useAutoResize';\nexport { default as useBreakpoint } from './useBreakpoint';\nexport { default as useConfiguration } from './useConfiguration';\nexport { default as useConsolidatedRef } from './useConsolidatedRef';\nexport { default as useDirection } from './useDirection';\nexport { default as useDraggable } from './useDraggable';\nexport { default as useElement } from './useElement';\nexport { default as useFocusWithin } from './useFocusWithin';\nexport { default as useI18n } from './useI18n';\nexport { default as useItemIntersection } from './useItemIntersection';\nexport { default as useLongPress } from './useLongPress';\nexport { default as useOuterEvent } from './useOuterEvent';\nexport { default as useOverride } from './useOverride';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useTheme } from './useTheme';\nexport { default as useTransitionState } from './useTransitionState';\nexport { default as useTriggerableEffect } from './useTriggerableEffect';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}
|