@tamagui/toggle-group 1.143.1 → 2.0.0-1767740890268

package/src/Toggle.tsx

@@ -7,7 +7,6 @@ import * as React from 'react'
 
 export const context = createStyledContext({
   color: '',
-  toggledStyle: null as null | Record<string, any>,
 })
 
 /* -------------------------------------------------------------------------------------------------
@@ -49,24 +48,24 @@ export const ToggleFrame = styled(ThemeableStack, {
       },
     },
 
+    color: {
+      '...color': () => {
+        return {}
+      },
+    },
+
     active: {
-      true: (_, { props, context }: any) => {
-        const toggledStyle = context?.toggledStyle
-        return {
-          zIndex: 1,
-          ...(!props.unstyled &&
-            !toggledStyle && {
-              backgroundColor: '$background',
-              hoverStyle: {
-                backgroundColor: '$background',
-              },
-              focusStyle: {
-                backgroundColor: '$background',
-                borderColor: '$borderColor',
-              },
-            }),
-          ...toggledStyle,
-        }
+      true: {
+        zIndex: 1,
+
+        hoverStyle: {
+          backgroundColor: '$background',
+        },
+
+        focusStyle: {
+          borderColor: '$borderColor',
+          backgroundColor: '$background',
+        },
       },
     },
 
@@ -95,7 +94,6 @@ type ToggleItemExtraProps = {
   pressed?: boolean
   defaultPressed?: boolean
   onPressedChange?(pressed: boolean): void
-  toggledStyle?: Record<string, any>
 }
 
 export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps
@@ -118,10 +116,10 @@ export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
     return (
       <ToggleFrame
         {...(!props.unstyled && {
-          theme: pressed ? 'active' : null,
+          theme: pressed ? 'accent' : null,
           themeShallow: true,
         })}
-        active={pressed}
+        active={!props.unstyled ? pressed : undefined}
         aria-pressed={pressed}
         data-state={pressed ? 'on' : 'off'}
         data-disabled={props.disabled ? '' : undefined}
@@ -129,7 +127,7 @@ export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
         ref={forwardedRef}
         onPress={composeEventHandlers(props.onPress ?? undefined, () => {
           if (!props.disabled) {
-            setPressed((prev) => !prev)
+            setPressed(!pressed)
           }
         })}
       />

package/src/ToggleGroup.tsx

@@ -10,11 +10,17 @@ import { RovingFocusGroup } from '@tamagui/roving-focus'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import type { FontSizeTokens, GetProps, SizeTokens, TamaguiElement } from '@tamagui/web'
-import { createStyledContext, getVariableValue, styled, useTheme } from '@tamagui/web'
+import {
+  createStyledContext,
+  getVariableValue,
+  styled,
+  usePropsAndStyle,
+  useTheme,
+} from '@tamagui/web'
 import React from 'react'
 
 import type { ToggleProps } from './Toggle'
-import { Toggle, ToggleFrame, context as ToggleContext } from './Toggle'
+import { Toggle, ToggleFrame } from './Toggle'
 
 const TOGGLE_GROUP_NAME = 'ToggleGroup'
 
@@ -43,83 +49,75 @@ type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
    * Used to disable passing styles down to children.
    */
   disablePassStyles?: boolean
-  toggledStyle?: Record<string, any>
-  color?: string
 }
-const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>(
-  (props, forwardedRef) => {
-    const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
-    const context = useToggleGroupContext(props.__scopeToggleGroup)
-    const toggleContext = ToggleContext.useStyledContext(props.__scopeToggleGroup)
-    const pressed = valueContext?.value.includes(props.value)
-    const toggledStyle = props.toggledStyle || toggleContext.toggledStyle
-    const color = (props as any).color || toggleContext.color
-
-    const { disablePassStyles, toggledStyle: _, ...rest } = props
-    const disabled = context.disabled || props.disabled || false
-    const groupItemProps = useGroupItem({ disabled })
-    const size = props.size ?? context.size
-
-    const sizeProps: Record<string, any> = props.unstyled
-      ? {}
-      : {
-          width: undefined,
-          height: undefined,
-          padding: getVariableValue(size) * 0.6,
-        }
+const ToggleGroupItem = ToggleFrame.styleable<
+  TamaguiElement,
+  ScopedProps<ToggleGroupItemProps>
+>((props, forwardedRef) => {
+  const [_, { color }] = usePropsAndStyle(props)
+  const { disablePassStyles, ...rest } = props
+  const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
+  const context = useToggleGroupContext(props.__scopeToggleGroup)
+  const pressed = valueContext?.value.includes(props.value)
+  const disabled = context.disabled || props.disabled || false
+  const groupItemProps = useGroupItem({ disabled })
+  const size = props.size ?? context.size
+
+  const sizeProps: Record<string, any> = props.unstyled
+    ? {}
+    : {
+        width: undefined,
+        height: undefined,
+        padding: getVariableValue(size) * 0.6,
+      }
 
-    const iconSize =
-      (typeof size === 'number' ? size * 0.7 : getFontSize(size as FontSizeTokens)) * 1.2
+  const iconSize =
+    (typeof size === 'number' ? size * 0.7 : getFontSize(size as FontSizeTokens)) * 1.2
 
-    const theme = useTheme()
-    const toggledColor = (toggledStyle as Record<string, any>)?.color
-    const activeColor = pressed && toggledColor ? toggledColor : color
-    const getThemedIcon = useGetThemedIcon({
-      size: iconSize,
-      color: activeColor || theme.color,
-    })
+  const theme = useTheme()
+  const getThemedIcon = useGetThemedIcon({
+    size: iconSize,
+    color: color ?? theme.color,
+  })
 
-    const childrens = React.Children.toArray(props.children)
-    const children = childrens.map((child) => {
-      if (props.disablePassStyles || !React.isValidElement(child)) {
-        return child
-      }
-      return React.cloneElement(getThemedIcon(child), { active: pressed } as any)
-    })
+  const childrens = React.Children.toArray(props.children)
+  const children = childrens.map((child) => {
+    if (props.disablePassStyles || !React.isValidElement(child)) {
+      return child
+    }
+    return React.cloneElement(getThemedIcon(child), { active: pressed } as any)
+  })
 
-    const commonProps = { pressed, disabled, ...sizeProps, ...rest, children }
-
-    const inner = (
-      <ToggleGroupItemImpl
-        {...commonProps}
-        ref={forwardedRef}
-        // focusable={!disabled}
-        tabIndex={disabled ? -1 : 0}
-        disabled={disabled}
-        {...groupItemProps}
-      />
-    )
-
-    return (
-      <ToggleGroupItemProvider scope={props.__scopeToggleGroup}>
-        <ToggleContext.Provider color={color} toggledStyle={toggledStyle}>
-          {context.rovingFocus ? (
-            <RovingFocusGroup.Item
-              asChild="except-style"
-              __scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
-              focusable={!disabled}
-              active={pressed}
-            >
-              {inner}
-            </RovingFocusGroup.Item>
-          ) : (
-            inner
-          )}
-        </ToggleContext.Provider>
-      </ToggleGroupItemProvider>
-    )
-  }
-)
+  const commonProps = { pressed, disabled, ...sizeProps, ...rest, children }
+
+  const inner = (
+    <ToggleGroupItemImpl
+      {...commonProps}
+      ref={forwardedRef}
+      // focusable={!disabled}
+      tabIndex={disabled ? -1 : 0}
+      disabled={disabled}
+      {...groupItemProps}
+    />
+  )
+
+  return (
+    <ToggleGroupItemProvider scope={props.__scopeToggleGroup}>
+      {context.rovingFocus ? (
+        <RovingFocusGroup.Item
+          asChild="except-style"
+          __scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
+          focusable={!disabled}
+          active={pressed}
+        >
+          {inner}
+        </RovingFocusGroup.Item>
+      ) : (
+        inner
+      )}
+    </ToggleGroupItemProvider>
+  )
+})
 ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME
 
 /* -----------------------------------------------------------------------------------------------*/
@@ -392,8 +390,6 @@ type ToggleGroupImplProps = GetProps<typeof ToggleGroupImplElementFrame> &
     dir?: RovingFocusGroupProps['dir']
     loop?: RovingFocusGroupProps['loop']
     sizeAdjust?: number
-    toggledStyle?: Record<string, any>
-    color?: string
   }
 
 const ToggleGroupImpl = ToggleGroupImplElementFrame.styleable<
@@ -410,8 +406,6 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.styleable<
     unstyled = false,
     size: sizeProp = '$true',
     sizeAdjust = 0,
-    toggledStyle,
-    color,
     ...toggleGroupProps
   } = props
   const direction = useDirection(dir)
@@ -434,36 +428,34 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.styleable<
       disabled={disabled}
       size={size}
     >
-      <ToggleContext.Provider color={color} toggledStyle={toggledStyle}>
-        {rovingFocus ? (
-          <RovingFocusGroup
-            asChild="except-style"
-            __scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
-            orientation={orientation}
-            dir={direction}
-            loop={loop}
-          >
-            <ToggleGroupImplElementFrame
-              aria-orientation={orientation}
-              orientation={orientation}
-              // axis={orientation}
-              ref={forwardedRef}
-              data-disabled={disabled ? '' : undefined}
-              unstyled={unstyled}
-              {...commonProps}
-            />
-          </RovingFocusGroup>
-        ) : (
+      {rovingFocus ? (
+        <RovingFocusGroup
+          asChild="except-style"
+          __scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
+          orientation={orientation}
+          dir={direction}
+          loop={loop}
+        >
           <ToggleGroupImplElementFrame
             aria-orientation={orientation}
-            ref={forwardedRef}
             orientation={orientation}
+            // axis={orientation}
+            ref={forwardedRef}
             data-disabled={disabled ? '' : undefined}
             unstyled={unstyled}
             {...commonProps}
           />
-        )}
-      </ToggleContext.Provider>
+        </RovingFocusGroup>
+      ) : (
+        <ToggleGroupImplElementFrame
+          aria-orientation={orientation}
+          ref={forwardedRef}
+          orientation={orientation}
+          data-disabled={disabled ? '' : undefined}
+          unstyled={unstyled}
+          {...commonProps}
+        />
+      )}
     </ToggleGroupContext>
   )
 })

package/types/Toggle.d.ts

@@ -2,30 +2,24 @@ import type { GetProps, TamaguiElement } from '@tamagui/web';
 import * as React from 'react';
 export declare const context: import("@tamagui/web").StyledContext<{
     color: string;
-    toggledStyle: null | Record<string, any>;
 }>;
 export declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    color?: import("@tamagui/web").ColorTokens | undefined;
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
-    inset?: number | import("@tamagui/web").SizeTokens | {
-        top?: number;
-        bottom?: number;
-        left?: number;
-        right?: number;
-    } | null | undefined;
     transparent?: boolean | undefined;
     fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    backgrounded?: boolean | undefined;
+    radiused?: boolean | undefined;
     hoverTheme?: boolean | undefined;
     pressTheme?: boolean | undefined;
     focusTheme?: boolean | undefined;
+    padded?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
-    backgrounded?: boolean | undefined;
-    radiused?: boolean | undefined;
-    padded?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
-    active?: boolean | undefined;
     unstyled?: boolean | undefined;
+    active?: boolean | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
 }, import("@tamagui/web").StaticConfigPublic>;
 type ToggleFrameProps = GetProps<typeof ToggleFrame>;
@@ -35,77 +29,61 @@ type ToggleItemExtraProps = {
     pressed?: boolean;
     defaultPressed?: boolean;
     onPressedChange?(pressed: boolean): void;
-    toggledStyle?: Record<string, any>;
 };
 export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps;
-export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "hoverTheme" | "pressTheme" | "focusTheme" | "elevate" | "bordered" | "backgrounded" | "radiused" | "padded" | "chromeless" | "active" | "unstyled" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "color" | "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "backgrounded" | "radiused" | "hoverTheme" | "pressTheme" | "focusTheme" | "padded" | "elevate" | "bordered" | "chromeless" | "unstyled" | "active" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+    color?: import("@tamagui/web").ColorTokens | undefined;
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
-    inset?: number | import("@tamagui/web").SizeTokens | {
-        top?: number;
-        bottom?: number;
-        left?: number;
-        right?: number;
-    } | null | undefined;
     transparent?: boolean | undefined;
     fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    backgrounded?: boolean | undefined;
+    radiused?: boolean | undefined;
     hoverTheme?: boolean | undefined;
     pressTheme?: boolean | undefined;
     focusTheme?: boolean | undefined;
+    padded?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
-    backgrounded?: boolean | undefined;
-    radiused?: boolean | undefined;
-    padded?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
-    active?: boolean | undefined;
     unstyled?: boolean | undefined;
+    active?: boolean | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
 } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+    color?: import("@tamagui/web").ColorTokens | undefined;
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
-    inset?: number | import("@tamagui/web").SizeTokens | {
-        top?: number;
-        bottom?: number;
-        left?: number;
-        right?: number;
-    } | null | undefined;
     transparent?: boolean | undefined;
     fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    backgrounded?: boolean | undefined;
+    radiused?: boolean | undefined;
     hoverTheme?: boolean | undefined;
     pressTheme?: boolean | undefined;
     focusTheme?: boolean | undefined;
+    padded?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
-    backgrounded?: boolean | undefined;
-    radiused?: boolean | undefined;
-    padded?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
-    active?: boolean | undefined;
     unstyled?: boolean | undefined;
+    active?: boolean | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
 } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {
+    color?: import("@tamagui/web").ColorTokens | undefined;
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
-    inset?: number | import("@tamagui/web").SizeTokens | {
-        top?: number;
-        bottom?: number;
-        left?: number;
-        right?: number;
-    } | null | undefined;
     transparent?: boolean | undefined;
     fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    backgrounded?: boolean | undefined;
+    radiused?: boolean | undefined;
     hoverTheme?: boolean | undefined;
     pressTheme?: boolean | undefined;
     focusTheme?: boolean | undefined;
+    padded?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
-    backgrounded?: boolean | undefined;
-    radiused?: boolean | undefined;
-    padded?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
-    active?: boolean | undefined;
     unstyled?: boolean | undefined;
+    active?: boolean | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
 }>> & ToggleItemExtraProps & React.RefAttributes<TamaguiElement>>;
 export {};

package/types/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,OAAO;;kBAEI,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;EAChD,CAAA;AAQF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;6CAqEtB,CAAA;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACnC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEAmClB,CAAA"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,OAAO;;EAElB,CAAA;AAQF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;6CAqEtB,CAAA;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEAmClB,CAAA"}