@flipdish/ui-library 0.26.3 → 0.27.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/ApplicationHeader/applicationHeader.types.d.ts +54 -0
- package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts.map +1 -0
- package/dist/components/organisms/ApplicationHeader/applicationHeader.utils.cjs +15 -0
- package/dist/components/organisms/ApplicationHeader/applicationHeader.utils.cjs.map +1 -0
- package/dist/components/organisms/ApplicationHeader/applicationHeader.utils.d.ts +5 -0
- package/dist/components/organisms/ApplicationHeader/applicationHeader.utils.d.ts.map +1 -0
- package/dist/components/organisms/ApplicationHeader/applicationHeader.utils.js +12 -0
- package/dist/components/organisms/ApplicationHeader/applicationHeader.utils.js.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/avatar-button.cjs +14 -0
- package/dist/components/organisms/ApplicationHeader/components/avatar-button.cjs.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/avatar-button.d.ts +11 -0
- package/dist/components/organisms/ApplicationHeader/components/avatar-button.d.ts.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/avatar-button.js +12 -0
- package/dist/components/organisms/ApplicationHeader/components/avatar-button.js.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/header-action.cjs +11 -0
- package/dist/components/organisms/ApplicationHeader/components/header-action.cjs.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/header-action.d.ts +17 -0
- package/dist/components/organisms/ApplicationHeader/components/header-action.d.ts.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/header-action.js +9 -0
- package/dist/components/organisms/ApplicationHeader/components/header-action.js.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/menu-button.cjs +11 -0
- package/dist/components/organisms/ApplicationHeader/components/menu-button.cjs.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/menu-button.d.ts +11 -0
- package/dist/components/organisms/ApplicationHeader/components/menu-button.d.ts.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/menu-button.js +9 -0
- package/dist/components/organisms/ApplicationHeader/components/menu-button.js.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/search-trigger.cjs +19 -0
- package/dist/components/organisms/ApplicationHeader/components/search-trigger.cjs.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/search-trigger.d.ts +25 -0
- package/dist/components/organisms/ApplicationHeader/components/search-trigger.d.ts.map +1 -0
- package/dist/components/organisms/ApplicationHeader/components/search-trigger.js +17 -0
- package/dist/components/organisms/ApplicationHeader/components/search-trigger.js.map +1 -0
- package/dist/components/organisms/ApplicationHeader/index.cjs +48 -0
- package/dist/components/organisms/ApplicationHeader/index.cjs.map +1 -0
- package/dist/components/organisms/ApplicationHeader/index.d.ts +43 -0
- package/dist/components/organisms/ApplicationHeader/index.d.ts.map +1 -0
- package/dist/components/organisms/ApplicationHeader/index.js +46 -0
- package/dist/components/organisms/ApplicationHeader/index.js.map +1 -0
- package/dist/components/organisms/CommandMenu/index.cjs +1 -1
- package/dist/components/organisms/CommandMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/index.js +1 -1
- package/dist/native/components/organisms/ApplicationHeader/index.d.ts +12 -0
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs +105 -0
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs.map +1 -0
- package/dist/{components/organisms/CommandMenu → utilities/__internal__/hotkeysUtils}/hotkeys.utils.d.ts +10 -0
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.d.ts.map +1 -0
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.js +98 -0
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/organisms/CommandMenu/hotkeys.utils.cjs +0 -64
- package/dist/components/organisms/CommandMenu/hotkeys.utils.cjs.map +0 -1
- package/dist/components/organisms/CommandMenu/hotkeys.utils.d.ts.map +0 -1
- package/dist/components/organisms/CommandMenu/hotkeys.utils.js +0 -61
- package/dist/components/organisms/CommandMenu/hotkeys.utils.js.map +0 -1
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
interface ApplicationHeaderElement {
|
|
2
|
+
/** Accessible name for the control. Each element documents its English default. */
|
|
3
|
+
label?: string;
|
|
4
|
+
/** Overrides the derived `data-testid` for this element. */
|
|
5
|
+
'data-testid'?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface ApplicationHeaderSearch extends ApplicationHeaderElement {
|
|
8
|
+
/** Called when the search trigger is pressed or the shortcut fires. Open your search surface (e.g. `CommandMenu`) here. */
|
|
9
|
+
onPress: () => void;
|
|
10
|
+
/**
|
|
11
|
+
* Text shown inside the trigger.
|
|
12
|
+
* @default "Search"
|
|
13
|
+
*/
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Keyboard shortcut in `react-hotkeys-hook` format, where `mod` is ⌘ on macOS and Ctrl
|
|
17
|
+
* elsewhere. Active from the `lg` breakpoint only. Comma-separated alternatives all fire, but the hint shows
|
|
18
|
+
* the first. Pass `null` to disable the shortcut and hide its hint.
|
|
19
|
+
* @default "mod+k"
|
|
20
|
+
*/
|
|
21
|
+
shortcut?: string | null;
|
|
22
|
+
}
|
|
23
|
+
export interface ApplicationHeaderNotifications extends ApplicationHeaderElement {
|
|
24
|
+
/** Unread count. The badge is hidden at `0` or `undefined` and reads `9+` above 9. */
|
|
25
|
+
count?: number;
|
|
26
|
+
/** Called when the notifications button is pressed. */
|
|
27
|
+
onPress: () => void;
|
|
28
|
+
}
|
|
29
|
+
export interface ApplicationHeaderAssistant extends ApplicationHeaderElement {
|
|
30
|
+
/** Called when the assistant button is pressed. */
|
|
31
|
+
onPress: () => void;
|
|
32
|
+
}
|
|
33
|
+
export interface ApplicationHeaderAvatar extends Omit<ApplicationHeaderElement, 'label'> {
|
|
34
|
+
/** Name of the entity shown (organisation, store, user). Names the button and seeds the initials fallback. */
|
|
35
|
+
name: string;
|
|
36
|
+
/** Image URL. Falls back to `initials` when omitted or when the image fails to load. */
|
|
37
|
+
src?: string;
|
|
38
|
+
/** Overrides the initials derived from `name`. */
|
|
39
|
+
initials?: string;
|
|
40
|
+
/** Accessible name for the button. Defaults to `name`. */
|
|
41
|
+
label?: string;
|
|
42
|
+
/** Called when the avatar button is pressed. */
|
|
43
|
+
onPress: () => void;
|
|
44
|
+
}
|
|
45
|
+
export interface ApplicationHeaderMenu extends ApplicationHeaderElement {
|
|
46
|
+
/** Whether the navigation drawer this button controls is open. */
|
|
47
|
+
isOpen: boolean;
|
|
48
|
+
/** Called with the next open state when the button is pressed. */
|
|
49
|
+
onOpenChange: (isOpen: boolean) => void;
|
|
50
|
+
/** ID of the drawer element, for `aria-controls`. */
|
|
51
|
+
controls?: string;
|
|
52
|
+
}
|
|
53
|
+
export {};
|
|
54
|
+
//# sourceMappingURL=applicationHeader.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"applicationHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ApplicationHeader/applicationHeader.types.ts"],"names":[],"mappings":"AAAA,UAAU,wBAAwB;IAChC,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB;IACvE,2HAA2H;IAC3H,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,8BAA+B,SAAQ,wBAAwB;IAC9E,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,0BAA2B,SAAQ,wBAAwB;IAC1E,mDAAmD;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,OAAO,CAAC;IACtF,8GAA8G;IAC9G,IAAI,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,kEAAkE;IAClE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const MAX_COUNT = 9;
|
|
4
|
+
/** Badge text for an unread count: `undefined` when there is nothing to show, capped at `9+`. */
|
|
5
|
+
const formatBadgeCount = (count) => {
|
|
6
|
+
if (!count || count < 0)
|
|
7
|
+
return undefined;
|
|
8
|
+
return count > MAX_COUNT ? `${MAX_COUNT}+` : String(count);
|
|
9
|
+
};
|
|
10
|
+
/** Accessible name for the notifications button, carrying the exact unread count. */
|
|
11
|
+
const getNotificationsLabel = (label, count) => (count && count > 0 ? `${label}, ${count} unread` : label);
|
|
12
|
+
|
|
13
|
+
exports.formatBadgeCount = formatBadgeCount;
|
|
14
|
+
exports.getNotificationsLabel = getNotificationsLabel;
|
|
15
|
+
//# sourceMappingURL=applicationHeader.utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"applicationHeader.utils.cjs","sources":["../../../../src/components/organisms/ApplicationHeader/applicationHeader.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,CAAC;AAEnB;AACO,MAAM,gBAAgB,GAAG,CAAC,KAAyB,KAAwB;AAChF,IAAA,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC;AAAE,QAAA,OAAO,SAAS;AACzC,IAAA,OAAO,KAAK,GAAG,SAAS,GAAG,CAAA,EAAG,SAAS,CAAA,CAAA,CAAG,GAAG,MAAM,CAAC,KAAK,CAAC;AAC5D;AAEA;AACO,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAE,KAAyB,MAAc,KAAK,IAAI,KAAK,GAAG,CAAC,GAAG,CAAA,EAAG,KAAK,CAAA,EAAA,EAAK,KAAK,CAAA,OAAA,CAAS,GAAG,KAAK;;;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/** Badge text for an unread count: `undefined` when there is nothing to show, capped at `9+`. */
|
|
2
|
+
export declare const formatBadgeCount: (count: number | undefined) => string | undefined;
|
|
3
|
+
/** Accessible name for the notifications button, carrying the exact unread count. */
|
|
4
|
+
export declare const getNotificationsLabel: (label: string, count: number | undefined) => string;
|
|
5
|
+
//# sourceMappingURL=applicationHeader.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"applicationHeader.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ApplicationHeader/applicationHeader.utils.ts"],"names":[],"mappings":"AAEA,iGAAiG;AACjG,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,SAGrE,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,EAAE,OAAO,MAAM,GAAG,SAAS,KAAG,MAAoE,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const MAX_COUNT = 9;
|
|
2
|
+
/** Badge text for an unread count: `undefined` when there is nothing to show, capped at `9+`. */
|
|
3
|
+
const formatBadgeCount = (count) => {
|
|
4
|
+
if (!count || count < 0)
|
|
5
|
+
return undefined;
|
|
6
|
+
return count > MAX_COUNT ? `${MAX_COUNT}+` : String(count);
|
|
7
|
+
};
|
|
8
|
+
/** Accessible name for the notifications button, carrying the exact unread count. */
|
|
9
|
+
const getNotificationsLabel = (label, count) => (count && count > 0 ? `${label}, ${count} unread` : label);
|
|
10
|
+
|
|
11
|
+
export { formatBadgeCount, getNotificationsLabel };
|
|
12
|
+
//# sourceMappingURL=applicationHeader.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"applicationHeader.utils.js","sources":["../../../../src/components/organisms/ApplicationHeader/applicationHeader.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,SAAS,GAAG,CAAC;AAEnB;AACO,MAAM,gBAAgB,GAAG,CAAC,KAAyB,KAAwB;AAChF,IAAA,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC;AAAE,QAAA,OAAO,SAAS;AACzC,IAAA,OAAO,KAAK,GAAG,SAAS,GAAG,CAAA,EAAG,SAAS,CAAA,CAAA,CAAG,GAAG,MAAM,CAAC,KAAK,CAAC;AAC5D;AAEA;AACO,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAE,KAAyB,MAAc,KAAK,IAAI,KAAK,GAAG,CAAC,GAAG,CAAA,EAAG,KAAK,CAAA,EAAA,EAAK,KAAK,CAAA,OAAA,CAAS,GAAG,KAAK;;;;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
|
|
5
|
+
var Tooltip = require('@flipdish/ui-library/components/atoms/Tooltip');
|
|
6
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
7
|
+
var reactAriaComponents = require('react-aria-components');
|
|
8
|
+
|
|
9
|
+
const AvatarButton = ({ name, src, initials, label, onPress, 'data-testid': dataTestId }) => (jsxRuntime.jsx(Tooltip.Tooltip, { title: label, placement: "bottom", "data-testid": testIdUtils.joinTestId(dataTestId, 'tooltip'), children: jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": label, "data-testid": dataTestId, onPress: onPress, className: "group flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(Avatar.Avatar, { size: "sm", rounded: false, src: src, initials: initials ?? Avatar.getInitials(name).toUpperCase(),
|
|
10
|
+
// The design's square avatar uses a 4px radius, tighter than Avatar's unrounded default.
|
|
11
|
+
className: "rounded-sm", contentClassName: "rounded-sm", "data-testid": testIdUtils.joinTestId(dataTestId, 'image') }) }) }));
|
|
12
|
+
|
|
13
|
+
exports.AvatarButton = AvatarButton;
|
|
14
|
+
//# sourceMappingURL=avatar-button.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar-button.cjs","sources":["../../../../../src/components/organisms/ApplicationHeader/components/avatar-button.tsx"],"sourcesContent":[null],"names":["_jsx","Tooltip","joinTestId","AriaButton","Avatar","getInitials"],"mappings":";;;;;;;;AAgBO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqB,MAChHA,eAACC,eAAO,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,EAAA,aAAA,EAAcC,sBAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EACtFF,cAAA,CAACG,0BAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACJ,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,4JAA4J,YAEtKH,cAAA,CAACI,aAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,KAAK,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAIC,kBAAW,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;;AAErD,YAAA,SAAS,EAAC,YAAY,EACtB,gBAAgB,EAAC,YAAY,EAAA,aAAA,EAChBH,sBAAU,CAAC,UAAU,EAAE,OAAO,CAAC,GAC5C,EAAA,CACS,EAAA,CACL;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface AvatarButtonProps {
|
|
2
|
+
name: string;
|
|
3
|
+
src?: string;
|
|
4
|
+
initials?: string;
|
|
5
|
+
label: string;
|
|
6
|
+
onPress: () => void;
|
|
7
|
+
'data-testid': string;
|
|
8
|
+
}
|
|
9
|
+
export declare const AvatarButton: ({ name, src, initials, label, onPress, "data-testid": dataTestId }: AvatarButtonProps) => import("react").JSX.Element;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=avatar-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/ApplicationHeader/components/avatar-button.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,GAAI,oEAAoE,iBAAiB,gCAoBjH,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Avatar, getInitials } from '@flipdish/ui-library/components/atoms/Avatar';
|
|
3
|
+
import { Tooltip } from '@flipdish/ui-library/components/atoms/Tooltip';
|
|
4
|
+
import { joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
|
+
import { Button } from 'react-aria-components';
|
|
6
|
+
|
|
7
|
+
const AvatarButton = ({ name, src, initials, label, onPress, 'data-testid': dataTestId }) => (jsx(Tooltip, { title: label, placement: "bottom", "data-testid": joinTestId(dataTestId, 'tooltip'), children: jsx(Button, { "aria-label": label, "data-testid": dataTestId, onPress: onPress, className: "group flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(Avatar, { size: "sm", rounded: false, src: src, initials: initials ?? getInitials(name).toUpperCase(),
|
|
8
|
+
// The design's square avatar uses a 4px radius, tighter than Avatar's unrounded default.
|
|
9
|
+
className: "rounded-sm", contentClassName: "rounded-sm", "data-testid": joinTestId(dataTestId, 'image') }) }) }));
|
|
10
|
+
|
|
11
|
+
export { AvatarButton };
|
|
12
|
+
//# sourceMappingURL=avatar-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar-button.js","sources":["../../../../../src/components/organisms/ApplicationHeader/components/avatar-button.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton"],"mappings":";;;;;;AAgBO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqB,MAChHA,IAAC,OAAO,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,EAAA,aAAA,EAAc,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EACtFA,GAAA,CAACC,MAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACJ,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,4JAA4J,YAEtKD,GAAA,CAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,KAAK,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;;AAErD,YAAA,SAAS,EAAC,YAAY,EACtB,gBAAgB,EAAC,YAAY,EAAA,aAAA,EAChB,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,GAC5C,EAAA,CACS,EAAA,CACL;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Tooltip = require('@flipdish/ui-library/components/atoms/Tooltip');
|
|
5
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
6
|
+
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
|
|
8
|
+
const HeaderAction = ({ icon: Icon, label, tooltip, badge, onPress, 'data-testid': dataTestId }) => (jsxRuntime.jsx(Tooltip.Tooltip, { title: tooltip, placement: "bottom", "data-testid": testIdUtils.joinTestId(dataTestId, 'tooltip'), children: jsxRuntime.jsxs(reactAriaComponents.Button, { "aria-label": label, "data-testid": dataTestId, onPress: onPress, className: "relative flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: [jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: "size-5 shrink-0" }), badge && (jsxRuntime.jsx("span", { "aria-hidden": "true", className: "absolute -top-px right-0 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-fg-error-primary px-0.5 text-center text-[10px] leading-[13px] font-bold text-white", children: badge }))] }) }));
|
|
9
|
+
|
|
10
|
+
exports.HeaderAction = HeaderAction;
|
|
11
|
+
//# sourceMappingURL=header-action.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header-action.cjs","sources":["../../../../../src/components/organisms/ApplicationHeader/components/header-action.tsx"],"sourcesContent":[null],"names":["_jsx","Tooltip","joinTestId","_jsxs","AriaButton"],"mappings":";;;;;;;AAmBO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqB,MACvHA,cAAA,CAACC,eAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,QAAQ,iBAAcC,sBAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EACxFC,gBAACC,0BAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACJ,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,4QAA4Q,aAEtRJ,cAAA,CAAC,IAAI,mBAAa,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAA,CAAG,EACtD,KAAK,KACJA,wCACc,MAAM,EAClB,SAAS,EAAC,+KAA+K,YAExL,KAAK,EAAA,CACD,CACR,CAAA,EAAA,CACU,EAAA,CACL;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
interface HeaderActionProps {
|
|
3
|
+
icon: FC<{
|
|
4
|
+
className?: string;
|
|
5
|
+
}>;
|
|
6
|
+
/** Accessible name, including any state such as an unread count. */
|
|
7
|
+
label: string;
|
|
8
|
+
/** Short visible name shown on hover and focus. */
|
|
9
|
+
tooltip: string;
|
|
10
|
+
/** Badge text; the badge is omitted when undefined. */
|
|
11
|
+
badge?: string;
|
|
12
|
+
onPress: () => void;
|
|
13
|
+
'data-testid': string;
|
|
14
|
+
}
|
|
15
|
+
export declare const HeaderAction: ({ icon: Icon, label, tooltip, badge, onPress, "data-testid": dataTestId }: HeaderActionProps) => import("react").JSX.Element;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=header-action.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header-action.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/ApplicationHeader/components/header-action.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,UAAU,iBAAiB;IACzB,IAAI,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,GAAI,2EAA2E,iBAAiB,gCAmBxH,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { Tooltip } from '@flipdish/ui-library/components/atoms/Tooltip';
|
|
3
|
+
import { joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
4
|
+
import { Button } from 'react-aria-components';
|
|
5
|
+
|
|
6
|
+
const HeaderAction = ({ icon: Icon, label, tooltip, badge, onPress, 'data-testid': dataTestId }) => (jsx(Tooltip, { title: tooltip, placement: "bottom", "data-testid": joinTestId(dataTestId, 'tooltip'), children: jsxs(Button, { "aria-label": label, "data-testid": dataTestId, onPress: onPress, className: "relative flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: [jsx(Icon, { "aria-hidden": "true", className: "size-5 shrink-0" }), badge && (jsx("span", { "aria-hidden": "true", className: "absolute -top-px right-0 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-fg-error-primary px-0.5 text-center text-[10px] leading-[13px] font-bold text-white", children: badge }))] }) }));
|
|
7
|
+
|
|
8
|
+
export { HeaderAction };
|
|
9
|
+
//# sourceMappingURL=header-action.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header-action.js","sources":["../../../../../src/components/organisms/ApplicationHeader/components/header-action.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaButton"],"mappings":";;;;;AAmBO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqB,MACvHA,GAAA,CAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,QAAQ,iBAAc,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,QAAA,EACxFC,KAACC,MAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACJ,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,4QAA4Q,aAEtRF,GAAA,CAAC,IAAI,mBAAa,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAA,CAAG,EACtD,KAAK,KACJA,6BACc,MAAM,EAClB,SAAS,EAAC,+KAA+K,YAExL,KAAK,EAAA,CACD,CACR,CAAA,EAAA,CACU,EAAA,CACL;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var uiIcons = require('@flipdish/ui-icons');
|
|
5
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
|
+
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
|
|
8
|
+
const MenuButton = ({ isOpen, onPress, label, controls, className, 'data-testid': dataTestId }) => (jsxRuntime.jsxs(reactAriaComponents.Button, { "aria-label": label, "aria-expanded": isOpen, "aria-controls": controls, "data-testid": dataTestId, onPress: onPress, className: cx.cx('relative flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-primary text-fg-secondary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2', className), children: [jsxRuntime.jsx(uiIcons.Menu02, { "aria-hidden": "true", className: cx.cx('size-5 transition duration-200 ease-in-out', isOpen && 'opacity-0') }), jsxRuntime.jsx(uiIcons.X, { "aria-hidden": "true", className: cx.cx('absolute size-5 opacity-0 transition duration-200 ease-in-out', isOpen && 'opacity-100') })] }));
|
|
9
|
+
|
|
10
|
+
exports.MenuButton = MenuButton;
|
|
11
|
+
//# sourceMappingURL=menu-button.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-button.cjs","sources":["../../../../../src/components/organisms/ApplicationHeader/components/menu-button.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaButton","cx","_jsx","Menu02","CloseIcon"],"mappings":";;;;;;;AAeO,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAmB,MACpHA,gBAACC,0BAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,eAAA,EACF,MAAM,EAAA,eAAA,EACN,QAAQ,iBACV,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEC,KAAE,CACX,qRAAqR,EACrR,SAAS,CACV,EAAA,QAAA,EAAA,CAEDC,cAAA,CAACC,cAAM,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,SAAS,EAAEF,KAAE,CAAC,4CAA4C,EAAE,MAAM,IAAI,WAAW,CAAC,EAAA,CAAI,EACjHC,eAACE,SAAS,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,SAAS,EAAEH,KAAE,CAAC,+DAA+D,EAAE,MAAM,IAAI,aAAa,CAAC,EAAA,CAAI,CAAA,EAAA,CAC9H;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface MenuButtonProps {
|
|
2
|
+
isOpen: boolean;
|
|
3
|
+
onPress: () => void;
|
|
4
|
+
label: string;
|
|
5
|
+
controls?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
'data-testid'?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const MenuButton: ({ isOpen, onPress, label, controls, className, "data-testid": dataTestId }: MenuButtonProps) => import("react").JSX.Element;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=menu-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/ApplicationHeader/components/menu-button.tsx"],"names":[],"mappings":"AAMA,UAAU,eAAe;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,GAAI,4EAA4E,eAAe,gCAerH,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Menu02, X } from '@flipdish/ui-icons';
|
|
3
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
|
+
import { Button } from 'react-aria-components';
|
|
5
|
+
|
|
6
|
+
const MenuButton = ({ isOpen, onPress, label, controls, className, 'data-testid': dataTestId }) => (jsxs(Button, { "aria-label": label, "aria-expanded": isOpen, "aria-controls": controls, "data-testid": dataTestId, onPress: onPress, className: cx('relative flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-primary text-fg-secondary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2', className), children: [jsx(Menu02, { "aria-hidden": "true", className: cx('size-5 transition duration-200 ease-in-out', isOpen && 'opacity-0') }), jsx(X, { "aria-hidden": "true", className: cx('absolute size-5 opacity-0 transition duration-200 ease-in-out', isOpen && 'opacity-100') })] }));
|
|
7
|
+
|
|
8
|
+
export { MenuButton };
|
|
9
|
+
//# sourceMappingURL=menu-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-button.js","sources":["../../../../../src/components/organisms/ApplicationHeader/components/menu-button.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaButton","_jsx","CloseIcon"],"mappings":";;;;;AAeO,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAmB,MACpHA,KAACC,MAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,eAAA,EACF,MAAM,EAAA,eAAA,EACN,QAAQ,iBACV,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACX,qRAAqR,EACrR,SAAS,CACV,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAC,MAAM,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,4CAA4C,EAAE,MAAM,IAAI,WAAW,CAAC,EAAA,CAAI,EACjHA,IAACC,CAAS,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,+DAA+D,EAAE,MAAM,IAAI,aAAa,CAAC,EAAA,CAAI,CAAA,EAAA,CAC9H;;;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var uiIcons = require('@flipdish/ui-icons');
|
|
5
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
|
+
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
|
|
8
|
+
const sizes = {
|
|
9
|
+
sm: { root: 'px-3 py-2', icon: uiIcons.SearchMd, iconClassName: 'size-4', text: 'text-sm' },
|
|
10
|
+
md: { root: 'px-3 py-2', icon: uiIcons.SearchLg, iconClassName: 'size-5', text: 'text-md' },
|
|
11
|
+
};
|
|
12
|
+
/** A button dressed as a search field: it never holds a value, it only opens the consumer's search surface. */
|
|
13
|
+
const SearchTrigger = ({ size, placeholder, label, onPress, shortcutHint, className, 'data-testid': dataTestId }) => {
|
|
14
|
+
const { root, icon: Icon, iconClassName, text } = sizes[size];
|
|
15
|
+
return (jsxRuntime.jsxs(reactAriaComponents.Button, { "aria-label": label, "data-testid": dataTestId, onPress: onPress, className: cx.cx('flex cursor-pointer items-center gap-2 rounded-lg bg-primary text-left shadow-xs ring-1 ring-primary outline-focus-ring transition duration-100 ease-linear ring-inset hover:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2', root, className), children: [jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: cx.cx('shrink-0 text-fg-quaternary', iconClassName) }), jsxRuntime.jsx("span", { className: cx.cx('min-w-0 flex-1 truncate text-placeholder', text), children: placeholder }), shortcutHint && (jsxRuntime.jsx("kbd", { className: "shrink-0 rounded-sm bg-secondary_alt px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcutHint }))] }));
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
exports.SearchTrigger = SearchTrigger;
|
|
19
|
+
//# sourceMappingURL=search-trigger.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"search-trigger.cjs","sources":["../../../../../src/components/organisms/ApplicationHeader/components/search-trigger.tsx"],"sourcesContent":[null],"names":["SearchMd","SearchLg","_jsxs","AriaButton","cx","_jsx"],"mappings":";;;;;;;AAOA,MAAM,KAAK,GAAiH;AAC1H,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAEA,gBAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;AACnF,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAEC,gBAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;CACpF;AAeD;MACa,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAsB,KAAI;AAC7I,IAAA,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;AAE7D,IAAA,QACEC,eAAA,CAACC,0BAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACJ,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEC,KAAE,CACX,sPAAsP,EACtP,IAAI,EACJ,SAAS,CACV,EAAA,QAAA,EAAA,CAEDC,cAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,SAAS,EAAED,KAAE,CAAC,6BAA6B,EAAE,aAAa,CAAC,EAAA,CAAI,EACxFC,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAED,KAAE,CAAC,0CAA0C,EAAE,IAAI,CAAC,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAC1F,YAAY,KACXC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8HAA8H,EAAA,QAAA,EAC1I,YAAY,EAAA,CACT,CACP,CAAA,EAAA,CACU;AAEjB;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
declare const sizes: Record<'sm' | 'md', {
|
|
3
|
+
root: string;
|
|
4
|
+
icon: FC<{
|
|
5
|
+
className?: string;
|
|
6
|
+
}>;
|
|
7
|
+
iconClassName: string;
|
|
8
|
+
text: string;
|
|
9
|
+
}>;
|
|
10
|
+
interface SearchTriggerProps {
|
|
11
|
+
/** `sm` for the desktop header, `md` for the mobile drawer. */
|
|
12
|
+
size: keyof typeof sizes;
|
|
13
|
+
placeholder: string;
|
|
14
|
+
/** Accessible name; the placeholder is presentational. */
|
|
15
|
+
label: string;
|
|
16
|
+
onPress: () => void;
|
|
17
|
+
/** Formatted shortcut shown as a key cap, e.g. `⌘K`. */
|
|
18
|
+
shortcutHint?: string;
|
|
19
|
+
className?: string;
|
|
20
|
+
'data-testid'?: string;
|
|
21
|
+
}
|
|
22
|
+
/** A button dressed as a search field: it never holds a value, it only opens the consumer's search surface. */
|
|
23
|
+
export declare const SearchTrigger: ({ size, placeholder, label, onPress, shortcutHint, className, "data-testid": dataTestId }: SearchTriggerProps) => import("react").JSX.Element;
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=search-trigger.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"search-trigger.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/ApplicationHeader/components/search-trigger.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAGvH,CAAC;AAEF,UAAU,kBAAkB;IAC1B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,OAAO,KAAK,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,+GAA+G;AAC/G,eAAO,MAAM,aAAa,GAAI,2FAA2F,kBAAkB,gCAuB1I,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { SearchLg, SearchMd } from '@flipdish/ui-icons';
|
|
3
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
|
+
import { Button } from 'react-aria-components';
|
|
5
|
+
|
|
6
|
+
const sizes = {
|
|
7
|
+
sm: { root: 'px-3 py-2', icon: SearchMd, iconClassName: 'size-4', text: 'text-sm' },
|
|
8
|
+
md: { root: 'px-3 py-2', icon: SearchLg, iconClassName: 'size-5', text: 'text-md' },
|
|
9
|
+
};
|
|
10
|
+
/** A button dressed as a search field: it never holds a value, it only opens the consumer's search surface. */
|
|
11
|
+
const SearchTrigger = ({ size, placeholder, label, onPress, shortcutHint, className, 'data-testid': dataTestId }) => {
|
|
12
|
+
const { root, icon: Icon, iconClassName, text } = sizes[size];
|
|
13
|
+
return (jsxs(Button, { "aria-label": label, "data-testid": dataTestId, onPress: onPress, className: cx('flex cursor-pointer items-center gap-2 rounded-lg bg-primary text-left shadow-xs ring-1 ring-primary outline-focus-ring transition duration-100 ease-linear ring-inset hover:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2', root, className), children: [jsx(Icon, { "aria-hidden": "true", className: cx('shrink-0 text-fg-quaternary', iconClassName) }), jsx("span", { className: cx('min-w-0 flex-1 truncate text-placeholder', text), children: placeholder }), shortcutHint && (jsx("kbd", { className: "shrink-0 rounded-sm bg-secondary_alt px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcutHint }))] }));
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export { SearchTrigger };
|
|
17
|
+
//# sourceMappingURL=search-trigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"search-trigger.js","sources":["../../../../../src/components/organisms/ApplicationHeader/components/search-trigger.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaButton","_jsx"],"mappings":";;;;;AAOA,MAAM,KAAK,GAAiH;AAC1H,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;AACnF,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;CACpF;AAeD;MACa,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAsB,KAAI;AAC7I,IAAA,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;AAE7D,IAAA,QACEA,IAAA,CAACC,MAAU,EAAA,EAAA,YAAA,EACG,KAAK,EAAA,aAAA,EACJ,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACX,sPAAsP,EACtP,IAAI,EACJ,SAAS,CACV,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,aAAa,CAAC,EAAA,CAAI,EACxFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,IAAI,CAAC,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAC1F,YAAY,KACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8HAA8H,EAAA,QAAA,EAC1I,YAAY,EAAA,CACT,CACP,CAAA,EAAA,CACU;AAEjB;;;;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var uiIcons = require('@flipdish/ui-icons');
|
|
5
|
+
var FlipdishLogo = require('@flipdish/ui-library/components/atoms/FlipdishLogo');
|
|
6
|
+
var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
|
|
7
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
8
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
9
|
+
var React = require('react');
|
|
10
|
+
var reactAriaComponents = require('react-aria-components');
|
|
11
|
+
var reactHotkeysHook = require('react-hotkeys-hook');
|
|
12
|
+
var hotkeys_utils = require('../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
|
|
13
|
+
var applicationHeader_utils = require('./applicationHeader.utils.cjs');
|
|
14
|
+
var avatarButton = require('./components/avatar-button.cjs');
|
|
15
|
+
var headerAction = require('./components/header-action.cjs');
|
|
16
|
+
var menuButton = require('./components/menu-button.cjs');
|
|
17
|
+
var searchTrigger = require('./components/search-trigger.cjs');
|
|
18
|
+
|
|
19
|
+
const DEFAULT_SHORTCUT = 'mod+k';
|
|
20
|
+
const subscribeToNothing = () => () => { };
|
|
21
|
+
/**
|
|
22
|
+
* App-shell top bar that sits above every page: a search trigger on desktop, and
|
|
23
|
+
* notifications, assistant and avatar actions at every width. Below `lg` the search gives
|
|
24
|
+
* way to a navigation menu toggle and the Flipdish logo. Every section is data-driven and
|
|
25
|
+
* optional — the header owns layout, labelling and the search shortcut, while the app owns
|
|
26
|
+
* what each press does. Sticks to the top of the scrolling page.
|
|
27
|
+
*
|
|
28
|
+
* @summary app-shell top bar with search, notifications, assistant and avatar
|
|
29
|
+
*/
|
|
30
|
+
const ApplicationHeader = ({ search, notifications, assistant, avatar, menu, homeHref = '/', className, 'data-testid': dataTestId, }) => {
|
|
31
|
+
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'application-header', rootName: 'application-header' });
|
|
32
|
+
const isDesktop = useBreakpoints.useBreakpoints('lg');
|
|
33
|
+
// Server snapshot is `false` so the hint hydrates consistently, then settles on the real platform.
|
|
34
|
+
const isApple = React.useSyncExternalStore(subscribeToNothing, hotkeys_utils.isApplePlatform, () => false);
|
|
35
|
+
const shortcut = search ? (search.shortcut === undefined ? DEFAULT_SHORTCUT : search.shortcut) : null;
|
|
36
|
+
const onSearchPress = search?.onPress;
|
|
37
|
+
reactHotkeysHook.useHotkeys(shortcut ?? '', () => onSearchPress?.(),
|
|
38
|
+
// The search trigger is hidden below `lg`, so the shortcut is too.
|
|
39
|
+
{ enabled: Boolean(shortcut && isDesktop), preventDefault: true, enableOnFormTags: true, enableOnContentEditable: true }, [onSearchPress]);
|
|
40
|
+
const notificationsLabel = notifications?.label ?? 'Notifications';
|
|
41
|
+
const assistantLabel = assistant?.label ?? 'Assistant';
|
|
42
|
+
const menuLabel = menu?.label ?? (menu?.isOpen ? 'Close navigation menu' : 'Open navigation menu');
|
|
43
|
+
const hasActions = Boolean(notifications || assistant || avatar);
|
|
44
|
+
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsxs("header", { "data-testid": rootTestId, className: cx.cx('sticky top-0 z-30 flex h-14 w-full items-center gap-2 border-b border-secondary bg-primary pr-3 pl-4 lg:h-16 lg:px-6', className), children: [menu && (jsxRuntime.jsx(menuButton.MenuButton, { isOpen: menu.isOpen, onPress: () => menu.onOpenChange(!menu.isOpen), label: menuLabel, controls: menu.controls, className: "lg:hidden", "data-testid": menu['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'menu') })), jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center lg:hidden", children: jsxRuntime.jsx(reactAriaComponents.Link, { href: homeHref, "aria-label": "Go to homepage", "data-testid": testIdUtils.joinTestId(rootTestId, 'logo'), className: "rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm", "aria-hidden": "true" }) }) }), search && (jsxRuntime.jsx(searchTrigger.SearchTrigger, { size: "sm", placeholder: search.placeholder ?? 'Search', label: search.label ?? 'Search', onPress: search.onPress, shortcutHint: shortcut ? hotkeys_utils.formatHotkeyHint(shortcut, isApple) : undefined, className: "w-80 max-lg:hidden", "data-testid": search['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'search') })), hasActions && (jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 lg:ml-auto", children: [notifications && (jsxRuntime.jsx(headerAction.HeaderAction, { icon: uiIcons.Bell01, label: applicationHeader_utils.getNotificationsLabel(notificationsLabel, notifications.count), tooltip: notificationsLabel, badge: applicationHeader_utils.formatBadgeCount(notifications.count), onPress: notifications.onPress, "data-testid": notifications['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'notifications') })), assistant && (jsxRuntime.jsx(headerAction.HeaderAction, { icon: uiIcons.Stars01, label: assistantLabel, tooltip: assistantLabel, onPress: assistant.onPress, "data-testid": assistant['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'assistant') })), avatar && (jsxRuntime.jsx(avatarButton.AvatarButton, { name: avatar.name, src: avatar.src, initials: avatar.initials, label: avatar.label ?? avatar.name, onPress: avatar.onPress, "data-testid": avatar['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'avatar') }))] }))] }) }));
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
exports.ApplicationHeader = ApplicationHeader;
|
|
48
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useSyncExternalStore","isApplePlatform","useHotkeys","_jsx","TestIdProvider","_jsxs","cx","MenuButton","joinTestId","AriaLink","FlipdishLogo","SearchTrigger","formatHotkeyHint","HeaderAction","Bell01","getNotificationsLabel","formatBadgeCount","Stars01","AvatarButton"],"mappings":"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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { ApplicationHeaderAssistant, ApplicationHeaderAvatar, ApplicationHeaderMenu, ApplicationHeaderNotifications, ApplicationHeaderSearch } from './applicationHeader.types';
|
|
2
|
+
export type { ApplicationHeaderAssistant, ApplicationHeaderAvatar, ApplicationHeaderMenu, ApplicationHeaderNotifications, ApplicationHeaderSearch, } from './applicationHeader.types';
|
|
3
|
+
export interface ApplicationHeaderProps {
|
|
4
|
+
/**
|
|
5
|
+
* Search trigger, shown from `lg`. It is a button dressed as a search field — pressing it (or its
|
|
6
|
+
* shortcut) calls `onPress` so the app can open its own search surface. Omit to hide.
|
|
7
|
+
*/
|
|
8
|
+
search?: ApplicationHeaderSearch;
|
|
9
|
+
/** Notifications button with an unread badge. Omit to hide. */
|
|
10
|
+
notifications?: ApplicationHeaderNotifications;
|
|
11
|
+
/** AI assistant button. Omit to hide. */
|
|
12
|
+
assistant?: ApplicationHeaderAssistant;
|
|
13
|
+
/** Avatar button for the current organisation, store or user. Omit to hide. */
|
|
14
|
+
avatar?: ApplicationHeaderAvatar;
|
|
15
|
+
/**
|
|
16
|
+
* Navigation menu toggle, shown below `lg`. Share its state with
|
|
17
|
+
* `SidebarNavigation`'s `mobileMenuOpen` / `onMobileMenuOpenChange`. Omit to hide.
|
|
18
|
+
*/
|
|
19
|
+
menu?: ApplicationHeaderMenu;
|
|
20
|
+
/**
|
|
21
|
+
* Destination of the logo link shown below `lg`.
|
|
22
|
+
* @default "/"
|
|
23
|
+
*/
|
|
24
|
+
homeHref?: string;
|
|
25
|
+
/** Extra classes merged onto the root `<header>`. */
|
|
26
|
+
className?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Overrides the root `data-testid`. Defaults to `fd-application-header`. Child
|
|
29
|
+
* elements derive their testids from this prefix (e.g. `<root>--search`).
|
|
30
|
+
*/
|
|
31
|
+
'data-testid'?: string;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* App-shell top bar that sits above every page: a search trigger on desktop, and
|
|
35
|
+
* notifications, assistant and avatar actions at every width. Below `lg` the search gives
|
|
36
|
+
* way to a navigation menu toggle and the Flipdish logo. Every section is data-driven and
|
|
37
|
+
* optional — the header owns layout, labelling and the search shortcut, while the app owns
|
|
38
|
+
* what each press does. Sticks to the top of the scrolling page.
|
|
39
|
+
*
|
|
40
|
+
* @summary app-shell top bar with search, notifications, assistant and avatar
|
|
41
|
+
*/
|
|
42
|
+
export declare const ApplicationHeader: ({ search, notifications, assistant, avatar, menu, homeHref, className, "data-testid": dataTestId, }: ApplicationHeaderProps) => import("react").JSX.Element;
|
|
43
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,0BAA0B,EAC1B,uBAAuB,EACvB,qBAAqB,EACrB,8BAA8B,EAC9B,uBAAuB,EACxB,MAAM,2BAA2B,CAAC;AAOnC,YAAY,EACV,0BAA0B,EAC1B,uBAAuB,EACvB,qBAAqB,EACrB,8BAA8B,EAC9B,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAMnC,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,8BAA8B,CAAC;IAC/C,yCAAyC;IACzC,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,GAAI,qGAS/B,sBAAsB,gCAuGxB,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { Bell01, Stars01 } from '@flipdish/ui-icons';
|
|
3
|
+
import { FlipdishLogo } from '@flipdish/ui-library/components/atoms/FlipdishLogo';
|
|
4
|
+
import { useBreakpoints } from '@flipdish/ui-library/hooks/useBreakpoints';
|
|
5
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
|
+
import { useResolvedTestId, TestIdProvider, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
7
|
+
import { useSyncExternalStore } from 'react';
|
|
8
|
+
import { Link } from 'react-aria-components';
|
|
9
|
+
import { useHotkeys } from 'react-hotkeys-hook';
|
|
10
|
+
import { isApplePlatform, formatHotkeyHint } from '../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
|
|
11
|
+
import { formatBadgeCount, getNotificationsLabel } from './applicationHeader.utils.js';
|
|
12
|
+
import { AvatarButton } from './components/avatar-button.js';
|
|
13
|
+
import { HeaderAction } from './components/header-action.js';
|
|
14
|
+
import { MenuButton } from './components/menu-button.js';
|
|
15
|
+
import { SearchTrigger } from './components/search-trigger.js';
|
|
16
|
+
|
|
17
|
+
const DEFAULT_SHORTCUT = 'mod+k';
|
|
18
|
+
const subscribeToNothing = () => () => { };
|
|
19
|
+
/**
|
|
20
|
+
* App-shell top bar that sits above every page: a search trigger on desktop, and
|
|
21
|
+
* notifications, assistant and avatar actions at every width. Below `lg` the search gives
|
|
22
|
+
* way to a navigation menu toggle and the Flipdish logo. Every section is data-driven and
|
|
23
|
+
* optional — the header owns layout, labelling and the search shortcut, while the app owns
|
|
24
|
+
* what each press does. Sticks to the top of the scrolling page.
|
|
25
|
+
*
|
|
26
|
+
* @summary app-shell top bar with search, notifications, assistant and avatar
|
|
27
|
+
*/
|
|
28
|
+
const ApplicationHeader = ({ search, notifications, assistant, avatar, menu, homeHref = '/', className, 'data-testid': dataTestId, }) => {
|
|
29
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'application-header', rootName: 'application-header' });
|
|
30
|
+
const isDesktop = useBreakpoints('lg');
|
|
31
|
+
// Server snapshot is `false` so the hint hydrates consistently, then settles on the real platform.
|
|
32
|
+
const isApple = useSyncExternalStore(subscribeToNothing, isApplePlatform, () => false);
|
|
33
|
+
const shortcut = search ? (search.shortcut === undefined ? DEFAULT_SHORTCUT : search.shortcut) : null;
|
|
34
|
+
const onSearchPress = search?.onPress;
|
|
35
|
+
useHotkeys(shortcut ?? '', () => onSearchPress?.(),
|
|
36
|
+
// The search trigger is hidden below `lg`, so the shortcut is too.
|
|
37
|
+
{ enabled: Boolean(shortcut && isDesktop), preventDefault: true, enableOnFormTags: true, enableOnContentEditable: true }, [onSearchPress]);
|
|
38
|
+
const notificationsLabel = notifications?.label ?? 'Notifications';
|
|
39
|
+
const assistantLabel = assistant?.label ?? 'Assistant';
|
|
40
|
+
const menuLabel = menu?.label ?? (menu?.isOpen ? 'Close navigation menu' : 'Open navigation menu');
|
|
41
|
+
const hasActions = Boolean(notifications || assistant || avatar);
|
|
42
|
+
return (jsx(TestIdProvider, { value: rootTestId, children: jsxs("header", { "data-testid": rootTestId, className: cx('sticky top-0 z-30 flex h-14 w-full items-center gap-2 border-b border-secondary bg-primary pr-3 pl-4 lg:h-16 lg:px-6', className), children: [menu && (jsx(MenuButton, { isOpen: menu.isOpen, onPress: () => menu.onOpenChange(!menu.isOpen), label: menuLabel, controls: menu.controls, className: "lg:hidden", "data-testid": menu['data-testid'] ?? joinTestId(rootTestId, 'menu') })), jsx("div", { className: "flex min-w-0 flex-1 items-center lg:hidden", children: jsx(Link, { href: homeHref, "aria-label": "Go to homepage", "data-testid": joinTestId(rootTestId, 'logo'), className: "rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(FlipdishLogo, { size: "sm", "aria-hidden": "true" }) }) }), search && (jsx(SearchTrigger, { size: "sm", placeholder: search.placeholder ?? 'Search', label: search.label ?? 'Search', onPress: search.onPress, shortcutHint: shortcut ? formatHotkeyHint(shortcut, isApple) : undefined, className: "w-80 max-lg:hidden", "data-testid": search['data-testid'] ?? joinTestId(rootTestId, 'search') })), hasActions && (jsxs("div", { className: "flex shrink-0 items-center gap-2 lg:ml-auto", children: [notifications && (jsx(HeaderAction, { icon: Bell01, label: getNotificationsLabel(notificationsLabel, notifications.count), tooltip: notificationsLabel, badge: formatBadgeCount(notifications.count), onPress: notifications.onPress, "data-testid": notifications['data-testid'] ?? joinTestId(rootTestId, 'notifications') })), assistant && (jsx(HeaderAction, { icon: Stars01, label: assistantLabel, tooltip: assistantLabel, onPress: assistant.onPress, "data-testid": assistant['data-testid'] ?? joinTestId(rootTestId, 'assistant') })), avatar && (jsx(AvatarButton, { name: avatar.name, src: avatar.src, initials: avatar.initials, label: avatar.label ?? avatar.name, onPress: avatar.onPress, "data-testid": avatar['data-testid'] ?? joinTestId(rootTestId, 'avatar') }))] }))] }) }));
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export { ApplicationHeader };
|
|
46
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaLink"],"mappings":"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"}
|
|
@@ -7,12 +7,12 @@ var React = require('react');
|
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
8
|
var reactHotkeysHook = require('react-hotkeys-hook');
|
|
9
9
|
var children_utils = require('../../../utilities/__internal__/childrenUtils/children.utils.cjs');
|
|
10
|
+
var hotkeys_utils = require('../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
|
|
10
11
|
var commandMenu_utils = require('./commandMenu.utils.cjs');
|
|
11
12
|
var commandInput = require('./components/command-input.cjs');
|
|
12
13
|
var commandMenuFooter = require('./components/command-menu-footer.cjs');
|
|
13
14
|
var commandMenuHeader = require('./components/command-menu-header.cjs');
|
|
14
15
|
var commandMenuItem = require('./components/command-menu-item.cjs');
|
|
15
|
-
var hotkeys_utils = require('./hotkeys.utils.cjs');
|
|
16
16
|
|
|
17
17
|
const CommandMenuContext = React.createContext({
|
|
18
18
|
hasFooter: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC9I,OAAO,EAEL,UAAU,IAAI,cAAc,EAE5B,aAAa,IAAI,iBAAiB,EAOnC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,12 +5,12 @@ import { createContext, useRef, useState, useMemo, isValidElement, useContext, F
|
|
|
5
5
|
import { ModalOverlay, Modal, Dialog, useFilter, Autocomplete, TextField, ListBox, ListBoxSection, Collection, DialogTrigger } from 'react-aria-components';
|
|
6
6
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
7
7
|
import { flattenChildren } from '../../../utilities/__internal__/childrenUtils/children.utils.js';
|
|
8
|
+
import { parseHotkey } from '../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
|
|
8
9
|
import { isDeepEqual, mergeRefs } from './commandMenu.utils.js';
|
|
9
10
|
import { CommandInput } from './components/command-input.js';
|
|
10
11
|
import { CommandMenuFooter } from './components/command-menu-footer.js';
|
|
11
12
|
import { CommandMenuHeader } from './components/command-menu-header.js';
|
|
12
13
|
import { CommandDropdownMenuItem } from './components/command-menu-item.js';
|
|
13
|
-
import { parseHotkey } from './hotkeys.utils.js';
|
|
14
14
|
|
|
15
15
|
const CommandMenuContext = createContext({
|
|
16
16
|
hasFooter: false,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `ApplicationHeader` has no React Native implementation.
|
|
3
|
+
*
|
|
4
|
+
* This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
|
|
5
|
+
* that importing `@flipdish/ui-library/components/organisms/ApplicationHeader` from React Native fails at
|
|
6
|
+
* compile time rather than resolving to the web build's types. There is no
|
|
7
|
+
* matching `index.js`, so Metro cannot bundle this module either.
|
|
8
|
+
*
|
|
9
|
+
* To make `ApplicationHeader` available on React Native, add an `index.native.tsx` beside
|
|
10
|
+
* its `index.tsx` — the build picks it up automatically and this stub disappears.
|
|
11
|
+
*/
|
|
12
|
+
export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* Helpers for `react-hotkeys-hook` hotkey strings (`mod+k`). INTERNAL: imported by components as
|
|
5
|
+
* `#internal/utilities/hotkeysUtils/hotkeys.utils`.
|
|
6
|
+
*
|
|
7
|
+
* The parser section is a 1:1 copy of the library's `parseHotkeys.ts`, which cannot be imported from the
|
|
8
|
+
* package directly. Keep it in sync with the source rather than editing it:
|
|
9
|
+
* https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/packages/react-hotkeys-hook/src/lib/parseHotkeys.ts
|
|
10
|
+
*
|
|
11
|
+
* The display section below it is ours: platform detection and hint formatting built on that parser.
|
|
12
|
+
*/
|
|
13
|
+
const reservedModifierKeywords = ['shift', 'alt', 'meta', 'mod', 'ctrl', 'control'];
|
|
14
|
+
const mappedKeys = {
|
|
15
|
+
esc: 'escape',
|
|
16
|
+
return: 'enter',
|
|
17
|
+
left: 'arrowleft',
|
|
18
|
+
right: 'arrowright',
|
|
19
|
+
up: 'arrowup',
|
|
20
|
+
down: 'arrowdown',
|
|
21
|
+
ShiftLeft: 'shift',
|
|
22
|
+
ShiftRight: 'shift',
|
|
23
|
+
AltLeft: 'alt',
|
|
24
|
+
AltRight: 'alt',
|
|
25
|
+
MetaLeft: 'meta',
|
|
26
|
+
MetaRight: 'meta',
|
|
27
|
+
OSLeft: 'meta',
|
|
28
|
+
OSRight: 'meta',
|
|
29
|
+
ControlLeft: 'ctrl',
|
|
30
|
+
ControlRight: 'ctrl',
|
|
31
|
+
};
|
|
32
|
+
function mapCode(key) {
|
|
33
|
+
return (mappedKeys[key.trim()] || key.trim()).toLowerCase().replace(/key|digit|numpad/, '');
|
|
34
|
+
}
|
|
35
|
+
function isHotkeyModifier(key) {
|
|
36
|
+
return reservedModifierKeywords.includes(key);
|
|
37
|
+
}
|
|
38
|
+
function parseKeysHookInput(keys, delimiter = ',') {
|
|
39
|
+
return keys.toLowerCase().split(delimiter);
|
|
40
|
+
}
|
|
41
|
+
function parseHotkey(hotkey, splitKey = '+', sequenceSplitKey = '>', useKey = false, description) {
|
|
42
|
+
let keys = [];
|
|
43
|
+
let isSequence = false;
|
|
44
|
+
if (hotkey.includes(sequenceSplitKey)) {
|
|
45
|
+
isSequence = true;
|
|
46
|
+
keys = hotkey
|
|
47
|
+
.toLocaleLowerCase()
|
|
48
|
+
.split(sequenceSplitKey)
|
|
49
|
+
.map((k) => mapCode(k));
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
keys = hotkey
|
|
53
|
+
.toLocaleLowerCase()
|
|
54
|
+
.split(splitKey)
|
|
55
|
+
.map((k) => mapCode(k));
|
|
56
|
+
}
|
|
57
|
+
const modifiers = {
|
|
58
|
+
alt: keys.includes('alt'),
|
|
59
|
+
ctrl: keys.includes('ctrl') || keys.includes('control'),
|
|
60
|
+
shift: keys.includes('shift'),
|
|
61
|
+
meta: keys.includes('meta'),
|
|
62
|
+
mod: keys.includes('mod'),
|
|
63
|
+
useKey,
|
|
64
|
+
};
|
|
65
|
+
const singleCharKeys = keys.filter((k) => !reservedModifierKeywords.includes(k));
|
|
66
|
+
return {
|
|
67
|
+
...modifiers,
|
|
68
|
+
hotkey,
|
|
69
|
+
keys: singleCharKeys,
|
|
70
|
+
description,
|
|
71
|
+
isSequence,
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
// #endregion
|
|
75
|
+
// #region Display
|
|
76
|
+
const APPLE_MODIFIERS = { mod: '⌘', meta: '⌘', ctrl: '⌃', control: '⌃', alt: '⌥', shift: '⇧' };
|
|
77
|
+
const OTHER_MODIFIERS = { mod: 'Ctrl', meta: 'Win', ctrl: 'Ctrl', control: 'Ctrl', alt: 'Alt', shift: 'Shift' };
|
|
78
|
+
/**
|
|
79
|
+
* Whether `mod` means ⌘ on this device. Mirrors `react-hotkeys-hook`'s own rule exactly (macOS only, not
|
|
80
|
+
* iOS/iPadOS) so a hint always names the key that fires the hotkey. Always `false` on the server.
|
|
81
|
+
*/
|
|
82
|
+
const isApplePlatform = () => typeof navigator !== 'undefined' && /mac/i.test(navigator.userAgent) && !/iphone|ipad|ipod/i.test(navigator.userAgent);
|
|
83
|
+
/**
|
|
84
|
+
* Formats a hotkey for display: `mod+k` reads `⌘K` on macOS and `Ctrl K` elsewhere.
|
|
85
|
+
* When several comma-separated alternatives are given, only the first is shown.
|
|
86
|
+
*/
|
|
87
|
+
const formatHotkeyHint = (hotkey, isApple) => {
|
|
88
|
+
const modifiers = isApple ? APPLE_MODIFIERS : OTHER_MODIFIERS;
|
|
89
|
+
const [firstHotkey = ''] = parseKeysHookInput(hotkey);
|
|
90
|
+
return firstHotkey
|
|
91
|
+
.split('+')
|
|
92
|
+
.map(mapCode)
|
|
93
|
+
.filter(Boolean)
|
|
94
|
+
.map((key) => (isHotkeyModifier(key) ? modifiers[key] : key.toUpperCase()))
|
|
95
|
+
.join(isApple ? '' : ' ');
|
|
96
|
+
};
|
|
97
|
+
// #endregion
|
|
98
|
+
|
|
99
|
+
exports.formatHotkeyHint = formatHotkeyHint;
|
|
100
|
+
exports.isApplePlatform = isApplePlatform;
|
|
101
|
+
exports.isHotkeyModifier = isHotkeyModifier;
|
|
102
|
+
exports.mapCode = mapCode;
|
|
103
|
+
exports.parseHotkey = parseHotkey;
|
|
104
|
+
exports.parseKeysHookInput = parseKeysHookInput;
|
|
105
|
+
//# sourceMappingURL=hotkeys.utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hotkeys.utils.cjs","sources":["../../../../src/utilities/__internal__/hotkeysUtils/hotkeys.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
|
@@ -16,5 +16,15 @@ export declare function mapCode(key: string): string;
|
|
|
16
16
|
export declare function isHotkeyModifier(key: string): boolean;
|
|
17
17
|
export declare function parseKeysHookInput(keys: string, delimiter?: string): string[];
|
|
18
18
|
export declare function parseHotkey(hotkey: string, splitKey?: string, sequenceSplitKey?: string, useKey?: boolean, description?: string): Hotkey;
|
|
19
|
+
/**
|
|
20
|
+
* Whether `mod` means ⌘ on this device. Mirrors `react-hotkeys-hook`'s own rule exactly (macOS only, not
|
|
21
|
+
* iOS/iPadOS) so a hint always names the key that fires the hotkey. Always `false` on the server.
|
|
22
|
+
*/
|
|
23
|
+
export declare const isApplePlatform: () => boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Formats a hotkey for display: `mod+k` reads `⌘K` on macOS and `Ctrl K` elsewhere.
|
|
26
|
+
* When several comma-separated alternatives are given, only the first is shown.
|
|
27
|
+
*/
|
|
28
|
+
export declare const formatHotkeyHint: (hotkey: string, isApple: boolean) => string;
|
|
19
29
|
export {};
|
|
20
30
|
//# sourceMappingURL=hotkeys.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hotkeys.utils.d.ts","sourceRoot":"","sources":["../../../../src/utilities/__internal__/hotkeysUtils/hotkeys.utils.ts"],"names":[],"mappings":"AAaA,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,MAAO,SAAQ,iBAAiB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;CACrB;AAuBD,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE3C;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,WAE3C;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,SAAM,GAAG,MAAM,EAAE,CAE1E;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAM,EAAE,gBAAgB,SAAM,EAAE,MAAM,UAAQ,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAmChI;AAOD;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAO,OACqF,CAAC;AAEzH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,SAAS,OAAO,KAAG,MAUnE,CAAC"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Helpers for `react-hotkeys-hook` hotkey strings (`mod+k`). INTERNAL: imported by components as
|
|
3
|
+
* `#internal/utilities/hotkeysUtils/hotkeys.utils`.
|
|
4
|
+
*
|
|
5
|
+
* The parser section is a 1:1 copy of the library's `parseHotkeys.ts`, which cannot be imported from the
|
|
6
|
+
* package directly. Keep it in sync with the source rather than editing it:
|
|
7
|
+
* https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/packages/react-hotkeys-hook/src/lib/parseHotkeys.ts
|
|
8
|
+
*
|
|
9
|
+
* The display section below it is ours: platform detection and hint formatting built on that parser.
|
|
10
|
+
*/
|
|
11
|
+
const reservedModifierKeywords = ['shift', 'alt', 'meta', 'mod', 'ctrl', 'control'];
|
|
12
|
+
const mappedKeys = {
|
|
13
|
+
esc: 'escape',
|
|
14
|
+
return: 'enter',
|
|
15
|
+
left: 'arrowleft',
|
|
16
|
+
right: 'arrowright',
|
|
17
|
+
up: 'arrowup',
|
|
18
|
+
down: 'arrowdown',
|
|
19
|
+
ShiftLeft: 'shift',
|
|
20
|
+
ShiftRight: 'shift',
|
|
21
|
+
AltLeft: 'alt',
|
|
22
|
+
AltRight: 'alt',
|
|
23
|
+
MetaLeft: 'meta',
|
|
24
|
+
MetaRight: 'meta',
|
|
25
|
+
OSLeft: 'meta',
|
|
26
|
+
OSRight: 'meta',
|
|
27
|
+
ControlLeft: 'ctrl',
|
|
28
|
+
ControlRight: 'ctrl',
|
|
29
|
+
};
|
|
30
|
+
function mapCode(key) {
|
|
31
|
+
return (mappedKeys[key.trim()] || key.trim()).toLowerCase().replace(/key|digit|numpad/, '');
|
|
32
|
+
}
|
|
33
|
+
function isHotkeyModifier(key) {
|
|
34
|
+
return reservedModifierKeywords.includes(key);
|
|
35
|
+
}
|
|
36
|
+
function parseKeysHookInput(keys, delimiter = ',') {
|
|
37
|
+
return keys.toLowerCase().split(delimiter);
|
|
38
|
+
}
|
|
39
|
+
function parseHotkey(hotkey, splitKey = '+', sequenceSplitKey = '>', useKey = false, description) {
|
|
40
|
+
let keys = [];
|
|
41
|
+
let isSequence = false;
|
|
42
|
+
if (hotkey.includes(sequenceSplitKey)) {
|
|
43
|
+
isSequence = true;
|
|
44
|
+
keys = hotkey
|
|
45
|
+
.toLocaleLowerCase()
|
|
46
|
+
.split(sequenceSplitKey)
|
|
47
|
+
.map((k) => mapCode(k));
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
keys = hotkey
|
|
51
|
+
.toLocaleLowerCase()
|
|
52
|
+
.split(splitKey)
|
|
53
|
+
.map((k) => mapCode(k));
|
|
54
|
+
}
|
|
55
|
+
const modifiers = {
|
|
56
|
+
alt: keys.includes('alt'),
|
|
57
|
+
ctrl: keys.includes('ctrl') || keys.includes('control'),
|
|
58
|
+
shift: keys.includes('shift'),
|
|
59
|
+
meta: keys.includes('meta'),
|
|
60
|
+
mod: keys.includes('mod'),
|
|
61
|
+
useKey,
|
|
62
|
+
};
|
|
63
|
+
const singleCharKeys = keys.filter((k) => !reservedModifierKeywords.includes(k));
|
|
64
|
+
return {
|
|
65
|
+
...modifiers,
|
|
66
|
+
hotkey,
|
|
67
|
+
keys: singleCharKeys,
|
|
68
|
+
description,
|
|
69
|
+
isSequence,
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
// #endregion
|
|
73
|
+
// #region Display
|
|
74
|
+
const APPLE_MODIFIERS = { mod: '⌘', meta: '⌘', ctrl: '⌃', control: '⌃', alt: '⌥', shift: '⇧' };
|
|
75
|
+
const OTHER_MODIFIERS = { mod: 'Ctrl', meta: 'Win', ctrl: 'Ctrl', control: 'Ctrl', alt: 'Alt', shift: 'Shift' };
|
|
76
|
+
/**
|
|
77
|
+
* Whether `mod` means ⌘ on this device. Mirrors `react-hotkeys-hook`'s own rule exactly (macOS only, not
|
|
78
|
+
* iOS/iPadOS) so a hint always names the key that fires the hotkey. Always `false` on the server.
|
|
79
|
+
*/
|
|
80
|
+
const isApplePlatform = () => typeof navigator !== 'undefined' && /mac/i.test(navigator.userAgent) && !/iphone|ipad|ipod/i.test(navigator.userAgent);
|
|
81
|
+
/**
|
|
82
|
+
* Formats a hotkey for display: `mod+k` reads `⌘K` on macOS and `Ctrl K` elsewhere.
|
|
83
|
+
* When several comma-separated alternatives are given, only the first is shown.
|
|
84
|
+
*/
|
|
85
|
+
const formatHotkeyHint = (hotkey, isApple) => {
|
|
86
|
+
const modifiers = isApple ? APPLE_MODIFIERS : OTHER_MODIFIERS;
|
|
87
|
+
const [firstHotkey = ''] = parseKeysHookInput(hotkey);
|
|
88
|
+
return firstHotkey
|
|
89
|
+
.split('+')
|
|
90
|
+
.map(mapCode)
|
|
91
|
+
.filter(Boolean)
|
|
92
|
+
.map((key) => (isHotkeyModifier(key) ? modifiers[key] : key.toUpperCase()))
|
|
93
|
+
.join(isApple ? '' : ' ');
|
|
94
|
+
};
|
|
95
|
+
// #endregion
|
|
96
|
+
|
|
97
|
+
export { formatHotkeyHint, isApplePlatform, isHotkeyModifier, mapCode, parseHotkey, parseKeysHookInput };
|
|
98
|
+
//# sourceMappingURL=hotkeys.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hotkeys.utils.js","sources":["../../../../src/utilities/__internal__/hotkeysUtils/hotkeys.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
// This is a 1:1 copy of the `parseHotkeys.ts` file from `react-hotkeys-hook`.
|
|
4
|
-
// We need this because there's no way to import it from the package directly.
|
|
5
|
-
// Source: https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/packages/react-hotkeys-hook/src/lib/parseHotkeys.ts
|
|
6
|
-
const reservedModifierKeywords = ['shift', 'alt', 'meta', 'mod', 'ctrl', 'control'];
|
|
7
|
-
const mappedKeys = {
|
|
8
|
-
esc: 'escape',
|
|
9
|
-
return: 'enter',
|
|
10
|
-
left: 'arrowleft',
|
|
11
|
-
right: 'arrowright',
|
|
12
|
-
up: 'arrowup',
|
|
13
|
-
down: 'arrowdown',
|
|
14
|
-
ShiftLeft: 'shift',
|
|
15
|
-
ShiftRight: 'shift',
|
|
16
|
-
AltLeft: 'alt',
|
|
17
|
-
AltRight: 'alt',
|
|
18
|
-
MetaLeft: 'meta',
|
|
19
|
-
MetaRight: 'meta',
|
|
20
|
-
OSLeft: 'meta',
|
|
21
|
-
OSRight: 'meta',
|
|
22
|
-
ControlLeft: 'ctrl',
|
|
23
|
-
ControlRight: 'ctrl',
|
|
24
|
-
};
|
|
25
|
-
function mapCode(key) {
|
|
26
|
-
return (mappedKeys[key.trim()] || key.trim()).toLowerCase().replace(/key|digit|numpad/, '');
|
|
27
|
-
}
|
|
28
|
-
function parseHotkey(hotkey, splitKey = '+', sequenceSplitKey = '>', useKey = false, description) {
|
|
29
|
-
let keys = [];
|
|
30
|
-
let isSequence = false;
|
|
31
|
-
if (hotkey.includes(sequenceSplitKey)) {
|
|
32
|
-
isSequence = true;
|
|
33
|
-
keys = hotkey
|
|
34
|
-
.toLocaleLowerCase()
|
|
35
|
-
.split(sequenceSplitKey)
|
|
36
|
-
.map((k) => mapCode(k));
|
|
37
|
-
}
|
|
38
|
-
else {
|
|
39
|
-
keys = hotkey
|
|
40
|
-
.toLocaleLowerCase()
|
|
41
|
-
.split(splitKey)
|
|
42
|
-
.map((k) => mapCode(k));
|
|
43
|
-
}
|
|
44
|
-
const modifiers = {
|
|
45
|
-
alt: keys.includes('alt'),
|
|
46
|
-
ctrl: keys.includes('ctrl') || keys.includes('control'),
|
|
47
|
-
shift: keys.includes('shift'),
|
|
48
|
-
meta: keys.includes('meta'),
|
|
49
|
-
mod: keys.includes('mod'),
|
|
50
|
-
useKey,
|
|
51
|
-
};
|
|
52
|
-
const singleCharKeys = keys.filter((k) => !reservedModifierKeywords.includes(k));
|
|
53
|
-
return {
|
|
54
|
-
...modifiers,
|
|
55
|
-
hotkey,
|
|
56
|
-
keys: singleCharKeys,
|
|
57
|
-
description,
|
|
58
|
-
isSequence,
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
exports.mapCode = mapCode;
|
|
63
|
-
exports.parseHotkey = parseHotkey;
|
|
64
|
-
//# sourceMappingURL=hotkeys.utils.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hotkeys.utils.cjs","sources":["../../../../src/components/organisms/CommandMenu/hotkeys.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;AACA;AACA;AAkBA,MAAM,wBAAwB,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC;AAEnF,MAAM,UAAU,GAA2B;AACzC,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,MAAM,EAAE,OAAO;AACf,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,SAAS,EAAE,OAAO;AAClB,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,MAAM,EAAE,MAAM;AACd,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,WAAW,EAAE,MAAM;AACnB,IAAA,YAAY,EAAE,MAAM;CACrB;AAEK,SAAU,OAAO,CAAC,GAAW,EAAA;IACjC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC;AAC7F;SAUgB,WAAW,CAAC,MAAc,EAAE,QAAQ,GAAG,GAAG,EAAE,gBAAgB,GAAG,GAAG,EAAE,MAAM,GAAG,KAAK,EAAE,WAAoB,EAAA;IACtH,IAAI,IAAI,GAAa,EAAE;IACvB,IAAI,UAAU,GAAG,KAAK;AAEtB,IAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;QACrC,UAAU,GAAG,IAAI;AACjB,QAAA,IAAI,GAAG;AACJ,aAAA,iBAAiB;aACjB,KAAK,CAAC,gBAAgB;aACtB,GAAG,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAC3B;SAAO;AACL,QAAA,IAAI,GAAG;AACJ,aAAA,iBAAiB;aACjB,KAAK,CAAC,QAAQ;aACd,GAAG,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAC3B;AAEA,IAAA,MAAM,SAAS,GAAsB;AACnC,QAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;AACvD,QAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;AAC7B,QAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC3B,QAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QACzB,MAAM;KACP;AAED,IAAA,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhF,OAAO;AACL,QAAA,GAAG,SAAS;QACZ,MAAM;AACN,QAAA,IAAI,EAAE,cAAc;QACpB,WAAW;QACX,UAAU;KACX;AACH;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hotkeys.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/CommandMenu/hotkeys.utils.ts"],"names":[],"mappings":"AAIA,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,MAAO,SAAQ,iBAAiB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;CACrB;AAuBD,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE3C;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,WAE3C;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,SAAM,GAAG,MAAM,EAAE,CAE1E;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAM,EAAE,gBAAgB,SAAM,EAAE,MAAM,UAAQ,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAmChI"}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
// This is a 1:1 copy of the `parseHotkeys.ts` file from `react-hotkeys-hook`.
|
|
2
|
-
// We need this because there's no way to import it from the package directly.
|
|
3
|
-
// Source: https://github.com/JohannesKlauss/react-hotkeys-hook/blob/main/packages/react-hotkeys-hook/src/lib/parseHotkeys.ts
|
|
4
|
-
const reservedModifierKeywords = ['shift', 'alt', 'meta', 'mod', 'ctrl', 'control'];
|
|
5
|
-
const mappedKeys = {
|
|
6
|
-
esc: 'escape',
|
|
7
|
-
return: 'enter',
|
|
8
|
-
left: 'arrowleft',
|
|
9
|
-
right: 'arrowright',
|
|
10
|
-
up: 'arrowup',
|
|
11
|
-
down: 'arrowdown',
|
|
12
|
-
ShiftLeft: 'shift',
|
|
13
|
-
ShiftRight: 'shift',
|
|
14
|
-
AltLeft: 'alt',
|
|
15
|
-
AltRight: 'alt',
|
|
16
|
-
MetaLeft: 'meta',
|
|
17
|
-
MetaRight: 'meta',
|
|
18
|
-
OSLeft: 'meta',
|
|
19
|
-
OSRight: 'meta',
|
|
20
|
-
ControlLeft: 'ctrl',
|
|
21
|
-
ControlRight: 'ctrl',
|
|
22
|
-
};
|
|
23
|
-
function mapCode(key) {
|
|
24
|
-
return (mappedKeys[key.trim()] || key.trim()).toLowerCase().replace(/key|digit|numpad/, '');
|
|
25
|
-
}
|
|
26
|
-
function parseHotkey(hotkey, splitKey = '+', sequenceSplitKey = '>', useKey = false, description) {
|
|
27
|
-
let keys = [];
|
|
28
|
-
let isSequence = false;
|
|
29
|
-
if (hotkey.includes(sequenceSplitKey)) {
|
|
30
|
-
isSequence = true;
|
|
31
|
-
keys = hotkey
|
|
32
|
-
.toLocaleLowerCase()
|
|
33
|
-
.split(sequenceSplitKey)
|
|
34
|
-
.map((k) => mapCode(k));
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
keys = hotkey
|
|
38
|
-
.toLocaleLowerCase()
|
|
39
|
-
.split(splitKey)
|
|
40
|
-
.map((k) => mapCode(k));
|
|
41
|
-
}
|
|
42
|
-
const modifiers = {
|
|
43
|
-
alt: keys.includes('alt'),
|
|
44
|
-
ctrl: keys.includes('ctrl') || keys.includes('control'),
|
|
45
|
-
shift: keys.includes('shift'),
|
|
46
|
-
meta: keys.includes('meta'),
|
|
47
|
-
mod: keys.includes('mod'),
|
|
48
|
-
useKey,
|
|
49
|
-
};
|
|
50
|
-
const singleCharKeys = keys.filter((k) => !reservedModifierKeywords.includes(k));
|
|
51
|
-
return {
|
|
52
|
-
...modifiers,
|
|
53
|
-
hotkey,
|
|
54
|
-
keys: singleCharKeys,
|
|
55
|
-
description,
|
|
56
|
-
isSequence,
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export { mapCode, parseHotkey };
|
|
61
|
-
//# sourceMappingURL=hotkeys.utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hotkeys.utils.js","sources":["../../../../src/components/organisms/CommandMenu/hotkeys.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AAkBA,MAAM,wBAAwB,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC;AAEnF,MAAM,UAAU,GAA2B;AACzC,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,MAAM,EAAE,OAAO;AACf,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,SAAS,EAAE,OAAO;AAClB,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,MAAM,EAAE,MAAM;AACd,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,WAAW,EAAE,MAAM;AACnB,IAAA,YAAY,EAAE,MAAM;CACrB;AAEK,SAAU,OAAO,CAAC,GAAW,EAAA;IACjC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC;AAC7F;SAUgB,WAAW,CAAC,MAAc,EAAE,QAAQ,GAAG,GAAG,EAAE,gBAAgB,GAAG,GAAG,EAAE,MAAM,GAAG,KAAK,EAAE,WAAoB,EAAA;IACtH,IAAI,IAAI,GAAa,EAAE;IACvB,IAAI,UAAU,GAAG,KAAK;AAEtB,IAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;QACrC,UAAU,GAAG,IAAI;AACjB,QAAA,IAAI,GAAG;AACJ,aAAA,iBAAiB;aACjB,KAAK,CAAC,gBAAgB;aACtB,GAAG,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAC3B;SAAO;AACL,QAAA,IAAI,GAAG;AACJ,aAAA,iBAAiB;aACjB,KAAK,CAAC,QAAQ;aACd,GAAG,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAC3B;AAEA,IAAA,MAAM,SAAS,GAAsB;AACnC,QAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;AACvD,QAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;AAC7B,QAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC3B,QAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QACzB,MAAM;KACP;AAED,IAAA,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhF,OAAO;AACL,QAAA,GAAG,SAAS;QACZ,MAAM;AACN,QAAA,IAAI,EAAE,cAAc;QACpB,WAAW;QACX,UAAU;KACX;AACH;;;;"}
|