@stack-spot/portal-layout 0.0.59 → 0.0.60
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAyElC,eAAO,MAAM,YAAY,+CAAgD,QAAQ,4CAiEhF,CAAA"}
|
|
@@ -15,17 +15,22 @@ const SelectorBox = styled.div `
|
|
|
15
15
|
margin: ${PADDING}px;
|
|
16
16
|
margin-bottom: 28px;
|
|
17
17
|
|
|
18
|
-
>
|
|
18
|
+
> button {
|
|
19
19
|
display: flex;
|
|
20
20
|
gap: 8px;
|
|
21
21
|
align-items: center;
|
|
22
22
|
border-radius: 0.25rem;
|
|
23
|
+
background-color: transparent;
|
|
23
24
|
border: 1px solid ${theme.color.light['500']};
|
|
24
25
|
padding: 8px;
|
|
25
26
|
transition: background-color 0.2s;
|
|
27
|
+
color: ${theme.color.light['contrastText']};
|
|
28
|
+
width: 100%;
|
|
29
|
+
text-align: left;
|
|
26
30
|
|
|
27
31
|
&:hover {
|
|
28
32
|
background-color: ${theme.color.light['500']};
|
|
33
|
+
cursor: pointer;
|
|
29
34
|
}
|
|
30
35
|
|
|
31
36
|
.label {
|
|
@@ -38,7 +43,6 @@ const SelectorBox = styled.div `
|
|
|
38
43
|
|
|
39
44
|
.selection-list {
|
|
40
45
|
position: absolute;
|
|
41
|
-
top: 0;
|
|
42
46
|
left: 0;
|
|
43
47
|
right: 0;
|
|
44
48
|
box-shadow: none;
|
|
@@ -98,7 +102,7 @@ export const PageSelector = ({ options, value, button, loading, title }) => {
|
|
|
98
102
|
const buttonLabelText = typeof button?.label == 'string' ? button?.label : button?.label.id;
|
|
99
103
|
return (_jsx(SelectorBox, { children: loading
|
|
100
104
|
? _jsx(LoadingCircular, {})
|
|
101
|
-
: (_jsxs(_Fragment, { children: [title && _jsx(Text, { colorScheme: "light.700", sx: { mb: 3 }, children: title }), _jsxs("
|
|
105
|
+
: (_jsxs(_Fragment, { children: [title && _jsx(Text, { colorScheme: "light.700", sx: { mb: 3 }, children: title }), _jsxs("button", { onClick: () => setVisible(true), onKeyDown: (e) => e.key === 'Enter' && setVisible(true), title: label, tabIndex: 0, "aria-label": interpolate(t.accessibility, [label]), "aria-expanded": visible, "aria-controls": id.current, "aria-haspopup": "listbox", children: [selected?.icon && _jsx(IconBox, { children: selected?.icon }), isTextLabel ?
|
|
102
106
|
_jsx(Text, { ref: ref, appearance: "body2", className: "label", title: overflow ? labelText : '', children: labelText }) :
|
|
103
107
|
label.element, _jsx(IconBox, { size: "xs", children: _jsx(Select, {}) })] }), _jsx(SelectionList, { id: id.current, visible: visible, items: optionsWithIcon, onHide: () => setVisible(false), after: button ?
|
|
104
108
|
_jsx(Link, { className: "view-all", tabIndex: 0, href: button.href, onClick: button.onClick, children: buttonLabelText })
|
|
@@ -106,10 +110,10 @@ export const PageSelector = ({ options, value, button, loading, title }) => {
|
|
|
106
110
|
};
|
|
107
111
|
const dictionary = {
|
|
108
112
|
en: {
|
|
109
|
-
accessibility: 'Current value: $0.
|
|
113
|
+
accessibility: 'Current value: $0.',
|
|
110
114
|
},
|
|
111
115
|
pt: {
|
|
112
|
-
accessibility: 'Valor atual: $0.
|
|
116
|
+
accessibility: 'Valor atual: $0.',
|
|
113
117
|
},
|
|
114
118
|
};
|
|
115
119
|
//# sourceMappingURL=PageSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,
|
|
1
|
+
{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import { ArrowRight, Select } from '@citric/icons'
|
|
|
3
3
|
import { LoadingCircular } from '@citric/ui'
|
|
4
4
|
import { theme } from '@stack-spot/portal-theme'
|
|
5
5
|
import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
|
|
6
|
-
import { useMemo, useRef, useState } from 'react'
|
|
6
|
+
import { KeyboardEvent, useMemo, useRef, useState } from 'react'
|
|
7
7
|
import { styled } from 'styled-components'
|
|
8
8
|
import { useAnchorTag } from '../../layout-context'
|
|
9
9
|
import { ListAction, SelectionList } from '../SelectionList'
|
|
@@ -16,17 +16,22 @@ const SelectorBox = styled.div`
|
|
|
16
16
|
margin: ${PADDING}px;
|
|
17
17
|
margin-bottom: 28px;
|
|
18
18
|
|
|
19
|
-
>
|
|
19
|
+
> button {
|
|
20
20
|
display: flex;
|
|
21
21
|
gap: 8px;
|
|
22
22
|
align-items: center;
|
|
23
23
|
border-radius: 0.25rem;
|
|
24
|
+
background-color: transparent;
|
|
24
25
|
border: 1px solid ${theme.color.light['500']};
|
|
25
26
|
padding: 8px;
|
|
26
27
|
transition: background-color 0.2s;
|
|
28
|
+
color: ${theme.color.light['contrastText']};
|
|
29
|
+
width: 100%;
|
|
30
|
+
text-align: left;
|
|
27
31
|
|
|
28
32
|
&:hover {
|
|
29
33
|
background-color: ${theme.color.light['500']};
|
|
34
|
+
cursor: pointer;
|
|
30
35
|
}
|
|
31
36
|
|
|
32
37
|
.label {
|
|
@@ -39,7 +44,6 @@ const SelectorBox = styled.div`
|
|
|
39
44
|
|
|
40
45
|
.selection-list {
|
|
41
46
|
position: absolute;
|
|
42
|
-
top: 0;
|
|
43
47
|
left: 0;
|
|
44
48
|
right: 0;
|
|
45
49
|
box-shadow: none;
|
|
@@ -110,21 +114,22 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
|
|
|
110
114
|
: (
|
|
111
115
|
<>
|
|
112
116
|
{title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
|
|
113
|
-
<
|
|
117
|
+
<button
|
|
114
118
|
onClick={() => setVisible(true)}
|
|
115
|
-
onKeyDown={e => e.key === 'Enter' && setVisible(true)}
|
|
116
|
-
title={
|
|
119
|
+
onKeyDown={(e: KeyboardEvent<HTMLButtonElement>) => e.key === 'Enter' && setVisible(true)}
|
|
120
|
+
title={label as string}
|
|
117
121
|
tabIndex={0}
|
|
118
|
-
aria-label={interpolate(t.accessibility, [
|
|
122
|
+
aria-label={interpolate(t.accessibility, [label])}
|
|
119
123
|
aria-expanded={visible}
|
|
120
124
|
aria-controls={id.current}
|
|
125
|
+
aria-haspopup="listbox"
|
|
121
126
|
>
|
|
122
127
|
{selected?.icon && <IconBox>{selected?.icon}</IconBox>}
|
|
123
128
|
{isTextLabel ?
|
|
124
129
|
<Text ref={ref} appearance="body2" className="label" title={overflow ? labelText : ''}>{labelText}</Text> :
|
|
125
130
|
label.element}
|
|
126
131
|
<IconBox size="xs"><Select /></IconBox>
|
|
127
|
-
</
|
|
132
|
+
</button>
|
|
128
133
|
|
|
129
134
|
<SelectionList
|
|
130
135
|
id={id.current}
|
|
@@ -145,10 +150,10 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
|
|
|
145
150
|
|
|
146
151
|
const dictionary = {
|
|
147
152
|
en: {
|
|
148
|
-
accessibility: 'Current value: $0.
|
|
153
|
+
accessibility: 'Current value: $0.',
|
|
149
154
|
},
|
|
150
155
|
pt: {
|
|
151
|
-
accessibility: 'Valor atual: $0.
|
|
156
|
+
accessibility: 'Valor atual: $0.',
|
|
152
157
|
},
|
|
153
158
|
} satisfies Dictionary
|
|
154
159
|
|