@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.
Files changed (89) hide show
  1. package/dist/Breadcrumbs/Breadcrumbs.cjs.js +1 -1
  2. package/dist/Breadcrumbs/Breadcrumbs.esm.js +1 -1
  3. package/dist/Checkbox/Checkbox.cjs.js +2 -2
  4. package/dist/Checkbox/Checkbox.esm.js +2 -2
  5. package/dist/FormControl/FormControl.cjs.js +1 -1
  6. package/dist/FormControl/FormControl.esm.js +1 -1
  7. package/dist/InformationCard/InformationCard.cjs.js +25 -43
  8. package/dist/InformationCard/InformationCard.esm.js +24 -42
  9. package/dist/Modal/Modal.cjs.js +16 -40
  10. package/dist/Modal/Modal.esm.js +6 -30
  11. package/dist/PaginationSimple/PaginationSimple.cjs.js +19 -16
  12. package/dist/PaginationSimple/PaginationSimple.esm.js +19 -16
  13. package/dist/RadioGroup/RadioGroup.cjs.js +2 -2
  14. package/dist/RadioGroup/RadioGroup.esm.js +2 -2
  15. package/dist/Select/Select.cjs.js +2736 -619
  16. package/dist/Select/Select.esm.js +2535 -418
  17. package/dist/Switch/Switch.cjs.js +335 -11
  18. package/dist/Switch/Switch.esm.js +328 -4
  19. package/dist/Tabs/Tabs.cjs.js +7 -4
  20. package/dist/Tabs/Tabs.esm.js +7 -4
  21. package/dist/TextArea/TextArea.cjs.js +17 -12
  22. package/dist/TextArea/TextArea.esm.js +17 -12
  23. package/dist/TextInput/TextInput.cjs.js +2 -2
  24. package/dist/TextInput/TextInput.esm.js +2 -2
  25. package/dist/Toast/Toast.cjs.js +7 -4
  26. package/dist/Toast/Toast.esm.js +7 -4
  27. package/dist/TypographyCard/TypographyCard.cjs.js +93 -0
  28. package/dist/TypographyCard/TypographyCard.esm.js +85 -0
  29. package/dist/TypographyCard/package.json +7 -0
  30. package/dist/UniversalHeader/UniversalHeader.cjs.js +1 -1
  31. package/dist/UniversalHeader/UniversalHeader.esm.js +1 -1
  32. package/dist/_shared/cjs/{Breadcrumbs-ed70e75a.js → Breadcrumbs-ef659d2b.js} +5 -5
  33. package/dist/_shared/cjs/BtIconArrowRight.esm-8e8ac316.js +30 -0
  34. package/dist/_shared/cjs/BtIconArrowRightFill.esm-435cf4bd.js +26 -0
  35. package/dist/_shared/cjs/{Checkbox-b126194e.js → Checkbox-904ad028.js} +1 -1
  36. package/dist/_shared/cjs/{FormControl-7daf8110.js → FormControl-166e0957.js} +5 -1
  37. package/dist/_shared/cjs/{RadioGroup-56e3b0e5.js → RadioGroup-1eddf86f.js} +1 -1
  38. package/dist/_shared/cjs/{Tabs-2d2a517d.js → Tabs-cc77dabb.js} +17 -37
  39. package/dist/_shared/cjs/{TextInput-bf1fe052.js → TextInput-fd9c756f.js} +10 -4
  40. package/dist/_shared/cjs/{Toast-69108261.js → Toast-91e96744.js} +36 -54
  41. package/dist/_shared/cjs/{UniversalHeader-5e43d320.js → UniversalHeader-b8389447.js} +4 -2
  42. package/dist/_shared/cjs/index-1641d0b4.js +27 -0
  43. package/dist/_shared/cjs/{index-43458549.js → index-3d69ea00.js} +28 -1
  44. package/dist/_shared/cjs/index-49c72a87.js +131 -0
  45. package/dist/_shared/cjs/{index-6b2a9ac3.js → index-4ecad2dd.js} +6 -22
  46. package/dist/_shared/cjs/{index.module-dd1d7d0b.js → index-56a040f4.js} +87 -104
  47. package/dist/_shared/cjs/index-6542b467.js +23 -0
  48. package/dist/_shared/cjs/{index-adbb63da.js → index-84e6a68f.js} +1 -1
  49. package/dist/_shared/cjs/{index-b2fd6338.js → index-d31f2b65.js} +1 -1
  50. package/dist/_shared/cjs/index-dcfdd5da.js +11 -0
  51. package/dist/_shared/esm/{Breadcrumbs-87e2bd46.js → Breadcrumbs-36edfb3d.js} +5 -5
  52. package/dist/_shared/esm/BtIconArrowRight.esm-267916a4.js +24 -0
  53. package/dist/_shared/esm/BtIconArrowRightFill.esm-99019d1a.js +20 -0
  54. package/dist/_shared/esm/{Checkbox-d6ec5024.js → Checkbox-8a5bb9a1.js} +1 -1
  55. package/dist/_shared/esm/{FormControl-351e5f1b.js → FormControl-9d4ddfec.js} +5 -1
  56. package/dist/_shared/esm/{RadioGroup-c838764c.js → RadioGroup-238db88d.js} +1 -1
  57. package/dist/_shared/esm/{Tabs-f903187a.js → Tabs-8719d952.js} +7 -27
  58. package/dist/_shared/esm/{TextInput-991804b6.js → TextInput-c1e2a1dd.js} +10 -4
  59. package/dist/_shared/esm/{Toast-37549e68.js → Toast-7cb1e544.js} +6 -24
  60. package/dist/_shared/esm/{UniversalHeader-b4c1577c.js → UniversalHeader-80c7313f.js} +4 -2
  61. package/dist/_shared/esm/{index.module-44714d3f.js → index-12f3a407.js} +89 -105
  62. package/dist/_shared/esm/index-246b4f18.js +21 -0
  63. package/dist/_shared/esm/{index-a1d2d9b3.js → index-39019a9b.js} +1 -1
  64. package/dist/_shared/esm/{index-41d7af2b.js → index-3e2bc99d.js} +29 -3
  65. package/dist/_shared/esm/index-6b7b075c.js +25 -0
  66. package/dist/_shared/esm/{index-efd9ef1c.js → index-936b5179.js} +1 -1
  67. package/dist/_shared/esm/index-a624de47.js +9 -0
  68. package/dist/_shared/esm/{index-3797d77e.js → index-d0307140.js} +5 -21
  69. package/dist/_shared/esm/index-db47e95a.js +129 -0
  70. package/dist/index.es.js +3062 -865
  71. package/dist/index.es.js.map +1 -1
  72. package/dist/index.js +3062 -864
  73. package/dist/index.js.map +1 -1
  74. package/dist/styles.css +5 -5
  75. package/dist/types/components/MediaCard/MediaCard.d.ts +24 -30
  76. package/dist/types/components/Select/Select.d.ts +49 -0
  77. package/dist/types/components/TextInput/TextInput.d.ts +12 -1
  78. package/dist/types/components/TypographyCard/TypographyCard.d.ts +48 -0
  79. package/dist/types/components/TypographyCard/index.d.ts +1 -0
  80. package/dist/types/components/UniversalHeader/UniversalHeader.d.ts +4 -0
  81. package/dist/types/components/index.d.ts +1 -0
  82. package/dist/types/internal-components/ConditionalWrapper/ConditionalWrapper.d.ts +6 -0
  83. package/dist/types/internal-components/ConditionalWrapper/index.d.ts +1 -0
  84. package/dist/types/internal-components/index.d.ts +1 -0
  85. package/dist/types/styles.d.ts +2 -1
  86. package/package.json +2 -2
  87. package/dist/_shared/cjs/index-c575a255.js +0 -490
  88. package/dist/_shared/esm/index-13d575cc.js +0 -479
  89. 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;