@activecollab/components 1.0.277 → 1.0.279
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/cjs/components/{CommandPallete/CommandPallete.js → CommandPalette/CommandPalette.js} +19 -19
- package/dist/cjs/components/{CommandPallete/CommandPallete.js.map → CommandPalette/CommandPalette.js.map} +1 -1
- package/dist/cjs/components/{CommandPallete/CommandPallete.styles.js → CommandPalette/CommandPalette.styles.js} +40 -40
- package/dist/cjs/components/{CommandPallete/CommandPallete.styles.js.map → CommandPalette/CommandPalette.styles.js.map} +1 -1
- package/dist/cjs/components/{CommandPallete/CommandPalleteCommandItem.js → CommandPalette/CommandPaletteCommandItem.js} +10 -10
- package/dist/cjs/components/{CommandPallete/CommandPalleteCommandItem.js.map → CommandPalette/CommandPaletteCommandItem.js.map} +1 -1
- package/dist/cjs/components/{CommandPallete/CommandPalleteHeader.js → CommandPalette/CommandPaletteHeader.js} +9 -9
- package/dist/cjs/components/{CommandPallete/CommandPalleteHeader.js.map → CommandPalette/CommandPaletteHeader.js.map} +1 -1
- package/dist/cjs/components/{CommandPallete/CommandPalleteItem.js → CommandPalette/CommandPaletteItem.js} +10 -10
- package/dist/cjs/components/CommandPalette/CommandPaletteItem.js.map +1 -0
- package/dist/cjs/components/{CommandPallete/CommandPalleteList.js → CommandPalette/CommandPaletteList.js} +8 -8
- package/dist/cjs/components/CommandPalette/CommandPaletteList.js.map +1 -0
- package/dist/cjs/components/{CommandPallete → CommandPalette}/context/ModeContext.js.map +1 -1
- package/dist/cjs/components/{CommandPallete → CommandPalette}/context/SearchContext.js.map +1 -1
- package/dist/cjs/components/{CommandPallete → CommandPalette}/context/SelectedContext.js.map +1 -1
- package/dist/cjs/components/{CommandPallete → CommandPalette}/context/index.js.map +1 -1
- package/dist/cjs/components/{CommandPallete → CommandPalette}/index.js +4 -4
- package/dist/cjs/components/CommandPalette/index.js.map +1 -0
- package/dist/cjs/components/Formatters/FormatDate.js +21 -0
- package/dist/cjs/components/Formatters/FormatDate.js.map +1 -0
- package/dist/cjs/components/Formatters/index.js +17 -0
- package/dist/cjs/components/Formatters/index.js.map +1 -0
- package/dist/cjs/components/Formatters/useFormatDate.js +18 -0
- package/dist/cjs/components/Formatters/useFormatDate.js.map +1 -0
- package/dist/cjs/components/Localization/LocalizationProvider.js +44 -0
- package/dist/cjs/components/Localization/LocalizationProvider.js.map +1 -0
- package/dist/cjs/components/Localization/index.js +17 -0
- package/dist/cjs/components/Localization/index.js.map +1 -0
- package/dist/cjs/components/SelectDate/SelectDate.js +7 -5
- package/dist/cjs/components/SelectDate/SelectDate.js.map +1 -1
- package/dist/cjs/components/index.js +4 -4
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/utils/dateUtils.js +35 -0
- package/dist/cjs/utils/dateUtils.js.map +1 -0
- package/dist/cjs/utils/dateUtils.test.js +20 -0
- package/dist/cjs/utils/dateUtils.test.js.map +1 -0
- package/dist/cjs/utils/{findHighlightSearch.js → findHighlightedSearch.js} +4 -4
- package/dist/cjs/utils/findHighlightedSearch.js.map +1 -0
- package/dist/esm/components/{CommandPallete/CommandPallete.d.ts → CommandPalette/CommandPalette.d.ts} +8 -8
- package/dist/esm/components/{CommandPallete/CommandPallete.d.ts.map → CommandPalette/CommandPalette.d.ts.map} +1 -1
- package/dist/esm/components/{CommandPallete/CommandPallete.js → CommandPalette/CommandPalette.js} +17 -17
- package/dist/esm/components/{CommandPallete/CommandPallete.js.map → CommandPalette/CommandPalette.js.map} +1 -1
- package/dist/esm/components/{CommandPallete/CommandPallete.styles.d.ts → CommandPalette/CommandPalette.styles.d.ts} +7 -7
- package/dist/esm/components/{CommandPallete/CommandPallete.styles.d.ts.map → CommandPalette/CommandPalette.styles.d.ts.map} +1 -1
- package/dist/esm/components/{CommandPallete/CommandPallete.styles.js → CommandPalette/CommandPalette.styles.js} +33 -33
- package/dist/esm/components/{CommandPallete/CommandPallete.styles.js.map → CommandPalette/CommandPalette.styles.js.map} +1 -1
- package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts +10 -0
- package/dist/esm/components/{CommandPallete/CommandPalleteCommandItem.d.ts.map → CommandPalette/CommandPaletteCommandItem.d.ts.map} +1 -1
- package/dist/esm/components/{CommandPallete/CommandPalleteCommandItem.js → CommandPalette/CommandPaletteCommandItem.js} +7 -7
- package/dist/esm/components/{CommandPallete/CommandPalleteCommandItem.js.map → CommandPalette/CommandPaletteCommandItem.js.map} +1 -1
- package/dist/esm/components/{CommandPallete/CommandPalleteHeader.d.ts → CommandPalette/CommandPaletteHeader.d.ts} +4 -4
- package/dist/esm/components/CommandPalette/CommandPaletteHeader.d.ts.map +1 -0
- package/dist/esm/components/{CommandPallete/CommandPalleteHeader.js → CommandPalette/CommandPaletteHeader.js} +5 -5
- package/dist/esm/components/{CommandPallete/CommandPalleteHeader.js.map → CommandPalette/CommandPaletteHeader.js.map} +1 -1
- package/dist/esm/components/CommandPalette/CommandPaletteItem.d.ts +10 -0
- package/dist/esm/components/{CommandPallete/CommandPalleteItem.d.ts.map → CommandPalette/CommandPaletteItem.d.ts.map} +1 -1
- package/dist/esm/components/{CommandPallete/CommandPalleteItem.js → CommandPalette/CommandPaletteItem.js} +7 -7
- package/dist/esm/components/CommandPalette/CommandPaletteItem.js.map +1 -0
- package/dist/esm/components/{CommandPallete/CommandPalleteList.d.ts → CommandPalette/CommandPaletteList.d.ts} +4 -4
- package/dist/esm/components/{CommandPallete/CommandPalleteList.d.ts.map → CommandPalette/CommandPaletteList.d.ts.map} +1 -1
- package/dist/esm/components/{CommandPallete/CommandPalleteList.js → CommandPalette/CommandPaletteList.js} +5 -5
- package/dist/esm/components/{CommandPallete/CommandPalleteList.js.map → CommandPalette/CommandPaletteList.js.map} +1 -1
- package/dist/esm/components/{CommandPallete → CommandPalette}/context/ModeContext.d.ts.map +1 -1
- package/dist/esm/components/{CommandPallete → CommandPalette}/context/ModeContext.js.map +1 -1
- package/dist/esm/components/{CommandPallete → CommandPalette}/context/SearchContext.d.ts.map +1 -1
- package/dist/esm/components/{CommandPallete → CommandPalette}/context/SearchContext.js.map +1 -1
- package/dist/esm/components/{CommandPallete → CommandPalette}/context/SelectedContext.d.ts.map +1 -1
- package/dist/esm/components/{CommandPallete → CommandPalette}/context/SelectedContext.js.map +1 -1
- package/dist/esm/components/{CommandPallete → CommandPalette}/context/index.d.ts.map +1 -1
- package/dist/esm/components/{CommandPallete → CommandPalette}/context/index.js.map +1 -1
- package/dist/esm/components/CommandPalette/index.d.ts +2 -0
- package/dist/esm/components/CommandPalette/index.d.ts.map +1 -0
- package/dist/esm/components/CommandPalette/index.js +2 -0
- package/dist/esm/components/CommandPalette/index.js.map +1 -0
- package/dist/esm/components/Formatters/FormatDate.d.ts +14 -0
- package/dist/esm/components/Formatters/FormatDate.d.ts.map +1 -0
- package/dist/esm/components/Formatters/FormatDate.js +13 -0
- package/dist/esm/components/Formatters/FormatDate.js.map +1 -0
- package/dist/esm/components/Formatters/index.d.ts +2 -0
- package/dist/esm/components/Formatters/index.d.ts.map +1 -0
- package/dist/esm/components/Formatters/index.js +2 -0
- package/dist/esm/components/Formatters/index.js.map +1 -0
- package/dist/esm/components/Formatters/useFormatDate.d.ts +2 -0
- package/dist/esm/components/Formatters/useFormatDate.d.ts.map +1 -0
- package/dist/esm/components/Formatters/useFormatDate.js +11 -0
- package/dist/esm/components/Formatters/useFormatDate.js.map +1 -0
- package/dist/esm/components/Localization/LocalizationProvider.d.ts +21 -0
- package/dist/esm/components/Localization/LocalizationProvider.d.ts.map +1 -0
- package/dist/esm/components/Localization/LocalizationProvider.js +30 -0
- package/dist/esm/components/Localization/LocalizationProvider.js.map +1 -0
- package/dist/esm/components/Localization/index.d.ts +2 -0
- package/dist/esm/components/Localization/index.d.ts.map +1 -0
- package/dist/esm/components/Localization/index.js +2 -0
- package/dist/esm/components/Localization/index.js.map +1 -0
- package/dist/esm/components/SelectDate/SelectDate.d.ts.map +1 -1
- package/dist/esm/components/SelectDate/SelectDate.js +7 -5
- package/dist/esm/components/SelectDate/SelectDate.js.map +1 -1
- package/dist/esm/components/index.d.ts +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/utils/dateUtils.d.ts +4 -0
- package/dist/esm/utils/dateUtils.d.ts.map +1 -0
- package/dist/esm/utils/dateUtils.js +31 -0
- package/dist/esm/utils/dateUtils.js.map +1 -0
- package/dist/esm/utils/dateUtils.test.d.ts +2 -0
- package/dist/esm/utils/dateUtils.test.d.ts.map +1 -0
- package/dist/esm/utils/dateUtils.test.js +18 -0
- package/dist/esm/utils/dateUtils.test.js.map +1 -0
- package/dist/esm/utils/findHighlightedSearch.d.ts +2 -0
- package/dist/esm/utils/findHighlightedSearch.d.ts.map +1 -0
- package/dist/esm/utils/{findHighlightSearch.js → findHighlightedSearch.js} +2 -2
- package/dist/esm/utils/findHighlightedSearch.js.map +1 -0
- package/dist/index.js +109 -65
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/components/CommandPallete/CommandPalleteItem.js.map +0 -1
- package/dist/cjs/components/CommandPallete/CommandPalleteList.js.map +0 -1
- package/dist/cjs/components/CommandPallete/index.js.map +0 -1
- package/dist/cjs/utils/findHighlightSearch.js.map +0 -1
- package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.d.ts +0 -10
- package/dist/esm/components/CommandPallete/CommandPalleteHeader.d.ts.map +0 -1
- package/dist/esm/components/CommandPallete/CommandPalleteItem.d.ts +0 -10
- package/dist/esm/components/CommandPallete/CommandPalleteItem.js.map +0 -1
- package/dist/esm/components/CommandPallete/index.d.ts +0 -2
- package/dist/esm/components/CommandPallete/index.d.ts.map +0 -1
- package/dist/esm/components/CommandPallete/index.js +0 -2
- package/dist/esm/components/CommandPallete/index.js.map +0 -1
- package/dist/esm/utils/findHighlightSearch.d.ts +0 -2
- package/dist/esm/utils/findHighlightSearch.d.ts.map +0 -1
- package/dist/esm/utils/findHighlightSearch.js.map +0 -1
- /package/dist/cjs/components/{CommandPallete → CommandPalette}/context/ModeContext.js +0 -0
- /package/dist/cjs/components/{CommandPallete → CommandPalette}/context/SearchContext.js +0 -0
- /package/dist/cjs/components/{CommandPallete → CommandPalette}/context/SelectedContext.js +0 -0
- /package/dist/cjs/components/{CommandPallete → CommandPalette}/context/index.js +0 -0
- /package/dist/esm/components/{CommandPallete → CommandPalette}/context/ModeContext.d.ts +0 -0
- /package/dist/esm/components/{CommandPallete → CommandPalette}/context/ModeContext.js +0 -0
- /package/dist/esm/components/{CommandPallete → CommandPalette}/context/SearchContext.d.ts +0 -0
- /package/dist/esm/components/{CommandPallete → CommandPalette}/context/SearchContext.js +0 -0
- /package/dist/esm/components/{CommandPallete → CommandPalette}/context/SelectedContext.d.ts +0 -0
- /package/dist/esm/components/{CommandPallete → CommandPalette}/context/SelectedContext.js +0 -0
- /package/dist/esm/components/{CommandPallete → CommandPalette}/context/index.d.ts +0 -0
- /package/dist/esm/components/{CommandPallete → CommandPalette}/context/index.js +0 -0
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from "react";
|
|
2
2
|
import { DialogProps } from "../Dialog";
|
|
3
|
-
import {
|
|
4
|
-
export interface
|
|
3
|
+
import { CommandPaletteItemProps } from "./CommandPaletteItem";
|
|
4
|
+
export interface CommandPaletteProps extends DialogProps {
|
|
5
5
|
onChangeSearch: (search: string) => void;
|
|
6
6
|
search: string;
|
|
7
7
|
mode: string;
|
|
8
8
|
setMode: (value: string) => void;
|
|
9
9
|
loading?: boolean;
|
|
10
10
|
}
|
|
11
|
-
export declare const
|
|
12
|
-
({ children, onChangeSearch, search, mode, setMode, ...rest }: PropsWithChildren<
|
|
11
|
+
export declare const CommandPalette: {
|
|
12
|
+
({ children, onChangeSearch, search, mode, setMode, ...rest }: PropsWithChildren<CommandPaletteProps>): JSX.Element;
|
|
13
13
|
displayName: string;
|
|
14
14
|
List: {
|
|
15
|
-
({ children, heading, visible, }: React.PropsWithChildren<import("./
|
|
15
|
+
({ children, heading, visible, }: React.PropsWithChildren<import("./CommandPaletteList").CommandPaletteListProps>): JSX.Element | null;
|
|
16
16
|
displayName: string;
|
|
17
17
|
};
|
|
18
|
-
Item: React.ForwardRefExoticComponent<
|
|
19
|
-
CommandItem: React.ForwardRefExoticComponent<import("./
|
|
18
|
+
Item: React.ForwardRefExoticComponent<CommandPaletteItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
19
|
+
CommandItem: React.ForwardRefExoticComponent<import("./CommandPaletteCommandItem").CommandPaletteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
20
20
|
};
|
|
21
|
-
//# sourceMappingURL=
|
|
21
|
+
//# sourceMappingURL=CommandPalette.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAOhD,OAAO,EAEL,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAW9B,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc;mEAOxB,kBAAkB,mBAAmB,CAAC;;;;;;;;CAgJxC,CAAC"}
|
package/dist/esm/components/{CommandPallete/CommandPallete.js → CommandPalette/CommandPalette.js}
RENAMED
|
@@ -3,14 +3,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
3
3
|
var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode"];
|
|
4
4
|
import React, { cloneElement, useMemo, useRef, useState } from "react";
|
|
5
5
|
import { Dialog } from "../Dialog";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
6
|
+
import { StyledCommandPalette, StyledCommandPaletteWrapper } from "./CommandPalette.styles";
|
|
7
|
+
import { CommandPaletteCommandItem } from "./CommandPaletteCommandItem";
|
|
8
|
+
import { CommandPaletteHeader } from "./CommandPaletteHeader";
|
|
9
|
+
import { CommandPaletteItem } from "./CommandPaletteItem";
|
|
10
|
+
import { CommandPaletteList } from "./CommandPaletteList";
|
|
11
11
|
import { ModeContextProvider, SelectedContextProvider, SearchContextProvider } from "./context";
|
|
12
12
|
import { deepMap } from "../../utils/deepChildrenMap";
|
|
13
|
-
export var
|
|
13
|
+
export var CommandPalette = function CommandPalette(_ref) {
|
|
14
14
|
var children = _ref.children,
|
|
15
15
|
onChangeSearch = _ref.onChangeSearch,
|
|
16
16
|
search = _ref.search,
|
|
@@ -44,10 +44,10 @@ export var CommandPallete = function CommandPallete(_ref) {
|
|
|
44
44
|
var items = deepMap(children, function (child) {
|
|
45
45
|
var item = child;
|
|
46
46
|
var clonedElement;
|
|
47
|
-
if (item && item.type ===
|
|
47
|
+
if (item && item.type === CommandPaletteList) {
|
|
48
48
|
clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props));
|
|
49
49
|
}
|
|
50
|
-
if (item && item.type ===
|
|
50
|
+
if (item && item.type === CommandPaletteCommandItem) {
|
|
51
51
|
clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
|
|
52
52
|
index: itemsLength,
|
|
53
53
|
selected: selected
|
|
@@ -55,7 +55,7 @@ export var CommandPallete = function CommandPallete(_ref) {
|
|
|
55
55
|
itemsLength++;
|
|
56
56
|
commandsLength++;
|
|
57
57
|
}
|
|
58
|
-
if (item && item.type ===
|
|
58
|
+
if (item && item.type === CommandPaletteItem) {
|
|
59
59
|
clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
|
|
60
60
|
index: itemsLength,
|
|
61
61
|
selected: selected
|
|
@@ -111,7 +111,7 @@ export var CommandPallete = function CommandPallete(_ref) {
|
|
|
111
111
|
selected: selected,
|
|
112
112
|
setSelected: setSelected
|
|
113
113
|
}
|
|
114
|
-
}, /*#__PURE__*/React.createElement(
|
|
114
|
+
}, /*#__PURE__*/React.createElement(StyledCommandPalette, {
|
|
115
115
|
onKeyDown: function onKeyDown(e) {
|
|
116
116
|
if (e.key === "ArrowDown") {
|
|
117
117
|
e.preventDefault();
|
|
@@ -137,16 +137,16 @@ export var CommandPallete = function CommandPallete(_ref) {
|
|
|
137
137
|
mode: mode,
|
|
138
138
|
setMode: setMode
|
|
139
139
|
}
|
|
140
|
-
}, /*#__PURE__*/React.createElement(
|
|
140
|
+
}, /*#__PURE__*/React.createElement(CommandPaletteHeader, {
|
|
141
141
|
handleChange: handleChange,
|
|
142
142
|
commandsLength: filterChildren.commandsLength,
|
|
143
143
|
itemsLength: filterChildren.itemsLength
|
|
144
|
-
})), /*#__PURE__*/React.createElement(
|
|
144
|
+
})), /*#__PURE__*/React.createElement(StyledCommandPaletteWrapper, {
|
|
145
145
|
ref: listWrapperRef
|
|
146
146
|
}, filterChildren.items)))));
|
|
147
147
|
};
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
//# sourceMappingURL=
|
|
148
|
+
CommandPalette.displayName = "CommandPalette";
|
|
149
|
+
CommandPalette.List = CommandPaletteList;
|
|
150
|
+
CommandPalette.Item = CommandPaletteItem;
|
|
151
|
+
CommandPalette.CommandItem = CommandPaletteCommandItem;
|
|
152
|
+
//# sourceMappingURL=CommandPalette.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPallete.js","names":["React","cloneElement","useMemo","useRef","useState","Dialog","StyledCommandPallete","StyledCommandPalleteWrapper","CommandPalleteCommandItem","CommandPalleteHeader","CommandPalleteItem","CommandPalleteList","ModeContextProvider","SelectedContextProvider","SearchContextProvider","deepMap","CommandPallete","children","onChangeSearch","search","mode","setMode","rest","selected","setSelected","listWrapperRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","itemsLength","commandsLength","items","child","item","clonedElement","type","props","index","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n cloneElement,\n PropsWithChildren,\n ReactElement,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n StyledCommandPallete,\n StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteCommandItem } from \"./CommandPalleteCommandItem\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport {\n CommandPalleteItem,\n CommandPalleteItemProps,\n} from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\nimport {\n ModeContextProvider,\n SelectedContextProvider,\n SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface CommandPalleteProps extends DialogProps {\n onChangeSearch: (search: string) => void;\n search: string;\n mode: string;\n setMode: (value: string) => void;\n loading?: boolean;\n}\n\nexport const CommandPallete = ({\n children,\n onChangeSearch,\n search,\n mode,\n setMode,\n ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n const [selected, setSelected] = useState<number>(0);\n const listWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChangeSearch(e.target.value);\n };\n\n const scrollToTop = () => {\n listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const scrollToBottom = () => {\n listWrapperRef.current?.scrollTo({\n top: listWrapperRef.current.scrollHeight,\n behavior: \"smooth\",\n });\n };\n\n const filterChildren = useMemo(() => {\n let itemsLength = 0;\n let commandsLength = 0;\n\n const items = deepMap(children, (child) => {\n const item = child as ReactElement<CommandPalleteItemProps>;\n let clonedElement;\n\n if (item && item.type === CommandPalleteList) {\n clonedElement = cloneElement(item, {\n ...item.props,\n });\n }\n\n if (item && item.type === CommandPalleteCommandItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n commandsLength++;\n }\n\n if (item && item.type === CommandPalleteItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n }\n\n return clonedElement;\n });\n\n return { items, itemsLength, commandsLength };\n }, [children, selected]);\n\n const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n const items = document.querySelectorAll(\".cp-item\");\n\n let index = 0;\n let newIndex = 0;\n let newItem: Element | null = null;\n\n if (direction === \"down\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = index === items.length - 1 ? 0 : index + 1;\n } else if (direction === \"up\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = !index ? items.length - 1 : index - 1;\n } else {\n setSelected(0);\n }\n\n newItem = items[newIndex];\n\n if (newItem && typeof newIndex === \"number\") {\n setSelected(newIndex);\n\n newItem.scrollIntoView({\n behavior: \"smooth\",\n block: newIndex ? \"center\" : \"end\",\n });\n }\n };\n\n return (\n <Dialog {...rest}>\n <SearchContextProvider value={{ search, onChangeSearch }}>\n <SelectedContextProvider value={{ selected: selected, setSelected }}>\n <StyledCommandPallete\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n handleChangeSelected(\"down\");\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n handleChangeSelected(\"up\");\n }\n\n if (e.key === \"End\") {\n e.preventDefault();\n scrollToBottom();\n setSelected(filterChildren.itemsLength - 1);\n }\n\n if (e.key === \"Home\") {\n e.preventDefault();\n scrollToTop();\n setSelected(0);\n }\n }}\n >\n <ModeContextProvider value={{ mode, setMode }}>\n <CommandPalleteHeader\n handleChange={handleChange}\n commandsLength={filterChildren.commandsLength}\n itemsLength={filterChildren.itemsLength}\n />\n </ModeContextProvider>\n\n <StyledCommandPalleteWrapper ref={listWrapperRef}>\n {filterChildren.items}\n </StyledCommandPalleteWrapper>\n </StyledCommandPallete>\n </SelectedContextProvider>\n </SearchContextProvider>\n </Dialog>\n );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\nCommandPallete.CommandItem = CommandPalleteCommandItem;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CommandPalette.js","names":["React","cloneElement","useMemo","useRef","useState","Dialog","StyledCommandPalette","StyledCommandPaletteWrapper","CommandPaletteCommandItem","CommandPaletteHeader","CommandPaletteItem","CommandPaletteList","ModeContextProvider","SelectedContextProvider","SearchContextProvider","deepMap","CommandPalette","children","onChangeSearch","search","mode","setMode","rest","selected","setSelected","listWrapperRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","itemsLength","commandsLength","items","child","item","clonedElement","type","props","index","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n cloneElement,\n PropsWithChildren,\n ReactElement,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n StyledCommandPalette,\n StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n CommandPaletteItem,\n CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n ModeContextProvider,\n SelectedContextProvider,\n SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface CommandPaletteProps extends DialogProps {\n onChangeSearch: (search: string) => void;\n search: string;\n mode: string;\n setMode: (value: string) => void;\n loading?: boolean;\n}\n\nexport const CommandPalette = ({\n children,\n onChangeSearch,\n search,\n mode,\n setMode,\n ...rest\n}: PropsWithChildren<CommandPaletteProps>) => {\n const [selected, setSelected] = useState<number>(0);\n const listWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChangeSearch(e.target.value);\n };\n\n const scrollToTop = () => {\n listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const scrollToBottom = () => {\n listWrapperRef.current?.scrollTo({\n top: listWrapperRef.current.scrollHeight,\n behavior: \"smooth\",\n });\n };\n\n const filterChildren = useMemo(() => {\n let itemsLength = 0;\n let commandsLength = 0;\n\n const items = deepMap(children, (child) => {\n const item = child as ReactElement<CommandPaletteItemProps>;\n let clonedElement;\n\n if (item && item.type === CommandPaletteList) {\n clonedElement = cloneElement(item, {\n ...item.props,\n });\n }\n\n if (item && item.type === CommandPaletteCommandItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n commandsLength++;\n }\n\n if (item && item.type === CommandPaletteItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n }\n\n return clonedElement;\n });\n\n return { items, itemsLength, commandsLength };\n }, [children, selected]);\n\n const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n const items = document.querySelectorAll(\".cp-item\");\n\n let index = 0;\n let newIndex = 0;\n let newItem: Element | null = null;\n\n if (direction === \"down\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = index === items.length - 1 ? 0 : index + 1;\n } else if (direction === \"up\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = !index ? items.length - 1 : index - 1;\n } else {\n setSelected(0);\n }\n\n newItem = items[newIndex];\n\n if (newItem && typeof newIndex === \"number\") {\n setSelected(newIndex);\n\n newItem.scrollIntoView({\n behavior: \"smooth\",\n block: newIndex ? \"center\" : \"end\",\n });\n }\n };\n\n return (\n <Dialog {...rest}>\n <SearchContextProvider value={{ search, onChangeSearch }}>\n <SelectedContextProvider value={{ selected: selected, setSelected }}>\n <StyledCommandPalette\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n handleChangeSelected(\"down\");\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n handleChangeSelected(\"up\");\n }\n\n if (e.key === \"End\") {\n e.preventDefault();\n scrollToBottom();\n setSelected(filterChildren.itemsLength - 1);\n }\n\n if (e.key === \"Home\") {\n e.preventDefault();\n scrollToTop();\n setSelected(0);\n }\n }}\n >\n <ModeContextProvider value={{ mode, setMode }}>\n <CommandPaletteHeader\n handleChange={handleChange}\n commandsLength={filterChildren.commandsLength}\n itemsLength={filterChildren.itemsLength}\n />\n </ModeContextProvider>\n\n <StyledCommandPaletteWrapper ref={listWrapperRef}>\n {filterChildren.items}\n </StyledCommandPaletteWrapper>\n </StyledCommandPalette>\n </SelectedContextProvider>\n </SearchContextProvider>\n </Dialog>\n );\n};\n\nCommandPalette.displayName = \"CommandPalette\";\n\nCommandPalette.List = CommandPaletteList;\nCommandPalette.Item = CommandPaletteItem;\nCommandPalette.CommandItem = CommandPaletteCommandItem;\n"],"mappings":"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"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
2
|
+
export declare const StyledCommandPalette: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const StyledCommandPaletteWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const StyledCommandPaletteHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
5
|
export declare const StyledSearchIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
6
|
export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
7
7
|
export declare const StyledParameter: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
8
8
|
export declare const StyledActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
9
|
export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const StyledCommandPaletteList: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
11
11
|
export declare const StyledHeading: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const StyledCommandPaletteItem: import("styled-components").StyledComponent<"li", any, {
|
|
13
13
|
$selected: boolean;
|
|
14
14
|
}, never>;
|
|
15
|
-
export declare const
|
|
15
|
+
export declare const StyledCommandPaletteCommandItem: import("styled-components").StyledComponent<"li", any, {
|
|
16
16
|
$selected: boolean;
|
|
17
17
|
}, never>;
|
|
18
18
|
export declare const StyledSpinnerLoader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cs" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw"> & import("../Loaders").SpinnerLoaderProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
19
|
-
//# sourceMappingURL=
|
|
19
|
+
//# sourceMappingURL=CommandPalette.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"CommandPalette.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,oBAAoB,oEAWhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEASvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEA8BvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAU3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAAyB,OAAO;SA4BpE,CAAC;AAEF,eAAO,MAAM,+BAA+B;eA9BkB,OAAO;SAgCpE,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC"}
|
|
@@ -2,51 +2,51 @@ import styled from "styled-components";
|
|
|
2
2
|
import { FontStyle } from "../FontStyle";
|
|
3
3
|
import { screen } from "../BreakPoints";
|
|
4
4
|
import { SpinnerLoader } from "../Loaders";
|
|
5
|
-
export var
|
|
6
|
-
displayName: "
|
|
7
|
-
componentId: "sc-
|
|
5
|
+
export var StyledCommandPalette = styled.div.withConfig({
|
|
6
|
+
displayName: "CommandPalettestyles__StyledCommandPalette",
|
|
7
|
+
componentId: "sc-na3mad-0"
|
|
8
8
|
})(["", " background-color:var(--page-paper-main);border-radius:10px;box-sizing:border-box;max-width:600px;mark{background-color:var(--color-primary-300);color:var(--color-theme-900);}"], FontStyle);
|
|
9
|
-
export var
|
|
10
|
-
displayName: "
|
|
11
|
-
componentId: "sc-
|
|
9
|
+
export var StyledCommandPaletteWrapper = styled.div.withConfig({
|
|
10
|
+
displayName: "CommandPalettestyles__StyledCommandPaletteWrapper",
|
|
11
|
+
componentId: "sc-na3mad-1"
|
|
12
12
|
})(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){padding-bottom:8px;padding-top:8px;}"]);
|
|
13
|
-
export var
|
|
14
|
-
displayName: "
|
|
15
|
-
componentId: "sc-
|
|
13
|
+
export var StyledCommandPaletteHeader = styled.div.withConfig({
|
|
14
|
+
displayName: "CommandPalettestyles__StyledCommandPaletteHeader",
|
|
15
|
+
componentId: "sc-na3mad-2"
|
|
16
16
|
})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;border-bottom:1px solid var(--color-theme-400);"]);
|
|
17
17
|
export var StyledSearchIcon = styled.div.withConfig({
|
|
18
|
-
displayName: "
|
|
19
|
-
componentId: "sc-
|
|
18
|
+
displayName: "CommandPalettestyles__StyledSearchIcon",
|
|
19
|
+
componentId: "sc-na3mad-3"
|
|
20
20
|
})(["margin-right:8px;svg{vertical-align:middle;}"]);
|
|
21
21
|
export var StyledInput = styled.input.withConfig({
|
|
22
|
-
displayName: "
|
|
23
|
-
componentId: "sc-
|
|
22
|
+
displayName: "CommandPalettestyles__StyledInput",
|
|
23
|
+
componentId: "sc-na3mad-4"
|
|
24
24
|
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
|
|
25
25
|
export var StyledParameter = styled.span.withConfig({
|
|
26
|
-
displayName: "
|
|
27
|
-
componentId: "sc-
|
|
26
|
+
displayName: "CommandPalettestyles__StyledParameter",
|
|
27
|
+
componentId: "sc-na3mad-5"
|
|
28
28
|
})(["color:var(--color-theme-transparent-500);margin-right:8px;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
|
|
29
29
|
export var StyledActionWrapper = styled.div.withConfig({
|
|
30
|
-
displayName: "
|
|
31
|
-
componentId: "sc-
|
|
30
|
+
displayName: "CommandPalettestyles__StyledActionWrapper",
|
|
31
|
+
componentId: "sc-na3mad-6"
|
|
32
32
|
})(["align-items:center;display:flex;gap:8px;"]);
|
|
33
33
|
export var StyledIcon = styled.div.withConfig({
|
|
34
|
-
displayName: "
|
|
35
|
-
componentId: "sc-
|
|
34
|
+
displayName: "CommandPalettestyles__StyledIcon",
|
|
35
|
+
componentId: "sc-na3mad-7"
|
|
36
36
|
})(["margin-right:8px;svg{vertical-align:middle;}"]);
|
|
37
|
-
export var
|
|
38
|
-
displayName: "
|
|
39
|
-
componentId: "sc-
|
|
37
|
+
export var StyledCommandPaletteList = styled.ul.withConfig({
|
|
38
|
+
displayName: "CommandPalettestyles__StyledCommandPaletteList",
|
|
39
|
+
componentId: "sc-na3mad-8"
|
|
40
40
|
})(["list-style-type:none;margin:0;padding:0;overflow:hidden;&:not(:first-child){border-top:1px solid var(--color-theme-400);}"]);
|
|
41
41
|
export var StyledHeading = styled.p.withConfig({
|
|
42
|
-
displayName: "
|
|
43
|
-
componentId: "sc-
|
|
42
|
+
displayName: "CommandPalettestyles__StyledHeading",
|
|
43
|
+
componentId: "sc-na3mad-9"
|
|
44
44
|
})(["font-size:12px;margin-top:12px;margin-bottom:4px;font-weight:bold;padding-left:18px;letter-spacing:0.5px;color:var(--color-theme-600);"]);
|
|
45
45
|
|
|
46
46
|
// prettier-ignore
|
|
47
|
-
export var
|
|
48
|
-
displayName: "
|
|
49
|
-
componentId: "sc-
|
|
47
|
+
export var StyledCommandPaletteItem = styled.li.withConfig({
|
|
48
|
+
displayName: "CommandPalettestyles__StyledCommandPaletteItem",
|
|
49
|
+
componentId: "sc-na3mad-10"
|
|
50
50
|
})(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;background-color:", ";&:focus{background-color:var(--color-theme-200);}&::before{display:", ";background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}&:focus{outline:none;}"], function (_ref) {
|
|
51
51
|
var $selected = _ref.$selected;
|
|
52
52
|
return $selected ? "var(--color-theme-200)" : "transparent";
|
|
@@ -54,12 +54,12 @@ export var StyledCommandPalleteItem = styled.li.withConfig({
|
|
|
54
54
|
var $selected = _ref2.$selected;
|
|
55
55
|
return $selected ? "block" : "none";
|
|
56
56
|
});
|
|
57
|
-
export var
|
|
58
|
-
displayName: "
|
|
59
|
-
componentId: "sc-
|
|
57
|
+
export var StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem).withConfig({
|
|
58
|
+
displayName: "CommandPalettestyles__StyledCommandPaletteCommandItem",
|
|
59
|
+
componentId: "sc-na3mad-11"
|
|
60
60
|
})(["user-select:none;"]);
|
|
61
61
|
export var StyledSpinnerLoader = styled(SpinnerLoader).withConfig({
|
|
62
|
-
displayName: "
|
|
63
|
-
componentId: "sc-
|
|
62
|
+
displayName: "CommandPalettestyles__StyledSpinnerLoader",
|
|
63
|
+
componentId: "sc-na3mad-12"
|
|
64
64
|
})(["margin-right:4px;"]);
|
|
65
|
-
//# sourceMappingURL=
|
|
65
|
+
//# sourceMappingURL=CommandPalette.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"CommandPalette.styles.js","names":["styled","FontStyle","screen","SpinnerLoader","StyledCommandPalette","div","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","li","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader"],"sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPalette = styled.div`\n ${FontStyle}\n background-color: var(--page-paper-main);\n border-radius: 10px;\n box-sizing: border-box;\n max-width: 600px;\n\n mark {\n background-color: var(--color-primary-300);\n color: var(--color-theme-900);\n }\n`;\n\nexport const StyledCommandPaletteWrapper = styled.div`\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 450px;\n\n &:not(:empty) {\n padding-bottom: 8px;\n padding-top: 8px;\n }\n`;\n\nexport const StyledCommandPaletteHeader = styled.div`\n align-items: center;\n display: flex;\n padding-bottom: 12px;\n padding-left: 16px;\n padding-right: 16px;\n padding-top: 12px;\n border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledInput = styled.input`\n all: unset;\n caret-color: var(--color-primary);\n color: var(--color-theme-900);\n width: 100%;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n ::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ::selection {\n background: var(--color-primary-300);\n }\n`;\n\nexport const StyledParameter = styled.span`\n color: var(--color-theme-transparent-500);\n margin-right: 8px;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n`;\n\nexport const StyledActionWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledCommandPaletteList = styled.ul`\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &:not(:first-child) {\n border-top: 1px solid var(--color-theme-400);\n }\n`;\n\nexport const StyledHeading = styled.p`\n font-size: 12px;\n margin-top: 12px;\n margin-bottom: 4px;\n font-weight: bold;\n padding-left: 18px;\n letter-spacing: 0.5px;\n color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPaletteItem = styled.li<{$selected: boolean}>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n position: relative;\n background-color: ${({$selected}) => $selected ? \"var(--color-theme-200)\" : \"transparent\"};\n\n &:focus {\n background-color: var(--color-theme-200);\n }\n\n &::before {\n display: ${({$selected}) => $selected ? \"block\" : \"none\"};\n background-color: var(--color-primary);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 2px;\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem)`\n user-select: none;\n`;\n\nexport const StyledSpinnerLoader = styled(SpinnerLoader)`\n margin-right: 4px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,YAAY;AAE1C,OAAO,IAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,4LAC1CJ,SAAS,CAUZ;AAED,OAAO,IAAMK,2BAA2B,GAAGN,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,6GASpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAED,OAAO,IAAMG,gBAAgB,GAAGR,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGT,MAAM,CAACU,KAAK;EAAA;EAAA;AAAA,wZAMnCR,MAAM,CAACS,EAAE,CAwBZ;AAED,OAAO,IAAMC,eAAe,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,8IAItCX,MAAM,CAACS,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGd,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGf,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGhB,MAAM,CAACiB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGlB,MAAM,CAACmB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGpB,MAAM,CAACqB,EAAE;EAAA;EAAA;AAAA,2WAS3B;EAAA,IAAEC,SAAS,QAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5E;EAAA,IAAEA,SAAS,SAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAED,OAAO,IAAMC,+BAA+B,GAAGvB,MAAM,CAACoB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAED,OAAO,IAAMI,mBAAmB,GAAGxB,MAAM,CAACG,aAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
2
|
+
export interface CommandPaletteCommandItemProps extends ComponentPropsWithoutRef<"li"> {
|
|
3
|
+
title: string;
|
|
4
|
+
renderIcon: () => ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
index?: number;
|
|
7
|
+
selected?: number;
|
|
8
|
+
}
|
|
9
|
+
export declare const CommandPaletteCommandItem: React.ForwardRefExoticComponent<CommandPaletteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
10
|
+
//# sourceMappingURL=CommandPaletteCommandItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"CommandPaletteCommandItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAExB,SAAS,EAEV,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,8BACf,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,sGA4CrC,CAAC"}
|
|
@@ -6,9 +6,9 @@ import classNames from "classnames";
|
|
|
6
6
|
import React, { forwardRef } from "react";
|
|
7
7
|
import { ArrowRightIcon } from "../Icons";
|
|
8
8
|
import { Typography } from "../Typography/Typography";
|
|
9
|
-
import {
|
|
9
|
+
import { StyledCommandPaletteCommandItem, StyledIcon } from "./CommandPalette.styles";
|
|
10
10
|
import { useSelectedContext } from "./context";
|
|
11
|
-
export var
|
|
11
|
+
export var CommandPaletteCommandItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
12
12
|
var title = _ref.title,
|
|
13
13
|
renderIcon = _ref.renderIcon,
|
|
14
14
|
className = _ref.className,
|
|
@@ -21,7 +21,7 @@ export var CommandPalleteCommandItem = /*#__PURE__*/forwardRef(function (_ref, r
|
|
|
21
21
|
var onMouseEnter = function onMouseEnter() {
|
|
22
22
|
setSelected(index);
|
|
23
23
|
};
|
|
24
|
-
return /*#__PURE__*/React.createElement(
|
|
24
|
+
return /*#__PURE__*/React.createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
|
|
25
25
|
ref: ref,
|
|
26
26
|
className: classNames("cp-item cp-command", className),
|
|
27
27
|
tabIndex: 1,
|
|
@@ -35,9 +35,9 @@ export var CommandPalleteCommandItem = /*#__PURE__*/forwardRef(function (_ref, r
|
|
|
35
35
|
color: "primary"
|
|
36
36
|
}, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null));
|
|
37
37
|
});
|
|
38
|
-
|
|
38
|
+
CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
|
|
39
39
|
var _StyledTypography = _styled(Typography).withConfig({
|
|
40
|
-
displayName: "
|
|
41
|
-
componentId: "sc-
|
|
40
|
+
displayName: "CommandPaletteCommandItem___StyledTypography",
|
|
41
|
+
componentId: "sc-1t486ve-0"
|
|
42
42
|
})(["flex:1;"]);
|
|
43
|
-
//# sourceMappingURL=
|
|
43
|
+
//# sourceMappingURL=CommandPaletteCommandItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"CommandPaletteCommandItem.js","names":["classNames","React","forwardRef","ArrowRightIcon","Typography","StyledCommandPaletteCommandItem","StyledIcon","useSelectedContext","CommandPaletteCommandItem","ref","title","renderIcon","className","index","rest","icon","selected","setSelected","onMouseEnter","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n Ref,\n} from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n StyledCommandPaletteCommandItem,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPaletteCommandItemProps\n extends ComponentPropsWithoutRef<\"li\"> {\n title: string;\n renderIcon: () => ReactNode;\n className?: string;\n index?: number;\n selected?: number;\n}\n\nexport const CommandPaletteCommandItem = forwardRef(\n (\n {\n title,\n renderIcon,\n className,\n index,\n ...rest\n }: CommandPaletteCommandItemProps,\n ref: Ref<HTMLLIElement>\n ) => {\n const icon = renderIcon();\n const { selected, setSelected } = useSelectedContext();\n\n const onMouseEnter = () => {\n setSelected(index as number);\n };\n\n return (\n <StyledCommandPaletteCommandItem\n {...rest}\n ref={ref}\n className={classNames(\"cp-item cp-command\", className)}\n tabIndex={1}\n aria-selected={selected === index}\n onMouseEnter={onMouseEnter}\n $selected={index === selected}\n >\n <StyledIcon>{icon}</StyledIcon>\n <Typography\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant=\"Body 1\"\n color=\"primary\"\n css={`\n flex: 1;\n `}\n >\n {title}\n </Typography>\n <ArrowRightIcon />\n </StyledCommandPaletteCommandItem>\n );\n }\n);\n\nCommandPaletteCommandItem.displayName = \"CommandPaletteCommandItem\";\n"],"mappings":";;;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAEVC,UAAU,QAGL,OAAO;AACd,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SACEC,+BAA+B,EAC/BC,UAAU,QACL,yBAAyB;AAChC,SAASC,kBAAkB,QAAQ,WAAW;AAW9C,OAAO,IAAMC,yBAAyB,gBAAGN,UAAU,CACjD,gBAQEO,GAAuB,EACpB;EAAA,IAPDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,IAAI;EAIT,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkCJ,kBAAkB,EAAE;IAA9CS,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBD,WAAW,CAACJ,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,oBAAC,+BAA+B,eAC1BC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAET,UAAU,CAAC,oBAAoB,EAAEY,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeI,QAAQ,KAAKH,KAAM;IAClC,YAAY,EAAEK,YAAa;IAC3B,SAAS,EAAEL,KAAK,KAAKG;EAAS,iBAE9B,oBAAC,UAAU,QAAED,IAAI,CAAc,eAC/B;IACE,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAKdL,KAAK,CACK,eACb,oBAAC,cAAc,OAAG,CACc;AAEtC,CAAC,CACF;AAEDF,yBAAyB,CAACW,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { ChangeEvent } from "react";
|
|
2
|
-
export interface
|
|
2
|
+
export interface CommandPaletteHeaderProps {
|
|
3
3
|
handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
4
4
|
loading?: boolean;
|
|
5
5
|
commandsLength: number;
|
|
6
6
|
itemsLength: number;
|
|
7
7
|
}
|
|
8
|
-
export declare const
|
|
9
|
-
({ handleChange, loading, commandsLength, itemsLength, }:
|
|
8
|
+
export declare const CommandPaletteHeader: {
|
|
9
|
+
({ handleChange, loading, commandsLength, itemsLength, }: CommandPaletteHeaderProps): JSX.Element;
|
|
10
10
|
displayName: string;
|
|
11
11
|
};
|
|
12
|
-
//# sourceMappingURL=
|
|
12
|
+
//# sourceMappingURL=CommandPaletteHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandPaletteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAoC,MAAM,OAAO,CAAC;AAoB7E,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;8DAK9B,yBAAyB;;CA+J3B,CAAC"}
|
|
@@ -2,12 +2,12 @@ import React, { useEffect, useRef } from "react";
|
|
|
2
2
|
import { IconButton } from "../IconButton";
|
|
3
3
|
import { CloseIcon, HashtagIcon, SearchLargeIcon } from "../Icons";
|
|
4
4
|
import { Tooltip } from "../Tooltip";
|
|
5
|
-
import { StyledActionWrapper,
|
|
5
|
+
import { StyledActionWrapper, StyledCommandPaletteHeader, StyledInput, StyledParameter, StyledSearchIcon, StyledSpinnerLoader } from "./CommandPalette.styles";
|
|
6
6
|
import { useSelectedContext } from "./context";
|
|
7
7
|
import { useModeContext } from "./context/ModeContext";
|
|
8
8
|
import { useSearchContext } from "./context/SearchContext";
|
|
9
9
|
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
|
|
10
|
-
export var
|
|
10
|
+
export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
|
|
11
11
|
var handleChange = _ref.handleChange,
|
|
12
12
|
_ref$loading = _ref.loading,
|
|
13
13
|
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
@@ -46,7 +46,7 @@ export var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
}, [search, commandsLength, itemsLength, setSelected]);
|
|
49
|
-
return /*#__PURE__*/React.createElement(
|
|
49
|
+
return /*#__PURE__*/React.createElement(StyledCommandPaletteHeader, {
|
|
50
50
|
className: "cp-header"
|
|
51
51
|
}, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, /*#__PURE__*/React.createElement(StyledInput, {
|
|
52
52
|
ref: inputRef,
|
|
@@ -131,5 +131,5 @@ export var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
|
|
|
131
131
|
}
|
|
132
132
|
}, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
|
|
133
133
|
};
|
|
134
|
-
|
|
135
|
-
//# sourceMappingURL=
|
|
134
|
+
CommandPaletteHeader.displayName = "CommandPaletteItem";
|
|
135
|
+
//# sourceMappingURL=CommandPaletteHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalleteHeader.js","names":["React","useEffect","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","useSearchContext","isChrome","test","navigator","userAgent","vendor","CommandPalleteHeader","handleChange","loading","commandsLength","itemsLength","inputRef","mode","setMode","setSelected","selected","search","onChangeSearch","focusInput","current","focus","clearInput","checkIfNumber","event","regex","RegExp","key","match","preventDefault","length","e","selectedItem","document","querySelectorAll","click","inputText","target","value","startsWith","pastedText","clipboardData","getData","slice","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useRef, KeyboardEvent } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n StyledActionWrapper,\n StyledCommandPalleteHeader,\n StyledInput,\n StyledParameter,\n StyledSearchIcon,\n StyledSpinnerLoader,\n} from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nconst isChrome =\n /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);\n\nexport interface CommandPalleteHeaderProps {\n handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n loading?: boolean;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPalleteHeader = ({\n handleChange,\n loading = false,\n commandsLength,\n itemsLength,\n}: CommandPalleteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode } = useModeContext();\n const { setSelected, selected } = useSelectedContext();\n const { search, onChangeSearch } = useSearchContext();\n\n const focusInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearInput = () => {\n if (inputRef && inputRef.current) {\n onChangeSearch(\"\");\n }\n };\n\n const checkIfNumber = (event: KeyboardEvent<HTMLInputElement>) => {\n const regex = new RegExp(\n /(^\\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/\n );\n\n return !event.key.match(regex) && event.preventDefault();\n };\n\n useEffect(() => {\n if (search.length > 0) {\n if (itemsLength > commandsLength) {\n setSelected(commandsLength);\n } else {\n setSelected(0);\n }\n }\n }, [search, commandsLength, itemsLength, setSelected]);\n\n return (\n <StyledCommandPalleteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n type={mode === \"id\" ? \"number\" : \"text\"}\n aria-autocomplete=\"list\"\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n role=\"combobox\"\n spellCheck={false}\n value={search}\n onKeyDown={(e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n search.length === 0\n ) {\n setMode(\"default\");\n }\n\n if (mode === \"id\" && !isChrome) {\n checkIfNumber(e);\n }\n\n if (e.key === \"Enter\") {\n const selectedItem = document.querySelectorAll(\".cp-item\")[\n selected\n ] as HTMLElement;\n\n if (itemsLength > 0) {\n selectedItem.click();\n }\n }\n }}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (inputText.startsWith(\"#\")) {\n setMode(\"id\");\n clearInput();\n }\n\n handleChange(e);\n }}\n onPaste={(e) => {\n const pastedText = e.clipboardData.getData(\"text\");\n\n if (pastedText.startsWith(\"#\")) {\n setMode(\"id\");\n !isChrome && onChangeSearch(pastedText.slice(1));\n }\n }}\n />\n\n <StyledActionWrapper>\n {loading ? (\n <StyledSpinnerLoader\n aria-busy={true}\n aria-label=\"Loading...\"\n aria-valuemax={100}\n aria-valuemin={0}\n role=\"progressbar\"\n />\n ) : null}\n\n {mode !== \"id\" && search.length === 0 ? (\n <Tooltip title=\"Search by ID\" placement=\"top\">\n <IconButton\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"id\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"id\");\n clearInput();\n focusInput();\n }}\n variant=\"text gray\"\n >\n <HashtagIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n\n {search.length > 0 || mode === \"id\" ? (\n <Tooltip\n title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n placement=\"top\"\n >\n <IconButton\n variant=\"text gray\"\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"default\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"default\");\n clearInput();\n focusInput();\n }}\n >\n <CloseIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n </StyledActionWrapper>\n </StyledCommandPalleteHeader>\n );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CommandPaletteHeader.js","names":["React","useEffect","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPaletteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","useSearchContext","isChrome","test","navigator","userAgent","vendor","CommandPaletteHeader","handleChange","loading","commandsLength","itemsLength","inputRef","mode","setMode","setSelected","selected","search","onChangeSearch","focusInput","current","focus","clearInput","checkIfNumber","event","regex","RegExp","key","match","preventDefault","length","e","selectedItem","document","querySelectorAll","click","inputText","target","value","startsWith","pastedText","clipboardData","getData","slice","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useRef, KeyboardEvent } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n StyledActionWrapper,\n StyledCommandPaletteHeader,\n StyledInput,\n StyledParameter,\n StyledSearchIcon,\n StyledSpinnerLoader,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nconst isChrome =\n /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);\n\nexport interface CommandPaletteHeaderProps {\n handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n loading?: boolean;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n handleChange,\n loading = false,\n commandsLength,\n itemsLength,\n}: CommandPaletteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode } = useModeContext();\n const { setSelected, selected } = useSelectedContext();\n const { search, onChangeSearch } = useSearchContext();\n\n const focusInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearInput = () => {\n if (inputRef && inputRef.current) {\n onChangeSearch(\"\");\n }\n };\n\n const checkIfNumber = (event: KeyboardEvent<HTMLInputElement>) => {\n const regex = new RegExp(\n /(^\\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/\n );\n\n return !event.key.match(regex) && event.preventDefault();\n };\n\n useEffect(() => {\n if (search.length > 0) {\n if (itemsLength > commandsLength) {\n setSelected(commandsLength);\n } else {\n setSelected(0);\n }\n }\n }, [search, commandsLength, itemsLength, setSelected]);\n\n return (\n <StyledCommandPaletteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n type={mode === \"id\" ? \"number\" : \"text\"}\n aria-autocomplete=\"list\"\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n role=\"combobox\"\n spellCheck={false}\n value={search}\n onKeyDown={(e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n search.length === 0\n ) {\n setMode(\"default\");\n }\n\n if (mode === \"id\" && !isChrome) {\n checkIfNumber(e);\n }\n\n if (e.key === \"Enter\") {\n const selectedItem = document.querySelectorAll(\".cp-item\")[\n selected\n ] as HTMLElement;\n\n if (itemsLength > 0) {\n selectedItem.click();\n }\n }\n }}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (inputText.startsWith(\"#\")) {\n setMode(\"id\");\n clearInput();\n }\n\n handleChange(e);\n }}\n onPaste={(e) => {\n const pastedText = e.clipboardData.getData(\"text\");\n\n if (pastedText.startsWith(\"#\")) {\n setMode(\"id\");\n !isChrome && onChangeSearch(pastedText.slice(1));\n }\n }}\n />\n\n <StyledActionWrapper>\n {loading ? (\n <StyledSpinnerLoader\n aria-busy={true}\n aria-label=\"Loading...\"\n aria-valuemax={100}\n aria-valuemin={0}\n role=\"progressbar\"\n />\n ) : null}\n\n {mode !== \"id\" && search.length === 0 ? (\n <Tooltip title=\"Search by ID\" placement=\"top\">\n <IconButton\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"id\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"id\");\n clearInput();\n focusInput();\n }}\n variant=\"text gray\"\n >\n <HashtagIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n\n {search.length > 0 || mode === \"id\" ? (\n <Tooltip\n title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n placement=\"top\"\n >\n <IconButton\n variant=\"text gray\"\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"default\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"default\");\n clearInput();\n focusInput();\n }}\n >\n <CloseIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n </StyledActionWrapper>\n </StyledCommandPaletteHeader>\n );\n};\n\nCommandPaletteHeader.displayName = \"CommandPaletteItem\";\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
2
|
+
export interface CommandPaletteItemProps extends ComponentPropsWithoutRef<"li"> {
|
|
3
|
+
title?: string;
|
|
4
|
+
renderIcon?: () => ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
index?: number;
|
|
7
|
+
selected?: number;
|
|
8
|
+
}
|
|
9
|
+
export declare const CommandPaletteItem: React.ForwardRefExoticComponent<CommandPaletteItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
10
|
+
//# sourceMappingURL=CommandPaletteItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAExB,SAAS,EAEV,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,uBACf,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,+FAsC9B,CAAC"}
|
|
@@ -3,12 +3,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
3
3
|
var _excluded = ["title", "renderIcon", "className", "index"];
|
|
4
4
|
import classNames from "classnames";
|
|
5
5
|
import React, { forwardRef } from "react";
|
|
6
|
-
import {
|
|
6
|
+
import { findHighlightedSearch } from "../../utils/findHighlightedSearch";
|
|
7
7
|
import { Typography } from "../Typography/Typography";
|
|
8
|
-
import {
|
|
8
|
+
import { StyledCommandPaletteItem, StyledIcon } from "./CommandPalette.styles";
|
|
9
9
|
import { useSelectedContext } from "./context";
|
|
10
10
|
import { useSearchContext } from "./context/SearchContext";
|
|
11
|
-
export var
|
|
11
|
+
export var CommandPaletteItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
12
12
|
var title = _ref.title,
|
|
13
13
|
renderIcon = _ref.renderIcon,
|
|
14
14
|
className = _ref.className,
|
|
@@ -23,7 +23,7 @@ export var CommandPalleteItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
23
23
|
var onMouseEnter = function onMouseEnter() {
|
|
24
24
|
setSelected(index);
|
|
25
25
|
};
|
|
26
|
-
return /*#__PURE__*/React.createElement(
|
|
26
|
+
return /*#__PURE__*/React.createElement(StyledCommandPaletteItem, _extends({}, rest, {
|
|
27
27
|
ref: ref,
|
|
28
28
|
className: classNames("cp-item", className),
|
|
29
29
|
tabIndex: 1,
|
|
@@ -36,9 +36,9 @@ export var CommandPalleteItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
36
36
|
variant: "Body 1",
|
|
37
37
|
color: "primary",
|
|
38
38
|
dangerouslySetInnerHTML: {
|
|
39
|
-
__html:
|
|
39
|
+
__html: findHighlightedSearch(search, title)
|
|
40
40
|
}
|
|
41
41
|
}) : null);
|
|
42
42
|
});
|
|
43
|
-
|
|
44
|
-
//# sourceMappingURL=
|
|
43
|
+
CommandPaletteItem.displayName = "CommandPaletteItem";
|
|
44
|
+
//# sourceMappingURL=CommandPaletteItem.js.map
|