@react-spectrum/s2 3.0.0-nightly-9bd8a5f19-250304 → 3.0.0-nightly-b4695c8fd-250306
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CardView.cjs +45 -47
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css.map +1 -1
- package/dist/CardView.mjs +1 -3
- package/dist/CardView.mjs.map +1 -1
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/TableView.cjs +1 -3
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +1 -3
- package/dist/TableView.mjs.map +1 -1
- package/dist/types.d.ts +1 -2
- package/dist/types.d.ts.map +1 -1
- package/package.json +18 -21
- package/src/CardView.tsx +1 -1
- package/src/ColorSwatch.tsx +1 -1
- package/src/ColorSwatchPicker.tsx +1 -2
- package/src/TableView.tsx +1 -1
package/dist/CardView.cjs
CHANGED
|
@@ -6,7 +6,6 @@ var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
|
|
|
6
6
|
var $gDulG$reactjsxruntime = require("react/jsx-runtime");
|
|
7
7
|
var $gDulG$reactariacomponents = require("react-aria-components");
|
|
8
8
|
var $gDulG$react = require("react");
|
|
9
|
-
var $gDulG$reactstatelyvirtualizer = require("@react-stately/virtualizer");
|
|
10
9
|
var $gDulG$reactspectrumutils = require("@react-spectrum/utils");
|
|
11
10
|
var $gDulG$reactariautils = require("@react-aria/utils");
|
|
12
11
|
|
|
@@ -36,91 +35,90 @@ $parcel$export(module.exports, "CardView", () => $1aaf8931044a97bd$export$7e52c8
|
|
|
36
35
|
|
|
37
36
|
|
|
38
37
|
|
|
39
|
-
|
|
40
38
|
const $1aaf8931044a97bd$var$layoutOptions = {
|
|
41
39
|
XS: {
|
|
42
40
|
compact: {
|
|
43
|
-
minSpace: new (0, $gDulG$
|
|
44
|
-
minItemSize: new (0, $gDulG$
|
|
45
|
-
maxItemSize: new (0, $gDulG$
|
|
41
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(6, 6),
|
|
42
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(100, 100),
|
|
43
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(140, 140)
|
|
46
44
|
},
|
|
47
45
|
regular: {
|
|
48
|
-
minSpace: new (0, $gDulG$
|
|
49
|
-
minItemSize: new (0, $gDulG$
|
|
50
|
-
maxItemSize: new (0, $gDulG$
|
|
46
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(8, 8),
|
|
47
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(100, 100),
|
|
48
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(140, 140)
|
|
51
49
|
},
|
|
52
50
|
spacious: {
|
|
53
|
-
minSpace: new (0, $gDulG$
|
|
54
|
-
minItemSize: new (0, $gDulG$
|
|
55
|
-
maxItemSize: new (0, $gDulG$
|
|
51
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(12, 12),
|
|
52
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(100, 100),
|
|
53
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(140, 140)
|
|
56
54
|
}
|
|
57
55
|
},
|
|
58
56
|
S: {
|
|
59
57
|
compact: {
|
|
60
|
-
minSpace: new (0, $gDulG$
|
|
61
|
-
minItemSize: new (0, $gDulG$
|
|
62
|
-
maxItemSize: new (0, $gDulG$
|
|
58
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(8, 8),
|
|
59
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(150, 150),
|
|
60
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(210, 210)
|
|
63
61
|
},
|
|
64
62
|
regular: {
|
|
65
|
-
minSpace: new (0, $gDulG$
|
|
66
|
-
minItemSize: new (0, $gDulG$
|
|
67
|
-
maxItemSize: new (0, $gDulG$
|
|
63
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(12, 12),
|
|
64
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(150, 150),
|
|
65
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(210, 210)
|
|
68
66
|
},
|
|
69
67
|
spacious: {
|
|
70
|
-
minSpace: new (0, $gDulG$
|
|
71
|
-
minItemSize: new (0, $gDulG$
|
|
72
|
-
maxItemSize: new (0, $gDulG$
|
|
68
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(16, 16),
|
|
69
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(150, 150),
|
|
70
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(210, 210)
|
|
73
71
|
}
|
|
74
72
|
},
|
|
75
73
|
M: {
|
|
76
74
|
compact: {
|
|
77
|
-
minSpace: new (0, $gDulG$
|
|
78
|
-
minItemSize: new (0, $gDulG$
|
|
79
|
-
maxItemSize: new (0, $gDulG$
|
|
75
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(12, 12),
|
|
76
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(200, 200),
|
|
77
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(280, 280)
|
|
80
78
|
},
|
|
81
79
|
regular: {
|
|
82
|
-
minSpace: new (0, $gDulG$
|
|
83
|
-
minItemSize: new (0, $gDulG$
|
|
84
|
-
maxItemSize: new (0, $gDulG$
|
|
80
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(16, 16),
|
|
81
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(200, 200),
|
|
82
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(280, 280)
|
|
85
83
|
},
|
|
86
84
|
spacious: {
|
|
87
|
-
minSpace: new (0, $gDulG$
|
|
88
|
-
minItemSize: new (0, $gDulG$
|
|
89
|
-
maxItemSize: new (0, $gDulG$
|
|
85
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(20, 20),
|
|
86
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(200, 200),
|
|
87
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(280, 280)
|
|
90
88
|
}
|
|
91
89
|
},
|
|
92
90
|
L: {
|
|
93
91
|
compact: {
|
|
94
|
-
minSpace: new (0, $gDulG$
|
|
95
|
-
minItemSize: new (0, $gDulG$
|
|
96
|
-
maxItemSize: new (0, $gDulG$
|
|
92
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(16, 16),
|
|
93
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(270, 270),
|
|
94
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(370, 370)
|
|
97
95
|
},
|
|
98
96
|
regular: {
|
|
99
|
-
minSpace: new (0, $gDulG$
|
|
100
|
-
minItemSize: new (0, $gDulG$
|
|
101
|
-
maxItemSize: new (0, $gDulG$
|
|
97
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(20, 20),
|
|
98
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(270, 270),
|
|
99
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(370, 370)
|
|
102
100
|
},
|
|
103
101
|
spacious: {
|
|
104
|
-
minSpace: new (0, $gDulG$
|
|
105
|
-
minItemSize: new (0, $gDulG$
|
|
106
|
-
maxItemSize: new (0, $gDulG$
|
|
102
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(24, 24),
|
|
103
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(270, 270),
|
|
104
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(370, 370)
|
|
107
105
|
}
|
|
108
106
|
},
|
|
109
107
|
XL: {
|
|
110
108
|
compact: {
|
|
111
|
-
minSpace: new (0, $gDulG$
|
|
112
|
-
minItemSize: new (0, $gDulG$
|
|
113
|
-
maxItemSize: new (0, $gDulG$
|
|
109
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(20, 20),
|
|
110
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(340, 340),
|
|
111
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(460, 460)
|
|
114
112
|
},
|
|
115
113
|
regular: {
|
|
116
|
-
minSpace: new (0, $gDulG$
|
|
117
|
-
minItemSize: new (0, $gDulG$
|
|
118
|
-
maxItemSize: new (0, $gDulG$
|
|
114
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(24, 24),
|
|
115
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(340, 340),
|
|
116
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(460, 460)
|
|
119
117
|
},
|
|
120
118
|
spacious: {
|
|
121
|
-
minSpace: new (0, $gDulG$
|
|
122
|
-
minItemSize: new (0, $gDulG$
|
|
123
|
-
maxItemSize: new (0, $gDulG$
|
|
119
|
+
minSpace: new (0, $gDulG$reactariacomponents.Size)(28, 28),
|
|
120
|
+
minItemSize: new (0, $gDulG$reactariacomponents.Size)(340, 340),
|
|
121
|
+
maxItemSize: new (0, $gDulG$reactariacomponents.Size)(460, 460)
|
|
124
122
|
}
|
|
125
123
|
}
|
|
126
124
|
};
|
package/dist/CardView.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\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 {\n GridList as AriaGridList,\n ContextValue,\n GridLayout,\n GridListItem,\n GridListProps,\n Virtualizer,\n WaterfallLayout\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {Size} from '@react-stately/virtualizer';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** Provides the ActionBar to render when cards are selected in the CardView. */\n renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n boxSizing: 'border-box',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n position: 'relative', \n overflow: 'clip', \n size: 'fit'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let innerRef = useRef(null);\n let scrollRef = props.renderActionBar ? innerRef : domRef;\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = scrollRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: scrollRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, scrollRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n let cardView = (\n <Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={scrollRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={undefined}\n onSelectionChange={onSelectionChange}\n style={{\n ...(!props.renderActionBar ? UNSAFE_style : {}),\n // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n // Also add scroll padding so keyboard navigating preserves the padding.\n paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n scrollPadding: options.minSpace.height,\n scrollPaddingBottom: actionBarHeight + options.minSpace.height\n }}\n className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, !props.renderActionBar ? styles : undefined)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </Virtualizer>\n );\n\n // Add extra wrapper if there is an action bar so we can position relative to it.\n // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n if (props.renderActionBar) {\n return (\n <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n {cardView}\n {actionBar}\n </div>\n );\n }\n\n return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA2DD,MAAM,sCAAgB;IACpB,IAAI;QACF,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,GAAG;YACtB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,GAAG;YACtB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;IACF;IACA,GAAG;QACD,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,GAAG;YACtB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;IACF;IACA,GAAG;QACD,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;IACF;IACA,GAAG;QACD,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;IACF;IACA,IAAI;QACF,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,SAAS;YACP,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;QACA,UAAU;YACR,UAAU,IAAI,CAAA,GAAA,+BAAG,EAAE,IAAI;YACvB,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;YAC3B,aAAa,IAAI,CAAA,GAAA,+BAAG,EAAE,KAAK;QAC7B;IACF;AACF;AAEA,MAAM,8BAAQ;IAAC;IAAM;IAAK;IAAK;IAAK;CAAK;AAEzC,MAAM;;;;;;;;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;;;;;;;;AAMC,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAA0E;AAE9G,MAAM,4CAAyB,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,SAA2B,KAAuB,EAAE,GAA2B;IAC3J,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,EAAE,QAAQ,aAAa,MAAM,EAAE,MAAM,WAAW,GAAG,WAAE,UAAU,oBAAW,UAAU,2BAAW,iBAAiB,8BAAY,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IACvM,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,YAAY,MAAM,eAAe,GAAG,WAAW;IAEnD,kGAAkG;IAClG,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAE,4BAAM,MAAM,GAAG;IAC9D,IAAI,aAAa,CAAA,GAAA,oCAAa,EAAE;QAC9B,IAAI,IAAI,UAAU,OAAO,EAAE,eAAe;QAC1C,IAAI,IAAI,4BAAM,MAAM,GAAG;QACvB,MAAO,IAAI,EAAG;YACZ,IAAI,OAAO,mCAAa,CAAC,2BAAK,CAAC,EAAE,CAAC,CAAC,QAAQ;YAC3C,IAAI,KAAK,KAAK,WAAW,CAAC,KAAK,GAAG,IAAI,KAAK,QAAQ,CAAC,KAAK,GAAG,GAC1D;YAEF;QACF;QACA,gBAAgB;IAClB;IAEA,CAAA,GAAA,uCAAgB,EAAE;QAChB,KAAK;QACL,KAAK;QACL,UAAU;IACZ;IAEA,CAAA,GAAA,qCAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAW;IAEf,uGAAuG;IACvG,IAAI,OAAO,2BAAK,CAAC,KAAK,GAAG,CAAC,cAAc,4BAAM,OAAO,CAAC,WAAW;IACjE,IAAI,SAAS,eAAe,cAAc,CAAA,GAAA,0CAAc,IAAI,CAAA,GAAA,qCAAS;IACrE,IAAI,UAAU,mCAAa,CAAC,KAAK,CAAC,QAAQ;IAE1C,CAAA,GAAA,iCAAU,EAAE;QACV,WAAW,MAAM,YAAY,KAAK,UAAU,MAAM,YAAY,KAAK;QACnE,OAAO,MAAM,KAAK;QAClB,YAAY,MAAM,UAAU;IAC9B,GAAG;IAEH,IAAI,MAAM,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;kBAAC;qBAAM;QAAO,CAAA,GAAI;QAAC;QAAM;KAAQ;IAE1D,IAAI,gBAAC,YAAY,qBAAE,iBAAiB,aAAE,SAAS,mBAAE,eAAe,EAAC,GAAG,CAAA,GAAA,+CAAoB,EAAE;QAAC,GAAG,KAAK;mBAAE;IAAS;IAE9G,IAAI,yBACF,gCAAC,CAAA,GAAA,sCAAU;QAAE,QAAQ;QAAQ,eAAe;kBAC1C,cAAA,gCAAC,CAAA,GAAA,iDAAsB,EAAE,QAAQ;YAAC,OAAO,CAAA,GAAA,uCAAW;sBAClD,cAAA,gCAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;gBAAC,OAAO;0BAC3B,cAAA,gCAAC,CAAA,GAAA,0CAAe;8BACd,cAAA,gCAAC,CAAA,GAAA,mCAAW;wBACV,KAAK;wBACJ,GAAG,UAAU;wBACd,QAAO;wBACP,mBAAmB,mBAAmB,cAAc,YAAY;wBAChE,cAAc;wBACd,qBAAqB;wBACrB,mBAAmB;wBACnB,OAAO;4BACL,GAAI,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,CAAC;4BAC9C,kGAAkG;4BAClG,wEAAwE;4BACxE,eAAe,kBAAkB,IAAI,kBAAkB,QAAQ,QAAQ,CAAC,MAAM,GAAG;4BACjF,eAAe,QAAQ,QAAQ,CAAC,MAAM;4BACtC,qBAAqB,kBAAkB,QAAQ,QAAQ,CAAC,MAAM;wBAChE;wBACA,WAAW,CAAA,cAAe,AAAC,CAAA,CAAC,MAAM,eAAe,GAAG,mBAAmB,EAAC,IAAK,qCAAe;gCAAC,GAAG,WAAW;gCAAE,WAAW,MAAM,YAAY,KAAK;4BAAS,GAAG,CAAC,MAAM,eAAe,GAAG,SAAS;kCAC5L;;;;;;IAQb,iFAAiF;IACjF,yFAAyF;IACzF,IAAI,MAAM,eAAe,EACvB,qBACE,iCAAC;QAAI,KAAK;QAAQ,WAAW,mBAAmB,oCAAc,MAAM;QAAS,OAAO;;YACjF;YACA;;;IAKP,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\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 {\n GridList as AriaGridList,\n ContextValue,\n GridLayout,\n GridListItem,\n GridListProps,\n Size,\n Virtualizer,\n WaterfallLayout\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** Provides the ActionBar to render when cards are selected in the CardView. */\n renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n boxSizing: 'border-box',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n position: 'relative', \n overflow: 'clip', \n size: 'fit'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let innerRef = useRef(null);\n let scrollRef = props.renderActionBar ? innerRef : domRef;\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = scrollRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: scrollRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, scrollRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n let cardView = (\n <Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={scrollRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={undefined}\n onSelectionChange={onSelectionChange}\n style={{\n ...(!props.renderActionBar ? UNSAFE_style : {}),\n // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n // Also add scroll padding so keyboard navigating preserves the padding.\n paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n scrollPadding: options.minSpace.height,\n scrollPaddingBottom: actionBarHeight + options.minSpace.height\n }}\n className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, !props.renderActionBar ? styles : undefined)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </Virtualizer>\n );\n\n // Add extra wrapper if there is an action bar so we can position relative to it.\n // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n if (props.renderActionBar) {\n return (\n <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n {cardView}\n {actionBar}\n </div>\n );\n }\n\n return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.cjs.map"}
|
package/dist/CardView.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AC+JuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBC;;AAAA;EAAA;IAAA","sources":["bcfa03266ec99ed3","packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["@import \"b9a56ec855293cb6\";\n@import \"879fd470e85635cf\";\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 {\n GridList as AriaGridList,\n ContextValue,\n GridLayout,\n GridListItem,\n GridListProps,\n Virtualizer,\n WaterfallLayout\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {Size} from '@react-stately/virtualizer';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** Provides the ActionBar to render when cards are selected in the CardView. */\n renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n boxSizing: 'border-box',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n position: 'relative', \n overflow: 'clip', \n size: 'fit'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let innerRef = useRef(null);\n let scrollRef = props.renderActionBar ? innerRef : domRef;\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = scrollRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: scrollRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, scrollRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n let cardView = (\n <Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={scrollRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={undefined}\n onSelectionChange={onSelectionChange}\n style={{\n ...(!props.renderActionBar ? UNSAFE_style : {}),\n // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n // Also add scroll padding so keyboard navigating preserves the padding.\n paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n scrollPadding: options.minSpace.height,\n scrollPaddingBottom: actionBarHeight + options.minSpace.height\n }}\n className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, !props.renderActionBar ? styles : undefined)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </Virtualizer>\n );\n\n // Add extra wrapper if there is an action bar so we can position relative to it.\n // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n if (props.renderActionBar) {\n return (\n <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n {cardView}\n {actionBar}\n </div>\n );\n }\n\n return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.css.map"}
|
|
1
|
+
{"mappings":"AC+JuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBC;;AAAA;EAAA;IAAA","sources":["bcfa03266ec99ed3","packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["@import \"b9a56ec855293cb6\";\n@import \"879fd470e85635cf\";\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 {\n GridList as AriaGridList,\n ContextValue,\n GridLayout,\n GridListItem,\n GridListProps,\n Size,\n Virtualizer,\n WaterfallLayout\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** Provides the ActionBar to render when cards are selected in the CardView. */\n renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n boxSizing: 'border-box',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n position: 'relative', \n overflow: 'clip', \n size: 'fit'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let innerRef = useRef(null);\n let scrollRef = props.renderActionBar ? innerRef : domRef;\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = scrollRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: scrollRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, scrollRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n let cardView = (\n <Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={scrollRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={undefined}\n onSelectionChange={onSelectionChange}\n style={{\n ...(!props.renderActionBar ? UNSAFE_style : {}),\n // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n // Also add scroll padding so keyboard navigating preserves the padding.\n paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n scrollPadding: options.minSpace.height,\n scrollPaddingBottom: actionBarHeight + options.minSpace.height\n }}\n className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, !props.renderActionBar ? styles : undefined)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </Virtualizer>\n );\n\n // Add extra wrapper if there is an action bar so we can position relative to it.\n // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n if (props.renderActionBar) {\n return (\n <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n {cardView}\n {actionBar}\n </div>\n );\n }\n\n return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.css.map"}
|
package/dist/CardView.mjs
CHANGED
|
@@ -4,9 +4,8 @@ import {ImageCoordinator as $4b5e069e9e001e8b$export$1b926c015f09611d} from "./I
|
|
|
4
4
|
import {useActionBarContainer as $f21f2186348fbc5b$export$13f32e21845e01d0} from "./ActionBar.mjs";
|
|
5
5
|
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
|
|
6
6
|
import {jsx as $aG2ym$jsx, jsxs as $aG2ym$jsxs} from "react/jsx-runtime";
|
|
7
|
-
import {WaterfallLayout as $aG2ym$WaterfallLayout, GridLayout as $aG2ym$GridLayout, Virtualizer as $aG2ym$Virtualizer, GridListItem as $aG2ym$GridListItem, GridList as $aG2ym$GridList} from "react-aria-components";
|
|
7
|
+
import {Size as $aG2ym$Size, WaterfallLayout as $aG2ym$WaterfallLayout, GridLayout as $aG2ym$GridLayout, Virtualizer as $aG2ym$Virtualizer, GridListItem as $aG2ym$GridListItem, GridList as $aG2ym$GridList} from "react-aria-components";
|
|
8
8
|
import {createContext as $aG2ym$createContext, forwardRef as $aG2ym$forwardRef, useRef as $aG2ym$useRef, useState as $aG2ym$useState, useMemo as $aG2ym$useMemo} from "react";
|
|
9
|
-
import {Size as $aG2ym$Size} from "@react-stately/virtualizer";
|
|
10
9
|
import {useDOMRef as $aG2ym$useDOMRef} from "@react-spectrum/utils";
|
|
11
10
|
import {useEffectEvent as $aG2ym$useEffectEvent, useResizeObserver as $aG2ym$useResizeObserver, useLayoutEffect as $aG2ym$useLayoutEffect, useLoadMore as $aG2ym$useLoadMore} from "@react-aria/utils";
|
|
12
11
|
|
|
@@ -29,7 +28,6 @@ import {useEffectEvent as $aG2ym$useEffectEvent, useResizeObserver as $aG2ym$use
|
|
|
29
28
|
|
|
30
29
|
|
|
31
30
|
|
|
32
|
-
|
|
33
31
|
const $bbcff092fe610ff3$var$layoutOptions = {
|
|
34
32
|
XS: {
|
|
35
33
|
compact: {
|
package/dist/CardView.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\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 {\n GridList as AriaGridList,\n ContextValue,\n GridLayout,\n GridListItem,\n GridListProps,\n Virtualizer,\n WaterfallLayout\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {Size} from '@react-stately/virtualizer';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** Provides the ActionBar to render when cards are selected in the CardView. */\n renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n boxSizing: 'border-box',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n position: 'relative', \n overflow: 'clip', \n size: 'fit'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let innerRef = useRef(null);\n let scrollRef = props.renderActionBar ? innerRef : domRef;\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = scrollRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: scrollRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, scrollRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n let cardView = (\n <Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={scrollRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={undefined}\n onSelectionChange={onSelectionChange}\n style={{\n ...(!props.renderActionBar ? UNSAFE_style : {}),\n // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n // Also add scroll padding so keyboard navigating preserves the padding.\n paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n scrollPadding: options.minSpace.height,\n scrollPaddingBottom: actionBarHeight + options.minSpace.height\n }}\n className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, !props.renderActionBar ? styles : undefined)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </Virtualizer>\n );\n\n // Add extra wrapper if there is an action bar so we can position relative to it.\n // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n if (props.renderActionBar) {\n return (\n <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n {cardView}\n {actionBar}\n </div>\n );\n }\n\n return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\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 {\n GridList as AriaGridList,\n ContextValue,\n GridLayout,\n GridListItem,\n GridListProps,\n Size,\n Virtualizer,\n WaterfallLayout\n} from 'react-aria-components';\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n /**\n * The layout of the cards.\n * @default 'grid'\n */\n layout?: 'grid' | 'waterfall',\n /**\n * The size of the cards.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the cards.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The visual style of the cards.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n /**\n * How selection should be displayed.\n * @default 'checkbox'\n */\n selectionStyle?: 'checkbox' | 'highlight',\n /** The loading state of the CardView. */\n loadingState?: LoadingState,\n /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n onLoadMore?: () => void,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** Provides the ActionBar to render when cards are selected in the CardView. */\n renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\n}\n\nconst layoutOptions = {\n XS: {\n compact: {\n minSpace: new Size(6, 6),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n regular: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n },\n spacious: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(100, 100),\n maxItemSize: new Size(140, 140)\n }\n },\n S: {\n compact: {\n minSpace: new Size(8, 8),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n regular: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n },\n spacious: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(150, 150),\n maxItemSize: new Size(210, 210)\n }\n },\n M: {\n compact: {\n minSpace: new Size(12, 12),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n regular: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n },\n spacious: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(200, 200),\n maxItemSize: new Size(280, 280)\n }\n },\n L: {\n compact: {\n minSpace: new Size(16, 16),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n regular: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n },\n spacious: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(270, 270),\n maxItemSize: new Size(370, 370)\n }\n },\n XL: {\n compact: {\n minSpace: new Size(20, 20),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n regular: {\n minSpace: new Size(24, 24),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n },\n spacious: {\n minSpace: new Size(28, 28),\n minItemSize: new Size(340, 340),\n maxItemSize: new Size(460, 460)\n }\n }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n overflowY: {\n default: 'auto',\n isLoading: 'hidden'\n },\n display: {\n isEmpty: 'flex'\n },\n boxSizing: 'border-box',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isEmpty: {\n isFocusVisible: 'solid'\n }\n },\n outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n position: 'relative', \n overflow: 'clip', \n size: 'fit'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let innerRef = useRef(null);\n let scrollRef = props.renderActionBar ? innerRef : domRef;\n\n // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n let updateSize = useEffectEvent(() => {\n let w = scrollRef.current?.clientWidth ?? 0;\n let i = SIZES.length - 1;\n while (i > 0) {\n let opts = layoutOptions[SIZES[i]][density];\n if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n break;\n }\n i--;\n }\n setMaxSizeIndex(i);\n });\n\n useResizeObserver({\n ref: scrollRef,\n box: 'border-box',\n onResize: updateSize\n });\n\n useLayoutEffect(() => {\n updateSize();\n }, [updateSize]);\n\n // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n let layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n let options = layoutOptions[size][density];\n\n useLoadMore({\n isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n onLoadMore: props.onLoadMore\n }, scrollRef);\n\n let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n let cardView = (\n <Virtualizer layout={layout} layoutOptions={options}>\n <InternalCardViewContext.Provider value={GridListItem}>\n <CardContext.Provider value={ctx}>\n <ImageCoordinator>\n <AriaGridList\n ref={scrollRef}\n {...otherProps}\n layout=\"grid\"\n selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={undefined}\n onSelectionChange={onSelectionChange}\n style={{\n ...(!props.renderActionBar ? UNSAFE_style : {}),\n // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n // Also add scroll padding so keyboard navigating preserves the padding.\n paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n scrollPadding: options.minSpace.height,\n scrollPaddingBottom: actionBarHeight + options.minSpace.height\n }}\n className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, !props.renderActionBar ? styles : undefined)}>\n {children}\n </AriaGridList>\n </ImageCoordinator>\n </CardContext.Provider>\n </InternalCardViewContext.Provider>\n </Virtualizer>\n );\n\n // Add extra wrapper if there is an action bar so we can position relative to it.\n // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n if (props.renderActionBar) {\n return (\n <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n {cardView}\n {actionBar}\n </div>\n );\n }\n\n return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.mjs.map"}
|
package/dist/ColorSwatch.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,qCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\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 {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,qCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\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 {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n Color,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.cjs.map"}
|
package/dist/ColorSwatch.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA2EiB;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;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\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 {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {
|
|
1
|
+
{"mappings":"AA2EiB;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;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\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 {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n Color,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.css.map"}
|
package/dist/ColorSwatch.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\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 {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {
|
|
1
|
+
{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.tsx"],"sourcesContent":["/*\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 {\n ColorSwatch as AriaColorSwatch,\n ColorSwatchProps as AriaColorSwatchProps,\n Color,\n ContextValue,\n parseColor\n} from 'react-aria-components';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n /**\n * The size of the ColorSwatch.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the ColorSwatch.\n * @default 'default'\n */\n rounding?: 'default' | 'none' | 'full',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n let domRef = useDOMRef(ref);\n let ctx = useContext(InternalColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default',\n color\n } = props;\n let nonNullValue = color || '#fff0';\n color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n let swatch = (\n <AriaColorSwatch\n {...props}\n color={color}\n ref={domRef}\n style={({color}) => ({\n // TODO: should there be a distinction between transparent and no value (e.g. null)?\n background: color.getChannelValue('alpha') > 0\n ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n // Red slash to indicate there is no selected color.\n : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n })}\n className={style({\n size: {\n size: {\n XS: 16,\n S: 24,\n M: 32,\n L: 40\n }\n },\n borderRadius: {\n rounding: {\n default: 'sm',\n none: 'none',\n full: 'full'\n }\n },\n borderColor: 'gray-1000/42',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none',\n '--slash-color': {\n type: 'color',\n value: 'red-900'\n }\n }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n );\n\n // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n if (ctx) {\n return ctx.useWrapper(swatch, color, rounding);\n }\n\n return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.mjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,4CAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;UAUV;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gCAAC,CAAA,GAAA,oDAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gCAAC,CAAA,GAAA,gDAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gCAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAmBrB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["/*\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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n /** The ColorSwatches within the ColorSwatchPicker. */\n children: ReactNode,\n /**\n * The amount of padding between the swatches.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The size of the color swatches.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the color swatches.\n * @default 'none'\n */\n rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n let {\n density = 'regular',\n size = 'M',\n rounding = 'none',\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <AriaColorSwatchPicker\n {...otherProps}\n ref={domRef}\n className={props.UNSAFE_className + style({\n display: 'flex',\n flexWrap: 'wrap',\n gap: {\n density: {\n compact: space(2),\n regular: 4,\n spacious: space(6)\n }\n }\n }, getAllowedOverrides())({density}, props.styles)}>\n <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n {props.children}\n </InternalColorSwatchContext.Provider>\n </AriaColorSwatchPicker>\n );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n return (\n <AriaColorSwatchPickerItem\n color={color}\n className={renderProps => style({\n ...focusRing(),\n position: 'relative',\n borderRadius: {\n rounding: {\n none: 'none',\n default: 'sm',\n full: 'full'\n }\n }\n })({...renderProps, rounding})}>\n {({isSelected}) => (<>\n {swatch}\n {isSelected && (\n <div\n aria-hidden\n className={style({\n position: 'absolute',\n pointerEvents: 'none',\n inset: 0,\n boxSizing: 'border-box',\n borderColor: 'gray-900',\n borderStyle: 'solid',\n borderWidth: 2,\n outlineColor: 'gray-25',\n outlineStyle: 'solid',\n outlineWidth: 2,\n outlineOffset: -4,\n forcedColorAdjust: 'none',\n borderRadius: '[inherit]'\n })} />\n )}\n </>)}\n </AriaColorSwatchPickerItem>\n );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"AC4D0C;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtCmB;;AAsBV;EAAA;IAAA","sources":["26baf334ec196f8c","packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["@import \"e16c0c8e50c537a4\";\n@import \"6325f62168102e9d\";\n@import \"aa108d3a66fddade\";\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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n /** The ColorSwatches within the ColorSwatchPicker. */\n children: ReactNode,\n /**\n * The amount of padding between the swatches.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The size of the color swatches.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the color swatches.\n * @default 'none'\n */\n rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n let {\n density = 'regular',\n size = 'M',\n rounding = 'none',\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <AriaColorSwatchPicker\n {...otherProps}\n ref={domRef}\n className={props.UNSAFE_className + style({\n display: 'flex',\n flexWrap: 'wrap',\n gap: {\n density: {\n compact: space(2),\n regular: 4,\n spacious: space(6)\n }\n }\n }, getAllowedOverrides())({density}, props.styles)}>\n <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n {props.children}\n </InternalColorSwatchContext.Provider>\n </AriaColorSwatchPicker>\n );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n return (\n <AriaColorSwatchPickerItem\n color={color}\n className={renderProps => style({\n ...focusRing(),\n position: 'relative',\n borderRadius: {\n rounding: {\n none: 'none',\n default: 'sm',\n full: 'full'\n }\n }\n })({...renderProps, rounding})}>\n {({isSelected}) => (<>\n {swatch}\n {isSelected && (\n <div\n aria-hidden\n className={style({\n position: 'absolute',\n pointerEvents: 'none',\n inset: 0,\n boxSizing: 'border-box',\n borderColor: 'gray-900',\n borderStyle: 'solid',\n borderWidth: 2,\n outlineColor: 'gray-25',\n outlineStyle: 'solid',\n outlineWidth: 2,\n outlineOffset: -4,\n forcedColorAdjust: 'none',\n borderRadius: '[inherit]'\n })} />\n )}\n </>)}\n </AriaColorSwatchPickerItem>\n );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.css.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;UAUV;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gBAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gBAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gBAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAmBrB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["/*\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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n /** The ColorSwatches within the ColorSwatchPicker. */\n children: ReactNode,\n /**\n * The amount of padding between the swatches.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The size of the color swatches.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the color swatches.\n * @default 'none'\n */\n rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n let {\n density = 'regular',\n size = 'M',\n rounding = 'none',\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <AriaColorSwatchPicker\n {...otherProps}\n ref={domRef}\n className={props.UNSAFE_className + style({\n display: 'flex',\n flexWrap: 'wrap',\n gap: {\n density: {\n compact: space(2),\n regular: 4,\n spacious: space(6)\n }\n }\n }, getAllowedOverrides())({density}, props.styles)}>\n <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n {props.children}\n </InternalColorSwatchContext.Provider>\n </AriaColorSwatchPicker>\n );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n return (\n <AriaColorSwatchPickerItem\n color={color}\n className={renderProps => style({\n ...focusRing(),\n position: 'relative',\n borderRadius: {\n rounding: {\n none: 'none',\n default: 'sm',\n full: 'full'\n }\n }\n })({...renderProps, rounding})}>\n {({isSelected}) => (<>\n {swatch}\n {isSelected && (\n <div\n aria-hidden\n className={style({\n position: 'absolute',\n pointerEvents: 'none',\n inset: 0,\n boxSizing: 'border-box',\n borderColor: 'gray-900',\n borderStyle: 'solid',\n borderWidth: 2,\n outlineColor: 'gray-25',\n outlineStyle: 'solid',\n outlineWidth: 2,\n outlineOffset: -4,\n forcedColorAdjust: 'none',\n borderRadius: '[inherit]'\n })} />\n )}\n </>)}\n </AriaColorSwatchPickerItem>\n );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.mjs.map"}
|
package/dist/TableView.cjs
CHANGED
|
@@ -15,7 +15,6 @@ var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
|
|
|
15
15
|
var $iLVc8$reactjsxruntime = require("react/jsx-runtime");
|
|
16
16
|
var $iLVc8$reactariacomponents = require("react-aria-components");
|
|
17
17
|
var $iLVc8$react = require("react");
|
|
18
|
-
var $iLVc8$reactstatelyvirtualizer = require("@react-stately/virtualizer");
|
|
19
18
|
var $iLVc8$reactspectrumutils = require("@react-spectrum/utils");
|
|
20
19
|
var $iLVc8$reactariautils = require("@react-aria/utils");
|
|
21
20
|
var $iLVc8$reactariai18n = require("@react-aria/i18n");
|
|
@@ -67,7 +66,6 @@ $parcel$export(module.exports, "Row", () => $bed37377ec7a3a9e$export$b59bdbef9ce
|
|
|
67
66
|
|
|
68
67
|
|
|
69
68
|
|
|
70
|
-
|
|
71
69
|
let $bed37377ec7a3a9e$var$InternalTableContext = /*#__PURE__*/ (0, $iLVc8$react.createContext)({});
|
|
72
70
|
const $bed37377ec7a3a9e$var$tableWrapper = " oo qo _0d __Ga __S-yksgrp Vc __wc __xc";
|
|
73
71
|
const $bed37377ec7a3a9e$var$table = function anonymous(props, overrides) {
|
|
@@ -178,7 +176,7 @@ class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomp
|
|
|
178
176
|
layoutInfo.allowOverflow = true;
|
|
179
177
|
// If loading or empty, we'll want the body to be sticky and centered
|
|
180
178
|
if (children?.length === 0) {
|
|
181
|
-
layoutInfo.rect = new (0, $iLVc8$
|
|
179
|
+
layoutInfo.rect = new (0, $iLVc8$reactariacomponents.Rect)(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
|
|
182
180
|
layoutInfo.isSticky = true;
|
|
183
181
|
}
|
|
184
182
|
return {
|