@impulse-ui-native/accordion 2.9.0 → 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.
|
@@ -6,7 +6,11 @@ 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 {
|
|
9
|
+
import {
|
|
10
|
+
getControlStateTokens,
|
|
11
|
+
useComponentsTokens,
|
|
12
|
+
useThemedStyles
|
|
13
|
+
} from "@impulse-ui-native/theme";
|
|
10
14
|
import { useAccordionContext, useAccordionItemContext } from "../contexts";
|
|
11
15
|
import { useAccordionIndicatorAnimation } from "../hooks";
|
|
12
16
|
import { getAccordionFocusDirection } from "../utils";
|
|
@@ -115,7 +119,7 @@ const AccordionTrigger = memo(function AccordionTrigger2({
|
|
|
115
119
|
hideIndicator ? null : /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: indicatorStyle, children: indicator ?? /* @__PURE__ */ jsx(
|
|
116
120
|
Icon,
|
|
117
121
|
{
|
|
118
|
-
color:
|
|
122
|
+
color: styles.icon.color,
|
|
119
123
|
icon: CaretDownIcon,
|
|
120
124
|
size: tokens.iconSize
|
|
121
125
|
}
|
|
@@ -127,23 +131,30 @@ const AccordionTrigger = memo(function AccordionTrigger2({
|
|
|
127
131
|
function themedStyles(theme, props) {
|
|
128
132
|
const { disabled, focused } = props;
|
|
129
133
|
const accordionTokens = theme.components.accordion;
|
|
134
|
+
const appearanceTokens = getControlStateTokens(
|
|
135
|
+
accordionTokens.trigger.states,
|
|
136
|
+
{ disabled, focused }
|
|
137
|
+
);
|
|
130
138
|
return StyleSheet.create({
|
|
131
139
|
title: {
|
|
132
|
-
color:
|
|
140
|
+
color: appearanceTokens.titleColor
|
|
141
|
+
},
|
|
142
|
+
icon: {
|
|
143
|
+
color: appearanceTokens.iconColor
|
|
133
144
|
},
|
|
134
145
|
trigger: {
|
|
135
146
|
alignItems: "center",
|
|
136
|
-
backgroundColor:
|
|
147
|
+
backgroundColor: appearanceTokens.backgroundColor,
|
|
137
148
|
flexDirection: "row",
|
|
138
149
|
gap: accordionTokens.trigger.gap,
|
|
139
150
|
justifyContent: "space-between",
|
|
140
151
|
minHeight: accordionTokens.trigger.minHeight,
|
|
141
|
-
opacity:
|
|
152
|
+
opacity: appearanceTokens.opacity,
|
|
142
153
|
paddingHorizontal: accordionTokens.trigger.paddingHorizontal,
|
|
143
154
|
paddingVertical: accordionTokens.trigger.paddingVertical
|
|
144
155
|
},
|
|
145
156
|
triggerPressed: {
|
|
146
|
-
opacity:
|
|
157
|
+
opacity: appearanceTokens.pressedOpacity
|
|
147
158
|
}
|
|
148
159
|
});
|
|
149
160
|
}
|
|
@@ -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 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 {
|
|
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 {\n getControlStateTokens,\n useComponentsTokens,\n useThemedStyles,\n} 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={styles.icon.color}\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 const appearanceTokens = getControlStateTokens(\n accordionTokens.trigger.states,\n { disabled, focused },\n );\n\n return StyleSheet.create({\n title: {\n color: appearanceTokens.titleColor,\n },\n icon: {\n color: appearanceTokens.iconColor,\n },\n trigger: {\n alignItems: \"center\",\n backgroundColor: appearanceTokens.backgroundColor,\n flexDirection: \"row\",\n gap: accordionTokens.trigger.gap,\n justifyContent: \"space-between\",\n minHeight: accordionTokens.trigger.minHeight,\n opacity: appearanceTokens.opacity,\n paddingHorizontal: accordionTokens.trigger.paddingHorizontal,\n paddingVertical: accordionTokens.trigger.paddingVertical,\n },\n triggerPressed: {\n opacity: appearanceTokens.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": "4.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/
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/primitives": "
|
|
35
|
-
"@impulse-ui-native/theme": "
|
|
32
|
+
"@impulse-ui-native/core": "4.0.0",
|
|
33
|
+
"@impulse-ui-native/icon": "4.0.0",
|
|
34
|
+
"@impulse-ui-native/primitives": "4.0.0",
|
|
35
|
+
"@impulse-ui-native/theme": "4.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@types/react": "~19.2.14",
|