@react-spectrum/s2 0.3.2-nightly.5042 → 0.4.0

package/dist/SegmentedControl.css

@@ -0,0 +1,400 @@
+@layer _.a {
+  ._ca {
+    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._de {
+    font-size: .875rem;
+  }
+
+  ._da {
+    font-size: .6875rem;
+  }
+
+  ._dc {
+    font-size: .75rem;
+  }
+
+  ._dg {
+    font-size: 1rem;
+  }
+
+  ._di {
+    font-size: 1.125rem;
+  }
+
+  ._eb {
+    font-variation-settings: "wght" 400;
+    font-synthesis-weight: none;
+    font-weight: 400;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .bg {
+    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  }
+
+  .Uc {
+    position: relative;
+  }
+
+  ._zb {
+    forced-color-adjust: none;
+  }
+
+  .am {
+    color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .ao {
+    color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .aj {
+    color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  .CI {
+    padding-inline-start: calc(var(--k, var(--o)) * 3 / 8);
+  }
+
+  .DI {
+    padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
+  }
+
+  .k-375toq {
+    height: var(--k);
+  }
+
+  .ha {
+    flex-basis: 0;
+  }
+
+  ._9-3t1y {
+    flex-grow: 1;
+  }
+
+  ._2d {
+    justify-content: center;
+  }
+
+  .__R-yksgrp {
+    -webkit-tap-highlight-color: #0000;
+  }
+
+  .-rwx0fg_e-b {
+    --iconPrimary: currentColor;
+  }
+
+  .-_375toq_k-q {
+    --k: 2rem;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  .dx {
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+  }
+
+  ._Nc {
+    outline-width: 2px;
+  }
+
+  ._M-3t1z {
+    outline-offset: 2px;
+  }
+
+  .bd {
+    background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
+  }
+
+  .Ya {
+    left: 0;
+  }
+
+  .l4 {
+    width: 100%;
+  }
+
+  .k4 {
+    height: 100%;
+  }
+
+  .Ua {
+    position: absolute;
+  }
+
+  .__na {
+    box-sizing: border-box;
+  }
+
+  .wa {
+    border-style: solid;
+  }
+
+  .uc {
+    border-top-width: 2px;
+  }
+
+  .vc {
+    border-bottom-width: 2px;
+  }
+
+  .sc {
+    border-inline-start-width: 2px;
+  }
+
+  .tc {
+    border-inline-end-width: 2px;
+  }
+
+  .co {
+    border-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .ci {
+    border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
+  }
+
+  ._vd {
+    border-start-start-radius: .625rem;
+  }
+
+  ._wd {
+    border-start-end-radius: .625rem;
+  }
+
+  ._xd {
+    border-end-start-radius: .625rem;
+  }
+
+  ._yd {
+    border-end-end-radius: .625rem;
+  }
+
+  .__A-3t1x {
+    order: 0;
+  }
+
+  ._8-3t1x {
+    flex-shrink: 0;
+  }
+
+  .__A-3t1y {
+    order: 1;
+  }
+
+  .__vb {
+    overflow-x: hidden;
+  }
+
+  .__wb {
+    overflow-y: hidden;
+  }
+
+  ._ma {
+    text-overflow: ellipsis;
+  }
+
+  ._pb {
+    white-space: nowrap;
+  }
+
+  .__Q-3t1y {
+    z-index: 1;
+  }
+
+  ._Zd {
+    display: flex;
+  }
+
+  .iG {
+    row-gap: .428571em;
+  }
+
+  .jG {
+    column-gap: .428571em;
+  }
+
+  ._Oa {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  }
+
+  ._Q-375x7f {
+    transition-duration: .15s;
+  }
+
+  ._Ra {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  ._1c {
+    align-items: center;
+  }
+
+  .qa {
+    min-width: 0;
+  }
+}
+
+@layer _.b {
+  ._c-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+
+  .C-1dz4pg9-6njx2e:has([slot="icon"]:only-child) {
+    padding-inline-start: .375rem;
+  }
+
+  .D-1dz4pg9-6njx2e:has([slot="icon"]:only-child) {
+    padding-inline-end: .375rem;
+  }
+}
+
+@layer _.c {
+  ._c-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  ._c-enzykdd:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
+}
+
+@layer _.e {
+  ._c-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  ._c-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  ._c-1uotwbwg:lang(zh-hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.h {
+  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+}
+
+@layer UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+
+    ._dbb {
+      font-size: .8125rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+
+    .-_375toq_k-br {
+      --k: 2.5rem;
+    }
+
+    .ibH {
+      row-gap: .470588em;
+    }
+
+    .jbH {
+      column-gap: .470588em;
+    }
+
+    .qba {
+      min-width: 0;
+    }
+  }
+}
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .aa_____x {
+      color: buttontext;
+    }
+
+    .aa_____B {
+      color: graytext;
+    }
+
+    .aa_____A {
+      color: highlighttext;
+    }
+
+    .da_____z {
+      outline-color: highlight;
+    }
+
+    .ba_____z {
+      background-color: highlight;
+    }
+
+    .ba_____B {
+      background-color: graytext;
+    }
+
+    .ca_____z {
+      border-color: highlight;
+    }
+
+    .ca_____B {
+      border-color: graytext;
+    }
+  }
+}
+
+@layer _.c.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .C-1dz4pg9b-1aa9md1:has([slot="icon"]:only-child) {
+      padding-inline-start: .46875rem;
+    }
+
+    .D-1dz4pg9b-1aa9md1:has([slot="icon"]:only-child) {
+      padding-inline-end: .46875rem;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=SegmentedControl.css.map */

package/dist/SegmentedControl.css.map

@@ -0,0 +1 @@
+{"mappings":"ACsDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6J+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7MxD;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;;AARK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAQL;;;;IAqM6D;;;;IAAA;;;;IAAA;;;;;;AArM7D;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAmCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAnCK;EAAA;IAAA;;;;IAAA;;;;;;AAmCL","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} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\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  /** The id of the currently selected item (controlled). */\n  selectedKey?: string | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: string,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: string) => 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: string,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\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: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction 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 prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.id === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props}\n      value={props.id}\n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\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({zIndex: 1, 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    </Radio>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}