@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/DragPreview.css

@@ -0,0 +1,459 @@
+@layer _.a {
+  .zv6x9r131 {
+    grid-column-start: label;
+  }
+
+  .yv6x9r131 {
+    grid-column-end: label;
+  }
+
+  .Bv6x9r131 {
+    grid-row-start: label;
+  }
+
+  .Av6x9r131 {
+    grid-row-end: label;
+  }
+
+  .uk131 {
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .-_6BNtrc-c131 {
+    --fs: pow(1.125, 0);
+  }
+
+  .-_6BNtrc-a131 {
+    --fs: pow(1.125, -2);
+  }
+
+  .-_6BNtrc-d131 {
+    --fs: pow(1.125, 1);
+  }
+
+  .-_6BNtrc-e131 {
+    --fs: pow(1.125, 2);
+  }
+
+  ._Fd131 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+  }
+
+  .p40ub4c131 {
+    color: inherit;
+  }
+
+  .z9u7zPc131 {
+    grid-column-start: description;
+  }
+
+  .y9u7zPc131 {
+    grid-column-end: description;
+  }
+
+  .B9u7zPc131 {
+    grid-row-start: description;
+  }
+
+  .A9u7zPc131 {
+    grid-row-end: description;
+  }
+
+  ._Nc131 {
+    overflow-x: hidden;
+  }
+
+  .Pc131 {
+    overflow-y: hidden;
+  }
+
+  ._Yb131 {
+    text-overflow: ellipsis;
+  }
+
+  ._7c131 {
+    white-space: nowrap;
+  }
+
+  ._7b131 {
+    white-space: normal;
+  }
+
+  .xb131 {
+    font-weight: 400;
+  }
+
+  .pv131 {
+    color: light-dark(#505050, #afafaf);
+  }
+
+  .pp131 {
+    color: light-dark(#c6c6c6, #444);
+  }
+
+  .Yd131 {
+    transition-property: color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
+  }
+
+  .Xb131 {
+    transition-duration: .15s;
+  }
+
+  ._2b131 {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  .sd131 {
+    display: flex;
+  }
+
+  .z2U5Crc131 {
+    grid-column-start: icon;
+  }
+
+  .y2U5Crc131 {
+    grid-column-end: icon;
+  }
+
+  .B2U5Crc131 {
+    grid-row-start: icon;
+  }
+
+  .AvoofG131 {
+    grid-row-end: span 2;
+  }
+
+  .eb131 {
+    align-items: center;
+  }
+
+  .sb131 {
+    display: block;
+  }
+
+  .ZuUmpre131 {
+    width: 1.42857em;
+  }
+
+  .FuUmpre131 {
+    height: 1.42857em;
+  }
+
+  .Ht131 {
+    margin-inline-end: .428571em;
+  }
+
+  .-_8sjo0b-t5ZbAob131 {
+    --iconPrimary: currentColor;
+  }
+
+  ._Pa131 {
+    position: absolute;
+  }
+
+  ._9a131 {
+    z-index: -1;
+  }
+
+  .WE131 {
+    top: 4px;
+  }
+
+  ._EE131 {
+    left: 4px;
+  }
+
+  .Fb131 {
+    height: 100%;
+  }
+
+  ._oa131 {
+    box-sizing: border-box;
+  }
+
+  .Sd131 {
+    padding-inline-start: 0;
+  }
+
+  .Rd131 {
+    padding-inline-end: 0;
+  }
+
+  .Tt131 {
+    padding-top: 8px;
+  }
+
+  .Qt131 {
+    padding-bottom: 8px;
+  }
+
+  .gX131 {
+    background-color: light-dark(#fff, #111);
+  }
+
+  .pt131 {
+    color: light-dark(#292929, #dbdbdb);
+  }
+
+  .po131 {
+    color: light-dark(#131313, #f2f2f2);
+  }
+
+  ._Pc131 {
+    position: relative;
+  }
+
+  .se131 {
+    display: grid;
+  }
+
+  .CQyEEqe131 {
+    grid-template-areas: ". icon label . badge ."
+                         ". . description . badge .";
+  }
+
+  .DBqynpb131 {
+    grid-template-columns: calc(.75rem * var(--s2-scale)) auto minmax(0, 1fr) calc(.25rem * var(--s2-scale)) auto calc(.375rem * var(--s2-scale));
+  }
+
+  .Exumf9b131 {
+    grid-template-rows: 1fr auto;
+  }
+
+  .ea131 {
+    align-items: baseline;
+  }
+
+  .Mh131 {
+    min-height: calc(2.5rem * var(--s2-scale));
+  }
+
+  .MODqQub131 {
+    min-height: calc(3.125rem * var(--s2-scale));
+  }
+
+  .Zd4Eyud131 {
+    width: calc(12.5rem * var(--s2-scale));
+  }
+
+  .ob131 {
+    border-start-start-radius: .5rem;
+  }
+
+  .nb131 {
+    border-start-end-radius: .5rem;
+  }
+
+  .kb131 {
+    border-end-start-radius: .5rem;
+  }
+
+  .jb131 {
+    border-end-end-radius: .5rem;
+  }
+
+  ._kb131 {
+    border-top-width: 1px;
+  }
+
+  .hb131 {
+    border-bottom-width: 1px;
+  }
+
+  .mb131 {
+    border-inline-start-width: 1px;
+  }
+
+  .lb131 {
+    border-inline-end-width: 1px;
+  }
+
+  ._jf131 {
+    border-style: solid;
+  }
+
+  .iw131 {
+    border-color: light-dark(#3b63fb, #5681ff);
+  }
+
+  .z0yNlr131 {
+    grid-column-start: badge;
+  }
+
+  .y0yNlr131 {
+    grid-column-end: badge;
+  }
+
+  .B0yNlr131 {
+    grid-row-start: badge;
+  }
+
+  .A0yNlr131 {
+    grid-row-end: badge;
+  }
+
+  ._dc131 {
+    align-self: center;
+  }
+
+  .St131 {
+    padding-inline-start: 8px;
+  }
+
+  .Rt131 {
+    padding-inline-end: 8px;
+  }
+
+  .Tj131 {
+    padding-top: 2px;
+  }
+
+  .Qj131 {
+    padding-bottom: 2px;
+  }
+
+  .oa131 {
+    border-start-start-radius: .25rem;
+  }
+
+  .na131 {
+    border-start-end-radius: .25rem;
+  }
+
+  .ka131 {
+    border-end-start-radius: .25rem;
+  }
+
+  .ja131 {
+    border-end-end-radius: .25rem;
+  }
+
+  .g3131 {
+    background-color: light-dark(#3b63fb, #5681ff);
+  }
+
+  .uk131 {
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .-_6BNtrc-b131 {
+    --fs: pow(1.125, -1);
+  }
+
+  .vx131 {
+    font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
+  }
+
+  .xd131 {
+    font-weight: 700;
+  }
+
+  ._xa131 {
+    font-synthesis-weight: none;
+  }
+
+  ._Fd131 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+  }
+
+  .px131 {
+    color: #fff;
+  }
+
+  ._yb131 {
+    forced-color-adjust: none;
+  }
+}
+
+@layer _.b {
+  .ucJ9TBTb131:lang(ar) {
+    font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .xX0cczbc131:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-weight: 500;
+  }
+
+  ._xX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-synthesis-weight: none;
+  }
+
+  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    line-height: 1.5;
+  }
+}
+
+@layer _.c {
+  .ud3Euai131:lang(he) {
+    font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  .uea131: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 {
+  .ugb131:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  .uhd131:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  .uje131: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 {
+  .u2NhKxcl131:lang(zh-HK) {
+    font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.i {
+  .uic131: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 _.b.l {
+  @media (forced-colors: active) {
+    .pl40ub4c131 {
+      color: inherit;
+    }
+
+    .gle131 {
+      background-color: highlight;
+    }
+
+    .ple131 {
+      color: highlighttext;
+    }
+  }
+}
+
+@layer _.b.s {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .Hsu131 {
+      margin-inline-end: .470588em;
+    }
+  }
+}
+/*# sourceMappingURL=DragPreview.css.map */

package/dist/private/DragPreview.css.map

@@ -0,0 +1 @@
+{"mappings":"ACsBmB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAcM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAce;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcJ;;;;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;;;;EAyBC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9FX;EA8FW;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9FX;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAcM;EAAA;IAAA;;;;IAgFK;;;;IAAA;;;;;;AArDZ;EAAA;IAAA","sources":["21d69a29836e14bc","packages/@react-spectrum/s2/src/DragPreview.tsx"],"sourcesContent":["@import \"51c27aa6ed051126\";\n@import \"7f0697d053968461\";\n@import \"c62d6d33f3849d31\";\n@import \"5deb3526cd118502\";\n@import \"8066d38d6852670a\";\n@import \"3cea9cc994f5f524\";\n@import \"3fa65b2872b038f3\";\n@import \"554ececf6866643a\";\n","/*\n * Copyright 2026 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 {baseColor, fontRelative, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {controlFont} from './style-utils' with {type: 'macro'};\nimport {DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {DragItem} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {ReactNode} from 'react';\nimport {Text, TextContext} from './Content';\nimport {useScale} from './utils';\n\nexport let label = style({\n  gridArea: 'label',\n  alignSelf: 'center',\n  font: controlFont(),\n  color: 'inherit',\n  truncate: true,\n  whiteSpace: {\n    default: 'nowrap',\n    overflowMode: {\n      wrap: 'normal'\n    }\n  }\n});\n\nexport let description = style({\n  gridArea: 'description',\n  alignSelf: 'center',\n  truncate: true,\n  whiteSpace: {\n    default: 'nowrap',\n    overflowMode: {\n      wrap: 'normal'\n    }\n  },\n  font: 'ui-sm',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isDisabled: 'disabled',\n    forcedColors: 'inherit'\n  },\n  transition: 'default'\n});\n\nexport let iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  alignItems: 'center'\n});\n\nexport let icon = style({\n  display: 'block',\n  size: fontRelative(20),\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport let dragPreviewWrapper = style({\n  position: 'relative'\n});\n\nexport let dragPreviewCardBack = style({\n  position: 'absolute',\n  zIndex: -1,\n  top: 4,\n  left: 4,\n  width: 200,\n  height: 'full',\n  borderRadius: 'default',\n  borderWidth: 1,\n  borderStyle: 'solid',\n  borderColor: 'blue-900',\n  backgroundColor: 'gray-25'\n});\n\nexport let dragPreviewCard = style<{scale?: 'medium' | 'large'}>({\n  boxSizing: 'border-box',\n  paddingX: 0,\n  paddingY: 8,\n  backgroundColor: 'gray-25',\n  color: baseColor('neutral'),\n  position: 'relative',\n  display: 'grid',\n  gridTemplateAreas: ['. icon label       . badge .', '. .    description . badge .'],\n  gridTemplateColumns: [12, 'auto', 'minmax(0, 1fr)', 4, 'auto', 6],\n  gridTemplateRows: '1fr auto',\n  alignItems: 'baseline',\n  minHeight: {\n    default: 40,\n    scale: {\n      large: 50\n    }\n  },\n  width: 200,\n  borderRadius: 'default',\n  borderWidth: 1,\n  borderStyle: 'solid',\n  borderColor: 'blue-900'\n});\n\nexport let dragPreviewBadge = style({\n  gridArea: 'badge',\n  alignSelf: 'center',\n  paddingX: 8,\n  paddingY: 2,\n  borderRadius: 'sm',\n  backgroundColor: {\n    default: 'blue-900',\n    forcedColors: 'Highlight'\n  },\n  font: 'ui-sm',\n  fontWeight: 'bold',\n  color: {\n    default: 'white',\n    forcedColors: 'HighlightText'\n  },\n  forcedColorAdjust: 'none'\n});\n\nexport interface DragPreviewProps {\n  /** The currently dragged items, sourced from renderDragPreview. */\n  items: DragItem[];\n  /** The overflow mode to be applied on the drag preview. */\n  overflowMode?: 'wrap' | 'truncate';\n  /**\n   * The contents of the drag preview. Supports the `label`, `description`, and `icon` slots.\n   * If no children are provided, defaults to the first drag item's plain text content.\n   */\n  children?: ReactNode;\n}\n\n/**\n * The default drag preview rendered by the collection element during drag and drop. Pass this to\n * your drag hooks' `renderDragPreview` to match the default visual. To customize the drag preview's\n * contents, use Text with the \"label\" and \"description\" slots and/or a Icon for the leading icon.\n */\nexport function DragPreview(props: DragPreviewProps) {\n  let {items, overflowMode} = props;\n  let isDraggingMultiple = items.length > 1;\n  let itemLabel = items[0]?.['text/plain'] ?? '';\n  let scale = useScale();\n\n  return (\n    <div className={dragPreviewWrapper}>\n      {isDraggingMultiple && <div className={dragPreviewCardBack} />}\n      <div className={dragPreviewCard({scale})}>\n        <Provider\n          values={[\n            [\n              TextContext,\n              {\n                slots: {\n                  [DEFAULT_SLOT]: {styles: label({overflowMode})},\n                  label: {styles: label({overflowMode})},\n                  description: {styles: description({overflowMode})}\n                }\n              }\n            ],\n            [\n              IconContext,\n              {\n                slots: {\n                  icon: {\n                    render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                    styles: icon\n                  }\n                }\n              }\n            ]\n          ]}>\n          {props.children ?? <Text>{itemLabel}</Text>}\n          {isDraggingMultiple && <div className={dragPreviewBadge}>{items.length}</div>}\n        </Provider>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DragPreview.css.map"}