UNPKG

@react-spectrum/s2

Version:

Spectrum 2 UI components in React

github.com/adobe/react-spectrum

adobe/react-spectrum

1 lines • 10.2 kB
1
{"mappings":"ACwDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuI+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApL7D;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAxCK;EAAA;IAoL6D;;;;IAAA;;;;;;AA5IlE;EAAA;IAAA","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SelectionIndicator, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useRef} from 'react';\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display in the segmented control.\n */\n children: ReactNode,\n /**\n * Whether the segmented control is disabled.\n */\n isDisabled?: boolean,\n /** Whether the items should divide the container width equally. */\n isJustified?: boolean,\n /** The id of the currently selected item (controlled). */\n selectedKey?: Key | null,\n /** The id of the initial selected item (uncontrolled). */\n defaultSelectedKey?: Key,\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n /**\n * The content to display in the segmented control item.\n */\n children: ReactNode,\n /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n id: Key,\n /** Whether the item is disabled or not. */\n isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n display: 'flex',\n gap: 4,\n backgroundColor: 'gray-100',\n borderRadius: 'default',\n width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({\n ...focusRing(),\n ...control({shape: 'default', icon: true}),\n justifyContent: 'center',\n position: 'relative',\n forcedColorAdjust: 'none',\n color: {\n default: baseColor('neutral-subdued'),\n isSelected: baseColor('neutral'),\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText',\n isSelected: 'HighlightText'\n }\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n flexShrink: 0,\n whiteSpace: 'nowrap',\n disableTapHighlight: true,\n userSelect: 'none',\n backgroundColor: 'transparent',\n borderStyle: 'none',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n // The selected item has lower z-index so that the sliding background\n // animation does not cover other items.\n zIndex: {\n default: 1,\n isSelected: 0\n }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\n backgroundColor: {\n default: 'gray-25',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n top: 0,\n left: 0,\n width: 'full',\n height: 'full',\n contain: 'strict',\n transition: {\n default: '[translate,width]',\n '@media (prefers-reduced-motion: reduce)': 'none'\n },\n transitionDuration: 200,\n transitionTimingFunction: 'out',\n position: 'absolute',\n boxSizing: 'border-box',\n borderStyle: 'solid',\n borderWidth: 2,\n borderColor: {\n default: 'gray-900',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n register?: (value: Key, isDisabled?: boolean) => void,\n isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n defaultValue?: Key | null,\n value?: Key | null,\n children: ReactNode,\n isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n let {\n defaultSelectedKey,\n selectedKey,\n onSelectionChange\n } = props;\n let domRef = useDOMRef(ref);\n\n let onChange = (values: Set<Key>) => {\n if (onSelectionChange) {\n let firstKey = values.values().next().value;\n if (firstKey != null) {\n onSelectionChange(firstKey);\n }\n }\n };\n\n return (\n <ToggleButtonGroup\n {...props}\n selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n disallowEmptySelection\n ref={domRef}\n orientation=\"horizontal\"\n style={props.UNSAFE_style}\n onSelectionChange={onChange}\n className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n aria-label={props['aria-label']}>\n <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} isJustified={props.isJustified}>\n {props.children}\n </DefaultSelectionTracker>\n </ToggleButtonGroup>\n );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n let state = useContext(ToggleGroupStateContext);\n let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n // default select the first available item\n let register = useCallback((value: Key) => {\n if (state && !isRegistered.current) {\n isRegistered.current = true;\n state.toggleKey(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <Provider\n values={[\n [InternalSegmentedControlContext, {register: register, isJustified: props.isJustified}]\n ]}>\n {props.children}\n </Provider>\n );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n let domRef = useFocusableRef(ref);\n let divRef = useRef<HTMLDivElement>(null);\n let {register, isJustified} = useContext(InternalSegmentedControlContext);\n\n useLayoutEffect(() => {\n register?.(props.id);\n }, [register, props.id]);\n\n return (\n <ToggleButton\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n {({isPressed, isDisabled}) => (\n <>\n <SelectionIndicator className={slider({isDisabled})} />\n <Provider\n values={[\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n }],\n [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n [TextContext, {styles: style({order: 1, truncate: true})}]\n ]}>\n <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </div>\n </Provider>\n </>\n )\n }\n </ToggleButton>\n );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}