@ankhorage/surface 9.4.8 → 9.4.10
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 +12 -0
- package/README.md +1 -1
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.d.ts.map +1 -1
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.js +7 -13
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.js.map +1 -1
- package/dist/features/form/radio/adapters/inbound/Radio.d.ts.map +1 -1
- package/dist/features/form/radio/adapters/inbound/Radio.js +7 -13
- package/dist/features/form/radio/adapters/inbound/Radio.js.map +1 -1
- package/dist/internal/resolvers/index.d.ts +1 -0
- package/dist/internal/resolvers/index.d.ts.map +1 -1
- package/dist/internal/resolvers/index.js +1 -0
- package/dist/internal/resolvers/index.js.map +1 -1
- package/dist/internal/resolvers/resolveSelectionControlInteractionState.d.ts +23 -0
- package/dist/internal/resolvers/resolveSelectionControlInteractionState.d.ts.map +1 -0
- package/dist/internal/resolvers/resolveSelectionControlInteractionState.js +28 -0
- package/dist/internal/resolvers/resolveSelectionControlInteractionState.js.map +1 -0
- package/package.json +4 -4
- package/src/features/form/checkbox/adapters/inbound/Checkbox.tsx +12 -19
- package/src/features/form/radio/adapters/inbound/Radio.tsx +7 -15
- package/src/internal/resolvers/index.ts +1 -0
- package/src/internal/resolvers/resolveSelectionControlInteractionState.test.ts +45 -0
- package/src/internal/resolvers/resolveSelectionControlInteractionState.ts +54 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @ankhorage/surface
|
|
2
2
|
|
|
3
|
+
## 9.4.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9fbc14b: Update dependencies: `@ankhorage/contracts`.
|
|
8
|
+
|
|
9
|
+
## 9.4.9
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 0e83779: Update dependencies: `@ankhorage/utility`.
|
|
14
|
+
|
|
3
15
|
## 9.4.8
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
# @ankhorage/surface
|
|
5
5
|
|
|
6
|
-
         
|
|
7
7
|
|
|
8
8
|
Cross-platform UI foundation for React Native and React Native Web. Provides theming, layout primitives, and core building blocks for modern apps.
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/checkbox/adapters/inbound/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/checkbox/adapters/inbound/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AASnE,iEAAiE;AACjE,wBAAgB,QAAQ,CAAC,EACvB,kBAAkB,EAClB,OAAO,EACP,QAAQ,EACR,KAAiB,EACjB,cAAsB,EACtB,QAAgB,EAChB,OAAe,EACf,eAAe,EACf,QAAgB,EAChB,IAAU,EACV,MAAM,EACN,GAAG,WAAW,EACf,EAAE,aAAa,qBAyBf"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { resolveSelectionControlInteractionState, resolveSelectionControlNextChecked, } from '../../../../../internal/resolvers';
|
|
3
3
|
import { useControllableState } from '../../../../../internal/useControllableState';
|
|
4
4
|
import { View } from '../../../../layout/public';
|
|
5
5
|
import { Pressable } from '../../../../pressable/public';
|
|
@@ -41,22 +41,16 @@ function CheckboxControl({ accessibilityLabel, buttonProps, children, color, dis
|
|
|
41
41
|
}
|
|
42
42
|
/*** Renders the checkbox indicator and optional label for one interaction state. */
|
|
43
43
|
function renderCheckboxContent(input) {
|
|
44
|
-
const {
|
|
45
|
-
|
|
44
|
+
const { colors, fieldState, indicatorSize, labelEmphasis } = resolveSelectionControlInteractionState({
|
|
45
|
+
checked: input.isChecked,
|
|
46
|
+
color: input.color,
|
|
46
47
|
disabled: input.disabled,
|
|
47
|
-
|
|
48
|
+
interactionState: input.interactionState,
|
|
48
49
|
invalid: input.invalid,
|
|
49
50
|
readOnly: input.readOnly,
|
|
51
|
+
size: input.size,
|
|
52
|
+
theme: input.theme,
|
|
50
53
|
});
|
|
51
|
-
const colors = resolveSelectionControlColors(theme, {
|
|
52
|
-
checked: input.isChecked,
|
|
53
|
-
fieldState,
|
|
54
|
-
hovered: interactionState.hovered,
|
|
55
|
-
pressed: interactionState.pressed,
|
|
56
|
-
color: input.color,
|
|
57
|
-
});
|
|
58
|
-
const indicatorSize = resolveIndicatorSize(input.size);
|
|
59
|
-
const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
|
|
60
54
|
const indicatorColor = fieldState.invalid ? 'error' : input.color;
|
|
61
55
|
return (<View style={resolveSelectionRowStyle(colors.opacity)}>
|
|
62
56
|
<View radius="s" style={resolveCheckboxIndicatorStyle(colors.backgroundColor, colors.borderColor, indicatorSize.checkbox)}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../src/features/form/checkbox/adapters/inbound/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../src/features/form/checkbox/adapters/inbound/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\n\nimport {\n resolveSelectionControlInteractionState,\n resolveSelectionControlNextChecked,\n} from '../../../../../internal/resolvers';\nimport { useControllableState } from '../../../../../internal/useControllableState';\nimport type { CheckboxProps } from '../../../../../types/checkbox';\nimport type { InteractionState } from '../../../../../types/pressable';\nimport type { SurfaceTheme } from '../../../../../types/theme';\nimport { View } from '../../../../layout/public';\nimport type { PressableProps } from '../../../../pressable/public';\nimport { Pressable } from '../../../../pressable/public';\nimport { useTheme } from '../../../../theme/runtime';\nimport { Text } from '../../../../typography/public';\n\n/*** Renders a controlled or uncontrolled accessible checkbox. */\nexport function Checkbox({\n accessibilityLabel,\n checked,\n children,\n color = 'primary',\n defaultChecked = false,\n disabled = false,\n invalid = false,\n onCheckedChange,\n readOnly = false,\n size = 'm',\n testID,\n ...buttonProps\n}: CheckboxProps) {\n const { theme } = useTheme();\n const [isChecked, setChecked] = useControllableState<boolean>({\n value: checked,\n defaultValue: defaultChecked,\n onChange: onCheckedChange,\n });\n\n return (\n <CheckboxControl\n accessibilityLabel={accessibilityLabel}\n buttonProps={buttonProps}\n color={color}\n disabled={disabled}\n invalid={invalid}\n isChecked={isChecked}\n readOnly={readOnly}\n setChecked={setChecked}\n size={size}\n testID={testID}\n theme={theme}\n >\n {children}\n </CheckboxControl>\n );\n}\n\n/*** Owns the checkbox interaction boundary around resolved selection content. */\nfunction CheckboxControl({\n accessibilityLabel,\n buttonProps,\n children,\n color,\n disabled,\n invalid,\n isChecked,\n readOnly,\n setChecked,\n size,\n testID,\n theme,\n}: CheckboxControlProps) {\n const nextChecked = resolveSelectionControlNextChecked({\n checked: isChecked,\n disabled,\n kind: 'checkbox',\n readOnly,\n });\n\n return (\n <Pressable\n {...buttonProps}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"checkbox\"\n accessibilityState={{ checked: isChecked }}\n disabled={disabled}\n onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}\n testID={testID}\n >\n {(interactionState) =>\n renderCheckboxContent({\n children,\n color,\n disabled,\n interactionState,\n invalid,\n isChecked,\n readOnly,\n size,\n theme,\n })\n }\n </Pressable>\n );\n}\n\n/*** Renders the checkbox indicator and optional label for one interaction state. */\nfunction renderCheckboxContent(input: CheckboxContentInput) {\n const { colors, fieldState, indicatorSize, labelEmphasis } =\n resolveSelectionControlInteractionState({\n checked: input.isChecked,\n color: input.color,\n disabled: input.disabled,\n interactionState: input.interactionState,\n invalid: input.invalid,\n readOnly: input.readOnly,\n size: input.size,\n theme: input.theme,\n });\n const indicatorColor = fieldState.invalid ? 'error' : input.color;\n\n return (\n <View style={resolveSelectionRowStyle(colors.opacity)}>\n <View\n radius=\"s\"\n style={resolveCheckboxIndicatorStyle(\n colors.backgroundColor,\n colors.borderColor,\n indicatorSize.checkbox,\n )}\n >\n {input.isChecked ? (\n <Text\n color={input.disabled ? undefined : indicatorColor}\n emphasis={input.disabled ? 'muted' : 'inverse'}\n variant=\"caption\"\n weight=\"bold\"\n >\n ✓\n </Text>\n ) : null}\n </View>\n {input.children ? (\n <View ml=\"s\">\n <Text emphasis={labelEmphasis}>{input.children}</Text>\n </View>\n ) : null}\n </View>\n );\n}\n\n/*** Resolves the horizontal selection-control row style. */\nfunction resolveSelectionRowStyle(opacity: number | undefined): ViewStyle {\n return { alignItems: 'center', flexDirection: 'row', opacity };\n}\n\n/*** Resolves checkbox indicator dimensions and interaction colors. */\nfunction resolveCheckboxIndicatorStyle(\n backgroundColor: string,\n borderColor: string,\n size: number,\n): ViewStyle {\n return {\n alignItems: 'center',\n backgroundColor,\n borderColor,\n borderWidth: 1.5,\n height: size,\n justifyContent: 'center',\n width: size,\n };\n}\n\ninterface CheckboxControlProps {\n accessibilityLabel: CheckboxProps['accessibilityLabel'];\n buttonProps: PressableProps;\n children: CheckboxProps['children'];\n color: NonNullable<CheckboxProps['color']>;\n disabled: boolean;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n setChecked: (checked: boolean) => void;\n size: NonNullable<CheckboxProps['size']>;\n testID: CheckboxProps['testID'];\n theme: SurfaceTheme;\n}\n\ninterface CheckboxContentInput {\n children: CheckboxProps['children'];\n color: NonNullable<CheckboxProps['color']>;\n disabled: boolean;\n interactionState: InteractionState;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n size: NonNullable<CheckboxProps['size']>;\n theme: SurfaceTheme;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAS7D,mFAAmF;AACnF,wBAAgB,KAAK,CAAC,EACpB,kBAAkB,EAClB,OAAO,EACP,QAAQ,EACR,KAAiB,EACjB,cAAsB,EACtB,QAAgB,EAChB,OAAe,EACf,eAAe,EACf,QAAgB,EAChB,IAAU,EACV,MAAM,EACN,GAAG,WAAW,EACf,EAAE,UAAU,qBAyBZ"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { resolveSelectionControlInteractionState, resolveSelectionControlNextChecked, } from '../../../../../internal/resolvers';
|
|
3
3
|
import { useControllableState } from '../../../../../internal/useControllableState';
|
|
4
4
|
import { View } from '../../../../layout/public';
|
|
5
5
|
import { Pressable } from '../../../../pressable/public';
|
|
@@ -42,22 +42,16 @@ function RadioControl({ accessibilityLabel, buttonProps, children, color, disabl
|
|
|
42
42
|
}
|
|
43
43
|
/*** Renders the radio indicator and optional content for one interaction state. */
|
|
44
44
|
function renderRadioContent(input) {
|
|
45
|
-
const {
|
|
46
|
-
|
|
45
|
+
const { colors, indicatorSize, labelEmphasis } = resolveSelectionControlInteractionState({
|
|
46
|
+
checked: input.isChecked,
|
|
47
|
+
color: input.color,
|
|
47
48
|
disabled: input.disabled,
|
|
48
|
-
|
|
49
|
+
interactionState: input.interactionState,
|
|
49
50
|
invalid: input.invalid,
|
|
50
51
|
readOnly: input.readOnly,
|
|
52
|
+
size: input.size,
|
|
53
|
+
theme: input.theme,
|
|
51
54
|
});
|
|
52
|
-
const colors = resolveSelectionControlColors(theme, {
|
|
53
|
-
checked: input.isChecked,
|
|
54
|
-
fieldState,
|
|
55
|
-
hovered: interactionState.hovered,
|
|
56
|
-
pressed: interactionState.pressed,
|
|
57
|
-
color: input.color,
|
|
58
|
-
});
|
|
59
|
-
const indicatorSize = resolveIndicatorSize(input.size);
|
|
60
|
-
const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
|
|
61
55
|
const hasContent = input.children !== undefined && input.children !== null && input.children !== false;
|
|
62
56
|
return (<View style={resolveSelectionRowStyle(colors.opacity)}>
|
|
63
57
|
<View radius="full" style={resolveRadioIndicatorStyle(colors.backgroundColor, colors.borderColor, indicatorSize.radio)}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\n\nimport {\n resolveFieldState,\n resolveIndicatorSize,\n resolveSelectionControlColors,\n resolveSelectionControlNextChecked,\n} from '../../../../../internal/resolvers';\nimport { useControllableState } from '../../../../../internal/useControllableState';\nimport type { InteractionState } from '../../../../../types/pressable';\nimport type { RadioProps } from '../../../../../types/radio';\nimport type { SurfaceTheme } from '../../../../../types/theme';\nimport { View } from '../../../../layout/public';\nimport type { PressableProps } from '../../../../pressable/public';\nimport { Pressable } from '../../../../pressable/public';\nimport { useTheme } from '../../../../theme/runtime';\nimport { Text } from '../../../../typography/public';\nimport { isRadioTextContent } from '../../utils/isRadioTextContent';\n\n/*** Renders one accessible radio control with text or structured label content. */\nexport function Radio({\n accessibilityLabel,\n checked,\n children,\n color = 'primary',\n defaultChecked = false,\n disabled = false,\n invalid = false,\n onCheckedChange,\n readOnly = false,\n size = 'm',\n testID,\n ...buttonProps\n}: RadioProps) {\n const { theme } = useTheme();\n const [isChecked, setChecked] = useControllableState<boolean>({\n value: checked,\n defaultValue: defaultChecked,\n onChange: onCheckedChange,\n });\n\n return (\n <RadioControl\n accessibilityLabel={accessibilityLabel}\n buttonProps={buttonProps}\n color={color}\n disabled={disabled}\n invalid={invalid}\n isChecked={isChecked}\n readOnly={readOnly}\n setChecked={setChecked}\n size={size}\n testID={testID}\n theme={theme}\n >\n {children}\n </RadioControl>\n );\n}\n\n/*** Owns the radio interaction boundary around resolved selection content. */\nfunction RadioControl({\n accessibilityLabel,\n buttonProps,\n children,\n color,\n disabled,\n invalid,\n isChecked,\n readOnly,\n setChecked,\n size,\n testID,\n theme,\n}: RadioControlProps) {\n const nextChecked = resolveSelectionControlNextChecked({\n checked: isChecked,\n disabled,\n kind: 'radio',\n readOnly,\n });\n\n return (\n <Pressable\n {...buttonProps}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"radio\"\n accessibilityState={{ checked: isChecked }}\n disabled={disabled}\n onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}\n testID={testID}\n >\n {(interactionState) =>\n renderRadioContent({\n children,\n color,\n disabled,\n interactionState,\n invalid,\n isChecked,\n readOnly,\n size,\n theme,\n })\n }\n </Pressable>\n );\n}\n\n/*** Renders the radio indicator and optional content for one interaction state. */\nfunction renderRadioContent(input: RadioContentInput) {\n const { interactionState, theme } = input;\n const fieldState = resolveFieldState({\n disabled: input.disabled,\n focused: interactionState.focused,\n invalid: input.invalid,\n readOnly: input.readOnly,\n });\n const colors = resolveSelectionControlColors(theme, {\n checked: input.isChecked,\n fieldState,\n hovered: interactionState.hovered,\n pressed: interactionState.pressed,\n color: input.color,\n });\n const indicatorSize = resolveIndicatorSize(input.size);\n const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';\n const hasContent =\n input.children !== undefined && input.children !== null && input.children !== false;\n\n return (\n <View style={resolveSelectionRowStyle(colors.opacity)}>\n <View\n radius=\"full\"\n style={resolveRadioIndicatorStyle(\n colors.backgroundColor,\n colors.borderColor,\n indicatorSize.radio,\n )}\n >\n {input.isChecked ? (\n <View\n radius=\"full\"\n style={resolveRadioDotStyle(colors.indicatorColor, indicatorSize.radioDot)}\n />\n ) : null}\n </View>\n {hasContent ? (\n <View flex={1} ml=\"s\">\n {isRadioTextContent(input.children) ? (\n <Text emphasis={labelEmphasis}>{input.children}</Text>\n ) : (\n input.children\n )}\n </View>\n ) : null}\n </View>\n );\n}\n\n/*** Resolves the horizontal selection-control row style. */\nfunction resolveSelectionRowStyle(opacity: number | undefined): ViewStyle {\n return { alignItems: 'center', flexDirection: 'row', opacity };\n}\n\n/*** Resolves radio indicator dimensions and interaction colors. */\nfunction resolveRadioIndicatorStyle(\n backgroundColor: string,\n borderColor: string,\n size: number,\n): ViewStyle {\n return {\n alignItems: 'center',\n backgroundColor,\n borderColor,\n borderWidth: 1.5,\n height: size,\n justifyContent: 'center',\n width: size,\n };\n}\n\n/*** Resolves the checked radio dot style. */\nfunction resolveRadioDotStyle(backgroundColor: string, size: number): ViewStyle {\n return { backgroundColor, height: size, width: size };\n}\n\ninterface RadioControlProps {\n accessibilityLabel: RadioProps['accessibilityLabel'];\n buttonProps: PressableProps;\n children: RadioProps['children'];\n color: NonNullable<RadioProps['color']>;\n disabled: boolean;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n setChecked: (checked: boolean) => void;\n size: NonNullable<RadioProps['size']>;\n testID: RadioProps['testID'];\n theme: SurfaceTheme;\n}\n\ninterface RadioContentInput {\n children: RadioProps['children'];\n color: NonNullable<RadioProps['color']>;\n disabled: boolean;\n interactionState: InteractionState;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n size: NonNullable<RadioProps['size']>;\n theme: SurfaceTheme;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\n\nimport {\n resolveSelectionControlInteractionState,\n resolveSelectionControlNextChecked,\n} from '../../../../../internal/resolvers';\nimport { useControllableState } from '../../../../../internal/useControllableState';\nimport type { InteractionState } from '../../../../../types/pressable';\nimport type { RadioProps } from '../../../../../types/radio';\nimport type { SurfaceTheme } from '../../../../../types/theme';\nimport { View } from '../../../../layout/public';\nimport type { PressableProps } from '../../../../pressable/public';\nimport { Pressable } from '../../../../pressable/public';\nimport { useTheme } from '../../../../theme/runtime';\nimport { Text } from '../../../../typography/public';\nimport { isRadioTextContent } from '../../utils/isRadioTextContent';\n\n/*** Renders one accessible radio control with text or structured label content. */\nexport function Radio({\n accessibilityLabel,\n checked,\n children,\n color = 'primary',\n defaultChecked = false,\n disabled = false,\n invalid = false,\n onCheckedChange,\n readOnly = false,\n size = 'm',\n testID,\n ...buttonProps\n}: RadioProps) {\n const { theme } = useTheme();\n const [isChecked, setChecked] = useControllableState<boolean>({\n value: checked,\n defaultValue: defaultChecked,\n onChange: onCheckedChange,\n });\n\n return (\n <RadioControl\n accessibilityLabel={accessibilityLabel}\n buttonProps={buttonProps}\n color={color}\n disabled={disabled}\n invalid={invalid}\n isChecked={isChecked}\n readOnly={readOnly}\n setChecked={setChecked}\n size={size}\n testID={testID}\n theme={theme}\n >\n {children}\n </RadioControl>\n );\n}\n\n/*** Owns the radio interaction boundary around resolved selection content. */\nfunction RadioControl({\n accessibilityLabel,\n buttonProps,\n children,\n color,\n disabled,\n invalid,\n isChecked,\n readOnly,\n setChecked,\n size,\n testID,\n theme,\n}: RadioControlProps) {\n const nextChecked = resolveSelectionControlNextChecked({\n checked: isChecked,\n disabled,\n kind: 'radio',\n readOnly,\n });\n\n return (\n <Pressable\n {...buttonProps}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"radio\"\n accessibilityState={{ checked: isChecked }}\n disabled={disabled}\n onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}\n testID={testID}\n >\n {(interactionState) =>\n renderRadioContent({\n children,\n color,\n disabled,\n interactionState,\n invalid,\n isChecked,\n readOnly,\n size,\n theme,\n })\n }\n </Pressable>\n );\n}\n\n/*** Renders the radio indicator and optional content for one interaction state. */\nfunction renderRadioContent(input: RadioContentInput) {\n const { colors, indicatorSize, labelEmphasis } = resolveSelectionControlInteractionState({\n checked: input.isChecked,\n color: input.color,\n disabled: input.disabled,\n interactionState: input.interactionState,\n invalid: input.invalid,\n readOnly: input.readOnly,\n size: input.size,\n theme: input.theme,\n });\n const hasContent =\n input.children !== undefined && input.children !== null && input.children !== false;\n\n return (\n <View style={resolveSelectionRowStyle(colors.opacity)}>\n <View\n radius=\"full\"\n style={resolveRadioIndicatorStyle(\n colors.backgroundColor,\n colors.borderColor,\n indicatorSize.radio,\n )}\n >\n {input.isChecked ? (\n <View\n radius=\"full\"\n style={resolveRadioDotStyle(colors.indicatorColor, indicatorSize.radioDot)}\n />\n ) : null}\n </View>\n {hasContent ? (\n <View flex={1} ml=\"s\">\n {isRadioTextContent(input.children) ? (\n <Text emphasis={labelEmphasis}>{input.children}</Text>\n ) : (\n input.children\n )}\n </View>\n ) : null}\n </View>\n );\n}\n\n/*** Resolves the horizontal selection-control row style. */\nfunction resolveSelectionRowStyle(opacity: number | undefined): ViewStyle {\n return { alignItems: 'center', flexDirection: 'row', opacity };\n}\n\n/*** Resolves radio indicator dimensions and interaction colors. */\nfunction resolveRadioIndicatorStyle(\n backgroundColor: string,\n borderColor: string,\n size: number,\n): ViewStyle {\n return {\n alignItems: 'center',\n backgroundColor,\n borderColor,\n borderWidth: 1.5,\n height: size,\n justifyContent: 'center',\n width: size,\n };\n}\n\n/*** Resolves the checked radio dot style. */\nfunction resolveRadioDotStyle(backgroundColor: string, size: number): ViewStyle {\n return { backgroundColor, height: size, width: size };\n}\n\ninterface RadioControlProps {\n accessibilityLabel: RadioProps['accessibilityLabel'];\n buttonProps: PressableProps;\n children: RadioProps['children'];\n color: NonNullable<RadioProps['color']>;\n disabled: boolean;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n setChecked: (checked: boolean) => void;\n size: NonNullable<RadioProps['size']>;\n testID: RadioProps['testID'];\n theme: SurfaceTheme;\n}\n\ninterface RadioContentInput {\n children: RadioProps['children'];\n color: NonNullable<RadioProps['color']>;\n disabled: boolean;\n interactionState: InteractionState;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n size: NonNullable<RadioProps['size']>;\n theme: SurfaceTheme;\n}\n"]}
|
|
@@ -10,6 +10,7 @@ export * from './resolveOverlayAnimation';
|
|
|
10
10
|
export * from './resolveOverlayZIndex';
|
|
11
11
|
export * from './resolveSelectionControlBehavior';
|
|
12
12
|
export * from './resolveSelectionControlColors';
|
|
13
|
+
export * from './resolveSelectionControlInteractionState';
|
|
13
14
|
export * from './resolveSurfaceColor';
|
|
14
15
|
export * from './resolveTextColor';
|
|
15
16
|
export * from './resolveTextStyles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}
|
|
@@ -10,6 +10,7 @@ export * from './resolveOverlayAnimation';
|
|
|
10
10
|
export * from './resolveOverlayZIndex';
|
|
11
11
|
export * from './resolveSelectionControlBehavior';
|
|
12
12
|
export * from './resolveSelectionControlColors';
|
|
13
|
+
export * from './resolveSelectionControlInteractionState';
|
|
13
14
|
export * from './resolveSurfaceColor';
|
|
14
15
|
export * from './resolveTextColor';
|
|
15
16
|
export * from './resolveTextStyles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/internal/resolvers/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './resolveControlSize';\nexport * from './resolveFieldPresentation';\nexport * from './resolveFieldState';\nexport * from './resolveFocusRingStyles';\nexport * from './resolveIconSize';\nexport * from './resolveIndicatorSize';\nexport * from './resolveInteractiveColors';\nexport * from './resolveInteractiveState';\nexport * from './resolveOverlayAnimation';\nexport * from './resolveOverlayZIndex';\nexport * from './resolveSelectionControlBehavior';\nexport * from './resolveSelectionControlColors';\nexport * from './resolveSurfaceColor';\nexport * from './resolveTextColor';\nexport * from './resolveTextStyles';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/internal/resolvers/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './resolveControlSize';\nexport * from './resolveFieldPresentation';\nexport * from './resolveFieldState';\nexport * from './resolveFocusRingStyles';\nexport * from './resolveIconSize';\nexport * from './resolveIndicatorSize';\nexport * from './resolveInteractiveColors';\nexport * from './resolveInteractiveState';\nexport * from './resolveOverlayAnimation';\nexport * from './resolveOverlayZIndex';\nexport * from './resolveSelectionControlBehavior';\nexport * from './resolveSelectionControlColors';\nexport * from './resolveSelectionControlInteractionState';\nexport * from './resolveSurfaceColor';\nexport * from './resolveTextColor';\nexport * from './resolveTextStyles';\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ControlSize } from '../../types/control';
|
|
2
|
+
import type { InteractionState } from '../../types/pressable';
|
|
3
|
+
import type { SurfaceColor } from '../../types/surfaceColor';
|
|
4
|
+
import type { SurfaceTheme } from '../../types/theme';
|
|
5
|
+
interface ResolveSelectionControlInteractionStateInput {
|
|
6
|
+
checked: boolean;
|
|
7
|
+
color: SurfaceColor;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
interactionState: InteractionState;
|
|
10
|
+
invalid: boolean;
|
|
11
|
+
readOnly: boolean;
|
|
12
|
+
size: ControlSize;
|
|
13
|
+
theme: SurfaceTheme;
|
|
14
|
+
}
|
|
15
|
+
/*** Resolves the visual interaction state shared by checkbox and radio controls. */
|
|
16
|
+
export declare function resolveSelectionControlInteractionState({ checked, color, disabled, interactionState, invalid, readOnly, size, theme, }: ResolveSelectionControlInteractionStateInput): {
|
|
17
|
+
colors: import("./resolveSelectionControlColors").ResolvedSelectionControlColors;
|
|
18
|
+
fieldState: import("./resolveFieldState").FieldState;
|
|
19
|
+
indicatorSize: import("./resolveIndicatorSize").ResolvedIndicatorSize;
|
|
20
|
+
labelEmphasis: "default" | "muted";
|
|
21
|
+
};
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=resolveSelectionControlInteractionState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveSelectionControlInteractionState.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveSelectionControlInteractionState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,UAAU,4CAA4C;IACpD,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,oFAAoF;AACpF,wBAAgB,uCAAuC,CAAC,EACtD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,GACN,EAAE,4CAA4C;;;;;EAwB9C"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { resolveFieldState } from './resolveFieldState';
|
|
2
|
+
import { resolveIndicatorSize } from './resolveIndicatorSize';
|
|
3
|
+
import { resolveSelectionControlColors } from './resolveSelectionControlColors';
|
|
4
|
+
/*** Resolves the visual interaction state shared by checkbox and radio controls. */
|
|
5
|
+
export function resolveSelectionControlInteractionState({ checked, color, disabled, interactionState, invalid, readOnly, size, theme, }) {
|
|
6
|
+
const fieldState = resolveFieldState({
|
|
7
|
+
disabled,
|
|
8
|
+
focused: interactionState.focused,
|
|
9
|
+
invalid,
|
|
10
|
+
readOnly,
|
|
11
|
+
});
|
|
12
|
+
const colors = resolveSelectionControlColors(theme, {
|
|
13
|
+
checked,
|
|
14
|
+
color,
|
|
15
|
+
fieldState,
|
|
16
|
+
hovered: interactionState.hovered,
|
|
17
|
+
pressed: interactionState.pressed,
|
|
18
|
+
});
|
|
19
|
+
return {
|
|
20
|
+
colors,
|
|
21
|
+
fieldState,
|
|
22
|
+
indicatorSize: resolveIndicatorSize(size),
|
|
23
|
+
labelEmphasis: colors.labelColor === theme.semantics.content.muted
|
|
24
|
+
? 'muted'
|
|
25
|
+
: 'default',
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=resolveSelectionControlInteractionState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveSelectionControlInteractionState.js","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveSelectionControlInteractionState.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAahF,oFAAoF;AACpF,MAAM,UAAU,uCAAuC,CAAC,EACtD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,GACwC;IAC7C,MAAM,UAAU,GAAG,iBAAiB,CAAC;QACnC,QAAQ;QACR,OAAO,EAAE,gBAAgB,CAAC,OAAO;QACjC,OAAO;QACP,QAAQ;KACT,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,6BAA6B,CAAC,KAAK,EAAE;QAClD,OAAO;QACP,KAAK;QACL,UAAU;QACV,OAAO,EAAE,gBAAgB,CAAC,OAAO;QACjC,OAAO,EAAE,gBAAgB,CAAC,OAAO;KAClC,CAAC,CAAC;IAEH,OAAO;QACL,MAAM;QACN,UAAU;QACV,aAAa,EAAE,oBAAoB,CAAC,IAAI,CAAC;QACzC,aAAa,EACX,MAAM,CAAC,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACjD,CAAC,CAAE,OAAiB;YACpB,CAAC,CAAE,SAAmB;KAC3B,CAAC;AACJ,CAAC","sourcesContent":["import type { ControlSize } from '../../types/control';\nimport type { InteractionState } from '../../types/pressable';\nimport type { SurfaceColor } from '../../types/surfaceColor';\nimport type { SurfaceTheme } from '../../types/theme';\nimport { resolveFieldState } from './resolveFieldState';\nimport { resolveIndicatorSize } from './resolveIndicatorSize';\nimport { resolveSelectionControlColors } from './resolveSelectionControlColors';\n\ninterface ResolveSelectionControlInteractionStateInput {\n checked: boolean;\n color: SurfaceColor;\n disabled: boolean;\n interactionState: InteractionState;\n invalid: boolean;\n readOnly: boolean;\n size: ControlSize;\n theme: SurfaceTheme;\n}\n\n/*** Resolves the visual interaction state shared by checkbox and radio controls. */\nexport function resolveSelectionControlInteractionState({\n checked,\n color,\n disabled,\n interactionState,\n invalid,\n readOnly,\n size,\n theme,\n}: ResolveSelectionControlInteractionStateInput) {\n const fieldState = resolveFieldState({\n disabled,\n focused: interactionState.focused,\n invalid,\n readOnly,\n });\n const colors = resolveSelectionControlColors(theme, {\n checked,\n color,\n fieldState,\n hovered: interactionState.hovered,\n pressed: interactionState.pressed,\n });\n\n return {\n colors,\n fieldState,\n indicatorSize: resolveIndicatorSize(size),\n labelEmphasis:\n colors.labelColor === theme.semantics.content.muted\n ? ('muted' as const)\n : ('default' as const),\n };\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/surface",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "9.4.
|
|
4
|
+
"version": "9.4.10",
|
|
5
5
|
"description": "Stable UI foundation for React Native and React Native Web.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/surface#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@ankhorage/color-theory": "^0.3.1",
|
|
47
|
-
"@ankhorage/contracts": "^26.0.
|
|
48
|
-
"@ankhorage/utility": "^1.
|
|
47
|
+
"@ankhorage/contracts": "^26.0.2",
|
|
48
|
+
"@ankhorage/utility": "^1.10.0",
|
|
49
49
|
"@gorhom/bottom-sheet": "^5.2.14"
|
|
50
50
|
},
|
|
51
51
|
"files": [
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
},
|
|
114
114
|
"devDependencies": {
|
|
115
115
|
"@ankhorage/capability": "^0.2.2",
|
|
116
|
-
"@ankhorage/devtools": "^2.3.
|
|
116
|
+
"@ankhorage/devtools": "^2.3.23",
|
|
117
117
|
"@ankhorage/paradox": "^0.3.5",
|
|
118
118
|
"@react-native-vector-icons/fontawesome": "^13.1.5",
|
|
119
119
|
"@react-native-vector-icons/fontawesome5": "^13.1.5",
|
|
@@ -2,9 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { ViewStyle } from 'react-native';
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
|
-
|
|
6
|
-
resolveIndicatorSize,
|
|
7
|
-
resolveSelectionControlColors,
|
|
5
|
+
resolveSelectionControlInteractionState,
|
|
8
6
|
resolveSelectionControlNextChecked,
|
|
9
7
|
} from '../../../../../internal/resolvers';
|
|
10
8
|
import { useControllableState } from '../../../../../internal/useControllableState';
|
|
@@ -109,22 +107,17 @@ function CheckboxControl({
|
|
|
109
107
|
|
|
110
108
|
/*** Renders the checkbox indicator and optional label for one interaction state. */
|
|
111
109
|
function renderCheckboxContent(input: CheckboxContentInput) {
|
|
112
|
-
const {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
pressed: interactionState.pressed,
|
|
124
|
-
color: input.color,
|
|
125
|
-
});
|
|
126
|
-
const indicatorSize = resolveIndicatorSize(input.size);
|
|
127
|
-
const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
|
|
110
|
+
const { colors, fieldState, indicatorSize, labelEmphasis } =
|
|
111
|
+
resolveSelectionControlInteractionState({
|
|
112
|
+
checked: input.isChecked,
|
|
113
|
+
color: input.color,
|
|
114
|
+
disabled: input.disabled,
|
|
115
|
+
interactionState: input.interactionState,
|
|
116
|
+
invalid: input.invalid,
|
|
117
|
+
readOnly: input.readOnly,
|
|
118
|
+
size: input.size,
|
|
119
|
+
theme: input.theme,
|
|
120
|
+
});
|
|
128
121
|
const indicatorColor = fieldState.invalid ? 'error' : input.color;
|
|
129
122
|
|
|
130
123
|
return (
|
|
@@ -2,9 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { ViewStyle } from 'react-native';
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
|
-
|
|
6
|
-
resolveIndicatorSize,
|
|
7
|
-
resolveSelectionControlColors,
|
|
5
|
+
resolveSelectionControlInteractionState,
|
|
8
6
|
resolveSelectionControlNextChecked,
|
|
9
7
|
} from '../../../../../internal/resolvers';
|
|
10
8
|
import { useControllableState } from '../../../../../internal/useControllableState';
|
|
@@ -110,22 +108,16 @@ function RadioControl({
|
|
|
110
108
|
|
|
111
109
|
/*** Renders the radio indicator and optional content for one interaction state. */
|
|
112
110
|
function renderRadioContent(input: RadioContentInput) {
|
|
113
|
-
const {
|
|
114
|
-
|
|
111
|
+
const { colors, indicatorSize, labelEmphasis } = resolveSelectionControlInteractionState({
|
|
112
|
+
checked: input.isChecked,
|
|
113
|
+
color: input.color,
|
|
115
114
|
disabled: input.disabled,
|
|
116
|
-
|
|
115
|
+
interactionState: input.interactionState,
|
|
117
116
|
invalid: input.invalid,
|
|
118
117
|
readOnly: input.readOnly,
|
|
118
|
+
size: input.size,
|
|
119
|
+
theme: input.theme,
|
|
119
120
|
});
|
|
120
|
-
const colors = resolveSelectionControlColors(theme, {
|
|
121
|
-
checked: input.isChecked,
|
|
122
|
-
fieldState,
|
|
123
|
-
hovered: interactionState.hovered,
|
|
124
|
-
pressed: interactionState.pressed,
|
|
125
|
-
color: input.color,
|
|
126
|
-
});
|
|
127
|
-
const indicatorSize = resolveIndicatorSize(input.size);
|
|
128
|
-
const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
|
|
129
121
|
const hasContent =
|
|
130
122
|
input.children !== undefined && input.children !== null && input.children !== false;
|
|
131
123
|
|
|
@@ -10,6 +10,7 @@ export * from './resolveOverlayAnimation';
|
|
|
10
10
|
export * from './resolveOverlayZIndex';
|
|
11
11
|
export * from './resolveSelectionControlBehavior';
|
|
12
12
|
export * from './resolveSelectionControlColors';
|
|
13
|
+
export * from './resolveSelectionControlInteractionState';
|
|
13
14
|
export * from './resolveSurfaceColor';
|
|
14
15
|
export * from './resolveTextColor';
|
|
15
16
|
export * from './resolveTextStyles';
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { describe, expect, it } from 'bun:test';
|
|
2
|
+
|
|
3
|
+
import { createTheme } from '../../features/theme/application/use-cases/createTheme';
|
|
4
|
+
import { resolveSelectionControlInteractionState } from './resolveSelectionControlInteractionState';
|
|
5
|
+
|
|
6
|
+
describe('resolveSelectionControlInteractionState', () => {
|
|
7
|
+
it('combines checked interaction colors with the matching indicator dimensions', () => {
|
|
8
|
+
const theme = createTheme();
|
|
9
|
+
|
|
10
|
+
const result = resolveSelectionControlInteractionState({
|
|
11
|
+
checked: true,
|
|
12
|
+
color: 'primary',
|
|
13
|
+
disabled: false,
|
|
14
|
+
interactionState: { disabled: false, focused: true, hovered: true, pressed: false },
|
|
15
|
+
invalid: false,
|
|
16
|
+
readOnly: false,
|
|
17
|
+
size: 'l',
|
|
18
|
+
theme,
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
expect(result.fieldState.name).toBe('focused');
|
|
22
|
+
expect(result.colors.backgroundColor).toBe(theme.semantics.action.primary.hover);
|
|
23
|
+
expect(result.indicatorSize.checkbox).toBe(22);
|
|
24
|
+
expect(result.labelEmphasis).toBe('default');
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('preserves read-only label emphasis and invalid field state', () => {
|
|
28
|
+
const theme = createTheme();
|
|
29
|
+
|
|
30
|
+
const result = resolveSelectionControlInteractionState({
|
|
31
|
+
checked: false,
|
|
32
|
+
color: 'primary',
|
|
33
|
+
disabled: false,
|
|
34
|
+
interactionState: { disabled: false, focused: false, hovered: false, pressed: false },
|
|
35
|
+
invalid: true,
|
|
36
|
+
readOnly: true,
|
|
37
|
+
size: 'm',
|
|
38
|
+
theme,
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
expect(result.fieldState.name).toBe('invalid');
|
|
42
|
+
expect(result.colors.borderColor).toBe(theme.semantics.error.outline);
|
|
43
|
+
expect(result.labelEmphasis).toBe('muted');
|
|
44
|
+
});
|
|
45
|
+
});
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import type { ControlSize } from '../../types/control';
|
|
2
|
+
import type { InteractionState } from '../../types/pressable';
|
|
3
|
+
import type { SurfaceColor } from '../../types/surfaceColor';
|
|
4
|
+
import type { SurfaceTheme } from '../../types/theme';
|
|
5
|
+
import { resolveFieldState } from './resolveFieldState';
|
|
6
|
+
import { resolveIndicatorSize } from './resolveIndicatorSize';
|
|
7
|
+
import { resolveSelectionControlColors } from './resolveSelectionControlColors';
|
|
8
|
+
|
|
9
|
+
interface ResolveSelectionControlInteractionStateInput {
|
|
10
|
+
checked: boolean;
|
|
11
|
+
color: SurfaceColor;
|
|
12
|
+
disabled: boolean;
|
|
13
|
+
interactionState: InteractionState;
|
|
14
|
+
invalid: boolean;
|
|
15
|
+
readOnly: boolean;
|
|
16
|
+
size: ControlSize;
|
|
17
|
+
theme: SurfaceTheme;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/*** Resolves the visual interaction state shared by checkbox and radio controls. */
|
|
21
|
+
export function resolveSelectionControlInteractionState({
|
|
22
|
+
checked,
|
|
23
|
+
color,
|
|
24
|
+
disabled,
|
|
25
|
+
interactionState,
|
|
26
|
+
invalid,
|
|
27
|
+
readOnly,
|
|
28
|
+
size,
|
|
29
|
+
theme,
|
|
30
|
+
}: ResolveSelectionControlInteractionStateInput) {
|
|
31
|
+
const fieldState = resolveFieldState({
|
|
32
|
+
disabled,
|
|
33
|
+
focused: interactionState.focused,
|
|
34
|
+
invalid,
|
|
35
|
+
readOnly,
|
|
36
|
+
});
|
|
37
|
+
const colors = resolveSelectionControlColors(theme, {
|
|
38
|
+
checked,
|
|
39
|
+
color,
|
|
40
|
+
fieldState,
|
|
41
|
+
hovered: interactionState.hovered,
|
|
42
|
+
pressed: interactionState.pressed,
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
return {
|
|
46
|
+
colors,
|
|
47
|
+
fieldState,
|
|
48
|
+
indicatorSize: resolveIndicatorSize(size),
|
|
49
|
+
labelEmphasis:
|
|
50
|
+
colors.labelColor === theme.semantics.content.muted
|
|
51
|
+
? ('muted' as const)
|
|
52
|
+
: ('default' as const),
|
|
53
|
+
};
|
|
54
|
+
}
|