@semcore/accordion 3.5.4 → 4.0.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 +18 -0
- package/lib/cjs/Accordion.js +7 -7
- package/lib/cjs/index.d.ts +61 -0
- package/lib/cjs/style/accordion.shadow.css +1 -1
- package/lib/es6/Accordion.js +7 -7
- package/lib/es6/index.d.ts +61 -0
- package/lib/es6/style/accordion.shadow.css +1 -1
- package/package.json +4 -1
- package/src/style/accordion.shadow.css +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.0.0] - 2022-05-17
|
|
6
|
+
|
|
7
|
+
### BREAK
|
|
8
|
+
|
|
9
|
+
- Updated styles according to the library redesign policy.
|
|
10
|
+
|
|
11
|
+
## [3.5.6] - 2022-05-16
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0]).
|
|
16
|
+
|
|
17
|
+
## [3.5.5] - 2022-04-28
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.20.0 ~> 2.21.0]).
|
|
22
|
+
|
|
5
23
|
## [3.5.4] - 2022-04-03
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/lib/cjs/Accordion.js
CHANGED
|
@@ -54,16 +54,16 @@ var style = (
|
|
|
54
54
|
/*__reshadow_css_start__*/
|
|
55
55
|
_core.sstyled.insert(
|
|
56
56
|
/*__inner_css_start__*/
|
|
57
|
-
".
|
|
57
|
+
".___SItemToggle_14cb0_gg_{cursor:pointer;outline:0}.___SItemToggle_14cb0_gg_.__keyboardFocused_14cb0_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_14cb0_gg_.__disabled_14cb0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_14cb0_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_14cb0_gg_.__selected_14cb0_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_14cb0_gg_{transition:none}}"
|
|
58
58
|
/*__inner_css_end__*/
|
|
59
|
-
, "
|
|
59
|
+
, "1l8o65w_gg_")
|
|
60
60
|
/*__reshadow_css_end__*/
|
|
61
61
|
, {
|
|
62
|
-
"__SItemToggle": "
|
|
63
|
-
"_keyboardFocused": "
|
|
64
|
-
"_disabled": "
|
|
65
|
-
"__SItemChevron": "
|
|
66
|
-
"_selected": "
|
|
62
|
+
"__SItemToggle": "___SItemToggle_14cb0_gg_",
|
|
63
|
+
"_keyboardFocused": "__keyboardFocused_14cb0_gg_",
|
|
64
|
+
"_disabled": "__disabled_14cb0_gg_",
|
|
65
|
+
"__SItemChevron": "___SItemChevron_14cb0_gg_",
|
|
66
|
+
"_selected": "__selected_14cb0_gg_"
|
|
67
67
|
});
|
|
68
68
|
|
|
69
69
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { Box, IFlexProps } from '@semcore/flex-box';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { ICollapseProps } from '@semcore/animation';
|
|
4
|
+
|
|
5
|
+
export type AccordionValue = null | number | string | Array<number | string | null>;
|
|
6
|
+
|
|
7
|
+
export interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {
|
|
8
|
+
/** Value for the active tab. Can be set as stroke, number, null or as array.
|
|
9
|
+
* @type AccordionValue
|
|
10
|
+
* */
|
|
11
|
+
value?: T;
|
|
12
|
+
/**
|
|
13
|
+
* Value of the active tabs selected by default
|
|
14
|
+
* @type AccordionValue
|
|
15
|
+
* @default []
|
|
16
|
+
*/
|
|
17
|
+
defaultValue?: T;
|
|
18
|
+
/** Called when the selection is changed
|
|
19
|
+
* @type (value: AccordionValue, event?: React.SyntheticEvent) => void
|
|
20
|
+
* */
|
|
21
|
+
onChange?: (value: T, event?: React.SyntheticEvent) => void;
|
|
22
|
+
/** Animation duration
|
|
23
|
+
* @default 350 */
|
|
24
|
+
duration?: number;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export interface IAccordionContext {
|
|
28
|
+
getItemProps: PropGetterFn;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export interface IAccordionHandlers {
|
|
32
|
+
value: (value: AccordionValue) => void;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export interface IAccordionItemProps {
|
|
36
|
+
/** Tab value */
|
|
37
|
+
value: string | number;
|
|
38
|
+
/** Disabling selection changes */
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export interface IAccordionItemContext {
|
|
43
|
+
getToggleProps?: PropGetterFn;
|
|
44
|
+
getCollapseProps?: PropGetterFn;
|
|
45
|
+
getChevronProps?: PropGetterFn;
|
|
46
|
+
selected?: boolean;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
declare const Accordion: (<T, V extends AccordionValue = AccordionValue>(
|
|
50
|
+
props: CProps<IAccordionProps<V> & T, IAccordionContext, IAccordionHandlers>,
|
|
51
|
+
) => ReturnEl) & {
|
|
52
|
+
Item: (<T>(
|
|
53
|
+
props: CProps<IAccordionItemProps & T, IAccordionItemContext, IAccordionHandlers>,
|
|
54
|
+
) => ReturnEl) & {
|
|
55
|
+
Toggle: typeof Box;
|
|
56
|
+
Chevron: typeof Box;
|
|
57
|
+
Collapse: <T>(props: ICollapseProps & T) => ReturnEl;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export default Accordion;
|
package/lib/es6/Accordion.js
CHANGED
|
@@ -31,16 +31,16 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SItemToggle_14cb0_gg_{cursor:pointer;outline:0}.___SItemToggle_14cb0_gg_.__keyboardFocused_14cb0_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_14cb0_gg_.__disabled_14cb0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_14cb0_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_14cb0_gg_.__selected_14cb0_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_14cb0_gg_{transition:none}}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "1l8o65w_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SItemToggle": "
|
|
40
|
-
"_keyboardFocused": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"__SItemChevron": "
|
|
43
|
-
"_selected": "
|
|
39
|
+
"__SItemToggle": "___SItemToggle_14cb0_gg_",
|
|
40
|
+
"_keyboardFocused": "__keyboardFocused_14cb0_gg_",
|
|
41
|
+
"_disabled": "__disabled_14cb0_gg_",
|
|
42
|
+
"__SItemChevron": "___SItemChevron_14cb0_gg_",
|
|
43
|
+
"_selected": "__selected_14cb0_gg_"
|
|
44
44
|
});
|
|
45
45
|
|
|
46
46
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { Box, IFlexProps } from '@semcore/flex-box';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { ICollapseProps } from '@semcore/animation';
|
|
4
|
+
|
|
5
|
+
export type AccordionValue = null | number | string | Array<number | string | null>;
|
|
6
|
+
|
|
7
|
+
export interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {
|
|
8
|
+
/** Value for the active tab. Can be set as stroke, number, null or as array.
|
|
9
|
+
* @type AccordionValue
|
|
10
|
+
* */
|
|
11
|
+
value?: T;
|
|
12
|
+
/**
|
|
13
|
+
* Value of the active tabs selected by default
|
|
14
|
+
* @type AccordionValue
|
|
15
|
+
* @default []
|
|
16
|
+
*/
|
|
17
|
+
defaultValue?: T;
|
|
18
|
+
/** Called when the selection is changed
|
|
19
|
+
* @type (value: AccordionValue, event?: React.SyntheticEvent) => void
|
|
20
|
+
* */
|
|
21
|
+
onChange?: (value: T, event?: React.SyntheticEvent) => void;
|
|
22
|
+
/** Animation duration
|
|
23
|
+
* @default 350 */
|
|
24
|
+
duration?: number;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export interface IAccordionContext {
|
|
28
|
+
getItemProps: PropGetterFn;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export interface IAccordionHandlers {
|
|
32
|
+
value: (value: AccordionValue) => void;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export interface IAccordionItemProps {
|
|
36
|
+
/** Tab value */
|
|
37
|
+
value: string | number;
|
|
38
|
+
/** Disabling selection changes */
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export interface IAccordionItemContext {
|
|
43
|
+
getToggleProps?: PropGetterFn;
|
|
44
|
+
getCollapseProps?: PropGetterFn;
|
|
45
|
+
getChevronProps?: PropGetterFn;
|
|
46
|
+
selected?: boolean;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
declare const Accordion: (<T, V extends AccordionValue = AccordionValue>(
|
|
50
|
+
props: CProps<IAccordionProps<V> & T, IAccordionContext, IAccordionHandlers>,
|
|
51
|
+
) => ReturnEl) & {
|
|
52
|
+
Item: (<T>(
|
|
53
|
+
props: CProps<IAccordionItemProps & T, IAccordionItemContext, IAccordionHandlers>,
|
|
54
|
+
) => ReturnEl) & {
|
|
55
|
+
Toggle: typeof Box;
|
|
56
|
+
Chevron: typeof Box;
|
|
57
|
+
Collapse: <T>(props: ICollapseProps & T) => ReturnEl;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export default Accordion;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/accordion",
|
|
3
3
|
"description": "SEMRush Accordion Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "4.0.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -29,5 +29,8 @@
|
|
|
29
29
|
"type": "git",
|
|
30
30
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
31
31
|
"directory": "semcore/accordion"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
32
35
|
}
|
|
33
36
|
}
|