@arc-ui/components 11.14.0 → 11.16.0
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/Breadcrumbs/Breadcrumbs.cjs.js +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.esm.js +1 -1
- package/dist/Checkbox/Checkbox.cjs.js +2 -2
- package/dist/Checkbox/Checkbox.esm.js +2 -2
- package/dist/FormControl/FormControl.cjs.js +1 -1
- package/dist/FormControl/FormControl.esm.js +1 -1
- package/dist/InformationCard/InformationCard.cjs.js +25 -43
- package/dist/InformationCard/InformationCard.esm.js +24 -42
- package/dist/Modal/Modal.cjs.js +16 -40
- package/dist/Modal/Modal.esm.js +6 -30
- package/dist/PaginationSimple/PaginationSimple.cjs.js +19 -16
- package/dist/PaginationSimple/PaginationSimple.esm.js +19 -16
- package/dist/RadioGroup/RadioGroup.cjs.js +2 -2
- package/dist/RadioGroup/RadioGroup.esm.js +2 -2
- package/dist/Select/Select.cjs.js +2736 -619
- package/dist/Select/Select.esm.js +2535 -418
- package/dist/Switch/Switch.cjs.js +335 -11
- package/dist/Switch/Switch.esm.js +328 -4
- package/dist/Tabs/Tabs.cjs.js +7 -4
- package/dist/Tabs/Tabs.esm.js +7 -4
- package/dist/TextArea/TextArea.cjs.js +17 -12
- package/dist/TextArea/TextArea.esm.js +17 -12
- package/dist/TextInput/TextInput.cjs.js +2 -2
- package/dist/TextInput/TextInput.esm.js +2 -2
- package/dist/Toast/Toast.cjs.js +7 -4
- package/dist/Toast/Toast.esm.js +7 -4
- package/dist/TypographyCard/TypographyCard.cjs.js +93 -0
- package/dist/TypographyCard/TypographyCard.esm.js +85 -0
- package/dist/TypographyCard/package.json +7 -0
- package/dist/UniversalHeader/UniversalHeader.cjs.js +1 -1
- package/dist/UniversalHeader/UniversalHeader.esm.js +1 -1
- package/dist/_shared/cjs/{Breadcrumbs-ed70e75a.js → Breadcrumbs-ef659d2b.js} +5 -5
- package/dist/_shared/cjs/BtIconArrowRight.esm-8e8ac316.js +30 -0
- package/dist/_shared/cjs/BtIconArrowRightFill.esm-435cf4bd.js +26 -0
- package/dist/_shared/cjs/{Checkbox-b126194e.js → Checkbox-904ad028.js} +1 -1
- package/dist/_shared/cjs/{FormControl-7daf8110.js → FormControl-166e0957.js} +5 -1
- package/dist/_shared/cjs/{RadioGroup-56e3b0e5.js → RadioGroup-1eddf86f.js} +1 -1
- package/dist/_shared/cjs/{Tabs-2d2a517d.js → Tabs-cc77dabb.js} +17 -37
- package/dist/_shared/cjs/{TextInput-bf1fe052.js → TextInput-fd9c756f.js} +10 -4
- package/dist/_shared/cjs/{Toast-69108261.js → Toast-91e96744.js} +36 -54
- package/dist/_shared/cjs/{UniversalHeader-5e43d320.js → UniversalHeader-b8389447.js} +4 -2
- package/dist/_shared/cjs/index-1641d0b4.js +27 -0
- package/dist/_shared/cjs/{index-43458549.js → index-3d69ea00.js} +28 -1
- package/dist/_shared/cjs/index-49c72a87.js +131 -0
- package/dist/_shared/cjs/{index-6b2a9ac3.js → index-4ecad2dd.js} +6 -22
- package/dist/_shared/cjs/{index.module-dd1d7d0b.js → index-56a040f4.js} +87 -104
- package/dist/_shared/cjs/index-6542b467.js +23 -0
- package/dist/_shared/cjs/{index-adbb63da.js → index-84e6a68f.js} +1 -1
- package/dist/_shared/cjs/{index-b2fd6338.js → index-d31f2b65.js} +1 -1
- package/dist/_shared/cjs/index-dcfdd5da.js +11 -0
- package/dist/_shared/esm/{Breadcrumbs-87e2bd46.js → Breadcrumbs-36edfb3d.js} +5 -5
- package/dist/_shared/esm/BtIconArrowRight.esm-267916a4.js +24 -0
- package/dist/_shared/esm/BtIconArrowRightFill.esm-99019d1a.js +20 -0
- package/dist/_shared/esm/{Checkbox-d6ec5024.js → Checkbox-8a5bb9a1.js} +1 -1
- package/dist/_shared/esm/{FormControl-351e5f1b.js → FormControl-9d4ddfec.js} +5 -1
- package/dist/_shared/esm/{RadioGroup-c838764c.js → RadioGroup-238db88d.js} +1 -1
- package/dist/_shared/esm/{Tabs-f903187a.js → Tabs-8719d952.js} +7 -27
- package/dist/_shared/esm/{TextInput-991804b6.js → TextInput-c1e2a1dd.js} +10 -4
- package/dist/_shared/esm/{Toast-37549e68.js → Toast-7cb1e544.js} +6 -24
- package/dist/_shared/esm/{UniversalHeader-b4c1577c.js → UniversalHeader-80c7313f.js} +4 -2
- package/dist/_shared/esm/{index.module-44714d3f.js → index-12f3a407.js} +89 -105
- package/dist/_shared/esm/index-246b4f18.js +21 -0
- package/dist/_shared/esm/{index-a1d2d9b3.js → index-39019a9b.js} +1 -1
- package/dist/_shared/esm/{index-41d7af2b.js → index-3e2bc99d.js} +29 -3
- package/dist/_shared/esm/index-6b7b075c.js +25 -0
- package/dist/_shared/esm/{index-efd9ef1c.js → index-936b5179.js} +1 -1
- package/dist/_shared/esm/index-a624de47.js +9 -0
- package/dist/_shared/esm/{index-3797d77e.js → index-d0307140.js} +5 -21
- package/dist/_shared/esm/index-db47e95a.js +129 -0
- package/dist/index.es.js +3062 -865
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +3062 -864
- package/dist/index.js.map +1 -1
- package/dist/styles.css +5 -5
- package/dist/types/components/MediaCard/MediaCard.d.ts +24 -30
- package/dist/types/components/Select/Select.d.ts +49 -0
- package/dist/types/components/TextInput/TextInput.d.ts +12 -1
- package/dist/types/components/TypographyCard/TypographyCard.d.ts +48 -0
- package/dist/types/components/TypographyCard/index.d.ts +1 -0
- package/dist/types/components/UniversalHeader/UniversalHeader.d.ts +4 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/internal-components/ConditionalWrapper/ConditionalWrapper.d.ts +6 -0
- package/dist/types/internal-components/ConditionalWrapper/index.d.ts +1 -0
- package/dist/types/internal-components/index.d.ts +1 -0
- package/dist/types/styles.d.ts +2 -1
- package/package.json +2 -2
- package/dist/_shared/cjs/index-c575a255.js +0 -490
- package/dist/_shared/esm/index-13d575cc.js +0 -479
- package/dist/types/components/MediaCard/MediaCard.stories-wip.d.ts +0 -15
|
@@ -1,479 +0,0 @@
|
|
|
1
|
-
import { useCallback, createContext, useMemo, createElement, useContext, useLayoutEffect, useRef, useEffect, useState, forwardRef, Children, isValidElement, cloneElement, Fragment, useReducer } from 'react';
|
|
2
|
-
import { _ as _extends } from './extends-8cc61aad.js';
|
|
3
|
-
import { flushSync } from 'react-dom';
|
|
4
|
-
|
|
5
|
-
function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true } = {}) {
|
|
6
|
-
return function handleEvent(event) {
|
|
7
|
-
originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
|
|
8
|
-
if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Set a given ref to a given value
|
|
14
|
-
* This utility takes care of different types of refs: callback refs and RefObject(s)
|
|
15
|
-
*/ function $6ed0406888f73fc4$var$setRef(ref, value) {
|
|
16
|
-
if (typeof ref === 'function') ref(value);
|
|
17
|
-
else if (ref !== null && ref !== undefined) ref.current = value;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* A utility to compose multiple refs together
|
|
21
|
-
* Accepts callback refs and RefObject(s)
|
|
22
|
-
*/ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
|
|
23
|
-
return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
|
|
24
|
-
)
|
|
25
|
-
;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* A custom hook that composes multiple refs
|
|
29
|
-
* Accepts callback refs and RefObject(s)
|
|
30
|
-
*/ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
|
|
31
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
32
|
-
return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* -------------------------------------------------------------------------------------------------
|
|
36
|
-
* createContextScope
|
|
37
|
-
* -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName, createContextScopeDeps = []) {
|
|
38
|
-
let defaultContexts = [];
|
|
39
|
-
/* -----------------------------------------------------------------------------------------------
|
|
40
|
-
* createContext
|
|
41
|
-
* ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
|
|
42
|
-
const BaseContext = /*#__PURE__*/ createContext(defaultContext);
|
|
43
|
-
const index = defaultContexts.length;
|
|
44
|
-
defaultContexts = [
|
|
45
|
-
...defaultContexts,
|
|
46
|
-
defaultContext
|
|
47
|
-
];
|
|
48
|
-
function Provider(props) {
|
|
49
|
-
const { scope: scope , children: children , ...context } = props;
|
|
50
|
-
const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; // Only re-memoize when prop values change
|
|
51
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
52
|
-
const value = useMemo(()=>context
|
|
53
|
-
, Object.values(context));
|
|
54
|
-
return /*#__PURE__*/ createElement(Context.Provider, {
|
|
55
|
-
value: value
|
|
56
|
-
}, children);
|
|
57
|
-
}
|
|
58
|
-
function useContext$1(consumerName, scope) {
|
|
59
|
-
const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
|
|
60
|
-
const context = useContext(Context);
|
|
61
|
-
if (context) return context;
|
|
62
|
-
if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
|
|
63
|
-
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
64
|
-
}
|
|
65
|
-
Provider.displayName = rootComponentName + 'Provider';
|
|
66
|
-
return [
|
|
67
|
-
Provider,
|
|
68
|
-
useContext$1
|
|
69
|
-
];
|
|
70
|
-
}
|
|
71
|
-
/* -----------------------------------------------------------------------------------------------
|
|
72
|
-
* createScope
|
|
73
|
-
* ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
|
|
74
|
-
const scopeContexts = defaultContexts.map((defaultContext)=>{
|
|
75
|
-
return /*#__PURE__*/ createContext(defaultContext);
|
|
76
|
-
});
|
|
77
|
-
return function useScope(scope) {
|
|
78
|
-
const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
|
|
79
|
-
return useMemo(()=>({
|
|
80
|
-
[`__scope${scopeName}`]: {
|
|
81
|
-
...scope,
|
|
82
|
-
[scopeName]: contexts
|
|
83
|
-
}
|
|
84
|
-
})
|
|
85
|
-
, [
|
|
86
|
-
scope,
|
|
87
|
-
contexts
|
|
88
|
-
]);
|
|
89
|
-
};
|
|
90
|
-
};
|
|
91
|
-
createScope.scopeName = scopeName;
|
|
92
|
-
return [
|
|
93
|
-
$c512c27ab02ef895$export$fd42f52fd3ae1109,
|
|
94
|
-
$c512c27ab02ef895$var$composeContextScopes(createScope, ...createContextScopeDeps)
|
|
95
|
-
];
|
|
96
|
-
}
|
|
97
|
-
/* -------------------------------------------------------------------------------------------------
|
|
98
|
-
* composeContextScopes
|
|
99
|
-
* -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$var$composeContextScopes(...scopes) {
|
|
100
|
-
const baseScope = scopes[0];
|
|
101
|
-
if (scopes.length === 1) return baseScope;
|
|
102
|
-
const createScope1 = ()=>{
|
|
103
|
-
const scopeHooks = scopes.map((createScope)=>({
|
|
104
|
-
useScope: createScope(),
|
|
105
|
-
scopeName: createScope.scopeName
|
|
106
|
-
})
|
|
107
|
-
);
|
|
108
|
-
return function useComposedScopes(overrideScopes) {
|
|
109
|
-
const nextScopes1 = scopeHooks.reduce((nextScopes, { useScope: useScope , scopeName: scopeName })=>{
|
|
110
|
-
// We are calling a hook inside a callback which React warns against to avoid inconsistent
|
|
111
|
-
// renders, however, scoping doesn't have render side effects so we ignore the rule.
|
|
112
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
113
|
-
const scopeProps = useScope(overrideScopes);
|
|
114
|
-
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
115
|
-
return {
|
|
116
|
-
...nextScopes,
|
|
117
|
-
...currentScope
|
|
118
|
-
};
|
|
119
|
-
}, {});
|
|
120
|
-
return useMemo(()=>({
|
|
121
|
-
[`__scope${baseScope.scopeName}`]: nextScopes1
|
|
122
|
-
})
|
|
123
|
-
, [
|
|
124
|
-
nextScopes1
|
|
125
|
-
]);
|
|
126
|
-
};
|
|
127
|
-
};
|
|
128
|
-
createScope1.scopeName = baseScope.scopeName;
|
|
129
|
-
return createScope1;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* On the server, React emits a warning when calling `useLayoutEffect`.
|
|
134
|
-
* This is because neither `useLayoutEffect` nor `useEffect` run on the server.
|
|
135
|
-
* We use this safe version which suppresses the warning by replacing it with a noop on the server.
|
|
136
|
-
*
|
|
137
|
-
* See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
|
|
138
|
-
*/ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
|
|
139
|
-
|
|
140
|
-
/**
|
|
141
|
-
* A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
|
|
142
|
-
* prop or avoid re-executing effects when passed as a dependency
|
|
143
|
-
*/ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
|
|
144
|
-
const callbackRef = useRef(callback);
|
|
145
|
-
useEffect(()=>{
|
|
146
|
-
callbackRef.current = callback;
|
|
147
|
-
}); // https://github.com/facebook/react/issues/19240
|
|
148
|
-
return useMemo(()=>(...args)=>{
|
|
149
|
-
var _callbackRef$current;
|
|
150
|
-
return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
|
|
151
|
-
}
|
|
152
|
-
, []);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{} }) {
|
|
156
|
-
const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
|
|
157
|
-
defaultProp: defaultProp,
|
|
158
|
-
onChange: onChange
|
|
159
|
-
});
|
|
160
|
-
const isControlled = prop !== undefined;
|
|
161
|
-
const value1 = isControlled ? prop : uncontrolledProp;
|
|
162
|
-
const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
|
|
163
|
-
const setValue = useCallback((nextValue)=>{
|
|
164
|
-
if (isControlled) {
|
|
165
|
-
const setter = nextValue;
|
|
166
|
-
const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
|
|
167
|
-
if (value !== prop) handleChange(value);
|
|
168
|
-
} else setUncontrolledProp(nextValue);
|
|
169
|
-
}, [
|
|
170
|
-
isControlled,
|
|
171
|
-
prop,
|
|
172
|
-
setUncontrolledProp,
|
|
173
|
-
handleChange
|
|
174
|
-
]);
|
|
175
|
-
return [
|
|
176
|
-
value1,
|
|
177
|
-
setValue
|
|
178
|
-
];
|
|
179
|
-
}
|
|
180
|
-
function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange }) {
|
|
181
|
-
const uncontrolledState = useState(defaultProp);
|
|
182
|
-
const [value] = uncontrolledState;
|
|
183
|
-
const prevValueRef = useRef(value);
|
|
184
|
-
const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
|
|
185
|
-
useEffect(()=>{
|
|
186
|
-
if (prevValueRef.current !== value) {
|
|
187
|
-
handleChange(value);
|
|
188
|
-
prevValueRef.current = value;
|
|
189
|
-
}
|
|
190
|
-
}, [
|
|
191
|
-
value,
|
|
192
|
-
prevValueRef,
|
|
193
|
-
handleChange
|
|
194
|
-
]);
|
|
195
|
-
return uncontrolledState;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
/* -------------------------------------------------------------------------------------------------
|
|
199
|
-
* Slot
|
|
200
|
-
* -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
|
|
201
|
-
const { children: children , ...slotProps } = props;
|
|
202
|
-
const childrenArray = Children.toArray(children);
|
|
203
|
-
const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
|
|
204
|
-
if (slottable) {
|
|
205
|
-
// the new element to render is the one passed as a child of `Slottable`
|
|
206
|
-
const newElement = slottable.props.children;
|
|
207
|
-
const newChildren = childrenArray.map((child)=>{
|
|
208
|
-
if (child === slottable) {
|
|
209
|
-
// because the new element will be the one rendered, we are only interested
|
|
210
|
-
// in grabbing its children (`newElement.props.children`)
|
|
211
|
-
if (Children.count(newElement) > 1) return Children.only(null);
|
|
212
|
-
return /*#__PURE__*/ isValidElement(newElement) ? newElement.props.children : null;
|
|
213
|
-
} else return child;
|
|
214
|
-
});
|
|
215
|
-
return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
|
|
216
|
-
ref: forwardedRef
|
|
217
|
-
}), /*#__PURE__*/ isValidElement(newElement) ? /*#__PURE__*/ cloneElement(newElement, undefined, newChildren) : null);
|
|
218
|
-
}
|
|
219
|
-
return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
|
|
220
|
-
ref: forwardedRef
|
|
221
|
-
}), children);
|
|
222
|
-
});
|
|
223
|
-
$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
|
|
224
|
-
/* -------------------------------------------------------------------------------------------------
|
|
225
|
-
* SlotClone
|
|
226
|
-
* -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
|
|
227
|
-
const { children: children , ...slotProps } = props;
|
|
228
|
-
if (/*#__PURE__*/ isValidElement(children)) return /*#__PURE__*/ cloneElement(children, {
|
|
229
|
-
...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
|
|
230
|
-
ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
|
|
231
|
-
});
|
|
232
|
-
return Children.count(children) > 1 ? Children.only(null) : null;
|
|
233
|
-
});
|
|
234
|
-
$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
|
|
235
|
-
/* -------------------------------------------------------------------------------------------------
|
|
236
|
-
* Slottable
|
|
237
|
-
* -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{
|
|
238
|
-
return /*#__PURE__*/ createElement(Fragment, null, children);
|
|
239
|
-
};
|
|
240
|
-
/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
|
|
241
|
-
return /*#__PURE__*/ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
|
|
242
|
-
}
|
|
243
|
-
function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
|
|
244
|
-
// all child props should override
|
|
245
|
-
const overrideProps = {
|
|
246
|
-
...childProps
|
|
247
|
-
};
|
|
248
|
-
for(const propName in childProps){
|
|
249
|
-
const slotPropValue = slotProps[propName];
|
|
250
|
-
const childPropValue = childProps[propName];
|
|
251
|
-
const isHandler = /^on[A-Z]/.test(propName);
|
|
252
|
-
if (isHandler) {
|
|
253
|
-
// if the handler exists on both, we compose them
|
|
254
|
-
if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
|
|
255
|
-
childPropValue(...args);
|
|
256
|
-
slotPropValue(...args);
|
|
257
|
-
};
|
|
258
|
-
else if (slotPropValue) overrideProps[propName] = slotPropValue;
|
|
259
|
-
} else if (propName === 'style') overrideProps[propName] = {
|
|
260
|
-
...slotPropValue,
|
|
261
|
-
...childPropValue
|
|
262
|
-
};
|
|
263
|
-
else if (propName === 'className') overrideProps[propName] = [
|
|
264
|
-
slotPropValue,
|
|
265
|
-
childPropValue
|
|
266
|
-
].filter(Boolean).join(' ');
|
|
267
|
-
}
|
|
268
|
-
return {
|
|
269
|
-
...slotProps,
|
|
270
|
-
...overrideProps
|
|
271
|
-
};
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
const $8927f6f2acc4f386$var$NODES = [
|
|
275
|
-
'a',
|
|
276
|
-
'button',
|
|
277
|
-
'div',
|
|
278
|
-
'form',
|
|
279
|
-
'h2',
|
|
280
|
-
'h3',
|
|
281
|
-
'img',
|
|
282
|
-
'input',
|
|
283
|
-
'label',
|
|
284
|
-
'li',
|
|
285
|
-
'nav',
|
|
286
|
-
'ol',
|
|
287
|
-
'p',
|
|
288
|
-
'span',
|
|
289
|
-
'svg',
|
|
290
|
-
'ul'
|
|
291
|
-
]; // Temporary while we await merge of this fix:
|
|
292
|
-
// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
|
|
293
|
-
// prettier-ignore
|
|
294
|
-
/* -------------------------------------------------------------------------------------------------
|
|
295
|
-
* Primitive
|
|
296
|
-
* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
|
|
297
|
-
const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
|
|
298
|
-
const { asChild: asChild , ...primitiveProps } = props;
|
|
299
|
-
const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
|
|
300
|
-
useEffect(()=>{
|
|
301
|
-
window[Symbol.for('radix-ui')] = true;
|
|
302
|
-
}, []);
|
|
303
|
-
return /*#__PURE__*/ createElement(Comp, _extends({}, primitiveProps, {
|
|
304
|
-
ref: forwardedRef
|
|
305
|
-
}));
|
|
306
|
-
});
|
|
307
|
-
Node.displayName = `Primitive.${node}`;
|
|
308
|
-
return {
|
|
309
|
-
...primitive,
|
|
310
|
-
[node]: Node
|
|
311
|
-
};
|
|
312
|
-
}, {});
|
|
313
|
-
/* -------------------------------------------------------------------------------------------------
|
|
314
|
-
* Utils
|
|
315
|
-
* -----------------------------------------------------------------------------------------------*/ /**
|
|
316
|
-
* Flush custom event dispatch
|
|
317
|
-
* https://github.com/radix-ui/primitives/pull/1378
|
|
318
|
-
*
|
|
319
|
-
* React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
|
|
320
|
-
*
|
|
321
|
-
* Internally, React prioritises events in the following order:
|
|
322
|
-
* - discrete
|
|
323
|
-
* - continuous
|
|
324
|
-
* - default
|
|
325
|
-
*
|
|
326
|
-
* https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
|
|
327
|
-
*
|
|
328
|
-
* `discrete` is an important distinction as updates within these events are applied immediately.
|
|
329
|
-
* React however, is not able to infer the priority of custom event types due to how they are detected internally.
|
|
330
|
-
* Because of this, it's possible for updates from custom events to be unexpectedly batched when
|
|
331
|
-
* dispatched by another `discrete` event.
|
|
332
|
-
*
|
|
333
|
-
* In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
|
|
334
|
-
* This utility should be used when dispatching a custom event from within another `discrete` event, this utility
|
|
335
|
-
* is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
|
|
336
|
-
* For example:
|
|
337
|
-
*
|
|
338
|
-
* dispatching a known click 👎
|
|
339
|
-
* target.dispatchEvent(new Event(‘click’))
|
|
340
|
-
*
|
|
341
|
-
* dispatching a custom type within a non-discrete event 👎
|
|
342
|
-
* onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
|
|
343
|
-
*
|
|
344
|
-
* dispatching a custom type within a `discrete` event 👍
|
|
345
|
-
* onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
|
|
346
|
-
*
|
|
347
|
-
* Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use
|
|
348
|
-
* this utility with them. This is because it's possible for those handlers to be called implicitly during render
|
|
349
|
-
* e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
|
|
350
|
-
*/ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
|
|
351
|
-
if (target) flushSync(()=>target.dispatchEvent(event)
|
|
352
|
-
);
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
|
|
356
|
-
return useReducer((state, event)=>{
|
|
357
|
-
const nextState = machine[state][event];
|
|
358
|
-
return nextState !== null && nextState !== void 0 ? nextState : state;
|
|
359
|
-
}, initialState);
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
const $921a889cee6df7e8$export$99c2b779aa4e8b8b = (props)=>{
|
|
364
|
-
const { present: present , children: children } = props;
|
|
365
|
-
const presence = $921a889cee6df7e8$var$usePresence(present);
|
|
366
|
-
const child = typeof children === 'function' ? children({
|
|
367
|
-
present: presence.isPresent
|
|
368
|
-
}) : Children.only(children);
|
|
369
|
-
const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(presence.ref, child.ref);
|
|
370
|
-
const forceMount = typeof children === 'function';
|
|
371
|
-
return forceMount || presence.isPresent ? /*#__PURE__*/ cloneElement(child, {
|
|
372
|
-
ref: ref
|
|
373
|
-
}) : null;
|
|
374
|
-
};
|
|
375
|
-
$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
|
|
376
|
-
/* -------------------------------------------------------------------------------------------------
|
|
377
|
-
* usePresence
|
|
378
|
-
* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) {
|
|
379
|
-
const [node1, setNode] = useState();
|
|
380
|
-
const stylesRef = useRef({});
|
|
381
|
-
const prevPresentRef = useRef(present);
|
|
382
|
-
const prevAnimationNameRef = useRef('none');
|
|
383
|
-
const initialState = present ? 'mounted' : 'unmounted';
|
|
384
|
-
const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, {
|
|
385
|
-
mounted: {
|
|
386
|
-
UNMOUNT: 'unmounted',
|
|
387
|
-
ANIMATION_OUT: 'unmountSuspended'
|
|
388
|
-
},
|
|
389
|
-
unmountSuspended: {
|
|
390
|
-
MOUNT: 'mounted',
|
|
391
|
-
ANIMATION_END: 'unmounted'
|
|
392
|
-
},
|
|
393
|
-
unmounted: {
|
|
394
|
-
MOUNT: 'mounted'
|
|
395
|
-
}
|
|
396
|
-
});
|
|
397
|
-
useEffect(()=>{
|
|
398
|
-
const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
|
|
399
|
-
prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
|
|
400
|
-
}, [
|
|
401
|
-
state
|
|
402
|
-
]);
|
|
403
|
-
$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
|
|
404
|
-
const styles = stylesRef.current;
|
|
405
|
-
const wasPresent = prevPresentRef.current;
|
|
406
|
-
const hasPresentChanged = wasPresent !== present;
|
|
407
|
-
if (hasPresentChanged) {
|
|
408
|
-
const prevAnimationName = prevAnimationNameRef.current;
|
|
409
|
-
const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles);
|
|
410
|
-
if (present) send('MOUNT');
|
|
411
|
-
else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
|
|
412
|
-
// so we unmount instantly
|
|
413
|
-
send('UNMOUNT');
|
|
414
|
-
else {
|
|
415
|
-
/**
|
|
416
|
-
* When `present` changes to `false`, we check changes to animation-name to
|
|
417
|
-
* determine whether an animation has started. We chose this approach (reading
|
|
418
|
-
* computed styles) because there is no `animationrun` event and `animationstart`
|
|
419
|
-
* fires after `animation-delay` has expired which would be too late.
|
|
420
|
-
*/ const isAnimating = prevAnimationName !== currentAnimationName;
|
|
421
|
-
if (wasPresent && isAnimating) send('ANIMATION_OUT');
|
|
422
|
-
else send('UNMOUNT');
|
|
423
|
-
}
|
|
424
|
-
prevPresentRef.current = present;
|
|
425
|
-
}
|
|
426
|
-
}, [
|
|
427
|
-
present,
|
|
428
|
-
send
|
|
429
|
-
]);
|
|
430
|
-
$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
|
|
431
|
-
if (node1) {
|
|
432
|
-
/**
|
|
433
|
-
* Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
|
|
434
|
-
* event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
|
|
435
|
-
* make sure we only trigger ANIMATION_END for the currently active animation.
|
|
436
|
-
*/ const handleAnimationEnd = (event)=>{
|
|
437
|
-
const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
|
|
438
|
-
const isCurrentAnimation = currentAnimationName.includes(event.animationName);
|
|
439
|
-
if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
|
|
440
|
-
// a frame after the animation ends, creating a flash of visible content.
|
|
441
|
-
// By manually flushing we ensure they sync within a frame, removing the flash.
|
|
442
|
-
flushSync(()=>send('ANIMATION_END')
|
|
443
|
-
);
|
|
444
|
-
};
|
|
445
|
-
const handleAnimationStart = (event)=>{
|
|
446
|
-
if (event.target === node1) // if animation occurred, store its name as the previous animation.
|
|
447
|
-
prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
|
|
448
|
-
};
|
|
449
|
-
node1.addEventListener('animationstart', handleAnimationStart);
|
|
450
|
-
node1.addEventListener('animationcancel', handleAnimationEnd);
|
|
451
|
-
node1.addEventListener('animationend', handleAnimationEnd);
|
|
452
|
-
return ()=>{
|
|
453
|
-
node1.removeEventListener('animationstart', handleAnimationStart);
|
|
454
|
-
node1.removeEventListener('animationcancel', handleAnimationEnd);
|
|
455
|
-
node1.removeEventListener('animationend', handleAnimationEnd);
|
|
456
|
-
};
|
|
457
|
-
} else // Transition to the unmounted state if the node is removed prematurely.
|
|
458
|
-
// We avoid doing so during cleanup as the node may change but still exist.
|
|
459
|
-
send('ANIMATION_END');
|
|
460
|
-
}, [
|
|
461
|
-
node1,
|
|
462
|
-
send
|
|
463
|
-
]);
|
|
464
|
-
return {
|
|
465
|
-
isPresent: [
|
|
466
|
-
'mounted',
|
|
467
|
-
'unmountSuspended'
|
|
468
|
-
].includes(state),
|
|
469
|
-
ref: useCallback((node)=>{
|
|
470
|
-
if (node) stylesRef.current = getComputedStyle(node);
|
|
471
|
-
setNode(node);
|
|
472
|
-
}, [])
|
|
473
|
-
};
|
|
474
|
-
}
|
|
475
|
-
/* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$getAnimationName(styles) {
|
|
476
|
-
return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
export { $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as $, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as a, $8927f6f2acc4f386$export$250ffa63cdc0d034 as b, $c512c27ab02ef895$export$50c7b4e9d9f19c1 as c, $71cd76cc60e0454e$export$6f32135080cb4c3 as d, $921a889cee6df7e8$export$99c2b779aa4e8b8b as e, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as f, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as g, $9f79659886946c16$export$e5c5a5f917a5871c as h, $8927f6f2acc4f386$export$6d1a0317bde7de7f as i };
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { MediaCard } from "./MediaCard";
|
|
3
|
-
declare const meta: Meta<typeof MediaCard>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof MediaCard>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const SurfaceBackgroundColor: Story;
|
|
8
|
-
export declare const Border: Story;
|
|
9
|
-
export declare const RoundedCorners: Story;
|
|
10
|
-
export declare const DeepShadow: Story;
|
|
11
|
-
export declare const OptimisedImages: Story;
|
|
12
|
-
export declare const ColumnContent: Story;
|
|
13
|
-
export declare const InColumns: Story;
|
|
14
|
-
export declare const EqualHeightColumns: Story;
|
|
15
|
-
export declare const EqualHeightColumnsWithFooter: Story;
|