@impulse-ui-native/accordion 2.8.0 → 3.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/dist/components/content.js +21 -22
- package/dist/components/content.js.map +1 -1
- package/dist/components/item.js +11 -6
- package/dist/components/item.js.map +1 -1
- package/dist/components/root.js +16 -21
- package/dist/components/root.js.map +1 -1
- package/dist/components/trigger.js +33 -25
- package/dist/components/trigger.js.map +1 -1
- package/package.json +6 -6
|
@@ -4,7 +4,7 @@ import { StyleSheet } from "react-native";
|
|
|
4
4
|
import Animated from "react-native-reanimated";
|
|
5
5
|
import { useEventCallback } from "@impulse-ui-native/core";
|
|
6
6
|
import { View } from "@impulse-ui-native/primitives";
|
|
7
|
-
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
7
|
+
import { useComponentsTokens, useThemedStyles } from "@impulse-ui-native/theme";
|
|
8
8
|
import { useAccordionItemContext } from "../contexts";
|
|
9
9
|
import { useAccordionContentAnimation } from "../hooks";
|
|
10
10
|
const AccordionContent = memo(function AccordionContent2({
|
|
@@ -15,24 +15,18 @@ const AccordionContent = memo(function AccordionContent2({
|
|
|
15
15
|
}) {
|
|
16
16
|
const item = useAccordionItemContext();
|
|
17
17
|
const tokens = useComponentsTokens().accordion;
|
|
18
|
+
const styles = useThemedStyles(themedStyles);
|
|
18
19
|
const { contentStyle, setContentHeight } = useAccordionContentAnimation({
|
|
19
20
|
duration: tokens.animationDuration,
|
|
20
21
|
open: item.open
|
|
21
22
|
});
|
|
22
23
|
const viewportStyle = useMemo(
|
|
23
24
|
() => [styles.viewport, contentStyle],
|
|
24
|
-
[contentStyle]
|
|
25
|
+
[contentStyle, styles.viewport]
|
|
25
26
|
);
|
|
26
27
|
const innerStyle = useMemo(
|
|
27
|
-
() => [
|
|
28
|
-
|
|
29
|
-
{
|
|
30
|
-
paddingBottom: tokens.content.paddingBottom,
|
|
31
|
-
paddingHorizontal: tokens.content.paddingHorizontal
|
|
32
|
-
},
|
|
33
|
-
style
|
|
34
|
-
],
|
|
35
|
-
[style, tokens.content.paddingBottom, tokens.content.paddingHorizontal]
|
|
28
|
+
() => [styles.content, style],
|
|
29
|
+
[style, styles.content]
|
|
36
30
|
);
|
|
37
31
|
const handleLayout = useEventCallback((event) => {
|
|
38
32
|
setContentHeight(event.nativeEvent.layout.height);
|
|
@@ -61,17 +55,22 @@ const AccordionContent = memo(function AccordionContent2({
|
|
|
61
55
|
}
|
|
62
56
|
);
|
|
63
57
|
});
|
|
64
|
-
|
|
65
|
-
content
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
58
|
+
function themedStyles(theme) {
|
|
59
|
+
const contentTokens = theme.components.accordion.content;
|
|
60
|
+
return StyleSheet.create({
|
|
61
|
+
content: {
|
|
62
|
+
left: 0,
|
|
63
|
+
paddingBottom: contentTokens.paddingBottom,
|
|
64
|
+
paddingHorizontal: contentTokens.paddingHorizontal,
|
|
65
|
+
position: "absolute",
|
|
66
|
+
right: 0,
|
|
67
|
+
top: 0
|
|
68
|
+
},
|
|
69
|
+
viewport: {
|
|
70
|
+
overflow: "hidden"
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
75
74
|
export {
|
|
76
75
|
AccordionContent
|
|
77
76
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/content.tsx"],"sourcesContent":["import type { LayoutChangeEvent } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { AccordionContentProps } from \"../types\";\nimport { useAccordionItemContext } from \"../contexts\";\nimport { useAccordionContentAnimation } from \"../hooks\";\n\nexport const AccordionContent = memo(function AccordionContent({\n children,\n onLayout,\n style,\n ...props\n}: AccordionContentProps) {\n const item = useAccordionItemContext();\n const tokens = useComponentsTokens().accordion;\n const { contentStyle, setContentHeight } = useAccordionContentAnimation({\n duration: tokens.animationDuration,\n open: item.open,\n });\n\n const viewportStyle = useMemo(\n () => [styles.viewport, contentStyle],\n [contentStyle],\n );\n const innerStyle = useMemo(\n () => [
|
|
1
|
+
{"version":3,"sources":["../../src/components/content.tsx"],"sourcesContent":["import type { LayoutChangeEvent } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { AccordionContentProps } from \"../types\";\nimport { useAccordionItemContext } from \"../contexts\";\nimport { useAccordionContentAnimation } from \"../hooks\";\n\nexport const AccordionContent = memo(function AccordionContent({\n children,\n onLayout,\n style,\n ...props\n}: AccordionContentProps) {\n const item = useAccordionItemContext();\n const tokens = useComponentsTokens().accordion;\n const styles = useThemedStyles(themedStyles);\n const { contentStyle, setContentHeight } = useAccordionContentAnimation({\n duration: tokens.animationDuration,\n open: item.open,\n });\n\n const viewportStyle = useMemo(\n () => [styles.viewport, contentStyle],\n [contentStyle, styles.viewport],\n );\n const innerStyle = useMemo(\n () => [styles.content, style],\n [style, styles.content],\n );\n\n const handleLayout = useEventCallback((event: LayoutChangeEvent) => {\n setContentHeight(event.nativeEvent.layout.height);\n onLayout?.(event);\n });\n\n return (\n <Animated.View\n aria-hidden={!item.open}\n accessibilityElementsHidden={!item.open}\n importantForAccessibility={item.open ? \"auto\" : \"no-hide-descendants\"}\n pointerEvents={item.open ? \"auto\" : \"none\"}\n style={viewportStyle}\n >\n <View\n {...props}\n aria-labelledby={item.triggerId}\n accessibilityLabelledBy={item.triggerId}\n nativeID={item.contentId}\n onLayout={handleLayout}\n style={innerStyle}\n >\n {children}\n </View>\n </Animated.View>\n );\n});\n\nfunction themedStyles(theme: AppTheme) {\n const contentTokens = theme.components.accordion.content;\n\n return StyleSheet.create({\n content: {\n left: 0,\n paddingBottom: contentTokens.paddingBottom,\n paddingHorizontal: contentTokens.paddingHorizontal,\n position: \"absolute\",\n right: 0,\n top: 0,\n },\n viewport: {\n overflow: \"hidden\",\n },\n });\n}\n"],"mappings":"AAkDM;AAjDN,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAGrB,SAAS,wBAAwB;AACjC,SAAS,YAAY;AACrB,SAAS,qBAAqB,uBAAuB;AAGrD,SAAS,+BAA+B;AACxC,SAAS,oCAAoC;AAEtC,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,OAAO,wBAAwB;AACrC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,EAAE,cAAc,iBAAiB,IAAI,6BAA6B;AAAA,IACtE,UAAU,OAAO;AAAA,IACjB,MAAM,KAAK;AAAA,EACb,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,MAAM,CAAC,OAAO,UAAU,YAAY;AAAA,IACpC,CAAC,cAAc,OAAO,QAAQ;AAAA,EAChC;AACA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,SAAS,KAAK;AAAA,IAC5B,CAAC,OAAO,OAAO,OAAO;AAAA,EACxB;AAEA,QAAM,eAAe,iBAAiB,CAAC,UAA6B;AAClE,qBAAiB,MAAM,YAAY,OAAO,MAAM;AAChD,eAAW,KAAK;AAAA,EAClB,CAAC;AAED,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,eAAa,CAAC,KAAK;AAAA,MACnB,6BAA6B,CAAC,KAAK;AAAA,MACnC,2BAA2B,KAAK,OAAO,SAAS;AAAA,MAChD,eAAe,KAAK,OAAO,SAAS;AAAA,MACpC,OAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,mBAAiB,KAAK;AAAA,UACtB,yBAAyB,KAAK;AAAA,UAC9B,UAAU,KAAK;AAAA,UACf,UAAU;AAAA,UACV,OAAO;AAAA,UAEN;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,gBAAgB,MAAM,WAAW,UAAU;AAEjD,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,MAAM;AAAA,MACN,eAAe,cAAc;AAAA,MAC7B,mBAAmB,cAAc;AAAA,MACjC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK;AAAA,IACP;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,EACF,CAAC;AACH;","names":["AccordionContent"]}
|
package/dist/components/item.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useId, useMemo } from "react";
|
|
3
|
+
import { StyleSheet } from "react-native";
|
|
3
4
|
import { View } from "@impulse-ui-native/primitives";
|
|
4
|
-
import {
|
|
5
|
+
import { useThemedStyles } from "@impulse-ui-native/theme";
|
|
5
6
|
import { AccordionItemProvider, useAccordionContext } from "../contexts";
|
|
6
7
|
const AccordionItem = memo(function AccordionItem2({
|
|
7
8
|
children,
|
|
@@ -11,8 +12,8 @@ const AccordionItem = memo(function AccordionItem2({
|
|
|
11
12
|
...props
|
|
12
13
|
}) {
|
|
13
14
|
const accordion = useAccordionContext();
|
|
14
|
-
const tokens = useComponentsTokens().accordion;
|
|
15
15
|
const reactId = useId().replaceAll(":", "");
|
|
16
|
+
const styles = useThemedStyles(themedStyles);
|
|
16
17
|
const resolvedDisabled = accordion.disabled || disabled;
|
|
17
18
|
const open = accordion.expandedValues.includes(value);
|
|
18
19
|
const context = useMemo(
|
|
@@ -25,12 +26,16 @@ const AccordionItem = memo(function AccordionItem2({
|
|
|
25
26
|
}),
|
|
26
27
|
[open, reactId, resolvedDisabled, value]
|
|
27
28
|
);
|
|
28
|
-
const itemStyle = useMemo(
|
|
29
|
-
() => [{ backgroundColor: tokens.backgroundColor }, style],
|
|
30
|
-
[style, tokens.backgroundColor]
|
|
31
|
-
);
|
|
29
|
+
const itemStyle = useMemo(() => [styles.item, style], [style, styles.item]);
|
|
32
30
|
return /* @__PURE__ */ jsx(AccordionItemProvider, { value: context, children: /* @__PURE__ */ jsx(View, { ...props, style: itemStyle, children }) });
|
|
33
31
|
});
|
|
32
|
+
function themedStyles(theme) {
|
|
33
|
+
return StyleSheet.create({
|
|
34
|
+
item: {
|
|
35
|
+
backgroundColor: theme.components.accordion.backgroundColor
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
}
|
|
34
39
|
export {
|
|
35
40
|
AccordionItem
|
|
36
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/item.tsx"],"sourcesContent":["import { memo, useId, useMemo } from \"react\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/item.tsx"],"sourcesContent":["import { memo, useId, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { AccordionItemContextData } from \"../contexts\";\nimport type { AccordionItemProps } from \"../types\";\nimport { AccordionItemProvider, useAccordionContext } from \"../contexts\";\n\nexport const AccordionItem = memo(function AccordionItem({\n children,\n disabled = false,\n style,\n value,\n ...props\n}: AccordionItemProps) {\n const accordion = useAccordionContext();\n const reactId = useId().replaceAll(\":\", \"\");\n const styles = useThemedStyles(themedStyles);\n const resolvedDisabled = accordion.disabled || disabled;\n const open = accordion.expandedValues.includes(value);\n\n const context = useMemo<AccordionItemContextData>(\n () => ({\n contentId: `accordion-content-${reactId}`,\n disabled: resolvedDisabled,\n open,\n triggerId: `accordion-trigger-${reactId}`,\n value,\n }),\n [open, reactId, resolvedDisabled, value],\n );\n const itemStyle = useMemo(() => [styles.item, style], [style, styles.item]);\n\n return (\n <AccordionItemProvider value={context}>\n <View {...props} style={itemStyle}>\n {children}\n </View>\n </AccordionItemProvider>\n );\n});\n\nfunction themedStyles(theme: AppTheme) {\n return StyleSheet.create({\n item: {\n backgroundColor: theme.components.accordion.backgroundColor,\n },\n });\n}\n"],"mappings":"AAsCM;AAtCN,SAAS,MAAM,OAAO,eAAe;AACrC,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAIhC,SAAS,uBAAuB,2BAA2B;AAEpD,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,YAAY,oBAAoB;AACtC,QAAM,UAAU,MAAM,EAAE,WAAW,KAAK,EAAE;AAC1C,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,mBAAmB,UAAU,YAAY;AAC/C,QAAM,OAAO,UAAU,eAAe,SAAS,KAAK;AAEpD,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,WAAW,qBAAqB,OAAO;AAAA,MACvC,UAAU;AAAA,MACV;AAAA,MACA,WAAW,qBAAqB,OAAO;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,kBAAkB,KAAK;AAAA,EACzC;AACA,QAAM,YAAY,QAAQ,MAAM,CAAC,OAAO,MAAM,KAAK,GAAG,CAAC,OAAO,OAAO,IAAI,CAAC;AAE1E,SACE,oBAAC,yBAAsB,OAAO,SAC5B,8BAAC,QAAM,GAAG,OAAO,OAAO,WACrB,UACH,GACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,iBAAiB,MAAM,WAAW,UAAU;AAAA,IAC9C;AAAA,EACF,CAAC;AACH;","names":["AccordionItem"]}
|
package/dist/components/root.js
CHANGED
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
useEventCallback
|
|
7
7
|
} from "@impulse-ui-native/core";
|
|
8
8
|
import { View } from "@impulse-ui-native/primitives";
|
|
9
|
-
import {
|
|
9
|
+
import { useThemedStyles } from "@impulse-ui-native/theme";
|
|
10
10
|
import { AccordionProvider } from "../contexts";
|
|
11
11
|
import { normalizeAccordionValue } from "../utils";
|
|
12
12
|
const AccordionRoot = memo(function AccordionRoot2({
|
|
@@ -20,8 +20,8 @@ const AccordionRoot = memo(function AccordionRoot2({
|
|
|
20
20
|
value,
|
|
21
21
|
...props
|
|
22
22
|
}) {
|
|
23
|
-
const tokens = useComponentsTokens().accordion;
|
|
24
23
|
const triggerRegistry = useRef([]);
|
|
24
|
+
const styles = useThemedStyles(themedStyles);
|
|
25
25
|
const notifyValueChange = useEventCallback(
|
|
26
26
|
(nextValues) => {
|
|
27
27
|
if (type === "multiple") {
|
|
@@ -103,27 +103,22 @@ const AccordionRoot = memo(function AccordionRoot2({
|
|
|
103
103
|
}),
|
|
104
104
|
[disabled, expandedValues, focusTrigger, registerTrigger, toggleItem]
|
|
105
105
|
);
|
|
106
|
-
const rootStyle = useMemo(
|
|
107
|
-
() => [
|
|
108
|
-
styles.root,
|
|
109
|
-
{
|
|
110
|
-
backgroundColor: tokens.dividerColor,
|
|
111
|
-
borderColor: tokens.borderColor,
|
|
112
|
-
borderRadius: tokens.borderRadius,
|
|
113
|
-
borderWidth: tokens.borderWidth,
|
|
114
|
-
gap: tokens.dividerWidth
|
|
115
|
-
},
|
|
116
|
-
style
|
|
117
|
-
],
|
|
118
|
-
[style, tokens]
|
|
119
|
-
);
|
|
106
|
+
const rootStyle = useMemo(() => [styles.root, style], [style, styles.root]);
|
|
120
107
|
return /* @__PURE__ */ jsx(AccordionProvider, { value: context, children: /* @__PURE__ */ jsx(View, { ...props, style: rootStyle, children }) });
|
|
121
108
|
});
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
109
|
+
function themedStyles(theme) {
|
|
110
|
+
const accordionTokens = theme.components.accordion;
|
|
111
|
+
return StyleSheet.create({
|
|
112
|
+
root: {
|
|
113
|
+
backgroundColor: accordionTokens.dividerColor,
|
|
114
|
+
borderColor: accordionTokens.borderColor,
|
|
115
|
+
borderRadius: accordionTokens.borderRadius,
|
|
116
|
+
borderWidth: accordionTokens.borderWidth,
|
|
117
|
+
gap: accordionTokens.dividerWidth,
|
|
118
|
+
overflow: "hidden"
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
}
|
|
127
122
|
export {
|
|
128
123
|
AccordionRoot
|
|
129
124
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/root.tsx"],"sourcesContent":["import { memo, useCallback, useMemo, useRef } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n useControllableState,\n useEventCallback,\n} from \"@impulse-ui-native/core\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/root.tsx"],"sourcesContent":["import { memo, useCallback, useMemo, useRef } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n useControllableState,\n useEventCallback,\n} from \"@impulse-ui-native/core\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { AccordionContextData } from \"../contexts\";\nimport type {\n AccordionMultipleRootProps,\n AccordionRootProps,\n AccordionSingleRootProps,\n} from \"../types\";\nimport { AccordionProvider } from \"../contexts\";\nimport { normalizeAccordionValue } from \"../utils\";\n\ntype TriggerRegistration = Parameters<\n AccordionContextData[\"registerTrigger\"]\n>[0];\n\nexport const AccordionRoot = memo(function AccordionRoot({\n children,\n collapsible = true,\n defaultValue,\n disabled = false,\n onValueChange,\n style,\n type = \"single\",\n value,\n ...props\n}: AccordionRootProps) {\n const triggerRegistry = useRef<TriggerRegistration[]>([]);\n const styles = useThemedStyles(themedStyles);\n\n const notifyValueChange = useEventCallback(\n (nextValues: readonly string[]) => {\n if (type === \"multiple\") {\n (onValueChange as AccordionMultipleRootProps[\"onValueChange\"])?.([\n ...nextValues,\n ]);\n return;\n }\n\n (onValueChange as AccordionSingleRootProps[\"onValueChange\"])?.(\n nextValues[0],\n );\n },\n );\n const normalizedValue = useMemo(\n () => (value === undefined ? undefined : normalizeAccordionValue(value)),\n [value],\n );\n const normalizedDefaultValue = useMemo(\n () => normalizeAccordionValue(defaultValue),\n [defaultValue],\n );\n const [expandedValues, setExpandedValues] = useControllableState<\n readonly string[]\n >({\n prop: normalizedValue,\n defaultProp: normalizedDefaultValue,\n onChange: notifyValueChange,\n });\n\n const registerTrigger = useCallback((registration: TriggerRegistration) => {\n triggerRegistry.current = [...triggerRegistry.current, registration];\n\n return () => {\n triggerRegistry.current = triggerRegistry.current.filter(\n (candidate) => candidate !== registration,\n );\n };\n }, []);\n\n const focusTrigger = useCallback<AccordionContextData[\"focusTrigger\"]>(\n (currentValue, direction) => {\n const enabledTriggers = triggerRegistry.current.filter(\n (trigger) => !trigger.disabled,\n );\n const currentIndex = enabledTriggers.findIndex(\n (trigger) => trigger.value === currentValue,\n );\n\n if (enabledTriggers.length === 0) return;\n\n let nextIndex = currentIndex;\n\n if (direction === \"first\") nextIndex = 0;\n if (direction === \"last\") nextIndex = enabledTriggers.length - 1;\n if (direction === \"next\") {\n nextIndex = (currentIndex + 1) % enabledTriggers.length;\n }\n if (direction === \"previous\") {\n nextIndex =\n (currentIndex - 1 + enabledTriggers.length) % enabledTriggers.length;\n }\n\n enabledTriggers[nextIndex]?.ref.current?.focus();\n },\n [],\n );\n\n const toggleItem = useCallback(\n (itemValue: string) => {\n setExpandedValues((currentValues) => {\n const isOpen = currentValues.includes(itemValue);\n\n if (type === \"multiple\") {\n return isOpen\n ? currentValues.filter((current) => current !== itemValue)\n : [...currentValues, itemValue];\n }\n\n if (isOpen) {\n return collapsible ? [] : currentValues;\n }\n\n return [itemValue];\n });\n },\n [collapsible, setExpandedValues, type],\n );\n\n const context = useMemo<AccordionContextData>(\n () => ({\n disabled,\n expandedValues,\n focusTrigger,\n registerTrigger,\n toggleItem,\n }),\n [disabled, expandedValues, focusTrigger, registerTrigger, toggleItem],\n );\n const rootStyle = useMemo(() => [styles.root, style], [style, styles.root]);\n\n return (\n <AccordionProvider value={context}>\n <View {...props} style={rootStyle}>\n {children}\n </View>\n </AccordionProvider>\n );\n});\n\nfunction themedStyles(theme: AppTheme) {\n const accordionTokens = theme.components.accordion;\n\n return StyleSheet.create({\n root: {\n backgroundColor: accordionTokens.dividerColor,\n borderColor: accordionTokens.borderColor,\n borderRadius: accordionTokens.borderRadius,\n borderWidth: accordionTokens.borderWidth,\n gap: accordionTokens.dividerWidth,\n overflow: \"hidden\",\n },\n });\n}\n"],"mappings":"AA6IM;AA7IN,SAAS,MAAM,aAAa,SAAS,cAAc;AACnD,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAQhC,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AAMjC,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,kBAAkB,OAA8B,CAAC,CAAC;AACxD,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,oBAAoB;AAAA,IACxB,CAAC,eAAkC;AACjC,UAAI,SAAS,YAAY;AACvB,QAAC,gBAAgE;AAAA,UAC/D,GAAG;AAAA,QACL,CAAC;AACD;AAAA,MACF;AAEA,MAAC;AAAA,QACC,WAAW,CAAC;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACA,QAAM,kBAAkB;AAAA,IACtB,MAAO,UAAU,SAAY,SAAY,wBAAwB,KAAK;AAAA,IACtE,CAAC,KAAK;AAAA,EACR;AACA,QAAM,yBAAyB;AAAA,IAC7B,MAAM,wBAAwB,YAAY;AAAA,IAC1C,CAAC,YAAY;AAAA,EACf;AACA,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,qBAE1C;AAAA,IACA,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,kBAAkB,YAAY,CAAC,iBAAsC;AACzE,oBAAgB,UAAU,CAAC,GAAG,gBAAgB,SAAS,YAAY;AAEnE,WAAO,MAAM;AACX,sBAAgB,UAAU,gBAAgB,QAAQ;AAAA,QAChD,CAAC,cAAc,cAAc;AAAA,MAC/B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe;AAAA,IACnB,CAAC,cAAc,cAAc;AAC3B,YAAM,kBAAkB,gBAAgB,QAAQ;AAAA,QAC9C,CAAC,YAAY,CAAC,QAAQ;AAAA,MACxB;AACA,YAAM,eAAe,gBAAgB;AAAA,QACnC,CAAC,YAAY,QAAQ,UAAU;AAAA,MACjC;AAEA,UAAI,gBAAgB,WAAW,EAAG;AAElC,UAAI,YAAY;AAEhB,UAAI,cAAc,QAAS,aAAY;AACvC,UAAI,cAAc,OAAQ,aAAY,gBAAgB,SAAS;AAC/D,UAAI,cAAc,QAAQ;AACxB,qBAAa,eAAe,KAAK,gBAAgB;AAAA,MACnD;AACA,UAAI,cAAc,YAAY;AAC5B,qBACG,eAAe,IAAI,gBAAgB,UAAU,gBAAgB;AAAA,MAClE;AAEA,sBAAgB,SAAS,GAAG,IAAI,SAAS,MAAM;AAAA,IACjD;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,cAAsB;AACrB,wBAAkB,CAAC,kBAAkB;AACnC,cAAM,SAAS,cAAc,SAAS,SAAS;AAE/C,YAAI,SAAS,YAAY;AACvB,iBAAO,SACH,cAAc,OAAO,CAAC,YAAY,YAAY,SAAS,IACvD,CAAC,GAAG,eAAe,SAAS;AAAA,QAClC;AAEA,YAAI,QAAQ;AACV,iBAAO,cAAc,CAAC,IAAI;AAAA,QAC5B;AAEA,eAAO,CAAC,SAAS;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,aAAa,mBAAmB,IAAI;AAAA,EACvC;AAEA,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,gBAAgB,cAAc,iBAAiB,UAAU;AAAA,EACtE;AACA,QAAM,YAAY,QAAQ,MAAM,CAAC,OAAO,MAAM,KAAK,GAAG,CAAC,OAAO,OAAO,IAAI,CAAC;AAE1E,SACE,oBAAC,qBAAkB,OAAO,SACxB,8BAAC,QAAM,GAAG,OAAO,OAAO,WACrB,UACH,GACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,kBAAkB,MAAM,WAAW;AAEzC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,iBAAiB,gBAAgB;AAAA,MACjC,aAAa,gBAAgB;AAAA,MAC7B,cAAc,gBAAgB;AAAA,MAC9B,aAAa,gBAAgB;AAAA,MAC7B,KAAK,gBAAgB;AAAA,MACrB,UAAU;AAAA,IACZ;AAAA,EACF,CAAC;AACH;","names":["AccordionRoot"]}
|
|
@@ -6,7 +6,7 @@ import { useEventCallback } from "@impulse-ui-native/core";
|
|
|
6
6
|
import { Icon } from "@impulse-ui-native/icon/components/icon";
|
|
7
7
|
import { CaretDownIcon } from "@impulse-ui-native/icon/icons/caret-down";
|
|
8
8
|
import { Pressable, Typography, View } from "@impulse-ui-native/primitives";
|
|
9
|
-
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
9
|
+
import { useComponentsTokens, useThemedStyles } from "@impulse-ui-native/theme";
|
|
10
10
|
import { useAccordionContext, useAccordionItemContext } from "../contexts";
|
|
11
11
|
import { useAccordionIndicatorAnimation } from "../hooks";
|
|
12
12
|
import { getAccordionFocusDirection } from "../utils";
|
|
@@ -25,14 +25,19 @@ const AccordionTrigger = memo(function AccordionTrigger2({
|
|
|
25
25
|
}) {
|
|
26
26
|
const { focusTrigger, registerTrigger, toggleItem } = useAccordionContext();
|
|
27
27
|
const item = useAccordionItemContext();
|
|
28
|
-
const tokens = useComponentsTokens().accordion;
|
|
29
28
|
const [focused, setFocused] = useState(false);
|
|
30
29
|
const triggerRef = useRef(null);
|
|
30
|
+
const tokens = useComponentsTokens().accordion;
|
|
31
31
|
const resolvedDisabled = item.disabled || disabled === true;
|
|
32
32
|
const indicatorStyle = useAccordionIndicatorAnimation({
|
|
33
33
|
duration: tokens.animationDuration,
|
|
34
34
|
open: item.open
|
|
35
35
|
});
|
|
36
|
+
const styles = useThemedStyles(
|
|
37
|
+
themedStyles,
|
|
38
|
+
{ focused, disabled: resolvedDisabled },
|
|
39
|
+
[focused, resolvedDisabled]
|
|
40
|
+
);
|
|
36
41
|
const resolvedAccessibilityState = useMemo(
|
|
37
42
|
() => ({
|
|
38
43
|
...accessibilityState,
|
|
@@ -41,26 +46,13 @@ const AccordionTrigger = memo(function AccordionTrigger2({
|
|
|
41
46
|
}),
|
|
42
47
|
[accessibilityState, item.open, resolvedDisabled]
|
|
43
48
|
);
|
|
44
|
-
const titleStyle = useMemo(
|
|
45
|
-
() => ({
|
|
46
|
-
color: resolvedDisabled ? tokens.disabledColor : tokens.titleColor
|
|
47
|
-
}),
|
|
48
|
-
[resolvedDisabled, tokens.disabledColor, tokens.titleColor]
|
|
49
|
-
);
|
|
50
49
|
const triggerStyle = useCallback(
|
|
51
50
|
({ pressed }) => [
|
|
52
51
|
styles.trigger,
|
|
53
|
-
|
|
54
|
-
backgroundColor: focused ? tokens.focusBackgroundColor : "transparent",
|
|
55
|
-
gap: tokens.trigger.gap,
|
|
56
|
-
minHeight: tokens.trigger.minHeight,
|
|
57
|
-
opacity: resolvedDisabled ? tokens.disabledOpacity : pressed ? tokens.pressedOpacity : 1,
|
|
58
|
-
paddingHorizontal: tokens.trigger.paddingHorizontal,
|
|
59
|
-
paddingVertical: tokens.trigger.paddingVertical
|
|
60
|
-
},
|
|
52
|
+
pressed ? styles.triggerPressed : void 0,
|
|
61
53
|
typeof style === "function" ? style({ pressed }) : style
|
|
62
54
|
],
|
|
63
|
-
[
|
|
55
|
+
[style, styles.trigger, styles.triggerPressed]
|
|
64
56
|
);
|
|
65
57
|
const handleBlur = useEventCallback(
|
|
66
58
|
(event) => {
|
|
@@ -119,7 +111,7 @@ const AccordionTrigger = memo(function AccordionTrigger2({
|
|
|
119
111
|
onPress: handlePress,
|
|
120
112
|
style: triggerStyle,
|
|
121
113
|
children: [
|
|
122
|
-
/* @__PURE__ */ jsx(View, { flex: 1, pointerEvents: "none", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Typography.Label, { style:
|
|
114
|
+
/* @__PURE__ */ jsx(View, { flex: 1, pointerEvents: "none", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Typography.Label, { style: styles.title, children }) : children }),
|
|
123
115
|
hideIndicator ? null : /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: indicatorStyle, children: indicator ?? /* @__PURE__ */ jsx(
|
|
124
116
|
Icon,
|
|
125
117
|
{
|
|
@@ -132,13 +124,29 @@ const AccordionTrigger = memo(function AccordionTrigger2({
|
|
|
132
124
|
}
|
|
133
125
|
);
|
|
134
126
|
});
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}
|
|
127
|
+
function themedStyles(theme, props) {
|
|
128
|
+
const { disabled, focused } = props;
|
|
129
|
+
const accordionTokens = theme.components.accordion;
|
|
130
|
+
return StyleSheet.create({
|
|
131
|
+
title: {
|
|
132
|
+
color: disabled ? accordionTokens.disabledColor : accordionTokens.titleColor
|
|
133
|
+
},
|
|
134
|
+
trigger: {
|
|
135
|
+
alignItems: "center",
|
|
136
|
+
backgroundColor: focused ? accordionTokens.focusBackgroundColor : "transparent",
|
|
137
|
+
flexDirection: "row",
|
|
138
|
+
gap: accordionTokens.trigger.gap,
|
|
139
|
+
justifyContent: "space-between",
|
|
140
|
+
minHeight: accordionTokens.trigger.minHeight,
|
|
141
|
+
opacity: disabled ? accordionTokens.disabledOpacity : 1,
|
|
142
|
+
paddingHorizontal: accordionTokens.trigger.paddingHorizontal,
|
|
143
|
+
paddingVertical: accordionTokens.trigger.paddingVertical
|
|
144
|
+
},
|
|
145
|
+
triggerPressed: {
|
|
146
|
+
opacity: disabled ? accordionTokens.disabledOpacity : accordionTokens.pressedOpacity
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
}
|
|
142
150
|
export {
|
|
143
151
|
AccordionTrigger
|
|
144
152
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/trigger.tsx"],"sourcesContent":["import type { ComponentRef } from \"react\";\nimport type {\n GestureResponderEvent,\n PressableProps,\n PressableStateCallbackType,\n StyleProp,\n ViewStyle,\n} from \"react-native\";\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Platform, StyleSheet } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { CaretDownIcon } from \"@impulse-ui-native/icon/icons/caret-down\";\nimport { Pressable, Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { AccordionKeyDownEvent, AccordionTriggerProps } from \"../types\";\nimport { useAccordionContext, useAccordionItemContext } from \"../contexts\";\nimport { useAccordionIndicatorAnimation } from \"../hooks\";\nimport { getAccordionFocusDirection } from \"../utils\";\n\nexport const AccordionTrigger = memo(function AccordionTrigger({\n accessibilityState,\n onBlur,\n children,\n disabled,\n hideIndicator = false,\n indicator,\n onFocus,\n onKeyDown,\n onPress,\n style,\n ...props\n}: AccordionTriggerProps) {\n const { focusTrigger, registerTrigger, toggleItem } = useAccordionContext();\n const item = useAccordionItemContext();\n const
|
|
1
|
+
{"version":3,"sources":["../../src/components/trigger.tsx"],"sourcesContent":["import type { ComponentRef } from \"react\";\nimport type {\n GestureResponderEvent,\n PressableProps,\n PressableStateCallbackType,\n StyleProp,\n ViewStyle,\n} from \"react-native\";\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Platform, StyleSheet } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { CaretDownIcon } from \"@impulse-ui-native/icon/icons/caret-down\";\nimport { Pressable, Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { AccordionKeyDownEvent, AccordionTriggerProps } from \"../types\";\nimport { useAccordionContext, useAccordionItemContext } from \"../contexts\";\nimport { useAccordionIndicatorAnimation } from \"../hooks\";\nimport { getAccordionFocusDirection } from \"../utils\";\n\nexport const AccordionTrigger = memo(function AccordionTrigger({\n accessibilityState,\n onBlur,\n children,\n disabled,\n hideIndicator = false,\n indicator,\n onFocus,\n onKeyDown,\n onPress,\n style,\n ...props\n}: AccordionTriggerProps) {\n const { focusTrigger, registerTrigger, toggleItem } = useAccordionContext();\n const item = useAccordionItemContext();\n const [focused, setFocused] = useState(false);\n // The host ref is required for roving keyboard focus between triggers.\n const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);\n const tokens = useComponentsTokens().accordion;\n const resolvedDisabled = item.disabled || disabled === true;\n const indicatorStyle = useAccordionIndicatorAnimation({\n duration: tokens.animationDuration,\n open: item.open,\n });\n const styles = useThemedStyles(\n themedStyles,\n { focused, disabled: resolvedDisabled },\n [focused, resolvedDisabled],\n );\n\n const resolvedAccessibilityState = useMemo(\n () => ({\n ...accessibilityState,\n disabled: resolvedDisabled,\n expanded: item.open,\n }),\n [accessibilityState, item.open, resolvedDisabled],\n );\n const triggerStyle = useCallback(\n ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [\n styles.trigger,\n pressed ? styles.triggerPressed : undefined,\n typeof style === \"function\" ? style({ pressed }) : style,\n ],\n [style, styles.trigger, styles.triggerPressed],\n );\n\n const handleBlur = useEventCallback<NonNullable<PressableProps[\"onBlur\"]>>(\n (event) => {\n setFocused(false);\n onBlur?.(event);\n },\n );\n\n const handleFocus = useEventCallback<NonNullable<PressableProps[\"onFocus\"]>>(\n (event) => {\n setFocused(true);\n onFocus?.(event);\n },\n );\n\n const handlePress = useEventCallback((event: GestureResponderEvent) => {\n toggleItem(item.value);\n onPress?.(event);\n });\n\n const handleKeyDown = useEventCallback((event: AccordionKeyDownEvent) => {\n onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) return;\n\n const direction = getAccordionFocusDirection(event.nativeEvent.key);\n\n if (direction) {\n event.preventDefault();\n focusTrigger(item.value, direction);\n }\n });\n\n const webInteractionProps = useMemo(\n () =>\n Platform.OS === \"web\"\n ? ({\n \"aria-controls\": item.contentId,\n onKeyDown: handleKeyDown,\n } as PressableProps)\n : undefined,\n [handleKeyDown, item.contentId],\n );\n\n useEffect(\n () =>\n registerTrigger({\n disabled: resolvedDisabled,\n ref: triggerRef,\n value: item.value,\n }),\n [item.value, registerTrigger, resolvedDisabled],\n );\n\n return (\n <Pressable\n {...props}\n {...webInteractionProps}\n ref={triggerRef}\n aria-expanded={item.open}\n accessibilityRole=\"button\"\n accessibilityState={resolvedAccessibilityState}\n disabled={resolvedDisabled}\n focusable={!resolvedDisabled}\n nativeID={item.triggerId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onPress={handlePress}\n style={triggerStyle}\n >\n <View flex={1} pointerEvents=\"none\">\n {typeof children === \"string\" || typeof children === \"number\" ? (\n <Typography.Label style={styles.title}>{children}</Typography.Label>\n ) : (\n children\n )}\n </View>\n\n {hideIndicator ? null : (\n <Animated.View pointerEvents=\"none\" style={indicatorStyle}>\n {indicator ?? (\n <Icon\n color={resolvedDisabled ? tokens.disabledColor : tokens.iconColor}\n icon={CaretDownIcon}\n size={tokens.iconSize}\n />\n )}\n </Animated.View>\n )}\n </Pressable>\n );\n});\n\ninterface AccordionTriggerThemeProps {\n disabled: boolean;\n focused: boolean;\n}\n\nfunction themedStyles(theme: AppTheme, props: AccordionTriggerThemeProps) {\n const { disabled, focused } = props;\n const accordionTokens = theme.components.accordion;\n\n return StyleSheet.create({\n title: {\n color: disabled\n ? accordionTokens.disabledColor\n : accordionTokens.titleColor,\n },\n trigger: {\n alignItems: \"center\",\n backgroundColor: focused\n ? accordionTokens.focusBackgroundColor\n : \"transparent\",\n flexDirection: \"row\",\n gap: accordionTokens.trigger.gap,\n justifyContent: \"space-between\",\n minHeight: accordionTokens.trigger.minHeight,\n opacity: disabled ? accordionTokens.disabledOpacity : 1,\n paddingHorizontal: accordionTokens.trigger.paddingHorizontal,\n paddingVertical: accordionTokens.trigger.paddingVertical,\n },\n triggerPressed: {\n opacity: disabled\n ? accordionTokens.disabledOpacity\n : accordionTokens.pressedOpacity,\n },\n });\n}\n"],"mappings":"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","names":["AccordionTrigger"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/accordion",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Accessible animated accordion components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
],
|
|
30
30
|
"sideEffects": false,
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@impulse-ui-native/core": "
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/
|
|
35
|
-
"@impulse-ui-native/
|
|
32
|
+
"@impulse-ui-native/core": "3.0.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "3.0.0",
|
|
34
|
+
"@impulse-ui-native/theme": "3.0.0",
|
|
35
|
+
"@impulse-ui-native/icon": "3.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@types/react": "~19.2.14",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"react-native-reanimated": "4.5.1",
|
|
44
44
|
"react-native-worklets": "0.10.1",
|
|
45
45
|
"typescript": "~6.0.3",
|
|
46
|
-
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
47
46
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
47
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
48
48
|
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|