@flipdish/ui-library 0.46.0 → 0.47.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/components/organisms/SidePanel/components/SidePanelContent.cjs +2 -2
- package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts +7 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.js +2 -2
- package/dist/components/organisms/SidePanel/components/SidePanelContent.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs +26 -4
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts +23 -4
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.js +27 -5
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs +9 -2
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts +6 -0
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js +9 -3
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js.map +1 -1
- package/dist/components/organisms/SidePanel/index.cjs +1 -0
- package/dist/components/organisms/SidePanel/index.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/index.d.ts +1 -1
- package/dist/components/organisms/SidePanel/index.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/index.js +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.cjs +11 -20
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.cjs.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.d.ts.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.js +9 -18
- package/dist/components/organisms/VideoPlayer/hooks/useVideoPlayback.js.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.cjs +3 -2
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.cjs.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.d.ts.map +1 -1
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.js +3 -2
- package/dist/components/organisms/VideoPlayer/hooks/useVideoVolume.js.map +1 -1
- package/dist/components/organisms/VideoPlayer/index.cjs +8 -10
- package/dist/components/organisms/VideoPlayer/index.cjs.map +1 -1
- package/dist/components/organisms/VideoPlayer/index.d.ts.map +1 -1
- package/dist/components/organisms/VideoPlayer/index.js +8 -10
- package/dist/components/organisms/VideoPlayer/index.js.map +1 -1
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.cjs +92 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.cjs.map +1 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.d.ts +84 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.d.ts.map +1 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.js +83 -0
- package/dist/components/organisms/VideoPlayer/videoPlayer.utils.js.map +1 -0
- package/package.json +2 -2
|
@@ -5,11 +5,11 @@ var cx = require('@flipdish/ui-library/utilities/cx');
|
|
|
5
5
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
6
6
|
|
|
7
7
|
/** The scrolling body. It takes the height the header and footer leave. */
|
|
8
|
-
const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
|
|
8
|
+
const SidePanelContent = ({ className, padding = 'default', 'data-testid': dataTestId, ...props }) => {
|
|
9
9
|
const prefix = testIdUtils.useTestIdPrefix();
|
|
10
10
|
return (jsxRuntime.jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'content') : undefined),
|
|
11
11
|
// The header carries the space above; this carries the space below, so the last item never sits on the footer.
|
|
12
|
-
className: cx.cx('flex min-h-0 w-full flex-1 flex-col
|
|
12
|
+
className: cx.cx('flex min-h-0 w-full flex-1 flex-col overflow-y-auto', padding === 'default' && 'gap-6 px-4 pb-6 lg:px-6', className) }));
|
|
13
13
|
};
|
|
14
14
|
SidePanelContent.displayName = 'SidePanelContent';
|
|
15
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContent.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"SidePanelContent.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;AAiBA;MACa,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AACjI,IAAA,MAAM,MAAM,GAAGA,2BAAe,EAAE;IAEhC,QACEC,2BACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;;AAE/E,QAAA,SAAS,EAAEC,KAAE,CAAC,qDAAqD,EAAE,OAAO,KAAK,SAAS,IAAI,yBAAyB,EAAE,SAAS,CAAC,EAAA,CACnI;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import type { ComponentPropsWithRef } from 'react';
|
|
2
2
|
export type SidePanelContentProps = ComponentPropsWithRef<'div'> & {
|
|
3
|
+
/**
|
|
4
|
+
* `default` pads the sides and the end and spaces the children, for content composed of the library's
|
|
5
|
+
* own parts. `none` gives the children the whole box, edge to edge, for content that lays itself out,
|
|
6
|
+
* such as an embedded micro-frontend under a `floating` header.
|
|
7
|
+
*/
|
|
8
|
+
padding?: 'default' | 'none';
|
|
3
9
|
/** Overrides the content's `data-testid` (defaults to `<root>--content`). */
|
|
4
10
|
'data-testid'?: string;
|
|
5
11
|
};
|
|
6
12
|
/** The scrolling body. It takes the height the header and footer leave. */
|
|
7
13
|
export declare const SidePanelContent: {
|
|
8
|
-
({ className, "data-testid": dataTestId, ...props }: SidePanelContentProps): import("react").JSX.Element;
|
|
14
|
+
({ className, padding, "data-testid": dataTestId, ...props }: SidePanelContentProps): import("react").JSX.Element;
|
|
9
15
|
displayName: string;
|
|
10
16
|
};
|
|
11
17
|
//# sourceMappingURL=SidePanelContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACjE,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB;
|
|
1
|
+
{"version":3,"file":"SidePanelContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACjE;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB;kEAA6E,qBAAqB;;CAW9H,CAAC"}
|
|
@@ -3,11 +3,11 @@ import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
|
3
3
|
import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
4
4
|
|
|
5
5
|
/** The scrolling body. It takes the height the header and footer leave. */
|
|
6
|
-
const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
|
|
6
|
+
const SidePanelContent = ({ className, padding = 'default', 'data-testid': dataTestId, ...props }) => {
|
|
7
7
|
const prefix = useTestIdPrefix();
|
|
8
8
|
return (jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'content') : undefined),
|
|
9
9
|
// The header carries the space above; this carries the space below, so the last item never sits on the footer.
|
|
10
|
-
className: cx('flex min-h-0 w-full flex-1 flex-col
|
|
10
|
+
className: cx('flex min-h-0 w-full flex-1 flex-col overflow-y-auto', padding === 'default' && 'gap-6 px-4 pb-6 lg:px-6', className) }));
|
|
11
11
|
};
|
|
12
12
|
SidePanelContent.displayName = 'SidePanelContent';
|
|
13
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContent.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"SidePanelContent.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAiBA;MACa,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AACjI,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAEhC,QACEA,gBACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;;AAE/E,QAAA,SAAS,EAAE,EAAE,CAAC,qDAAqD,EAAE,OAAO,KAAK,SAAS,IAAI,yBAAyB,EAAE,SAAS,CAAC,EAAA,CACnI;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;"}
|
|
@@ -9,13 +9,35 @@ var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
|
9
9
|
var React = require('react');
|
|
10
10
|
var SidePanel_context = require('../providers/SidePanel.context.cjs');
|
|
11
11
|
|
|
12
|
-
/**
|
|
13
|
-
const
|
|
12
|
+
/** The close button's action, name and test ids, shared by both variants. */
|
|
13
|
+
const useCloseButton = ({ onClose, closeLabel, 'data-testid': dataTestId }) => {
|
|
14
14
|
const panel = React.useContext(SidePanel_context.SidePanelContext);
|
|
15
15
|
const prefix = testIdUtils.useTestIdPrefix();
|
|
16
|
-
return
|
|
16
|
+
return {
|
|
17
|
+
headerTestId: dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'header') : undefined),
|
|
18
|
+
closeTestId: prefix ? testIdUtils.joinTestId(prefix, 'close') : undefined,
|
|
19
|
+
backTestId: prefix ? testIdUtils.joinTestId(prefix, 'back') : undefined,
|
|
20
|
+
label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined),
|
|
21
|
+
close: onClose ?? panel?.close,
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
const SidePanelTitleHeader = ({ className, children, variant: _variant, onClose, closeLabel, onBack, backLabel = 'Back', 'data-testid': dataTestId, ...props }) => {
|
|
25
|
+
const { headerTestId, closeTestId, backTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
|
|
26
|
+
return (jsxRuntime.jsxs("header", { ...props, "data-testid": headerTestId, className: cx.cx('relative w-full px-4 pt-6 pb-8 lg:px-6', onBack && 'flex items-center gap-3', className), children: [onBack && (jsxRuntime.jsx(UtilityButton.ButtonUtility, { icon: uiIcons.ArrowLeft, tooltip: backLabel, color: "tertiary", size: "sm",
|
|
17
27
|
// 32px tall in a 28px title line: pulled in so the header is as tall as one without a back button.
|
|
18
|
-
className: "-my-0.5", onClick: onBack, "data-testid":
|
|
28
|
+
className: "-my-0.5", onClick: onBack, "data-testid": backTestId })), onBack ? jsxRuntime.jsx("div", { className: "min-w-0 flex-1 pr-12", children: children }) : children, jsxRuntime.jsx(CloseButton.CloseButton, { size: "md", label: label, className: "absolute top-3 right-3 shrink-0", onClick: close, "data-testid": closeTestId })] }));
|
|
29
|
+
};
|
|
30
|
+
const SidePanelFloatingHeader = ({ className, children: _children, variant: _variant, onClose, closeLabel, onBack: _onBack, backLabel: _backLabel, 'data-testid': dataTestId, ...props }) => {
|
|
31
|
+
const { headerTestId, closeTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
|
|
32
|
+
return (
|
|
33
|
+
// A div, not header: it holds one button and no introductory content, which the embedded content's own header carries.
|
|
34
|
+
jsxRuntime.jsx("div", { ...props, "data-testid": headerTestId, className: cx.cx('absolute top-3 right-3 z-10', className), children: jsxRuntime.jsx(CloseButton.CloseButton, { size: "md", label: label, onClick: close, "data-testid": closeTestId }) }));
|
|
35
|
+
};
|
|
36
|
+
/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
|
|
37
|
+
const SidePanelHeader = (props) => {
|
|
38
|
+
if (props.variant === 'floating')
|
|
39
|
+
return jsxRuntime.jsx(SidePanelFloatingHeader, { ...props });
|
|
40
|
+
return jsxRuntime.jsx(SidePanelTitleHeader, { ...props });
|
|
19
41
|
};
|
|
20
42
|
SidePanelHeader.displayName = 'SidePanelHeader';
|
|
21
43
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelHeader.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["useContext","SidePanelContext","useTestIdPrefix","
|
|
1
|
+
{"version":3,"file":"SidePanelHeader.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["useContext","SidePanelContext","useTestIdPrefix","joinTestId","_jsxs","cx","_jsx","ButtonUtility","ArrowLeft","CloseButton"],"mappings":"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"}
|
|
@@ -1,19 +1,38 @@
|
|
|
1
1
|
import type { ComponentPropsWithRef } from 'react';
|
|
2
|
-
|
|
2
|
+
interface SidePanelHeaderBaseProps {
|
|
3
3
|
/** Runs instead of closing the panel when the close button is pressed. */
|
|
4
4
|
onClose?: () => void;
|
|
5
5
|
/** Accessible name of the close button. Defaults to "Close" followed by the panel's `aria-label`. */
|
|
6
6
|
closeLabel?: string;
|
|
7
|
+
/** Overrides the header's `data-testid` (defaults to `<root>--header`). */
|
|
8
|
+
'data-testid'?: string;
|
|
9
|
+
}
|
|
10
|
+
interface SidePanelHeaderDefaultProps extends SidePanelHeaderBaseProps, ComponentPropsWithRef<'header'> {
|
|
11
|
+
/** `default` is the title band above the content. */
|
|
12
|
+
variant?: 'default';
|
|
7
13
|
/** Shows a back button before the title, for a panel that is the second step of a flow; called when it is pressed. */
|
|
8
14
|
onBack?: () => void;
|
|
9
15
|
/** Accessible name of the back button. Defaults to "Back". */
|
|
10
16
|
backLabel?: string;
|
|
11
|
-
/** Overrides the header's `data-testid` (defaults to `<root>--header`). */
|
|
12
|
-
'data-testid'?: string;
|
|
13
17
|
}
|
|
18
|
+
interface SidePanelHeaderFloatingProps extends SidePanelHeaderBaseProps, ComponentPropsWithRef<'div'> {
|
|
19
|
+
/**
|
|
20
|
+
* `floating` takes no height: only the close button renders, over the top-right corner of the content, so
|
|
21
|
+
* content such as an embedded micro-frontend gets the panel's full height. The content must keep that corner,
|
|
22
|
+
* `--fd-side-panel-close-reserve` square, free of its own controls.
|
|
23
|
+
*/
|
|
24
|
+
variant: 'floating';
|
|
25
|
+
/** A floating header has no title: the panel is named by `aria-label`, and the content carries its own heading. */
|
|
26
|
+
children?: never;
|
|
27
|
+
/** A floating header has no back button; it is for a single full-height view. A footer still composes below the content. */
|
|
28
|
+
onBack?: never;
|
|
29
|
+
backLabel?: never;
|
|
30
|
+
}
|
|
31
|
+
export type SidePanelHeaderProps = SidePanelHeaderDefaultProps | SidePanelHeaderFloatingProps;
|
|
14
32
|
/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
|
|
15
33
|
export declare const SidePanelHeader: {
|
|
16
|
-
(
|
|
34
|
+
(props: SidePanelHeaderProps): import("react").JSX.Element;
|
|
17
35
|
displayName: string;
|
|
18
36
|
};
|
|
37
|
+
export {};
|
|
19
38
|
//# sourceMappingURL=SidePanelHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,
|
|
1
|
+
{"version":3,"file":"SidePanelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,UAAU,wBAAwB;IAChC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,2BAA4B,SAAQ,wBAAwB,EAAE,qBAAqB,CAAC,QAAQ,CAAC;IACrG,qDAAqD;IACrD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sHAAsH;IACtH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,4BAA6B,SAAQ,wBAAwB,EAAE,qBAAqB,CAAC,KAAK,CAAC;IACnG;;;;OAIG;IACH,OAAO,EAAE,UAAU,CAAC;IACpB,mHAAmH;IACnH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,4HAA4H;IAC5H,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB;AAED,MAAM,MAAM,oBAAoB,GAAG,2BAA2B,GAAG,4BAA4B,CAAC;AA0E9F,sHAAsH;AACtH,eAAO,MAAM,eAAe;YAAW,oBAAoB;;CAG1D,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { ArrowLeft } from '@flipdish/ui-icons';
|
|
3
3
|
import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
|
|
4
4
|
import { ButtonUtility } from '@flipdish/ui-library/components/atoms/UtilityButton';
|
|
@@ -7,13 +7,35 @@ import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/test
|
|
|
7
7
|
import { useContext } from 'react';
|
|
8
8
|
import { SidePanelContext } from '../providers/SidePanel.context.js';
|
|
9
9
|
|
|
10
|
-
/**
|
|
11
|
-
const
|
|
10
|
+
/** The close button's action, name and test ids, shared by both variants. */
|
|
11
|
+
const useCloseButton = ({ onClose, closeLabel, 'data-testid': dataTestId }) => {
|
|
12
12
|
const panel = useContext(SidePanelContext);
|
|
13
13
|
const prefix = useTestIdPrefix();
|
|
14
|
-
return
|
|
14
|
+
return {
|
|
15
|
+
headerTestId: dataTestId ?? (prefix ? joinTestId(prefix, 'header') : undefined),
|
|
16
|
+
closeTestId: prefix ? joinTestId(prefix, 'close') : undefined,
|
|
17
|
+
backTestId: prefix ? joinTestId(prefix, 'back') : undefined,
|
|
18
|
+
label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined),
|
|
19
|
+
close: onClose ?? panel?.close,
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
const SidePanelTitleHeader = ({ className, children, variant: _variant, onClose, closeLabel, onBack, backLabel = 'Back', 'data-testid': dataTestId, ...props }) => {
|
|
23
|
+
const { headerTestId, closeTestId, backTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
|
|
24
|
+
return (jsxs("header", { ...props, "data-testid": headerTestId, className: cx('relative w-full px-4 pt-6 pb-8 lg:px-6', onBack && 'flex items-center gap-3', className), children: [onBack && (jsx(ButtonUtility, { icon: ArrowLeft, tooltip: backLabel, color: "tertiary", size: "sm",
|
|
15
25
|
// 32px tall in a 28px title line: pulled in so the header is as tall as one without a back button.
|
|
16
|
-
className: "-my-0.5", onClick: onBack, "data-testid":
|
|
26
|
+
className: "-my-0.5", onClick: onBack, "data-testid": backTestId })), onBack ? jsx("div", { className: "min-w-0 flex-1 pr-12", children: children }) : children, jsx(CloseButton, { size: "md", label: label, className: "absolute top-3 right-3 shrink-0", onClick: close, "data-testid": closeTestId })] }));
|
|
27
|
+
};
|
|
28
|
+
const SidePanelFloatingHeader = ({ className, children: _children, variant: _variant, onClose, closeLabel, onBack: _onBack, backLabel: _backLabel, 'data-testid': dataTestId, ...props }) => {
|
|
29
|
+
const { headerTestId, closeTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
|
|
30
|
+
return (
|
|
31
|
+
// A div, not header: it holds one button and no introductory content, which the embedded content's own header carries.
|
|
32
|
+
jsx("div", { ...props, "data-testid": headerTestId, className: cx('absolute top-3 right-3 z-10', className), children: jsx(CloseButton, { size: "md", label: label, onClick: close, "data-testid": closeTestId }) }));
|
|
33
|
+
};
|
|
34
|
+
/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
|
|
35
|
+
const SidePanelHeader = (props) => {
|
|
36
|
+
if (props.variant === 'floating')
|
|
37
|
+
return jsx(SidePanelFloatingHeader, { ...props });
|
|
38
|
+
return jsx(SidePanelTitleHeader, { ...props });
|
|
17
39
|
};
|
|
18
40
|
SidePanelHeader.displayName = 'SidePanelHeader';
|
|
19
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelHeader.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"SidePanelHeader.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -9,6 +9,12 @@ var pageCover_utils = require('../../../../utilities/__internal__/pageCoverUtils
|
|
|
9
9
|
|
|
10
10
|
/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
|
|
11
11
|
const SIDE_PANEL_WIDTH = 400;
|
|
12
|
+
/**
|
|
13
|
+
* Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
|
|
14
|
+
* button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
|
|
15
|
+
* another React root can read it from CSS.
|
|
16
|
+
*/
|
|
17
|
+
const SIDE_PANEL_CLOSE_RESERVE = 56;
|
|
12
18
|
// Critically damped (damping = 2 * sqrt(stiffness)): a lower damping overshoots the width by a pixel and settles back, which reads as a wobble.
|
|
13
19
|
const SPRING = { type: 'spring', damping: 30, stiffness: 220 };
|
|
14
20
|
const DOCKED = {
|
|
@@ -46,12 +52,13 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
|
|
|
46
52
|
const motionStates = isDesktop ? DOCKED : FULL_PAGE;
|
|
47
53
|
return (jsxRuntime.jsx(react.motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId,
|
|
48
54
|
// Focusable by script only, so opening can land on the region without adding a tab stop.
|
|
49
|
-
tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
55
|
+
tabIndex: -1, onFocusCapture: onFocusCapture, style: { '--fd-side-panel-close-reserve': `${SIDE_PANEL_CLOSE_RESERVE}px` }, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
50
56
|
// overflow-hidden clips the fixed-width content while the panel's own width animates. justify-end pins the content to the
|
|
51
57
|
// right edge, which stays put, so it never sits on the animated fractional left edge where images snap to pixels and shake.
|
|
52
|
-
className: cx.cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsxRuntime.jsx("div", { className: cx.cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsxRuntime.jsx("div", { className: cx.cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
58
|
+
className: cx.cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsxRuntime.jsx("div", { className: cx.cx('relative flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsxRuntime.jsx("div", { className: cx.cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
53
59
|
};
|
|
54
60
|
|
|
61
|
+
exports.SIDE_PANEL_CLOSE_RESERVE = SIDE_PANEL_CLOSE_RESERVE;
|
|
55
62
|
exports.SIDE_PANEL_WIDTH = SIDE_PANEL_WIDTH;
|
|
56
63
|
exports.SidePanelRegion = SidePanelRegion;
|
|
57
64
|
//# sourceMappingURL=SidePanelRegion.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useEffect","dispatchPageCover","usePanelFocus","_jsx","motion","cx"],"mappings":";;;;;;;;;AASA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAGC,kBAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAGC,sBAAgB,EAAE;;;AAI7C,IAAA,MAAM,UAAU,GAAG,SAAS,IAAI,CAAC,SAAS;IAC1CC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,UAAU,IAAI,QAAQ,CAAC,OAAO;AAAE,YAAAC,iCAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC;AACzE,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAGC,2BAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAGL,YAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpEG,eAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEG,cAAA,CAACC,YAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useEffect","dispatchPageCover","usePanelFocus","_jsx","motion","cx"],"mappings":"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"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
|
|
3
3
|
export declare const SIDE_PANEL_WIDTH = 400;
|
|
4
|
+
/**
|
|
5
|
+
* Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
|
|
6
|
+
* button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
|
|
7
|
+
* another React root can read it from CSS.
|
|
8
|
+
*/
|
|
9
|
+
export declare const SIDE_PANEL_CLOSE_RESERVE = 56;
|
|
4
10
|
interface SidePanelRegionProps {
|
|
5
11
|
'aria-label': string;
|
|
6
12
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAe3C,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,sGAQ7B,oBAAoB,gCA6DtB,CAAC"}
|
|
@@ -7,6 +7,12 @@ import { dispatchPageCover } from '../../../../utilities/__internal__/pageCoverU
|
|
|
7
7
|
|
|
8
8
|
/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
|
|
9
9
|
const SIDE_PANEL_WIDTH = 400;
|
|
10
|
+
/**
|
|
11
|
+
* Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
|
|
12
|
+
* button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
|
|
13
|
+
* another React root can read it from CSS.
|
|
14
|
+
*/
|
|
15
|
+
const SIDE_PANEL_CLOSE_RESERVE = 56;
|
|
10
16
|
// Critically damped (damping = 2 * sqrt(stiffness)): a lower damping overshoots the width by a pixel and settles back, which reads as a wobble.
|
|
11
17
|
const SPRING = { type: 'spring', damping: 30, stiffness: 220 };
|
|
12
18
|
const DOCKED = {
|
|
@@ -44,11 +50,11 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
|
|
|
44
50
|
const motionStates = isDesktop ? DOCKED : FULL_PAGE;
|
|
45
51
|
return (jsx(motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId,
|
|
46
52
|
// Focusable by script only, so opening can land on the region without adding a tab stop.
|
|
47
|
-
tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
53
|
+
tabIndex: -1, onFocusCapture: onFocusCapture, style: { '--fd-side-panel-close-reserve': `${SIDE_PANEL_CLOSE_RESERVE}px` }, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
48
54
|
// overflow-hidden clips the fixed-width content while the panel's own width animates. justify-end pins the content to the
|
|
49
55
|
// right edge, which stays put, so it never sits on the animated fractional left edge where images snap to pixels and shake.
|
|
50
|
-
className: cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsx("div", { className: cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsx("div", { className: cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
56
|
+
className: cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsx("div", { className: cx('relative flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsx("div", { className: cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
51
57
|
};
|
|
52
58
|
|
|
53
|
-
export { SIDE_PANEL_WIDTH, SidePanelRegion };
|
|
59
|
+
export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH, SidePanelRegion };
|
|
54
60
|
//# sourceMappingURL=SidePanelRegion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AASA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,EAAE;;;AAI7C,IAAA,MAAM,UAAU,GAAG,SAAS,IAAI,CAAC,SAAS;IAC1C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,UAAU,IAAI,QAAQ,CAAC,OAAO;AAAE,YAAA,iBAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC;AACzE,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpE,SAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
|
|
@@ -44,6 +44,7 @@ SidePanel.Header = SidePanelHeader.SidePanelHeader;
|
|
|
44
44
|
SidePanel.Content = SidePanelContent.SidePanelContent;
|
|
45
45
|
SidePanel.Footer = SidePanelFooter.SidePanelFooter;
|
|
46
46
|
|
|
47
|
+
exports.SIDE_PANEL_CLOSE_RESERVE = SidePanelRegion.SIDE_PANEL_CLOSE_RESERVE;
|
|
47
48
|
exports.SIDE_PANEL_WIDTH = SidePanelRegion.SIDE_PANEL_WIDTH;
|
|
48
49
|
exports.SidePanel = SidePanel;
|
|
49
50
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,eAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,cAAA,CAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EARL,YAAY,CASA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;;;;;;;AAOG;AACH,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,eAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,cAAA,CAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EARL,YAAY,CASA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;;;;;;;AAOG;AACH,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe;;;;"}
|
|
@@ -5,7 +5,7 @@ import { SidePanelHeader } from './components/SidePanelHeader';
|
|
|
5
5
|
export type { SidePanelContentProps } from './components/SidePanelContent';
|
|
6
6
|
export type { SidePanelFooterProps } from './components/SidePanelFooter';
|
|
7
7
|
export type { SidePanelHeaderProps } from './components/SidePanelHeader';
|
|
8
|
-
export { SIDE_PANEL_WIDTH } from './components/SidePanelRegion';
|
|
8
|
+
export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH } from './components/SidePanelRegion';
|
|
9
9
|
export interface SidePanelProps {
|
|
10
10
|
/**
|
|
11
11
|
* Whether the panel is open. Share it with the control that opens the panel, e.g. `assistant.isOpen`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAM/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAM/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAE1F,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB,qIAAqI;IACrI,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qHAAqH;IACrH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,aAAa;qHAQhB,cAAc,GAAG,SAAS;;CAqC5B,CAAC;AAGF;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,EAAoB,OAAO,aAAa,GAAG;IACxD,MAAM,EAAE,OAAO,eAAe,CAAC;IAC/B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,MAAM,EAAE,OAAO,eAAe,CAAC;CAChC,CAAC;AAMF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { SidePanelContent } from './components/SidePanelContent.js';
|
|
|
7
7
|
import { SidePanelFooter } from './components/SidePanelFooter.js';
|
|
8
8
|
import { SidePanelHeader } from './components/SidePanelHeader.js';
|
|
9
9
|
import { SidePanelRegion } from './components/SidePanelRegion.js';
|
|
10
|
-
export { SIDE_PANEL_WIDTH } from './components/SidePanelRegion.js';
|
|
10
|
+
export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH } from './components/SidePanelRegion.js';
|
|
11
11
|
import { useOpenOnMount } from './hooks/useOpenOnMount.js';
|
|
12
12
|
import { PageCoverContext } from './providers/PageCover.context.js';
|
|
13
13
|
import { SidePanelContext } from './providers/SidePanel.context.js';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
+
var videoPlayer_utils = require('../videoPlayer.utils.cjs');
|
|
4
5
|
|
|
5
|
-
const PLAYBACK_SPEEDS = [1, 1.25, 1.5, 1.75, 2];
|
|
6
6
|
/**
|
|
7
7
|
* Play/pause, seek, fullscreen, and playback-speed state for `VideoPlayer`, plus the
|
|
8
8
|
* timeupdate/durationchange/progress listeners that keep `currentTime`/`duration`/`buffered`
|
|
@@ -20,11 +20,6 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
20
20
|
const [showThumbnail, setShowThumbnail] = React.useState(true);
|
|
21
21
|
const [isFullscreen, setIsFullscreen] = React.useState(false);
|
|
22
22
|
const [playbackRate, setPlaybackRate] = React.useState(1);
|
|
23
|
-
const formatTime = (time) => {
|
|
24
|
-
const minutes = Math.max(Math.floor(time / 60), 0);
|
|
25
|
-
const seconds = Math.max(Math.floor(time % 60), 0);
|
|
26
|
-
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
27
|
-
};
|
|
28
23
|
const play = React.useCallback(() => {
|
|
29
24
|
// Swallow `play()` rejections (autoplay policy / not ready); `isPlaying` tracks user intent.
|
|
30
25
|
videoRef.current?.play().catch(() => { });
|
|
@@ -45,17 +40,15 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
45
40
|
}, [videoRef]);
|
|
46
41
|
const handleProgressClick = React.useCallback((e) => {
|
|
47
42
|
if (progressRef.current && videoRef.current) {
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
videoRef.current.currentTime = pos * duration;
|
|
43
|
+
const { time } = videoPlayer_utils.progressAtPointer(e.clientX, progressRef.current.getBoundingClientRect(), duration);
|
|
44
|
+
videoRef.current.currentTime = time;
|
|
51
45
|
}
|
|
52
46
|
}, [videoRef, duration]);
|
|
53
47
|
const handleProgressHover = React.useCallback((e) => {
|
|
54
48
|
if (progressRef.current && videoRef.current) {
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
setHoverPosition(e.clientX - rect.left);
|
|
49
|
+
const { time, offset } = videoPlayer_utils.progressAtPointer(e.clientX, progressRef.current.getBoundingClientRect(), duration);
|
|
50
|
+
setHoverTime(time);
|
|
51
|
+
setHoverPosition(offset);
|
|
59
52
|
}
|
|
60
53
|
}, [videoRef, duration]);
|
|
61
54
|
const toggleFullscreen = React.useCallback(() => {
|
|
@@ -68,9 +61,7 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
68
61
|
}, [videoRef]);
|
|
69
62
|
const toggleSpeed = React.useCallback(() => {
|
|
70
63
|
setPlaybackRate((prevRate) => {
|
|
71
|
-
const
|
|
72
|
-
const nextIndex = (currentIndex + 1) % PLAYBACK_SPEEDS.length;
|
|
73
|
-
const nextSpeed = PLAYBACK_SPEEDS[nextIndex];
|
|
64
|
+
const nextSpeed = videoPlayer_utils.nextPlaybackRate(prevRate);
|
|
74
65
|
if (videoRef.current) {
|
|
75
66
|
videoRef.current.playbackRate = nextSpeed;
|
|
76
67
|
}
|
|
@@ -105,11 +96,11 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
105
96
|
}
|
|
106
97
|
if (e.code === 'ArrowLeft') {
|
|
107
98
|
e.preventDefault();
|
|
108
|
-
video.currentTime =
|
|
99
|
+
video.currentTime = videoPlayer_utils.seekBackward(video.currentTime);
|
|
109
100
|
}
|
|
110
101
|
if (e.code === 'ArrowRight') {
|
|
111
102
|
e.preventDefault();
|
|
112
|
-
video.currentTime =
|
|
103
|
+
video.currentTime = videoPlayer_utils.seekForward(video.currentTime, video.duration);
|
|
113
104
|
}
|
|
114
105
|
};
|
|
115
106
|
video.addEventListener('timeupdate', handleTimeUpdate);
|
|
@@ -153,8 +144,8 @@ const useVideoPlayback = ({ videoRef }) => {
|
|
|
153
144
|
setShowThumbnail,
|
|
154
145
|
isFullscreen,
|
|
155
146
|
playbackRate,
|
|
156
|
-
playbackSpeeds: PLAYBACK_SPEEDS,
|
|
157
|
-
formatTime,
|
|
147
|
+
playbackSpeeds: videoPlayer_utils.PLAYBACK_SPEEDS,
|
|
148
|
+
formatTime: videoPlayer_utils.formatTime,
|
|
158
149
|
play,
|
|
159
150
|
pause,
|
|
160
151
|
togglePlay,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoPlayback.cjs","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoPlayback.ts"],"sourcesContent":[null],"names":["useRef","useState","useCallback","
|
|
1
|
+
{"version":3,"file":"useVideoPlayback.cjs","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoPlayback.ts"],"sourcesContent":[null],"names":["useRef","useState","useCallback","progressAtPointer","nextPlaybackRate","useEffect","seekBackward","seekForward","PLAYBACK_SPEEDS","formatTime"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoPlayback.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoPlayback.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useVideoPlayback.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/VideoPlayer/hooks/useVideoPlayback.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGjF,MAAM,WAAW,uBAAuB;IACtC,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,cAAc,uBAAuB;;;;;;;;;;;;;;;;;6BAkC9D,KAAK,CAAC,UAAU;6BAUhB,KAAK,CAAC,UAAU;;;CAyHvB,CAAC"}
|