@flipdish/ui-library 0.28.0 → 0.30.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/atoms/Input/index.cjs +3 -1
- package/dist/components/atoms/Input/index.cjs.map +1 -1
- package/dist/components/atoms/Input/index.d.ts +5 -1
- package/dist/components/atoms/Input/index.d.ts.map +1 -1
- package/dist/components/atoms/Input/index.js +3 -1
- package/dist/components/atoms/Input/index.js.map +1 -1
- package/dist/components/molecules/Select/components/combobox.cjs +3 -1
- package/dist/components/molecules/Select/components/combobox.cjs.map +1 -1
- package/dist/components/molecules/Select/components/combobox.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/combobox.js +3 -1
- package/dist/components/molecules/Select/components/combobox.js.map +1 -1
- package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts +12 -5
- package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.cjs +12 -17
- package/dist/components/organisms/ApplicationHeader/index.cjs.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.d.ts +9 -5
- package/dist/components/organisms/ApplicationHeader/index.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.js +12 -18
- package/dist/components/organisms/ApplicationHeader/index.js.map +1 -1
- package/dist/components/organisms/Calendar/index.cjs +3 -3
- package/dist/components/organisms/Calendar/index.cjs.map +1 -1
- package/dist/components/organisms/Calendar/index.js +3 -3
- package/dist/components/organisms/Calendar/index.js.map +1 -1
- package/dist/components/organisms/CommandMenu/commandMenu.utils.cjs +0 -21
- package/dist/components/organisms/CommandMenu/commandMenu.utils.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/commandMenu.utils.d.ts +0 -9
- package/dist/components/organisms/CommandMenu/commandMenu.utils.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/commandMenu.utils.js +1 -21
- package/dist/components/organisms/CommandMenu/commandMenu.utils.js.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-input.cjs +2 -2
- package/dist/components/organisms/CommandMenu/components/command-input.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-input.d.ts +3 -2
- package/dist/components/organisms/CommandMenu/components/command-input.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-input.js +2 -2
- package/dist/components/organisms/CommandMenu/components/command-input.js.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.cjs +15 -2
- package/dist/components/organisms/CommandMenu/components/command-menu-item.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.d.ts +9 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.js +15 -2
- package/dist/components/organisms/CommandMenu/components/command-menu-item.js.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-shortcut.cjs +2 -2
- package/dist/components/organisms/CommandMenu/components/command-shortcut.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-shortcut.d.ts +1 -0
- package/dist/components/organisms/CommandMenu/components/command-shortcut.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-shortcut.js +2 -2
- package/dist/components/organisms/CommandMenu/components/command-shortcut.js.map +1 -1
- package/dist/components/organisms/CommandMenu/index.cjs +65 -29
- package/dist/components/organisms/CommandMenu/index.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/index.d.ts +29 -2
- package/dist/components/organisms/CommandMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/index.js +69 -33
- package/dist/components/organisms/CommandMenu/index.js.map +1 -1
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.cjs +9 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.cjs.map +1 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.d.ts +3 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.d.ts.map +1 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.js +7 -0
- package/dist/components/organisms/CommandMenu/providers/command-menu-link-context.js.map +1 -0
- package/dist/components/organisms/DatePicker/components/input-date.cjs +3 -1
- package/dist/components/organisms/DatePicker/components/input-date.cjs.map +1 -1
- package/dist/components/organisms/DatePicker/components/input-date.d.ts +5 -1
- package/dist/components/organisms/DatePicker/components/input-date.d.ts.map +1 -1
- package/dist/components/organisms/DatePicker/components/input-date.js +3 -1
- package/dist/components/organisms/DatePicker/components/input-date.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.cjs +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.d.ts +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.js +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.cjs +15 -5
- package/dist/components/organisms/SidebarNavigation/index.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.d.ts +3 -2
- package/dist/components/organisms/SidebarNavigation/index.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.js +15 -5
- package/dist/components/organisms/SidebarNavigation/index.js.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.cjs +9 -4
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.cjs.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.d.ts.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.js +10 -5
- package/dist/components/organisms/TextEditor/components/text-editor-extensions.js.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.cjs +8 -2
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.cjs.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.d.ts.map +1 -1
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.js +8 -2
- package/dist/components/organisms/TextEditor/components/text-editor-toolbar.js.map +1 -1
- package/dist/components/organisms/TextEditor/textEditor.utils.cjs +3 -0
- package/dist/components/organisms/TextEditor/textEditor.utils.cjs.map +1 -1
- package/dist/components/organisms/TextEditor/textEditor.utils.d.ts +4 -0
- package/dist/components/organisms/TextEditor/textEditor.utils.d.ts.map +1 -1
- package/dist/components/organisms/TextEditor/textEditor.utils.js +3 -1
- package/dist/components/organisms/TextEditor/textEditor.utils.js.map +1 -1
- package/dist/components/templates/AppShell/index.cjs +28 -0
- package/dist/components/templates/AppShell/index.cjs.map +1 -0
- package/dist/components/templates/AppShell/index.d.ts +40 -0
- package/dist/components/templates/AppShell/index.d.ts.map +1 -0
- package/dist/components/templates/AppShell/index.js +26 -0
- package/dist/components/templates/AppShell/index.js.map +1 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs +24 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs.map +1 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.d.ts +22 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.d.ts.map +1 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.js +22 -0
- package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.js.map +1 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.cjs +54 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.cjs.map +1 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.d.ts +11 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.d.ts.map +1 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.js +52 -0
- package/dist/hooks/__internal__/useKeySequences/useKeySequences.js.map +1 -0
- package/dist/hooks/usePlatform/index.cjs +22 -0
- package/dist/hooks/usePlatform/index.cjs.map +1 -0
- package/dist/hooks/usePlatform/index.d.ts +22 -0
- package/dist/hooks/usePlatform/index.d.ts.map +1 -0
- package/dist/hooks/usePlatform/index.js +20 -0
- package/dist/hooks/usePlatform/index.js.map +1 -0
- package/dist/native/components/templates/AppShell/index.d.ts +12 -0
- package/dist/native/hooks/usePlatform/index.d.ts +12 -0
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs +222 -15
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs.map +1 -1
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.d.ts +60 -5
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.d.ts.map +1 -1
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.js +215 -15
- package/dist/utilities/__internal__/hotkeysUtils/hotkeys.utils.js.map +1 -1
- package/dist/utilities/__internal__/platformUtils/platform.utils.cjs +26 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.cjs.map +1 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.d.ts +10 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.d.ts.map +1 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.js +23 -0
- package/dist/utilities/__internal__/platformUtils/platform.utils.js.map +1 -0
- package/package.json +1 -1
|
@@ -7,10 +7,12 @@ var cx = require('@flipdish/ui-library/utilities/cx');
|
|
|
7
7
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var reactAriaComponents = require('react-aria-components');
|
|
10
|
+
var useHotkeyHint = require('../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
|
|
10
11
|
var hintText = require('./components/hint-text.cjs');
|
|
11
12
|
var label = require('./components/label.cjs');
|
|
12
13
|
|
|
13
14
|
const InputBase = ({ ref, tooltip, shortcut, groupRef, size = 'md', isInvalid, isDisabled, isRequired, icon: Icon, placeholder, wrapperClassName, tooltipClassName, inputClassName, iconClassName, type = 'text', 'data-testid': dataTestId, ...inputProps }) => {
|
|
15
|
+
const shortcutLabel = useHotkeyHint.useHotkeyHint(shortcut === true ? 'mod+k' : shortcut || null);
|
|
14
16
|
const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
|
|
15
17
|
const inputTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'input', rootName: 'input' });
|
|
16
18
|
// Check if the input has a leading icon or a trailing adornment (tooltip, invalid
|
|
@@ -46,7 +48,7 @@ const InputBase = ({ ref, tooltip, shortcut, groupRef, size = 'md', isInvalid, i
|
|
|
46
48
|
// Invalid state styles
|
|
47
49
|
isInvalid && 'ring-error_subtle', 'group-invalid:ring-error_subtle',
|
|
48
50
|
// Invalid state with focus-within styles
|
|
49
|
-
isInvalid && isFocusWithin && 'ring-2 ring-error', isFocusWithin && 'group-invalid:ring-2 group-invalid:ring-error', context?.wrapperClassName, wrapperClassName), children: [Icon && (jsxRuntime.jsx(Icon, { className: cx.cx('pointer-events-none absolute text-fg-quaternary', sizes[inputSize].iconLeading, context?.iconClassName, iconClassName) })), jsxRuntime.jsx(reactAriaComponents.Input, { ...inputProps, ref: ref, "data-testid": inputTestId, required: isRequired, type: type === 'password' && isPasswordVisible ? 'text' : type, placeholder: placeholder, className: cx.cx('m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed', sizes[inputSize].root, context?.inputClassName, inputClassName) }), tooltip && type !== 'password' && (jsxRuntime.jsx(Tooltip.Tooltip, { title: tooltip, placement: "top", children: jsxRuntime.jsx(Tooltip.TooltipTrigger, { "aria-label": "More information", className: cx.cx('absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName), children: jsxRuntime.jsx(uiIcons.HelpCircle, { className: "size-4 stroke-[2.25px]" }) }) })), type !== 'password' && (jsxRuntime.jsx(uiIcons.InfoCircle, { className: cx.cx('pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName) })), type === 'password' && (jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Toggle password visibility", onClick: () => setIsPasswordVisible(!isPasswordVisible), className: cx.cx('absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden', sizes[inputSize].iconTrailing), children: isPasswordVisible ? jsxRuntime.jsx(uiIcons.EyeOff, { className: "size-4 stroke-[2.25px]" }) : jsxRuntime.jsx(uiIcons.Eye, { className: "size-4 stroke-[2.25px]" }) })), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', sizes[inputSize].shortcut), children: jsxRuntime.jsx("span", { "aria-hidden": "true", className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children:
|
|
51
|
+
isInvalid && isFocusWithin && 'ring-2 ring-error', isFocusWithin && 'group-invalid:ring-2 group-invalid:ring-error', context?.wrapperClassName, wrapperClassName), children: [Icon && (jsxRuntime.jsx(Icon, { className: cx.cx('pointer-events-none absolute text-fg-quaternary', sizes[inputSize].iconLeading, context?.iconClassName, iconClassName) })), jsxRuntime.jsx(reactAriaComponents.Input, { ...inputProps, ref: ref, "data-testid": inputTestId, required: isRequired, type: type === 'password' && isPasswordVisible ? 'text' : type, placeholder: placeholder, className: cx.cx('m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed', sizes[inputSize].root, context?.inputClassName, inputClassName) }), tooltip && type !== 'password' && (jsxRuntime.jsx(Tooltip.Tooltip, { title: tooltip, placement: "top", children: jsxRuntime.jsx(Tooltip.TooltipTrigger, { "aria-label": "More information", className: cx.cx('absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName), children: jsxRuntime.jsx(uiIcons.HelpCircle, { className: "size-4 stroke-[2.25px]" }) }) })), type !== 'password' && (jsxRuntime.jsx(uiIcons.InfoCircle, { className: cx.cx('pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName) })), type === 'password' && (jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Toggle password visibility", onClick: () => setIsPasswordVisible(!isPasswordVisible), className: cx.cx('absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden', sizes[inputSize].iconTrailing), children: isPasswordVisible ? jsxRuntime.jsx(uiIcons.EyeOff, { className: "size-4 stroke-[2.25px]" }) : jsxRuntime.jsx(uiIcons.Eye, { className: "size-4 stroke-[2.25px]" }) })), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', sizes[inputSize].shortcut), children: jsxRuntime.jsx("span", { "aria-hidden": "true", className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children: shortcutLabel }) }))] }));
|
|
50
52
|
};
|
|
51
53
|
InputBase.displayName = 'InputBase';
|
|
52
54
|
const TextFieldContext = React.createContext({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Input/index.tsx"],"sourcesContent":[null],"names":["useState","useResolvedTestId","useContext","sortCx","cx","_jsxs","AriaGroup","_jsx","AriaInput","Tooltip","TooltipTrigger","HelpCircle","InfoCircle","AriaButton","EyeOff","Eye","createContext","AriaTextField","label","_Fragment","Label","HintText"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Input/index.tsx"],"sourcesContent":[null],"names":["useHotkeyHint","useState","useResolvedTestId","useContext","sortCx","cx","_jsxs","AriaGroup","_jsx","AriaInput","Tooltip","TooltipTrigger","HelpCircle","InfoCircle","AriaButton","EyeOff","Eye","createContext","AriaTextField","label","_Fragment","Label","HintText"],"mappings":"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"}
|
|
@@ -26,7 +26,11 @@ export interface InputBaseProps extends Omit<AriaInputProps, 'size'> {
|
|
|
26
26
|
wrapperClassName?: string;
|
|
27
27
|
/** Class name for the tooltip. */
|
|
28
28
|
tooltipClassName?: string;
|
|
29
|
-
/**
|
|
29
|
+
/**
|
|
30
|
+
* Keyboard shortcut to display. `true` shows the search shortcut (⌘K on macOS, Ctrl K elsewhere). A
|
|
31
|
+
* shortcut (`⌘J`, `mod+j`, `Ctrl+J`) is drawn for the user's platform; text that is not a shortcut is shown
|
|
32
|
+
* as written.
|
|
33
|
+
*/
|
|
30
34
|
shortcut?: string | boolean;
|
|
31
35
|
ref?: Ref<HTMLInputElement>;
|
|
32
36
|
groupRef?: Ref<HTMLDivElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAiB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAwB,MAAM,OAAO,CAAC;AAC/H,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Input/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAiB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAwB,MAAM,OAAO,CAAC;AAC/H,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAMhH,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IAClE,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvD,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;gOAkBnB,cAAc;;CAmJhB,CAAC;AAIF,UAAU,qBACR,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,eAAe,GAAG,kBAAkB,CAAC,CAAC;CAAG;AAIjI,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,qBAAqB;CAAG;AAEpF,eAAO,MAAM,SAAS;uGAQnB,cAAc;;CAahB,CAAC;AAIF,MAAM,WAAW,UACf,SAAQ,kBAAkB,EACxB,IAAI,CACF,cAAc,EACZ,KAAK,GACL,aAAa,GACb,MAAM,GACN,UAAU,GACV,SAAS,GACT,UAAU,GACV,MAAM,GACN,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,CACrB;IACH,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK;uOAmBf,UAAU;;CAoCZ,CAAC"}
|
|
@@ -5,10 +5,12 @@ import { sortCx, cx } from '@flipdish/ui-library/utilities/cx';
|
|
|
5
5
|
import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
6
6
|
import { createContext, useState, useContext } from 'react';
|
|
7
7
|
import { Group, Input as Input$1, Button, TextField as TextField$1 } from 'react-aria-components';
|
|
8
|
+
import { useHotkeyHint } from '../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.js';
|
|
8
9
|
import { HintText } from './components/hint-text.js';
|
|
9
10
|
import { Label } from './components/label.js';
|
|
10
11
|
|
|
11
12
|
const InputBase = ({ ref, tooltip, shortcut, groupRef, size = 'md', isInvalid, isDisabled, isRequired, icon: Icon, placeholder, wrapperClassName, tooltipClassName, inputClassName, iconClassName, type = 'text', 'data-testid': dataTestId, ...inputProps }) => {
|
|
13
|
+
const shortcutLabel = useHotkeyHint(shortcut === true ? 'mod+k' : shortcut || null);
|
|
12
14
|
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
|
|
13
15
|
const inputTestId = useResolvedTestId({ testId: dataTestId, segment: 'input', rootName: 'input' });
|
|
14
16
|
// Check if the input has a leading icon or a trailing adornment (tooltip, invalid
|
|
@@ -44,7 +46,7 @@ const InputBase = ({ ref, tooltip, shortcut, groupRef, size = 'md', isInvalid, i
|
|
|
44
46
|
// Invalid state styles
|
|
45
47
|
isInvalid && 'ring-error_subtle', 'group-invalid:ring-error_subtle',
|
|
46
48
|
// Invalid state with focus-within styles
|
|
47
|
-
isInvalid && isFocusWithin && 'ring-2 ring-error', isFocusWithin && 'group-invalid:ring-2 group-invalid:ring-error', context?.wrapperClassName, wrapperClassName), children: [Icon && (jsx(Icon, { className: cx('pointer-events-none absolute text-fg-quaternary', sizes[inputSize].iconLeading, context?.iconClassName, iconClassName) })), jsx(Input$1, { ...inputProps, ref: ref, "data-testid": inputTestId, required: isRequired, type: type === 'password' && isPasswordVisible ? 'text' : type, placeholder: placeholder, className: cx('m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed', sizes[inputSize].root, context?.inputClassName, inputClassName) }), tooltip && type !== 'password' && (jsx(Tooltip, { title: tooltip, placement: "top", children: jsx(TooltipTrigger, { "aria-label": "More information", className: cx('absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName), children: jsx(HelpCircle, { className: "size-4 stroke-[2.25px]" }) }) })), type !== 'password' && (jsx(InfoCircle, { className: cx('pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName) })), type === 'password' && (jsx(Button, { "aria-label": "Toggle password visibility", onClick: () => setIsPasswordVisible(!isPasswordVisible), className: cx('absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden', sizes[inputSize].iconTrailing), children: isPasswordVisible ? jsx(EyeOff, { className: "size-4 stroke-[2.25px]" }) : jsx(Eye, { className: "size-4 stroke-[2.25px]" }) })), shortcut && (jsx("div", { className: cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', sizes[inputSize].shortcut), children: jsx("span", { "aria-hidden": "true", className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children:
|
|
49
|
+
isInvalid && isFocusWithin && 'ring-2 ring-error', isFocusWithin && 'group-invalid:ring-2 group-invalid:ring-error', context?.wrapperClassName, wrapperClassName), children: [Icon && (jsx(Icon, { className: cx('pointer-events-none absolute text-fg-quaternary', sizes[inputSize].iconLeading, context?.iconClassName, iconClassName) })), jsx(Input$1, { ...inputProps, ref: ref, "data-testid": inputTestId, required: isRequired, type: type === 'password' && isPasswordVisible ? 'text' : type, placeholder: placeholder, className: cx('m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed', sizes[inputSize].root, context?.inputClassName, inputClassName) }), tooltip && type !== 'password' && (jsx(Tooltip, { title: tooltip, placement: "top", children: jsx(TooltipTrigger, { "aria-label": "More information", className: cx('absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName), children: jsx(HelpCircle, { className: "size-4 stroke-[2.25px]" }) }) })), type !== 'password' && (jsx(InfoCircle, { className: cx('pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block', sizes[inputSize].iconTrailing, context?.tooltipClassName, tooltipClassName) })), type === 'password' && (jsx(Button, { "aria-label": "Toggle password visibility", onClick: () => setIsPasswordVisible(!isPasswordVisible), className: cx('absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden', sizes[inputSize].iconTrailing), children: isPasswordVisible ? jsx(EyeOff, { className: "size-4 stroke-[2.25px]" }) : jsx(Eye, { className: "size-4 stroke-[2.25px]" }) })), shortcut && (jsx("div", { className: cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', sizes[inputSize].shortcut), children: jsx("span", { "aria-hidden": "true", className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children: shortcutLabel }) }))] }));
|
|
48
50
|
};
|
|
49
51
|
InputBase.displayName = 'InputBase';
|
|
50
52
|
const TextFieldContext = createContext({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Input/index.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaGroup","_jsx","AriaInput","AriaButton","AriaTextField","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Input/index.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaGroup","_jsx","AriaInput","AriaButton","AriaTextField","_Fragment"],"mappings":"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"}
|
|
@@ -7,19 +7,21 @@ var useResizeObserver = require('@flipdish/ui-library/hooks/useResizeObserver');
|
|
|
7
7
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var reactAriaComponents = require('react-aria-components');
|
|
10
|
+
var useHotkeyHint = require('../../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
|
|
10
11
|
var componentGuard_utils = require('../../../../utilities/__internal__/componentGuardUtils/componentGuard.utils.cjs');
|
|
11
12
|
var popover = require('./popover.cjs');
|
|
12
13
|
var selectShared = require('./select-shared.cjs');
|
|
13
14
|
|
|
14
15
|
const ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: IconProp, ref, ...otherProps }) => {
|
|
15
16
|
const state = React.useContext(reactAriaComponents.ComboBoxStateContext);
|
|
17
|
+
const shortcutHint = useHotkeyHint.useHotkeyHint('mod+k');
|
|
16
18
|
const value = state?.selectedItem?.value || null;
|
|
17
19
|
const inputValue = state?.inputValue || null;
|
|
18
20
|
const first = inputValue?.split(value?.supportingText)?.[0] || '';
|
|
19
21
|
const last = inputValue?.split(first)[1];
|
|
20
22
|
return (jsxRuntime.jsxs(reactAriaComponents.Group, { ref: ref, ...otherProps, className: ({ isFocusWithin, isDisabled }) => cx.cx('relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset', isDisabled && 'cursor-not-allowed opacity-50', isFocusWithin && 'ring-2 ring-brand',
|
|
21
23
|
// Icon styles
|
|
22
|
-
'*:data-icon:shrink-0 *:data-icon:text-fg-quaternary', selectShared.sizes[size].root), children: [componentGuard_utils.isReactComponent(IconProp) ? (jsxRuntime.jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })) : React.isValidElement(IconProp) ? (IconProp) : (jsxRuntime.jsx(uiIcons.SearchLg, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })), jsxRuntime.jsxs("div", { className: "relative flex w-full items-center", children: [inputValue && (jsxRuntime.jsxs("span", { className: cx.cx('absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate', selectShared.sizes[size].textContainer), "aria-hidden": "true", children: [jsxRuntime.jsx("p", { className: cx.cx('font-medium text-primary', selectShared.sizes[size].text), children: first }), last && jsxRuntime.jsx("p", { className: cx.cx('-ml-0.75 text-tertiary', selectShared.sizes[size].text), children: last })] })), jsxRuntime.jsx(reactAriaComponents.Input, { placeholder: placeholder, className: cx.cx('z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed', selectShared.sizes[size].text) })] }), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', selectShared.sizes[size].shortcut, shortcutClassName), children: jsxRuntime.jsx("span", { className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", "aria-hidden": "true", children:
|
|
24
|
+
'*:data-icon:shrink-0 *:data-icon:text-fg-quaternary', selectShared.sizes[size].root), children: [componentGuard_utils.isReactComponent(IconProp) ? (jsxRuntime.jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })) : React.isValidElement(IconProp) ? (IconProp) : (jsxRuntime.jsx(uiIcons.SearchLg, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })), jsxRuntime.jsxs("div", { className: "relative flex w-full items-center", children: [inputValue && (jsxRuntime.jsxs("span", { className: cx.cx('absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate', selectShared.sizes[size].textContainer), "aria-hidden": "true", children: [jsxRuntime.jsx("p", { className: cx.cx('font-medium text-primary', selectShared.sizes[size].text), children: first }), last && jsxRuntime.jsx("p", { className: cx.cx('-ml-0.75 text-tertiary', selectShared.sizes[size].text), children: last })] })), jsxRuntime.jsx(reactAriaComponents.Input, { placeholder: placeholder, className: cx.cx('z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed', selectShared.sizes[size].text) })] }), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', selectShared.sizes[size].shortcut, shortcutClassName), children: jsxRuntime.jsx("span", { className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", "aria-hidden": "true", children: shortcutHint }) }))] }));
|
|
23
25
|
};
|
|
24
26
|
const ComboBox = ({ placeholder = 'Search', shortcut = true, size = 'md', children, items, shortcutClassName, icon, hideRequiredIndicator, ...otherProps }) => {
|
|
25
27
|
const placeholderRef = React.useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.cjs","sources":["../../../../../src/components/molecules/Select/components/combobox.tsx"],"sourcesContent":[null],"names":["useContext","ComboBoxStateContext","_jsxs","AriaGroup","cx","sizes","isReactComponent","_jsx","isValidElement","SearchLg","AriaInput","useRef","useState","useCallback","useResizeObserver","SelectContext","AriaComboBox","Label","Popover","AriaListBox","HintText"],"mappings":"
|
|
1
|
+
{"version":3,"file":"combobox.cjs","sources":["../../../../../src/components/molecules/Select/components/combobox.tsx"],"sourcesContent":[null],"names":["useContext","ComboBoxStateContext","useHotkeyHint","_jsxs","AriaGroup","cx","sizes","isReactComponent","_jsx","isValidElement","SearchLg","AriaInput","useRef","useState","useCallback","useResizeObserver","SelectContext","AriaComboBox","Label","Popover","AriaListBox","HintText"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Select/components/combobox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,EAA0C,SAAS,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvG,OAAO,KAAK,EAAE,aAAa,IAAI,iBAAiB,EAAgC,YAAY,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Select/components/combobox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,EAA0C,SAAS,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvG,OAAO,KAAK,EAAE,aAAa,IAAI,iBAAiB,EAAgC,YAAY,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAWhJ,OAAO,EAAE,KAAK,WAAW,EAAiB,KAAK,cAAc,EAAS,MAAM,iBAAiB,CAAC;AAE9F,UAAU,aAAc,SAAQ,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,WAAW;IACvI,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yDAAyD;IACzD,IAAI,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACtB,QAAQ,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;CACxD;AAqFD,eAAO,MAAM,QAAQ,GAAI,iHAUtB,aAAa,gCA4Df,CAAC"}
|
|
@@ -5,19 +5,21 @@ import { useResizeObserver } from '@flipdish/ui-library/hooks/useResizeObserver'
|
|
|
5
5
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
6
|
import { useRef, useState, useCallback, useContext, isValidElement } from 'react';
|
|
7
7
|
import { ComboBox as ComboBox$1, ListBox, ComboBoxStateContext, Group, Input } from 'react-aria-components';
|
|
8
|
+
import { useHotkeyHint } from '../../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.js';
|
|
8
9
|
import { isReactComponent } from '../../../../utilities/__internal__/componentGuardUtils/componentGuard.utils.js';
|
|
9
10
|
import { Popover } from './popover.js';
|
|
10
11
|
import { SelectContext, sizes } from './select-shared.js';
|
|
11
12
|
|
|
12
13
|
const ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: IconProp, ref, ...otherProps }) => {
|
|
13
14
|
const state = useContext(ComboBoxStateContext);
|
|
15
|
+
const shortcutHint = useHotkeyHint('mod+k');
|
|
14
16
|
const value = state?.selectedItem?.value || null;
|
|
15
17
|
const inputValue = state?.inputValue || null;
|
|
16
18
|
const first = inputValue?.split(value?.supportingText)?.[0] || '';
|
|
17
19
|
const last = inputValue?.split(first)[1];
|
|
18
20
|
return (jsxs(Group, { ref: ref, ...otherProps, className: ({ isFocusWithin, isDisabled }) => cx('relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset', isDisabled && 'cursor-not-allowed opacity-50', isFocusWithin && 'ring-2 ring-brand',
|
|
19
21
|
// Icon styles
|
|
20
|
-
'*:data-icon:shrink-0 *:data-icon:text-fg-quaternary', sizes[size].root), children: [isReactComponent(IconProp) ? (jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })) : isValidElement(IconProp) ? (IconProp) : (jsx(SearchLg, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })), jsxs("div", { className: "relative flex w-full items-center", children: [inputValue && (jsxs("span", { className: cx('absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate', sizes[size].textContainer), "aria-hidden": "true", children: [jsx("p", { className: cx('font-medium text-primary', sizes[size].text), children: first }), last && jsx("p", { className: cx('-ml-0.75 text-tertiary', sizes[size].text), children: last })] })), jsx(Input, { placeholder: placeholder, className: cx('z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed', sizes[size].text) })] }), shortcut && (jsx("div", { className: cx('absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', sizes[size].shortcut, shortcutClassName), children: jsx("span", { className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", "aria-hidden": "true", children:
|
|
22
|
+
'*:data-icon:shrink-0 *:data-icon:text-fg-quaternary', sizes[size].root), children: [isReactComponent(IconProp) ? (jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })) : isValidElement(IconProp) ? (IconProp) : (jsx(SearchLg, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" })), jsxs("div", { className: "relative flex w-full items-center", children: [inputValue && (jsxs("span", { className: cx('absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate', sizes[size].textContainer), "aria-hidden": "true", children: [jsx("p", { className: cx('font-medium text-primary', sizes[size].text), children: first }), last && jsx("p", { className: cx('-ml-0.75 text-tertiary', sizes[size].text), children: last })] })), jsx(Input, { placeholder: placeholder, className: cx('z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed', sizes[size].text) })] }), shortcut && (jsx("div", { className: cx('absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex', sizes[size].shortcut, shortcutClassName), children: jsx("span", { className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", "aria-hidden": "true", children: shortcutHint }) }))] }));
|
|
21
23
|
};
|
|
22
24
|
const ComboBox = ({ placeholder = 'Search', shortcut = true, size = 'md', children, items, shortcutClassName, icon, hideRequiredIndicator, ...otherProps }) => {
|
|
23
25
|
const placeholderRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.js","sources":["../../../../../src/components/molecules/Select/components/combobox.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaGroup","_jsx","AriaInput","AriaComboBox","AriaListBox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"combobox.js","sources":["../../../../../src/components/molecules/Select/components/combobox.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaGroup","_jsx","AriaInput","AriaComboBox","AriaListBox"],"mappings":";;;;;;;;;;;;AA0CA,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,iBAAiB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,UAAU,EAAsB,KAAI;AACnI,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,oBAAoB,CAAC;AAC9C,IAAA,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC;IAE3C,MAAM,KAAK,GAAG,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,IAAI;AAChD,IAAA,MAAM,UAAU,GAAG,KAAK,EAAE,UAAU,IAAI,IAAI;AAE5C,IAAA,MAAM,KAAK,GAAG,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAExC,IAAA,QACEA,IAAA,CAACC,KAAS,EAAA,EACR,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EACd,SAAS,EAAE,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,KACvC,EAAE,CACA,kKAAkK,EAClK,UAAU,IAAI,+BAA+B,EAC7C,aAAa,IAAI,mBAAmB;;AAGpC,QAAA,qDAAqD,EAErD,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CACjB,EAAA,QAAA,EAAA,CAGF,gBAAgB,CAAC,QAAQ,CAAC,IACzBC,IAAC,QAAQ,EAAA,EAAA,WAAA,EAAA,IAAA,EAAW,SAAS,EAAC,qBAAqB,EAAA,aAAA,EAAa,MAAM,GAAG,IACvE,cAAc,CAAC,QAAQ,CAAC,IAC1B,QAAQ,KAERA,GAAA,CAAC,QAAQ,EAAA,EAAA,WAAA,EAAA,IAAA,EAAW,SAAS,EAAC,qBAAqB,EAAA,aAAA,EAAa,MAAM,EAAA,CAAG,CAC1E,EAEDF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAC/C,UAAU,KACTA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,mEAAmE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,EAAA,aAAA,EAAc,MAAM,aACrIE,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,KAAK,GAAK,EAC1E,IAAI,IAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,EAAA,CAAK,CAAA,EAAA,CAC5E,CACR,EAEDA,GAAA,CAACC,KAAS,EAAA,EACR,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CACX,gKAAgK,EAChK,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CACjB,EAAA,CACD,IACE,EAEL,QAAQ,KACPD,aACE,SAAS,EAAE,EAAE,CACX,+IAA+I,EAC/I,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,EACpB,iBAAiB,CAClB,EAAA,QAAA,EAEDA,cACE,SAAS,EAAC,yHAAyH,EAAA,aAAA,EACvH,MAAM,YAEjB,YAAY,EAAA,CACR,GACH,CACP,CAAA,EAAA,CACS;AAEhB,CAAC;AAEM,MAAM,QAAQ,GAAG,CAAC,EACvB,WAAW,GAAG,QAAQ,EACtB,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,IAAI,EACJ,qBAAqB,EACrB,GAAG,UAAU,EACC,KAAI;AAClB,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;;;AAIpD,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;QAChC,IAAI,CAAC,cAAc,CAAC,OAAO;YAAE;QAE7B,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,EAAE,qBAAqB,EAAE;AAE/D,QAAA,eAAe,CAAC,CAAA,EAAG,OAAO,CAAC,KAAK,CAAA,EAAA,CAAI,CAAC;AACvC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAErC,IAAA,iBAAiB,CAAC;AAChB,QAAA,GAAG,EAAE,cAAc;AACnB,QAAA,GAAG,EAAE,YAAY;QACjB,QAAQ;AACT,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAA,QAAA,EACrCA,IAACE,UAAY,EAAA,EAAC,WAAW,EAAC,OAAO,KAAK,UAAU,EAAA,QAAA,EAC7C,CAAC,KAAK,MACLJ,cAAK,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CACnC,UAAU,CAAC,KAAK,KACfE,GAAA,CAAC,KAAK,IAAC,UAAU,EAAE,qBAAqB,GAAG,KAAK,GAAG,KAAK,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAC7F,UAAU,CAAC,KAAK,GACX,CACT,EAEDA,IAAC,aAAa,EAAA,EACZ,GAAG,EAAE,cAAc,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI;;;AAGV,wBAAA,OAAO,EAAE,QAAQ,EACjB,cAAc,EAAE,QAAQ,EAAA,CACxB,EAEFA,GAAA,CAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,gBAAgB,YACrHA,GAAA,CAACG,OAAW,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,0BAA0B,YAC5D,QAAQ,EAAA,CACG,GACN,EAET,UAAU,CAAC,IAAI,KACdH,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,IAAI,SAAS,CAAC,EAAA,QAAA,EAC5E,UAAU,CAAC,IAAI,GACP,CACZ,CAAA,EAAA,CACG,CACP,EAAA,CACY,EAAA,CACQ;AAE7B;;;;"}
|
|
@@ -5,7 +5,7 @@ interface ApplicationHeaderElement {
|
|
|
5
5
|
'data-testid'?: string;
|
|
6
6
|
}
|
|
7
7
|
export interface ApplicationHeaderSearch extends ApplicationHeaderElement {
|
|
8
|
-
/** Called when the search trigger is pressed
|
|
8
|
+
/** Called when the search trigger is pressed. Open your search surface (e.g. `CommandMenu`) here. */
|
|
9
9
|
onPress: () => void;
|
|
10
10
|
/**
|
|
11
11
|
* Text shown inside the trigger.
|
|
@@ -13,10 +13,12 @@ export interface ApplicationHeaderSearch extends ApplicationHeaderElement {
|
|
|
13
13
|
*/
|
|
14
14
|
placeholder?: string;
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
16
|
+
* Shortcut shown as a hint in the trigger. Display only: the header registers no key handler, so
|
|
17
|
+
* register the key in the app (`useHotkeys`) beside the search state. For the default, register the
|
|
18
|
+
* exported `DEFAULT_SEARCH_SHORTCUT`; for another key, pass the same value here. Uses
|
|
19
|
+
* `react-hotkeys-hook` format, where `mod` reads ⌘ on macOS and Ctrl elsewhere. Pass `null` to hide
|
|
20
|
+
* the hint.
|
|
21
|
+
* @default DEFAULT_SEARCH_SHORTCUT ("mod+k")
|
|
20
22
|
*/
|
|
21
23
|
shortcut?: string | null;
|
|
22
24
|
}
|
|
@@ -40,6 +42,11 @@ export interface ApplicationHeaderAssistant extends ApplicationHeaderElement {
|
|
|
40
42
|
/** Called when the assistant button is pressed. */
|
|
41
43
|
onPress: () => void;
|
|
42
44
|
}
|
|
45
|
+
/**
|
|
46
|
+
* The header actions that can show an open state (`notifications.isOpen`, `assistant.isOpen`). Use it to
|
|
47
|
+
* type the app's "which one is open" state: `useState<ApplicationHeaderPanel | null>(null)`.
|
|
48
|
+
*/
|
|
49
|
+
export type ApplicationHeaderPanel = 'notifications' | 'assistant';
|
|
43
50
|
export interface ApplicationHeaderAvatar extends Omit<ApplicationHeaderElement, 'label'> {
|
|
44
51
|
/** Name of the entity shown (organisation, store, user). Names the button and seeds the initials fallback. */
|
|
45
52
|
name: string;
|
|
@@ -1 +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,
|
|
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,qGAAqG;IACrG,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;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;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,0BAA2B,SAAQ,wBAAwB;IAC1E;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,eAAe,GAAG,WAAW,CAAC;AAEnE,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"}
|
|
@@ -3,41 +3,35 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var uiIcons = require('@flipdish/ui-icons');
|
|
5
5
|
var FlipdishLogo = require('@flipdish/ui-library/components/atoms/FlipdishLogo');
|
|
6
|
-
var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
|
|
7
6
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
8
7
|
var hrefUtils = require('@flipdish/ui-library/utilities/hrefUtils');
|
|
9
8
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
10
|
-
var React = require('react');
|
|
11
9
|
var reactAriaComponents = require('react-aria-components');
|
|
12
|
-
var
|
|
13
|
-
var hotkeys_utils = require('../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
|
|
10
|
+
var useHotkeyHint = require('../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
|
|
14
11
|
var applicationHeader_utils = require('./applicationHeader.utils.cjs');
|
|
15
12
|
var avatarButton = require('./components/avatar-button.cjs');
|
|
16
13
|
var headerAction = require('./components/header-action.cjs');
|
|
17
14
|
var menuButton = require('./components/menu-button.cjs');
|
|
18
15
|
var searchTrigger = require('./components/search-trigger.cjs');
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
/**
|
|
18
|
+
* The search shortcut the header shows by default, in `react-hotkeys-hook` format. Register this same
|
|
19
|
+
* value in the app (`useHotkeys(DEFAULT_SEARCH_SHORTCUT, openSearch)`) so the key matches the hint.
|
|
20
|
+
*/
|
|
21
|
+
const DEFAULT_SEARCH_SHORTCUT = 'mod+k';
|
|
22
22
|
/**
|
|
23
23
|
* App-shell top bar that sits above every page: a search trigger on desktop, and
|
|
24
24
|
* notifications, assistant and avatar actions at every width. Below `lg` the search gives
|
|
25
25
|
* way to a navigation menu toggle and the Flipdish logo. Every section is data-driven and
|
|
26
|
-
* optional — the header owns layout
|
|
27
|
-
* what each press does. Sticks to the top of the scrolling page.
|
|
26
|
+
* optional — the header owns layout and labelling, while the app owns what each press does. Sticks to the top of the scrolling page.
|
|
28
27
|
*
|
|
29
28
|
* @summary app-shell top bar with search, notifications, assistant and avatar
|
|
30
29
|
*/
|
|
31
30
|
const ApplicationHeader = ({ search, notifications, assistant, avatar, menu, homeHref = '/', className, 'data-testid': dataTestId, }) => {
|
|
32
31
|
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'application-header', rootName: 'application-header' });
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
const shortcut = search ? (search.shortcut === undefined ? DEFAULT_SHORTCUT : search.shortcut) : null;
|
|
37
|
-
const onSearchPress = search?.onPress;
|
|
38
|
-
reactHotkeysHook.useHotkeys(shortcut ?? '', () => onSearchPress?.(),
|
|
39
|
-
// The search trigger is hidden below `lg`, so the shortcut is too.
|
|
40
|
-
{ enabled: Boolean(shortcut && isDesktop), preventDefault: true, enableOnFormTags: true, enableOnContentEditable: true }, [onSearchPress]);
|
|
32
|
+
// Display only: the app registers the key beside its search state and passes the same value here.
|
|
33
|
+
const shortcut = search ? (search.shortcut === undefined ? DEFAULT_SEARCH_SHORTCUT : search.shortcut) : null;
|
|
34
|
+
const shortcutHint = useHotkeyHint.useHotkeyHint(shortcut);
|
|
41
35
|
const notificationsLabel = notifications?.label ?? 'Notifications';
|
|
42
36
|
const assistantLabel = assistant?.label ?? 'Assistant';
|
|
43
37
|
const menuLabel = menu?.label ?? (menu?.isOpen ? 'Close navigation menu' : 'Open navigation menu');
|
|
@@ -45,8 +39,9 @@ const ApplicationHeader = ({ search, notifications, assistant, avatar, menu, hom
|
|
|
45
39
|
const safeHomeHref = hrefUtils.safeHref(homeHref);
|
|
46
40
|
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: safeHomeHref === undefined ? (
|
|
47
41
|
// A rejected `homeHref` leaves a plain logo: no link role, nothing to activate.
|
|
48
|
-
jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm", "data-testid": testIdUtils.joinTestId(rootTestId, 'logo') })) : (jsxRuntime.jsx(reactAriaComponents.Link, { href: safeHomeHref, "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:
|
|
42
|
+
jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { size: "sm", "data-testid": testIdUtils.joinTestId(rootTestId, 'logo') })) : (jsxRuntime.jsx(reactAriaComponents.Link, { href: safeHomeHref, "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: shortcutHint, 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), isOpen: notifications.isOpen, onPress: notifications.onPress, "data-testid": notifications['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'notifications') })), assistant && (jsxRuntime.jsx(headerAction.HeaderAction, { icon: uiIcons.Stars01, label: assistantLabel, tooltip: assistantLabel, isOpen: assistant.isOpen, 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') }))] }))] }) }));
|
|
49
43
|
};
|
|
50
44
|
|
|
51
45
|
exports.ApplicationHeader = ApplicationHeader;
|
|
46
|
+
exports.DEFAULT_SEARCH_SHORTCUT = DEFAULT_SEARCH_SHORTCUT;
|
|
52
47
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useHotkeyHint","safeHref","_jsx","TestIdProvider","_jsxs","cx","MenuButton","joinTestId","FlipdishLogo","AriaLink","SearchTrigger","HeaderAction","Bell01","getNotificationsLabel","formatBadgeCount","Stars01","AvatarButton"],"mappings":"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"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import type { ApplicationHeaderAssistant, ApplicationHeaderAvatar, ApplicationHeaderMenu, ApplicationHeaderNotifications, ApplicationHeaderSearch } from './applicationHeader.types';
|
|
2
|
-
export type { ApplicationHeaderAssistant, ApplicationHeaderAvatar, ApplicationHeaderMenu, ApplicationHeaderNotifications, ApplicationHeaderSearch, } from './applicationHeader.types';
|
|
2
|
+
export type { ApplicationHeaderAssistant, ApplicationHeaderAvatar, ApplicationHeaderMenu, ApplicationHeaderNotifications, ApplicationHeaderPanel, ApplicationHeaderSearch, } from './applicationHeader.types';
|
|
3
|
+
/**
|
|
4
|
+
* The search shortcut the header shows by default, in `react-hotkeys-hook` format. Register this same
|
|
5
|
+
* value in the app (`useHotkeys(DEFAULT_SEARCH_SHORTCUT, openSearch)`) so the key matches the hint.
|
|
6
|
+
*/
|
|
7
|
+
export declare const DEFAULT_SEARCH_SHORTCUT = "mod+k";
|
|
3
8
|
export interface ApplicationHeaderProps {
|
|
4
9
|
/**
|
|
5
|
-
* Search trigger, shown from `lg`. It is a button dressed as a search field — pressing it
|
|
6
|
-
*
|
|
10
|
+
* Search trigger, shown from `lg`. It is a button dressed as a search field — pressing it calls
|
|
11
|
+
* `onPress` so the app can open its own search surface. Omit to hide.
|
|
7
12
|
*/
|
|
8
13
|
search?: ApplicationHeaderSearch;
|
|
9
14
|
/** Notifications button with an unread badge. Omit to hide. */
|
|
@@ -34,8 +39,7 @@ export interface ApplicationHeaderProps {
|
|
|
34
39
|
* App-shell top bar that sits above every page: a search trigger on desktop, and
|
|
35
40
|
* notifications, assistant and avatar actions at every width. Below `lg` the search gives
|
|
36
41
|
* way to a navigation menu toggle and the Flipdish logo. Every section is data-driven and
|
|
37
|
-
* optional — the header owns layout
|
|
38
|
-
* what each press does. Sticks to the top of the scrolling page.
|
|
42
|
+
* optional — the header owns layout and labelling, while the app owns what each press does. Sticks to the top of the scrolling page.
|
|
39
43
|
*
|
|
40
44
|
* @summary app-shell top bar with search, notifications, assistant and avatar
|
|
41
45
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"names":[],"mappings":"AASA,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,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,uBAAuB,UAAU,CAAC;AAE/C,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;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAI,qGAS/B,sBAAsB,gCAqGxB,CAAC"}
|
|
@@ -1,41 +1,35 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { Bell01, Stars01 } from '@flipdish/ui-icons';
|
|
3
3
|
import { FlipdishLogo } from '@flipdish/ui-library/components/atoms/FlipdishLogo';
|
|
4
|
-
import { useBreakpoints } from '@flipdish/ui-library/hooks/useBreakpoints';
|
|
5
4
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
5
|
import { safeHref } from '@flipdish/ui-library/utilities/hrefUtils';
|
|
7
6
|
import { useResolvedTestId, TestIdProvider, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
8
|
-
import { useSyncExternalStore } from 'react';
|
|
9
7
|
import { Link } from 'react-aria-components';
|
|
10
|
-
import {
|
|
11
|
-
import { isApplePlatform, formatHotkeyHint } from '../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
|
|
8
|
+
import { useHotkeyHint } from '../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.js';
|
|
12
9
|
import { formatBadgeCount, getNotificationsLabel } from './applicationHeader.utils.js';
|
|
13
10
|
import { AvatarButton } from './components/avatar-button.js';
|
|
14
11
|
import { HeaderAction } from './components/header-action.js';
|
|
15
12
|
import { MenuButton } from './components/menu-button.js';
|
|
16
13
|
import { SearchTrigger } from './components/search-trigger.js';
|
|
17
14
|
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
/**
|
|
16
|
+
* The search shortcut the header shows by default, in `react-hotkeys-hook` format. Register this same
|
|
17
|
+
* value in the app (`useHotkeys(DEFAULT_SEARCH_SHORTCUT, openSearch)`) so the key matches the hint.
|
|
18
|
+
*/
|
|
19
|
+
const DEFAULT_SEARCH_SHORTCUT = 'mod+k';
|
|
20
20
|
/**
|
|
21
21
|
* App-shell top bar that sits above every page: a search trigger on desktop, and
|
|
22
22
|
* notifications, assistant and avatar actions at every width. Below `lg` the search gives
|
|
23
23
|
* way to a navigation menu toggle and the Flipdish logo. Every section is data-driven and
|
|
24
|
-
* optional — the header owns layout
|
|
25
|
-
* what each press does. Sticks to the top of the scrolling page.
|
|
24
|
+
* optional — the header owns layout and labelling, while the app owns what each press does. Sticks to the top of the scrolling page.
|
|
26
25
|
*
|
|
27
26
|
* @summary app-shell top bar with search, notifications, assistant and avatar
|
|
28
27
|
*/
|
|
29
28
|
const ApplicationHeader = ({ search, notifications, assistant, avatar, menu, homeHref = '/', className, 'data-testid': dataTestId, }) => {
|
|
30
29
|
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'application-header', rootName: 'application-header' });
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
const shortcut = search ? (search.shortcut === undefined ? DEFAULT_SHORTCUT : search.shortcut) : null;
|
|
35
|
-
const onSearchPress = search?.onPress;
|
|
36
|
-
useHotkeys(shortcut ?? '', () => onSearchPress?.(),
|
|
37
|
-
// The search trigger is hidden below `lg`, so the shortcut is too.
|
|
38
|
-
{ enabled: Boolean(shortcut && isDesktop), preventDefault: true, enableOnFormTags: true, enableOnContentEditable: true }, [onSearchPress]);
|
|
30
|
+
// Display only: the app registers the key beside its search state and passes the same value here.
|
|
31
|
+
const shortcut = search ? (search.shortcut === undefined ? DEFAULT_SEARCH_SHORTCUT : search.shortcut) : null;
|
|
32
|
+
const shortcutHint = useHotkeyHint(shortcut);
|
|
39
33
|
const notificationsLabel = notifications?.label ?? 'Notifications';
|
|
40
34
|
const assistantLabel = assistant?.label ?? 'Assistant';
|
|
41
35
|
const menuLabel = menu?.label ?? (menu?.isOpen ? 'Close navigation menu' : 'Open navigation menu');
|
|
@@ -43,8 +37,8 @@ const ApplicationHeader = ({ search, notifications, assistant, avatar, menu, hom
|
|
|
43
37
|
const safeHomeHref = safeHref(homeHref);
|
|
44
38
|
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: safeHomeHref === undefined ? (
|
|
45
39
|
// A rejected `homeHref` leaves a plain logo: no link role, nothing to activate.
|
|
46
|
-
jsx(FlipdishLogo, { size: "sm", "data-testid": joinTestId(rootTestId, 'logo') })) : (jsx(Link, { href: safeHomeHref, "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:
|
|
40
|
+
jsx(FlipdishLogo, { size: "sm", "data-testid": joinTestId(rootTestId, 'logo') })) : (jsx(Link, { href: safeHomeHref, "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: shortcutHint, 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), isOpen: notifications.isOpen, onPress: notifications.onPress, "data-testid": notifications['data-testid'] ?? joinTestId(rootTestId, 'notifications') })), assistant && (jsx(HeaderAction, { icon: Stars01, label: assistantLabel, tooltip: assistantLabel, isOpen: assistant.isOpen, 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') }))] }))] }) }));
|
|
47
41
|
};
|
|
48
42
|
|
|
49
|
-
export { ApplicationHeader };
|
|
43
|
+
export { ApplicationHeader, DEFAULT_SEARCH_SHORTCUT };
|
|
50
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaLink"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ApplicationHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaLink"],"mappings":"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"}
|
|
@@ -12,9 +12,9 @@ var calendarMonthView = require('./components/calendar-month-view.cjs');
|
|
|
12
12
|
var calendarWeekView = require('./components/calendar-week-view.cjs');
|
|
13
13
|
|
|
14
14
|
const viewOptions = [
|
|
15
|
-
{ value: 'day', label: 'Day view'
|
|
16
|
-
{ value: 'week', label: 'Week view'
|
|
17
|
-
{ value: 'month', label: 'Month view'
|
|
15
|
+
{ value: 'day', label: 'Day view' },
|
|
16
|
+
{ value: 'week', label: 'Week view' },
|
|
17
|
+
{ value: 'month', label: 'Month view' },
|
|
18
18
|
];
|
|
19
19
|
/**
|
|
20
20
|
* A scheduling calendar that renders a list of events across month, week, and
|