@studio-piot/native-ui 0.2.3 → 0.2.4

package/src/components/SegmentedControl/segmentThemeRoles.test.ts

@@ -3,15 +3,17 @@ import { describe, it } from "node:test";
 import { SEGMENTED_THEME_ROLES } from "./segmentThemeRoles.ts";
 
 describe("SEGMENTED_THEME_ROLES", () => {
-  it("maps colour props onto existing Field and radio roles", () => {
-    assert.equal(SEGMENTED_THEME_ROLES.backgroundColor, "fieldBackground");
-    assert.equal(SEGMENTED_THEME_ROLES.borderColor, "fieldBorder");
+  it("maps colour props to dedicated segment roles", () => {
+    assert.equal(SEGMENTED_THEME_ROLES.backgroundColor, "segmentBackground");
     assert.equal(
       SEGMENTED_THEME_ROLES.selectedBackgroundColor,
-      "fieldRadioSelected",
+      "segmentSelectedBackground",
     );
-    assert.equal(SEGMENTED_THEME_ROLES.labelColor, "fieldText");
-    assert.equal(SEGMENTED_THEME_ROLES.selectedLabelColor, "fieldBackground");
-    assert.equal(SEGMENTED_THEME_ROLES.titleColor, "fieldLabel");
+    assert.equal(SEGMENTED_THEME_ROLES.labelColor, "segmentLabel");
+    assert.equal(
+      SEGMENTED_THEME_ROLES.selectedLabelColor,
+      "segmentSelectedLabel",
+    );
+    assert.equal(SEGMENTED_THEME_ROLES.titleColor, "segmentTitle");
   });
 });

package/src/components/SegmentedControl/segmentThemeRoles.ts

@@ -1,10 +1,9 @@
 export const SEGMENTED_THEME_ROLES = {
-  backgroundColor: "fieldBackground",
-  borderColor: "fieldBorder",
-  selectedBackgroundColor: "fieldRadioSelected",
-  labelColor: "fieldText",
-  selectedLabelColor: "fieldBackground",
-  titleColor: "fieldLabel",
+  backgroundColor: "segmentBackground",
+  selectedBackgroundColor: "segmentSelectedBackground",
+  labelColor: "segmentLabel",
+  selectedLabelColor: "segmentSelectedLabel",
+  titleColor: "segmentTitle",
 } as const;
 
 export type SegmentedThemeColorProp = keyof typeof SEGMENTED_THEME_ROLES;

package/src/components/Select/Select.tsx

@@ -23,6 +23,10 @@ import {
 } from "@gorhom/bottom-sheet";
 import { FullWindowOverlay } from "react-native-screens";
 import { buttonRadiusValue } from "../Button/buttonRadius";
+import {
+  useErrorBannerDismiss,
+  useErrorBannerField,
+} from "../ErrorBanner";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
 import { useThemeColor } from "../../theme/useThemeColor";
 import { DEFAULT_SELECT_DETENTS } from "./resolveSelectDetentIndex";
@@ -42,6 +46,7 @@ function SheetContainer({ children }: { children?: ReactNode }) {
 }
 
 export function Select({
+  name,
   value,
   onChange,
   options,
@@ -105,7 +110,12 @@ export function Select({
   const closeDiscColor = useThemeColor("text");
   const closeIconColor = useThemeColor("background");
 
-  const hasError = Boolean(error);
+  const dismissBanner = useErrorBannerDismiss();
+  const { viewRef, listed } = useErrorBannerField(name, () => {
+    modalRef.current?.present();
+  });
+  const hasError = Boolean(error) || Boolean(listed);
+  const inlineError = listed ? undefined : error;
   const selected = options.find((option) => option.value === value);
   const display = selected?.label ?? placeholder;
   const isPlaceholder = selected == null;
@@ -192,16 +202,21 @@ export function Select({
   const onSelect = (option: SelectOption) => {
     if (option.disabled) return;
     onChange(option.value);
+    dismissBanner();
     dismiss();
   };
 
   return (
-    <View style={[styles.column, !editable && styles.blocked, style]}>
+    <View
+      ref={viewRef}
+      collapsable={false}
+      style={[styles.column, !editable && styles.blocked, style]}
+    >
       {label ? (
         <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
       ) : null}
       <Pressable
-        accessibilityHint="Opens a list of options"
+        accessibilityHint={listed?.message ?? "Opens a list of options"}
         accessibilityLabel={label ? `${label}. ${display}` : display}
         accessibilityRole="button"
         accessibilityState={{ disabled: !editable }}
@@ -233,8 +248,8 @@ export function Select({
           ›
         </Text>
       </Pressable>
-      {error ? (
-        <Text style={[styles.helper, { color: errorColor }]}>{error}</Text>
+      {inlineError ? (
+        <Text style={[styles.helper, { color: errorColor }]}>{inlineError}</Text>
       ) : description ? (
         <Text style={[styles.helper, { color: descriptionColor }]}>
           {description}

package/src/components/Select/types.ts

@@ -13,6 +13,8 @@ export type SelectCloseButton =
   | ((dismiss: () => void) => ReactNode);
 
 export type SelectProps = {
+  /** Registers the field with `Form` / `ErrorBannerProvider` for banner rows. */
+  name?: string;
   value: string | null;
   onChange: (value: string) => void;
   options: SelectOption[];

package/src/components/Slider/Slider.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet, Text, View } from "react-native";
 import CommunitySlider from "@react-native-community/slider";
+import { useErrorBannerDismiss } from "../ErrorBanner";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
 import { SLIDER_THEME_ROLES } from "./sliderThemeRoles";
 import type { SliderProps } from "./types";
@@ -36,6 +37,7 @@ export function Slider({
     SLIDER_THEME_ROLES.trackColor,
   );
 
+  const dismissBanner = useErrorBannerDismiss();
   const display = formatValue(value);
   const accessibilityLabel = label ? `${label}. ${display}` : display;
 
@@ -58,7 +60,10 @@ export function Slider({
         maximumValue={maximumValue}
         minimumTrackTintColor={highlightColor}
         minimumValue={minimumValue}
-        onValueChange={onChange}
+        onValueChange={(next) => {
+          onChange(next);
+          dismissBanner();
+        }}
         step={step}
         style={styles.track}
         thumbTintColor={highlightColor}

package/src/components/index.ts

@@ -21,6 +21,19 @@ export {
   type FieldTextareaProps,
 } from "./Field";
 export { Form, FormCloseButton, type FormProps } from "./Form";
+export {
+  ErrorBanner,
+  ErrorBannerField,
+  ErrorBannerProvider,
+  ERROR_BANNER_THEME_ROLES,
+  useErrorBanner,
+  useErrorBannerContext,
+  useErrorBannerDismiss,
+  useErrorBannerField,
+  type ErrorBannerThemeColorProp,
+  type ErrorBannerProps,
+  type FieldError,
+} from "./ErrorBanner";
 export {
   RadioField,
   RADIO_THEME_ROLES,

package/src/index.ts

@@ -1,4 +1,4 @@
-export const version = "0.2.3";
+export const version = "0.2.4";
 
 export * from "./theme";
 export {
@@ -28,6 +28,19 @@ export {
   FormCloseButton,
   type FormProps,
 } from "./components/Form";
+export {
+  ErrorBanner,
+  ErrorBannerField,
+  ErrorBannerProvider,
+  ERROR_BANNER_THEME_ROLES,
+  useErrorBanner,
+  useErrorBannerContext,
+  useErrorBannerDismiss,
+  useErrorBannerField,
+  type ErrorBannerThemeColorProp,
+  type ErrorBannerProps,
+  type FieldError,
+} from "./components/ErrorBanner";
 export {
   RadioField,
   RADIO_THEME_ROLES,