@stack-spot/portal-components 2.8.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/SelectionList.d.ts +5 -1
- package/dist/components/SelectionList.d.ts.map +1 -1
- package/dist/components/SelectionList.js +13 -6
- package/dist/components/SelectionList.js.map +1 -1
- package/dist/utils/accessibility.d.ts +4 -2
- package/dist/utils/accessibility.d.ts.map +1 -1
- package/dist/utils/accessibility.js +12 -20
- package/dist/utils/accessibility.js.map +1 -1
- package/package.json +1 -1
- package/src/components/SelectionList.tsx +18 -6
- package/src/utils/accessibility.ts +15 -21
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.9.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.8.1...portal-components@v2.9.0) (2024-10-30)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* 1877 create button ([#471](https://github.com/stack-spot/portal-commons/issues/471)) ([a3b07d1](https://github.com/stack-spot/portal-commons/commit/a3b07d13a0c37afc8003b86e4c0e9d3e2e2c14ac))
|
|
9
|
+
|
|
10
|
+
## [2.8.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.8.0...portal-components@v2.8.1) (2024-10-28)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* fixes utility function focusFirstChild(element) ([#463](https://github.com/stack-spot/portal-commons/issues/463)) ([b221eb0](https://github.com/stack-spot/portal-commons/commit/b221eb063f59786e2f32c4324d211975fc72d894))
|
|
16
|
+
|
|
3
17
|
## [2.8.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.7.0...portal-components@v2.8.0) (2024-10-25)
|
|
4
18
|
|
|
5
19
|
|
|
@@ -128,6 +128,10 @@ export interface SelectionListProps extends WithStyle {
|
|
|
128
128
|
* Whether or not this list should be scrollable.
|
|
129
129
|
*/
|
|
130
130
|
scroll?: boolean;
|
|
131
|
+
/**
|
|
132
|
+
* Show list as card
|
|
133
|
+
*/
|
|
134
|
+
showListAsCard?: boolean;
|
|
131
135
|
}
|
|
132
136
|
/**
|
|
133
137
|
* Renders a component that allows the selection of one item. The list is show/hidden according to the prop `visible`.
|
|
@@ -138,6 +142,6 @@ export interface SelectionListProps extends WithStyle {
|
|
|
138
142
|
* This component implements keyboard controls and accessibility features.
|
|
139
143
|
* @param props the component's props {@link SelectionListProps}.
|
|
140
144
|
*/
|
|
141
|
-
export declare const SelectionList: ({ id, items, className, style, visible, maxHeight, onHide, before, after, scroll, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
|
|
145
|
+
export declare const SelectionList: ({ id, items, className, style, visible, maxHeight, onHide, before, after, scroll, showListAsCard, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
|
|
142
146
|
export {};
|
|
143
147
|
//# sourceMappingURL=SelectionList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;IACrE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;IACrE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkID;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,wGAEvB,kBAAkB,4CA0FpB,CAAA"}
|
|
@@ -23,10 +23,9 @@ const SelectionBox = styled.div `
|
|
|
23
23
|
.selection-list-content {
|
|
24
24
|
display: flex;
|
|
25
25
|
flex-direction: column;
|
|
26
|
-
background: ${theme.color.light['500']};
|
|
27
26
|
border-radius: 0.5rem;
|
|
28
|
-
border: 1px solid ${theme.color.light['600']};
|
|
29
27
|
background-color: ${theme.color.light['300']};
|
|
28
|
+
padding-inline: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
.section-title, li > a {
|
|
@@ -51,8 +50,16 @@ const SelectionBox = styled.div `
|
|
|
51
50
|
}
|
|
52
51
|
}
|
|
53
52
|
|
|
53
|
+
li.action {
|
|
54
|
+
background-color: ${({ $showListAsCard }) => $showListAsCard ? theme.color.light['400'] : ''};
|
|
55
|
+
border: ${({ $showListAsCard }) => '1px solid' + $showListAsCard ? theme.color.light['500'] : 'transparent'};
|
|
56
|
+
border-radius: ${({ $showListAsCard }) => $showListAsCard ? '4px' : '0'};
|
|
57
|
+
margin-bottom: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
|
|
58
|
+
}
|
|
59
|
+
|
|
54
60
|
li.section {
|
|
55
|
-
border-bottom: 2px solid
|
|
61
|
+
border-bottom: 2px solid;
|
|
62
|
+
border-bottom-color: ${({ $showListAsCard }) => $showListAsCard ? 'transparent' : theme.color.light['600']};
|
|
56
63
|
&:last-child {
|
|
57
64
|
border-bottom: none;
|
|
58
65
|
}
|
|
@@ -81,7 +88,7 @@ function renderCollapsible({ label, icon, iconRight, className = '', children },
|
|
|
81
88
|
return (_jsx("li", { className: "collapsible", children: _jsxs(Link, { onClick: handleClick, tabIndex: 0, className: className, "aria-expanded": false, "aria-controls": controllerId, children: [icon && _jsx(IconBox, { children: icon }), _jsx(Text, { appearance: "body2", className: "label", children: label }), iconRight && _jsx(IconBox, { children: iconRight }), _jsx(IconBox, { children: _jsx(ChevronRight, {}) })] }) }, label));
|
|
82
89
|
}
|
|
83
90
|
function renderSection({ label, className = '', children }, options) {
|
|
84
|
-
return (_jsxs("li", { className: `${className} section`, children: [label && _jsx(Text, { appearance: "overheader2", colorScheme: "
|
|
91
|
+
return (_jsxs("li", { className: `${className} section`, children: [label && _jsx(Text, { appearance: "overheader2", colorScheme: "light.700", className: "section-title", children: label }), _jsx("ul", { children: children.map(i => renderItem(i, options)) })] }, label ?? children.map(c => c.label).join('-')));
|
|
85
92
|
}
|
|
86
93
|
function renderItem(item, options) {
|
|
87
94
|
if ('children' in item) {
|
|
@@ -98,7 +105,7 @@ function renderItem(item, options) {
|
|
|
98
105
|
* This component implements keyboard controls and accessibility features.
|
|
99
106
|
* @param props the component's props {@link SelectionListProps}.
|
|
100
107
|
*/
|
|
101
|
-
export const SelectionList = ({ id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, }) => {
|
|
108
|
+
export const SelectionList = ({ id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, showListAsCard, }) => {
|
|
102
109
|
const Link = useAnchorTag();
|
|
103
110
|
const t = useTranslate(dictionary);
|
|
104
111
|
const [current, setCurrent] = useState({ items });
|
|
@@ -134,7 +141,7 @@ export const SelectionList = ({ id, items, className, style, visible = true, max
|
|
|
134
141
|
}
|
|
135
142
|
return () => removeListeners();
|
|
136
143
|
}, [visible]);
|
|
137
|
-
return (_jsx(SelectionBox, { id: id, ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), "$scroll": scroll, "aria-hidden": !visible, children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
|
|
144
|
+
return (_jsx(SelectionBox, { id: id, ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), "$scroll": scroll, "aria-hidden": !visible, "$showListAsCard": showListAsCard, children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
|
|
138
145
|
? (_jsxs(Flex, { mt: 5, mb: 1, alignItems: "center", children: [_jsx(IconButton, { onClick: (ev) => {
|
|
139
146
|
// accessibility: this will tell the screen reader the section was collapsed before this button is removed from the DOM.
|
|
140
147
|
ev.target?.setAttribute?.('aria-expanded', 'false');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAmB,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AA6GvD,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,qBAAqB,GAAG,sBAAsB,qBAAqB,GAAG,IAAI,GAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,11 +9,13 @@
|
|
|
9
9
|
* @param current the reference element to focus the next. If not provided, will be the currently active element.
|
|
10
10
|
*/
|
|
11
11
|
export declare function focusNextIgnoringChildren(current?: HTMLElement | null): void;
|
|
12
|
-
type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other';
|
|
13
|
-
type TagPriorityElement = TagPriority | TagPriority[];
|
|
12
|
+
export type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other';
|
|
13
|
+
export type TagPriorityElement = TagPriority | TagPriority[];
|
|
14
14
|
interface FocusOptions {
|
|
15
15
|
/**
|
|
16
16
|
* Instead of focusing the first element overall, focus the first according to this list of priorities.
|
|
17
|
+
*
|
|
18
|
+
* 'other' means elements that are normally not focusable, but have positive tabIndex values.
|
|
17
19
|
*/
|
|
18
20
|
priority?: TagPriorityElement[];
|
|
19
21
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAWrE;AAED,
|
|
1
|
+
{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAWrE;AAED,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AACpF,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAAE,CAAA;AAE5D,UAAU,YAAY;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,EAAE,EAAE,QAAa,EAAE,MAAM,EAAE,GAAE,YAAiB,QAkB/H;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,WAYnD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,QAO9D"}
|
|
@@ -51,32 +51,24 @@ const selectors = {
|
|
|
51
51
|
* @param options optional.
|
|
52
52
|
*/
|
|
53
53
|
export function focusFirstChild(element, { priority = [], ignore } = {}) {
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
const allFocusableTags = ['a', 'button', 'input', 'other', 'select', 'textarea'];
|
|
55
|
+
const focusableList = [
|
|
56
|
+
element?.querySelectorAll(allFocusableTags.map(t => selectors[t]).join(', ')),
|
|
57
|
+
];
|
|
56
58
|
for (const p of priority) {
|
|
57
59
|
const tags = Array.isArray(p) ? p : [p];
|
|
58
|
-
const querySelectors = tags.map(t =>
|
|
59
|
-
|
|
60
|
-
return selectors[t];
|
|
61
|
-
});
|
|
62
|
-
focusable = element?.querySelectorAll(querySelectors.join(', '));
|
|
63
|
-
if (focusable)
|
|
64
|
-
break;
|
|
60
|
+
const querySelectors = tags.map(t => selectors[t]);
|
|
61
|
+
focusableList.unshift(element?.querySelectorAll(querySelectors.join(', ')));
|
|
65
62
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
const styles = window.getComputedStyle(f);
|
|
73
|
-
if (styles.display != 'none' && styles.visibility != 'hidden') {
|
|
74
|
-
elementToFocus = f;
|
|
75
|
-
break;
|
|
63
|
+
for (const focusable of focusableList ?? []) {
|
|
64
|
+
for (const f of focusable ?? []) {
|
|
65
|
+
if (!ignore || !f.matches(ignore)) {
|
|
66
|
+
const styles = window.getComputedStyle(f);
|
|
67
|
+
if (styles.display != 'none' && styles.visibility != 'hidden')
|
|
68
|
+
return f.focus();
|
|
76
69
|
}
|
|
77
70
|
}
|
|
78
71
|
}
|
|
79
|
-
elementToFocus?.focus?.();
|
|
80
72
|
}
|
|
81
73
|
/**
|
|
82
74
|
* Checks if an element can receive focus.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accessibility.js","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,UAAU,yBAAyB,CAAC,OAA4B;IACpE,OAAO,GAAG,OAAO,IAAI,QAAQ,CAAC,aAA4B,CAAA;IAC1D,OAAO,OAAO,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC;QAC9C,OAAO,GAAG,OAAO,EAAE,aAAa,CAAA;IAClC,CAAC;IACD,OAAO,GAAG,OAAO,EAAE,kBAAiC,CAAA;IACpD,OAAO,OAAO,IAAI,OAAO,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;QACvC,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAgB,CAAA;IACtG,CAAC;IACD,IAAI,OAAO;QAAE,OAAO,EAAE,KAAK,EAAE,EAAE,CAAA;;QAC1B,eAAe,CAAC,QAAQ,CAAC,CAAA;AAChC,CAAC;
|
|
1
|
+
{"version":3,"file":"accessibility.js","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,UAAU,yBAAyB,CAAC,OAA4B;IACpE,OAAO,GAAG,OAAO,IAAI,QAAQ,CAAC,aAA4B,CAAA;IAC1D,OAAO,OAAO,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC;QAC9C,OAAO,GAAG,OAAO,EAAE,aAAa,CAAA;IAClC,CAAC;IACD,OAAO,GAAG,OAAO,EAAE,kBAAiC,CAAA;IACpD,OAAO,OAAO,IAAI,OAAO,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;QACvC,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAgB,CAAA;IACtG,CAAC;IACD,IAAI,OAAO;QAAE,OAAO,EAAE,KAAK,EAAE,EAAE,CAAA;;QAC1B,eAAe,CAAC,QAAQ,CAAC,CAAA;AAChC,CAAC;AAkBD,MAAM,SAAS,GAAgC;IAC7C,CAAC,EAAE,wBAAwB;IAC3B,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,2CAA2C;IAClD,MAAM,EAAE,yBAAyB;IACjC,QAAQ,EAAE,uBAAuB;IACjC,KAAK,EAAE,iCAAiC;CACzC,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,eAAe,CAAC,OAAkD,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,MAAM,KAAmB,EAAE;IAC9H,MAAM,gBAAgB,GAAkB,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAA;IAC/F,MAAM,aAAa,GAA4C;QAC7D,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9E,CAAA;IACD,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;QAClD,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IAC7E,CAAC;IACD,KAAK,MAAM,SAAS,IAAI,aAAa,IAAI,EAAE,EAAE,CAAC;QAC5C,KAAK,MAAM,CAAC,IAAI,SAAS,IAAI,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;gBAClC,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;gBACzC,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,IAAI,MAAM,CAAC,UAAU,IAAI,QAAQ;oBAAE,OAAO,CAAC,CAAC,KAAK,EAAE,CAAA;YACjF,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,WAAW,CAAC,OAAwB;IAClD,IAAI,CAAC,OAAO;QAAE,OAAO,KAAK,CAAA;IAC1B,4BAA4B;IAC5B,IAAI,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI;QAAE,OAAO,KAAK,CAAA;IACnF,6BAA6B;IAC7B,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QAAE,OAAO,KAAK,CAAA;IAC5F,0DAA0D;IAC1D,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;IACpD,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAChE,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,QAAQ,IAAI,CAAC,CAAA;IAChD,qBAAqB;IACrB,OAAO,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAA;AAC/G,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAwB;IAC7D,IAAI,cAAc,GAAG,OAAyC,CAAA;IAC9D,OAAO,cAAc,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,CAAC;QACtD,MAAM,YAAY,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,kBAAkB,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACnH,cAAc,GAAG,CAAC,YAAY,IAAI,cAAc,CAAC,aAAa,CAAmC,CAAA;IACnG,CAAC;IACD,cAAc,EAAE,KAAK,EAAE,EAAE,CAAA;AAC3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -153,6 +153,10 @@ export interface SelectionListProps extends WithStyle {
|
|
|
153
153
|
* Whether or not this list should be scrollable.
|
|
154
154
|
*/
|
|
155
155
|
scroll?: boolean,
|
|
156
|
+
/**
|
|
157
|
+
* Show list as card
|
|
158
|
+
*/
|
|
159
|
+
showListAsCard?: boolean,
|
|
156
160
|
}
|
|
157
161
|
|
|
158
162
|
interface RenderOptions {
|
|
@@ -162,7 +166,7 @@ interface RenderOptions {
|
|
|
162
166
|
Link: AnchorComponent,
|
|
163
167
|
}
|
|
164
168
|
|
|
165
|
-
const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
169
|
+
const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean, $showListAsCard?: boolean }>`
|
|
166
170
|
max-height: 0;
|
|
167
171
|
overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
|
|
168
172
|
overflow-x: hidden;
|
|
@@ -175,10 +179,9 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
|
175
179
|
.selection-list-content {
|
|
176
180
|
display: flex;
|
|
177
181
|
flex-direction: column;
|
|
178
|
-
background: ${theme.color.light['500']};
|
|
179
182
|
border-radius: 0.5rem;
|
|
180
|
-
border: 1px solid ${theme.color.light['600']};
|
|
181
183
|
background-color: ${theme.color.light['300']};
|
|
184
|
+
padding-inline: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
|
|
182
185
|
}
|
|
183
186
|
|
|
184
187
|
.section-title, li > a {
|
|
@@ -203,8 +206,16 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
|
203
206
|
}
|
|
204
207
|
}
|
|
205
208
|
|
|
209
|
+
li.action {
|
|
210
|
+
background-color: ${({ $showListAsCard }) => $showListAsCard ? theme.color.light['400'] : ''};
|
|
211
|
+
border: ${({ $showListAsCard }) => '1px solid' + $showListAsCard ? theme.color.light['500'] : 'transparent'};
|
|
212
|
+
border-radius: ${({ $showListAsCard }) => $showListAsCard ? '4px' : '0'};
|
|
213
|
+
margin-bottom: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
|
|
214
|
+
}
|
|
215
|
+
|
|
206
216
|
li.section {
|
|
207
|
-
border-bottom: 2px solid
|
|
217
|
+
border-bottom: 2px solid;
|
|
218
|
+
border-bottom-color: ${({ $showListAsCard }) => $showListAsCard ? 'transparent' : theme.color.light['600']};
|
|
208
219
|
&:last-child {
|
|
209
220
|
border-bottom: none;
|
|
210
221
|
}
|
|
@@ -263,7 +274,7 @@ function renderCollapsible({ label, icon, iconRight, className = '', children }:
|
|
|
263
274
|
function renderSection({ label, className = '', children }: ListSection, options: RenderOptions) {
|
|
264
275
|
return (
|
|
265
276
|
<li key={label ?? children.map(c => c.label).join('-')} className={`${className} section`}>
|
|
266
|
-
{label && <Text appearance="overheader2" colorScheme="
|
|
277
|
+
{label && <Text appearance="overheader2" colorScheme="light.700" className="section-title">{label}</Text>}
|
|
267
278
|
<ul>{children.map(i => renderItem(i, options))}</ul>
|
|
268
279
|
</li>
|
|
269
280
|
)
|
|
@@ -286,7 +297,7 @@ function renderItem(item: ListItem, options: RenderOptions) {
|
|
|
286
297
|
* @param props the component's props {@link SelectionListProps}.
|
|
287
298
|
*/
|
|
288
299
|
export const SelectionList = ({
|
|
289
|
-
id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
|
|
300
|
+
id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, showListAsCard,
|
|
290
301
|
}: SelectionListProps) => {
|
|
291
302
|
const Link = useAnchorTag()
|
|
292
303
|
const t = useTranslate(dictionary)
|
|
@@ -341,6 +352,7 @@ export const SelectionList = ({
|
|
|
341
352
|
className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
|
|
342
353
|
$scroll={scroll}
|
|
343
354
|
aria-hidden={!visible}
|
|
355
|
+
$showListAsCard={showListAsCard}
|
|
344
356
|
>
|
|
345
357
|
<div className="selection-list-content">
|
|
346
358
|
{before}
|
|
@@ -21,12 +21,14 @@ export function focusNextIgnoringChildren(current?: HTMLElement | null) {
|
|
|
21
21
|
else focusFirstChild(document)
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other'
|
|
25
|
-
type TagPriorityElement = TagPriority | TagPriority[]
|
|
24
|
+
export type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other'
|
|
25
|
+
export type TagPriorityElement = TagPriority | TagPriority[]
|
|
26
26
|
|
|
27
27
|
interface FocusOptions {
|
|
28
28
|
/**
|
|
29
29
|
* Instead of focusing the first element overall, focus the first according to this list of priorities.
|
|
30
|
+
*
|
|
31
|
+
* 'other' means elements that are normally not focusable, but have positive tabIndex values.
|
|
30
32
|
*/
|
|
31
33
|
priority?: TagPriorityElement[],
|
|
32
34
|
/**
|
|
@@ -65,31 +67,23 @@ const selectors: Record<TagPriority, string> = {
|
|
|
65
67
|
* @param options optional.
|
|
66
68
|
*/
|
|
67
69
|
export function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority = [], ignore }: FocusOptions = {}) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
+
const allFocusableTags: TagPriority[] = ['a', 'button', 'input', 'other', 'select', 'textarea']
|
|
71
|
+
const focusableList: (NodeListOf<HTMLElement> | undefined)[] = [
|
|
72
|
+
element?.querySelectorAll(allFocusableTags.map(t => selectors[t]).join(', ')),
|
|
73
|
+
]
|
|
70
74
|
for (const p of priority) {
|
|
71
75
|
const tags = Array.isArray(p) ? p : [p]
|
|
72
|
-
const querySelectors = tags.map(t =>
|
|
73
|
-
|
|
74
|
-
return selectors[t]
|
|
75
|
-
})
|
|
76
|
-
focusable = element?.querySelectorAll(querySelectors.join(', '))
|
|
77
|
-
if (focusable) break
|
|
76
|
+
const querySelectors = tags.map(t => selectors[t])
|
|
77
|
+
focusableList.unshift(element?.querySelectorAll(querySelectors.join(', ')))
|
|
78
78
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
if (!ignore || !f.matches(ignore)) {
|
|
85
|
-
const styles = window.getComputedStyle(f)
|
|
86
|
-
if (styles.display != 'none' && styles.visibility != 'hidden') {
|
|
87
|
-
elementToFocus = f
|
|
88
|
-
break
|
|
79
|
+
for (const focusable of focusableList ?? []) {
|
|
80
|
+
for (const f of focusable ?? []) {
|
|
81
|
+
if (!ignore || !f.matches(ignore)) {
|
|
82
|
+
const styles = window.getComputedStyle(f)
|
|
83
|
+
if (styles.display != 'none' && styles.visibility != 'hidden') return f.focus()
|
|
89
84
|
}
|
|
90
85
|
}
|
|
91
86
|
}
|
|
92
|
-
elementToFocus?.focus?.()
|
|
93
87
|
}
|
|
94
88
|
|
|
95
89
|
/**
|