@activecollab/components 1.0.301 → 1.0.303
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/CommandPalette/CommandPaletteCommandItem.js +4 -1
- package/dist/cjs/components/CommandPalette/CommandPaletteCommandItem.js.map +1 -1
- package/dist/cjs/components/CommandPalette/CommandPaletteItem.js +4 -1
- package/dist/cjs/components/CommandPalette/CommandPaletteItem.js.map +1 -1
- package/dist/cjs/components/IconButton/Styles.js +1 -1
- package/dist/cjs/components/IconButton/Styles.js.map +1 -1
- package/dist/esm/components/CommandPalette/CommandPalette.d.ts +6 -3
- package/dist/esm/components/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts +7 -2
- package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts.map +1 -1
- package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.js +4 -1
- package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.js.map +1 -1
- package/dist/esm/components/CommandPalette/CommandPaletteItem.d.ts +7 -2
- package/dist/esm/components/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/esm/components/CommandPalette/CommandPaletteItem.js +4 -1
- package/dist/esm/components/CommandPalette/CommandPaletteItem.js.map +1 -1
- package/dist/esm/components/IconButton/Styles.d.ts.map +1 -1
- package/dist/esm/components/IconButton/Styles.js +1 -1
- package/dist/esm/components/IconButton/Styles.js.map +1 -1
- package/dist/index.js +9 -3
- 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
|
@@ -12,7 +12,7 @@ var _Icons = require("../Icons");
|
|
|
12
12
|
var _Typography = require("../Typography/Typography");
|
|
13
13
|
var _CommandPalette = require("./CommandPalette.styles");
|
|
14
14
|
var _context = require("./context");
|
|
15
|
-
var _excluded = ["title", "renderIcon", "className", "index"];
|
|
15
|
+
var _excluded = ["title", "renderIcon", "className", "index", "as"];
|
|
16
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -24,7 +24,9 @@ var CommandPaletteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
|
|
|
24
24
|
renderIcon = _ref.renderIcon,
|
|
25
25
|
className = _ref.className,
|
|
26
26
|
index = _ref.index,
|
|
27
|
+
as = _ref.as,
|
|
27
28
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
29
|
+
var Component = as || "a";
|
|
28
30
|
var icon = renderIcon();
|
|
29
31
|
var _useSelectedContext = (0, _context.useSelectedContext)(),
|
|
30
32
|
selected = _useSelectedContext.selected,
|
|
@@ -33,6 +35,7 @@ var CommandPaletteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
|
|
|
33
35
|
setSelected(index);
|
|
34
36
|
};
|
|
35
37
|
return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteCommandItem, _extends({}, rest, {
|
|
38
|
+
as: Component,
|
|
36
39
|
ref: ref,
|
|
37
40
|
className: (0, _classnames.default)("cp-item cp-command", className),
|
|
38
41
|
tabIndex: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteCommandItem.js","names":["CommandPaletteCommandItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseEnter","classNames","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { forwardRef,
|
|
1
|
+
{"version":3,"file":"CommandPaletteCommandItem.js","names":["CommandPaletteCommandItem","forwardRef","ref","title","renderIcon","className","index","as","rest","Component","icon","useSelectedContext","selected","setSelected","onMouseEnter","classNames","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { ElementType, forwardRef, ReactElement, ReactNode } from \"react\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n StyledCommandPaletteCommandItem,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteItemProps } from \"./CommandPaletteItem\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPaletteCommandItemProps\n extends CommandPaletteItemProps {\n title: string;\n renderIcon: () => ReactNode;\n}\n\nexport type PolymorphicCommandPaletteCommandItemProps<C extends ElementType> =\n PolymorphicComponentPropsWithRef<C, CommandPaletteCommandItemProps>;\n\nexport type CommandPaletteComponent = <\n C extends ElementType = typeof CommandPaletteCommandItem\n>(\n props: PolymorphicCommandPaletteCommandItemProps<C>\n) => ReactElement | null;\n\nexport const CommandPaletteCommandItem: CommandPaletteComponent & {\n displayName?: string;\n} = forwardRef(\n <C extends ElementType = typeof CommandPaletteCommandItem>(\n {\n title,\n renderIcon,\n className,\n index,\n as,\n ...rest\n }: PolymorphicCommandPaletteCommandItemProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n const icon = renderIcon();\n const { selected, setSelected } = useSelectedContext();\n\n const onMouseEnter = () => {\n setSelected(index as number);\n };\n\n return (\n <li>\n <StyledCommandPaletteCommandItem\n {...rest}\n as={Component}\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 </li>\n );\n }\n);\n\nCommandPaletteCommandItem.displayName = \"CommandPaletteCommandItem\";\n"],"mappings":";;;;;;;;AAAA;AACA;AAKA;AACA;AACA;AAKA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxC,IAAMA,yBAEZ,gBAAG,IAAAC,iBAAU,EACZ,gBASEC,GAAuB,EACpB;EAAA,IARDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,EAAE,QAAFA,EAAE;IACCC,IAAI;EAIT,IAAMC,SAAS,GAAGF,EAAE,IAAI,GAAG;EAC3B,IAAMG,IAAI,GAAGN,UAAU,EAAE;EACzB,0BAAkC,IAAAO,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBD,WAAW,CAACP,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,sDACE,6BAAC,+CAA+B,eAC1BE,IAAI;IACR,EAAE,EAAEC,SAAU;IACd,GAAG,EAAEP,GAAI;IACT,SAAS,EAAE,IAAAa,mBAAU,EAAC,oBAAoB,EAAEV,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeO,QAAQ,KAAKN,KAAM;IAClC,YAAY,EAAEQ,YAAa;IAC3B,SAAS,EAAER,KAAK,KAAKM;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,eAC/B;IACE,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAKdP,KAAK,CACK,eACb,6BAAC,qBAAc,OAAG,CACc,CAC/B;AAET,CAAC,CACF;AAAC;AAEFH,yBAAyB,CAACgB,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}
|
|
@@ -14,7 +14,7 @@ var _Typography = require("../Typography/Typography");
|
|
|
14
14
|
var _CommandPalette = require("./CommandPalette.styles");
|
|
15
15
|
var _context = require("./context");
|
|
16
16
|
var _SearchContext = require("./context/SearchContext");
|
|
17
|
-
var _excluded = ["title", "renderIcon", "className", "index", "loading"];
|
|
17
|
+
var _excluded = ["title", "renderIcon", "className", "index", "loading", "as"];
|
|
18
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
19
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -32,7 +32,9 @@ var CommandPaletteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
|
|
|
32
32
|
className = _ref.className,
|
|
33
33
|
index = _ref.index,
|
|
34
34
|
loading = _ref.loading,
|
|
35
|
+
as = _ref.as,
|
|
35
36
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
37
|
+
var Component = as || "a";
|
|
36
38
|
var icon = renderIcon && renderIcon();
|
|
37
39
|
var _useSelectedContext = (0, _context.useSelectedContext)(),
|
|
38
40
|
selected = _useSelectedContext.selected,
|
|
@@ -51,6 +53,7 @@ var CommandPaletteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
|
|
|
51
53
|
}));
|
|
52
54
|
}
|
|
53
55
|
return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteItem, _extends({}, rest, {
|
|
56
|
+
as: Component,
|
|
54
57
|
ref: ref,
|
|
55
58
|
className: (0, _classnames.default)("cp-item", className),
|
|
56
59
|
tabIndex: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteItem.js","names":["generateRandomWidth","randomNum","Math","round","random","CommandPaletteItem","forwardRef","ref","title","renderIcon","className","index","loading","rest","icon","useSelectedContext","selected","setSelected","useSearchContext","search","onMouseEnter","classNames","__html","findHighlightedSearch","displayName","width","height","borderRadius"],"sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n
|
|
1
|
+
{"version":3,"file":"CommandPaletteItem.js","names":["generateRandomWidth","randomNum","Math","round","random","CommandPaletteItem","forwardRef","ref","title","renderIcon","className","index","loading","as","rest","Component","icon","useSelectedContext","selected","setSelected","useSearchContext","search","onMouseEnter","classNames","__html","findHighlightedSearch","displayName","width","height","borderRadius"],"sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n ReactNode,\n ElementType,\n} from \"react\";\nimport { findHighlightedSearch } from \"../../utils/findHighlightedSearch\";\nimport { LinearLoader } from \"../Loaders\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\nimport {\n StyledCommandPaletteItem,\n StyledCommandPaletteItemLoader,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nconst generateRandomWidth = () => {\n // generate range 30-80\n const randomNum = Math.round(Math.random() * 30 + 30);\n\n return randomNum + \"%\";\n};\n\nexport interface CommandPaletteItemProps extends ComponentPropsWithoutRef<\"a\"> {\n title?: string;\n renderIcon?: () => ReactNode;\n className?: string;\n index?: number;\n selected?: number;\n loading?: boolean;\n}\n\nexport type PolymorphicCommandPaletteItemProps<C extends ElementType> =\n PolymorphicComponentPropsWithRef<C, CommandPaletteItemProps>;\n\nexport type CommandPaletteComponent = <\n C extends ElementType = typeof CommandPaletteItem\n>(\n props: PolymorphicCommandPaletteItemProps<C>\n) => ReactElement | null;\n\nexport const CommandPaletteItem: CommandPaletteComponent & {\n displayName?: string;\n} = forwardRef(\n <C extends ElementType = typeof CommandPaletteItem>(\n {\n title,\n renderIcon,\n className,\n index,\n loading,\n as,\n ...rest\n }: PolymorphicCommandPaletteItemProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n const icon = renderIcon && renderIcon();\n const { selected, setSelected } = useSelectedContext();\n const { search } = useSearchContext();\n\n const onMouseEnter = () => {\n setSelected(index as number);\n };\n\n if (loading) {\n return (\n <StyledCommandPaletteItemLoader aria-busy={true} aria-disabled={true}>\n <LinearLoader css={{ width: 24, height: 24, borderRadius: \"100%\" }} />\n <LinearLoader css={{ width: generateRandomWidth(), height: 16 }} />\n </StyledCommandPaletteItemLoader>\n );\n }\n\n return (\n <li>\n <StyledCommandPaletteItem\n {...rest}\n as={Component}\n ref={ref}\n className={classNames(\"cp-item\", className)}\n tabIndex={1}\n aria-selected={selected === index}\n onMouseEnter={onMouseEnter}\n $selected={index === selected}\n >\n <StyledIcon>{icon}</StyledIcon>\n {search && title ? (\n <Typography\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant=\"Body 1\"\n color=\"primary\"\n dangerouslySetInnerHTML={{\n __html: findHighlightedSearch(search, title),\n }}\n />\n ) : null}\n </StyledCommandPaletteItem>\n </li>\n );\n }\n);\n\nCommandPaletteItem.displayName = \"CommandPaletteItem\";\n"],"mappings":";;;;;;;;AAAA;AACA;AAOA;AACA;AACA;AAKA;AAKA;AACA;AAA2D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3D,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EAChC;EACA,IAAMC,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;EAErD,OAAOH,SAAS,GAAG,GAAG;AACxB,CAAC;AAoBM,IAAMI,kBAEZ,gBAAG,IAAAC,iBAAU,EACZ,gBAUEC,GAAuB,EACpB;EAAA,IATDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,EAAE,QAAFA,EAAE;IACCC,IAAI;EAIT,IAAMC,SAAS,GAAGF,EAAE,IAAI,GAAG;EAC3B,IAAMG,IAAI,GAAGP,UAAU,IAAIA,UAAU,EAAE;EACvC,0BAAkC,IAAAQ,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAC7B,wBAAmB,IAAAC,+BAAgB,GAAE;IAA7BC,MAAM,qBAANA,MAAM;EAEd,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBH,WAAW,CAACR,KAAK,CAAW;EAC9B,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,oBACE,6BAAC,8CAA8B;MAAC,aAAW,IAAK;MAAC,iBAAe;IAAK,gBACnE,uDAAsE,eACtE;MAAA,OAA4BZ,mBAAmB;IAAE,EAAkB,CACpC;EAErC;EAEA,oBACE,sDACE,6BAAC,wCAAwB,eACnBc,IAAI;IACR,EAAE,EAAEC,SAAU;IACd,GAAG,EAAER,GAAI;IACT,SAAS,EAAE,IAAAgB,mBAAU,EAAC,SAAS,EAAEb,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeQ,QAAQ,KAAKP,KAAM;IAClC,YAAY,EAAEW,YAAa;IAC3B,SAAS,EAAEX,KAAK,KAAKO;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,EAC9BK,MAAM,IAAIb,KAAK,gBACd,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC,SAAS;IACf,uBAAuB,EAAE;MACvBgB,MAAM,EAAE,IAAAC,4CAAqB,EAACJ,MAAM,EAAEb,KAAK;IAC7C;EAAE,EACF,GACA,IAAI,CACiB,CACxB;AAET,CAAC,CACF;AAAC;AAEFH,kBAAkB,CAACqB,WAAW,GAAG,oBAAoB;AAAC;EAAA;EAAA;AAAA,GApCzB;EAAEC,KAAK,EAAE,EAAE;EAAEC,MAAM,EAAE,EAAE;EAAEC,YAAY,EAAE;AAAO,CAAC;AAAA;EAAA;EAAA;AAAA;EAAA,OAC/C;IAAEF,KAAK;IAAyBC,MAAM,EAAE;EAAG,CAAC;AAAA"}
|
|
@@ -14,7 +14,7 @@ var StyledIconButton = (0, _styledComponents.default)(_Button.Button).withConfig
|
|
|
14
14
|
componentId: "sc-1teza2f-0"
|
|
15
15
|
})(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", " ", ""], function (_ref) {
|
|
16
16
|
var size = _ref.size;
|
|
17
|
-
return size === "small" && (0, _styledComponents.css)(["width:24px;"]);
|
|
17
|
+
return size === "small" && (0, _styledComponents.css)(["width:24px;svg{width:18px;height:18px;}"]);
|
|
18
18
|
}, function (_ref2) {
|
|
19
19
|
var size = _ref2.size;
|
|
20
20
|
return size === "big" && (0, _styledComponents.css)(["width:40px;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledIconButton","styled","Button","size","css"],"sources":["../../../../src/components/IconButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../Button\";\n\nexport const StyledIconButton = styled(Button)`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${({ size }) =>\n size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${({ size }) =>\n size === \"big\" &&\n css`\n width: 40px;\n `}\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAAmC;AAAA;AAE5B,IAAMA,gBAAgB,GAAG,IAAAC,yBAAM,EAACC,cAAM,CAAC;EAAA;EAAA;AAAA,qGAO1C;EAAA,IAAGC,IAAI,QAAJA,IAAI;EAAA,OACPA,IAAI,KAAK,OAAO,QAChBC,qBAAG,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledIconButton","styled","Button","size","css"],"sources":["../../../../src/components/IconButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../Button\";\n\nexport const StyledIconButton = styled(Button)`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${({ size }) =>\n size === \"small\" &&\n css`\n width: 24px;\n svg {\n width: 18px;\n height: 18px;\n }\n `}\n\n ${({ size }) =>\n size === \"big\" &&\n css`\n width: 40px;\n `}\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAAmC;AAAA;AAE5B,IAAMA,gBAAgB,GAAG,IAAAC,yBAAM,EAACC,cAAM,CAAC;EAAA;EAAA;AAAA,qGAO1C;EAAA,IAAGC,IAAI,QAAJA,IAAI;EAAA,OACPA,IAAI,KAAK,OAAO,QAChBC,qBAAG,8CAMF;AAAA,GAED;EAAA,IAAGD,IAAI,SAAJA,IAAI;EAAA,OACPA,IAAI,KAAK,KAAK,QACdC,qBAAG,kBAEF;AAAA,EACJ;AAAC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { DialogProps } from "../Dialog";
|
|
3
|
-
import { CommandPaletteItemProps } from "./CommandPaletteItem";
|
|
4
3
|
export interface SearchContext {
|
|
5
4
|
name: string;
|
|
6
5
|
class: string;
|
|
@@ -23,7 +22,11 @@ export declare const CommandPalette: React.ForwardRefExoticComponent<CommandPale
|
|
|
23
22
|
({ children, heading, visible, }: React.PropsWithChildren<import("./CommandPaletteList").CommandPaletteListProps>): JSX.Element | null;
|
|
24
23
|
displayName: string;
|
|
25
24
|
};
|
|
26
|
-
Item:
|
|
27
|
-
|
|
25
|
+
Item: import("./CommandPaletteItem").CommandPaletteComponent & {
|
|
26
|
+
displayName?: string | undefined;
|
|
27
|
+
};
|
|
28
|
+
CommandItem: import("./CommandPaletteCommandItem").CommandPaletteComponent & {
|
|
29
|
+
displayName?: string | undefined;
|
|
30
|
+
};
|
|
28
31
|
};
|
|
29
32
|
//# sourceMappingURL=CommandPalette.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAqBhD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC;IAC7B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe;;wCA6J3B,CAAC;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAIzB,CAAC"}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ElementType, ReactElement, ReactNode } from "react";
|
|
2
|
+
import { PolymorphicComponentPropsWithRef } from "../../utils/types";
|
|
2
3
|
import { CommandPaletteItemProps } from "./CommandPaletteItem";
|
|
3
4
|
export interface CommandPaletteCommandItemProps extends CommandPaletteItemProps {
|
|
4
5
|
title: string;
|
|
5
6
|
renderIcon: () => ReactNode;
|
|
6
7
|
}
|
|
7
|
-
export declare
|
|
8
|
+
export declare type PolymorphicCommandPaletteCommandItemProps<C extends ElementType> = PolymorphicComponentPropsWithRef<C, CommandPaletteCommandItemProps>;
|
|
9
|
+
export declare type CommandPaletteComponent = <C extends ElementType = typeof CommandPaletteCommandItem>(props: PolymorphicCommandPaletteCommandItemProps<C>) => ReactElement | null;
|
|
10
|
+
export declare const CommandPaletteCommandItem: CommandPaletteComponent & {
|
|
11
|
+
displayName?: string;
|
|
12
|
+
};
|
|
8
13
|
//# sourceMappingURL=CommandPaletteCommandItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteCommandItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"names":[],"mappings":"AACA,
|
|
1
|
+
{"version":3,"file":"CommandPaletteCommandItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,WAAW,EAAc,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAO3B,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,8BACf,SAAQ,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,SAAS,CAAC;CAC7B;AAED,oBAAY,yCAAyC,CAAC,CAAC,SAAS,WAAW,IACzE,gCAAgC,CAAC,CAAC,EAAE,8BAA8B,CAAC,CAAC;AAEtE,oBAAY,uBAAuB,GAAG,CACpC,CAAC,SAAS,WAAW,GAAG,OAAO,yBAAyB,EAExD,KAAK,EAAE,yCAAyC,CAAC,CAAC,CAAC,KAChD,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAO,MAAM,yBAAyB,EAAE,uBAAuB,GAAG;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CAkDtB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
import _styled from "styled-components";
|
|
4
|
-
var _excluded = ["title", "renderIcon", "className", "index"];
|
|
4
|
+
var _excluded = ["title", "renderIcon", "className", "index", "as"];
|
|
5
5
|
import classNames from "classnames";
|
|
6
6
|
import React, { forwardRef } from "react";
|
|
7
7
|
import { ArrowRightIcon } from "../Icons";
|
|
@@ -13,7 +13,9 @@ export var CommandPaletteCommandItem = /*#__PURE__*/forwardRef(function (_ref, r
|
|
|
13
13
|
renderIcon = _ref.renderIcon,
|
|
14
14
|
className = _ref.className,
|
|
15
15
|
index = _ref.index,
|
|
16
|
+
as = _ref.as,
|
|
16
17
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
18
|
+
var Component = as || "a";
|
|
17
19
|
var icon = renderIcon();
|
|
18
20
|
var _useSelectedContext = useSelectedContext(),
|
|
19
21
|
selected = _useSelectedContext.selected,
|
|
@@ -22,6 +24,7 @@ export var CommandPaletteCommandItem = /*#__PURE__*/forwardRef(function (_ref, r
|
|
|
22
24
|
setSelected(index);
|
|
23
25
|
};
|
|
24
26
|
return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
|
|
27
|
+
as: Component,
|
|
25
28
|
ref: ref,
|
|
26
29
|
className: classNames("cp-item cp-command", className),
|
|
27
30
|
tabIndex: 1,
|
|
@@ -1 +1 @@
|
|
|
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, { forwardRef,
|
|
1
|
+
{"version":3,"file":"CommandPaletteCommandItem.js","names":["classNames","React","forwardRef","ArrowRightIcon","Typography","StyledCommandPaletteCommandItem","StyledIcon","useSelectedContext","CommandPaletteCommandItem","ref","title","renderIcon","className","index","as","rest","Component","icon","selected","setSelected","onMouseEnter","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { ElementType, forwardRef, ReactElement, ReactNode } from \"react\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n StyledCommandPaletteCommandItem,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteItemProps } from \"./CommandPaletteItem\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPaletteCommandItemProps\n extends CommandPaletteItemProps {\n title: string;\n renderIcon: () => ReactNode;\n}\n\nexport type PolymorphicCommandPaletteCommandItemProps<C extends ElementType> =\n PolymorphicComponentPropsWithRef<C, CommandPaletteCommandItemProps>;\n\nexport type CommandPaletteComponent = <\n C extends ElementType = typeof CommandPaletteCommandItem\n>(\n props: PolymorphicCommandPaletteCommandItemProps<C>\n) => ReactElement | null;\n\nexport const CommandPaletteCommandItem: CommandPaletteComponent & {\n displayName?: string;\n} = forwardRef(\n <C extends ElementType = typeof CommandPaletteCommandItem>(\n {\n title,\n renderIcon,\n className,\n index,\n as,\n ...rest\n }: PolymorphicCommandPaletteCommandItemProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n const icon = renderIcon();\n const { selected, setSelected } = useSelectedContext();\n\n const onMouseEnter = () => {\n setSelected(index as number);\n };\n\n return (\n <li>\n <StyledCommandPaletteCommandItem\n {...rest}\n as={Component}\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 </li>\n );\n }\n);\n\nCommandPaletteCommandItem.displayName = \"CommandPaletteCommandItem\";\n"],"mappings":";;;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAiBC,UAAU,QAAiC,OAAO;AAK/E,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SACEC,+BAA+B,EAC/BC,UAAU,QACL,yBAAyB;AAEhC,SAASC,kBAAkB,QAAQ,WAAW;AAiB9C,OAAO,IAAMC,yBAEZ,gBAAGN,UAAU,CACZ,gBASEO,GAAuB,EACpB;EAAA,IARDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,EAAE,QAAFA,EAAE;IACCC,IAAI;EAIT,IAAMC,SAAS,GAAGF,EAAE,IAAI,GAAG;EAC3B,IAAMG,IAAI,GAAGN,UAAU,EAAE;EACzB,0BAAkCJ,kBAAkB,EAAE;IAA9CW,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBD,WAAW,CAACN,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6CACE,oBAAC,+BAA+B,eAC1BE,IAAI;IACR,EAAE,EAAEC,SAAU;IACd,GAAG,EAAEP,GAAI;IACT,SAAS,EAAET,UAAU,CAAC,oBAAoB,EAAEY,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeM,QAAQ,KAAKL,KAAM;IAClC,YAAY,EAAEO,YAAa;IAC3B,SAAS,EAAEP,KAAK,KAAKK;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,GAKdP,KAAK,CACK,eACb,oBAAC,cAAc,OAAG,CACc,CAC/B;AAET,CAAC,CACF;AAEDF,yBAAyB,CAACa,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactElement, ReactNode, ElementType } from "react";
|
|
2
|
+
import { PolymorphicComponentPropsWithRef } from "../../utils/types";
|
|
2
3
|
export interface CommandPaletteItemProps extends ComponentPropsWithoutRef<"a"> {
|
|
3
4
|
title?: string;
|
|
4
5
|
renderIcon?: () => ReactNode;
|
|
@@ -7,5 +8,9 @@ export interface CommandPaletteItemProps extends ComponentPropsWithoutRef<"a"> {
|
|
|
7
8
|
selected?: number;
|
|
8
9
|
loading?: boolean;
|
|
9
10
|
}
|
|
10
|
-
export declare
|
|
11
|
+
export declare type PolymorphicCommandPaletteItemProps<C extends ElementType> = PolymorphicComponentPropsWithRef<C, CommandPaletteItemProps>;
|
|
12
|
+
export declare type CommandPaletteComponent = <C extends ElementType = typeof CommandPaletteItem>(props: PolymorphicCommandPaletteItemProps<C>) => ReactElement | null;
|
|
13
|
+
export declare const CommandPaletteItem: CommandPaletteComponent & {
|
|
14
|
+
displayName?: string;
|
|
15
|
+
};
|
|
11
16
|
//# sourceMappingURL=CommandPaletteItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AACA,
|
|
1
|
+
{"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,wBAAwB,EAExB,YAAY,EACZ,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAgB3B,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB,CAAC,GAAG,CAAC;IAC5E,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;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,oBAAY,kCAAkC,CAAC,CAAC,SAAS,WAAW,IAClE,gCAAgC,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAAC;AAE/D,oBAAY,uBAAuB,GAAG,CACpC,CAAC,SAAS,WAAW,GAAG,OAAO,kBAAkB,EAEjD,KAAK,EAAE,kCAAkC,CAAC,CAAC,CAAC,KACzC,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,GAAG;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CA4DtB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
import _styled2 from "styled-components";
|
|
4
4
|
import _styled from "styled-components";
|
|
5
|
-
var _excluded = ["title", "renderIcon", "className", "index", "loading"];
|
|
5
|
+
var _excluded = ["title", "renderIcon", "className", "index", "loading", "as"];
|
|
6
6
|
import classNames from "classnames";
|
|
7
7
|
import React, { forwardRef } from "react";
|
|
8
8
|
import { findHighlightedSearch } from "../../utils/findHighlightedSearch";
|
|
@@ -22,7 +22,9 @@ export var CommandPaletteItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
22
22
|
className = _ref.className,
|
|
23
23
|
index = _ref.index,
|
|
24
24
|
loading = _ref.loading,
|
|
25
|
+
as = _ref.as,
|
|
25
26
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
27
|
+
var Component = as || "a";
|
|
26
28
|
var icon = renderIcon && renderIcon();
|
|
27
29
|
var _useSelectedContext = useSelectedContext(),
|
|
28
30
|
selected = _useSelectedContext.selected,
|
|
@@ -41,6 +43,7 @@ export var CommandPaletteItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
41
43
|
}));
|
|
42
44
|
}
|
|
43
45
|
return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteItem, _extends({}, rest, {
|
|
46
|
+
as: Component,
|
|
44
47
|
ref: ref,
|
|
45
48
|
className: classNames("cp-item", className),
|
|
46
49
|
tabIndex: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteItem.js","names":["classNames","React","forwardRef","findHighlightedSearch","LinearLoader","Typography","StyledCommandPaletteItem","StyledCommandPaletteItemLoader","StyledIcon","useSelectedContext","useSearchContext","generateRandomWidth","randomNum","Math","round","random","CommandPaletteItem","ref","title","renderIcon","className","index","loading","rest","icon","selected","setSelected","search","onMouseEnter","__html","displayName","width","height","borderRadius"],"sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n
|
|
1
|
+
{"version":3,"file":"CommandPaletteItem.js","names":["classNames","React","forwardRef","findHighlightedSearch","LinearLoader","Typography","StyledCommandPaletteItem","StyledCommandPaletteItemLoader","StyledIcon","useSelectedContext","useSearchContext","generateRandomWidth","randomNum","Math","round","random","CommandPaletteItem","ref","title","renderIcon","className","index","loading","as","rest","Component","icon","selected","setSelected","search","onMouseEnter","__html","displayName","width","height","borderRadius"],"sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n ReactNode,\n ElementType,\n} from \"react\";\nimport { findHighlightedSearch } from \"../../utils/findHighlightedSearch\";\nimport { LinearLoader } from \"../Loaders\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\nimport {\n StyledCommandPaletteItem,\n StyledCommandPaletteItemLoader,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nconst generateRandomWidth = () => {\n // generate range 30-80\n const randomNum = Math.round(Math.random() * 30 + 30);\n\n return randomNum + \"%\";\n};\n\nexport interface CommandPaletteItemProps extends ComponentPropsWithoutRef<\"a\"> {\n title?: string;\n renderIcon?: () => ReactNode;\n className?: string;\n index?: number;\n selected?: number;\n loading?: boolean;\n}\n\nexport type PolymorphicCommandPaletteItemProps<C extends ElementType> =\n PolymorphicComponentPropsWithRef<C, CommandPaletteItemProps>;\n\nexport type CommandPaletteComponent = <\n C extends ElementType = typeof CommandPaletteItem\n>(\n props: PolymorphicCommandPaletteItemProps<C>\n) => ReactElement | null;\n\nexport const CommandPaletteItem: CommandPaletteComponent & {\n displayName?: string;\n} = forwardRef(\n <C extends ElementType = typeof CommandPaletteItem>(\n {\n title,\n renderIcon,\n className,\n index,\n loading,\n as,\n ...rest\n }: PolymorphicCommandPaletteItemProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n const icon = renderIcon && renderIcon();\n const { selected, setSelected } = useSelectedContext();\n const { search } = useSearchContext();\n\n const onMouseEnter = () => {\n setSelected(index as number);\n };\n\n if (loading) {\n return (\n <StyledCommandPaletteItemLoader aria-busy={true} aria-disabled={true}>\n <LinearLoader css={{ width: 24, height: 24, borderRadius: \"100%\" }} />\n <LinearLoader css={{ width: generateRandomWidth(), height: 16 }} />\n </StyledCommandPaletteItemLoader>\n );\n }\n\n return (\n <li>\n <StyledCommandPaletteItem\n {...rest}\n as={Component}\n ref={ref}\n className={classNames(\"cp-item\", className)}\n tabIndex={1}\n aria-selected={selected === index}\n onMouseEnter={onMouseEnter}\n $selected={index === selected}\n >\n <StyledIcon>{icon}</StyledIcon>\n {search && title ? (\n <Typography\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant=\"Body 1\"\n color=\"primary\"\n dangerouslySetInnerHTML={{\n __html: findHighlightedSearch(search, title),\n }}\n />\n ) : null}\n </StyledCommandPaletteItem>\n </li>\n );\n }\n);\n\nCommandPaletteItem.displayName = \"CommandPaletteItem\";\n"],"mappings":";;;;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAEVC,UAAU,QAIL,OAAO;AACd,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,UAAU,QAAQ,0BAA0B;AAKrD,SACEC,wBAAwB,EACxBC,8BAA8B,EAC9BC,UAAU,QACL,yBAAyB;AAChC,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,SAASC,gBAAgB,QAAQ,yBAAyB;AAE1D,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EAChC;EACA,IAAMC,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;EAErD,OAAOH,SAAS,GAAG,GAAG;AACxB,CAAC;AAoBD,OAAO,IAAMI,kBAEZ,gBAAGd,UAAU,CACZ,gBAUEe,GAAuB,EACpB;EAAA,IATDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,EAAE,QAAFA,EAAE;IACCC,IAAI;EAIT,IAAMC,SAAS,GAAGF,EAAE,IAAI,GAAG;EAC3B,IAAMG,IAAI,GAAGP,UAAU,IAAIA,UAAU,EAAE;EACvC,0BAAkCV,kBAAkB,EAAE;IAA9CkB,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAC7B,wBAAmBlB,gBAAgB,EAAE;IAA7BmB,MAAM,qBAANA,MAAM;EAEd,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBF,WAAW,CAACP,KAAK,CAAW;EAC9B,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,oBACE,oBAAC,8BAA8B;MAAC,aAAW,IAAK;MAAC,iBAAe;IAAK,gBACnE,8CAAsE,eACtE;MAAA,OAA4BX,mBAAmB;IAAE,EAAkB,CACpC;EAErC;EAEA,oBACE,6CACE,oBAAC,wBAAwB,eACnBa,IAAI;IACR,EAAE,EAAEC,SAAU;IACd,GAAG,EAAER,GAAI;IACT,SAAS,EAAEjB,UAAU,CAAC,SAAS,EAAEoB,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeO,QAAQ,KAAKN,KAAM;IAClC,YAAY,EAAES,YAAa;IAC3B,SAAS,EAAET,KAAK,KAAKM;EAAS,iBAE9B,oBAAC,UAAU,QAAED,IAAI,CAAc,EAC9BG,MAAM,IAAIX,KAAK,gBACd,oBAAC,UAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC,SAAS;IACf,uBAAuB,EAAE;MACvBa,MAAM,EAAE5B,qBAAqB,CAAC0B,MAAM,EAAEX,KAAK;IAC7C;EAAE,EACF,GACA,IAAI,CACiB,CACxB;AAET,CAAC,CACF;AAEDF,kBAAkB,CAACgB,WAAW,GAAG,oBAAoB;AAAC;EAAA;EAAA;AAAA,GApCzB;EAAEC,KAAK,EAAE,EAAE;EAAEC,MAAM,EAAE,EAAE;EAAEC,YAAY,EAAE;AAAO,CAAC;AAAA;EAAA;EAAA;AAAA;EAAA,OAC/C;IAAEF,KAAK;IAAyBC,MAAM,EAAE;EAAG,CAAC;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/Styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,gBAAgB;;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/Styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,gBAAgB;;sEAsB5B,CAAC"}
|
|
@@ -5,7 +5,7 @@ export var StyledIconButton = styled(Button).withConfig({
|
|
|
5
5
|
componentId: "sc-1teza2f-0"
|
|
6
6
|
})(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", " ", ""], function (_ref) {
|
|
7
7
|
var size = _ref.size;
|
|
8
|
-
return size === "small" && css(["width:24px;"]);
|
|
8
|
+
return size === "small" && css(["width:24px;svg{width:18px;height:18px;}"]);
|
|
9
9
|
}, function (_ref2) {
|
|
10
10
|
var size = _ref2.size;
|
|
11
11
|
return size === "big" && css(["width:40px;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","Button","StyledIconButton","size"],"sources":["../../../../src/components/IconButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../Button\";\n\nexport const StyledIconButton = styled(Button)`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${({ size }) =>\n size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${({ size }) =>\n size === \"big\" &&\n css`\n width: 40px;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,IAAMC,gBAAgB,GAAGH,MAAM,CAACE,MAAM,CAAC;EAAA;EAAA;AAAA,qGAO1C;EAAA,IAAGE,IAAI,QAAJA,IAAI;EAAA,OACPA,IAAI,KAAK,OAAO,IAChBH,GAAG,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","Button","StyledIconButton","size"],"sources":["../../../../src/components/IconButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../Button\";\n\nexport const StyledIconButton = styled(Button)`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${({ size }) =>\n size === \"small\" &&\n css`\n width: 24px;\n svg {\n width: 18px;\n height: 18px;\n }\n `}\n\n ${({ size }) =>\n size === \"big\" &&\n css`\n width: 40px;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,IAAMC,gBAAgB,GAAGH,MAAM,CAACE,MAAM,CAAC;EAAA;EAAA;AAAA,qGAO1C;EAAA,IAAGE,IAAI,QAAJA,IAAI;EAAA,OACPA,IAAI,KAAK,OAAO,IAChBH,GAAG,6CAMF;AAAA,GAED;EAAA,IAAGG,IAAI,SAAJA,IAAI;EAAA,OACPA,IAAI,KAAK,KAAK,IACdH,GAAG,iBAEF;AAAA,EACJ"}
|
package/dist/index.js
CHANGED
|
@@ -1182,7 +1182,7 @@
|
|
|
1182
1182
|
componentId: "sc-1teza2f-0"
|
|
1183
1183
|
})(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", " ", ""], function (_ref) {
|
|
1184
1184
|
var size = _ref.size;
|
|
1185
|
-
return size === "small" && styled.css(["width:24px;"]);
|
|
1185
|
+
return size === "small" && styled.css(["width:24px;svg{width:18px;height:18px;}"]);
|
|
1186
1186
|
}, function (_ref2) {
|
|
1187
1187
|
var size = _ref2.size;
|
|
1188
1188
|
return size === "big" && styled.css(["width:40px;"]);
|
|
@@ -16237,13 +16237,15 @@
|
|
|
16237
16237
|
return React.useContext(SearchContext);
|
|
16238
16238
|
};
|
|
16239
16239
|
|
|
16240
|
-
var _excluded$2 = ["title", "renderIcon", "className", "index"];
|
|
16240
|
+
var _excluded$2 = ["title", "renderIcon", "className", "index", "as"];
|
|
16241
16241
|
var CommandPaletteCommandItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
16242
16242
|
var title = _ref.title,
|
|
16243
16243
|
renderIcon = _ref.renderIcon,
|
|
16244
16244
|
className = _ref.className,
|
|
16245
16245
|
index = _ref.index,
|
|
16246
|
+
as = _ref.as,
|
|
16246
16247
|
rest = _objectWithoutProperties(_ref, _excluded$2);
|
|
16248
|
+
var Component = as || "a";
|
|
16247
16249
|
var icon = renderIcon();
|
|
16248
16250
|
var _useSelectedContext = useSelectedContext(),
|
|
16249
16251
|
selected = _useSelectedContext.selected,
|
|
@@ -16252,6 +16254,7 @@
|
|
|
16252
16254
|
setSelected(index);
|
|
16253
16255
|
};
|
|
16254
16256
|
return /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
|
|
16257
|
+
as: Component,
|
|
16255
16258
|
ref: ref,
|
|
16256
16259
|
className: classNames__default["default"]("cp-item cp-command", className),
|
|
16257
16260
|
tabIndex: 1,
|
|
@@ -16410,7 +16413,7 @@
|
|
|
16410
16413
|
return "";
|
|
16411
16414
|
};
|
|
16412
16415
|
|
|
16413
|
-
var _excluded$1 = ["title", "renderIcon", "className", "index", "loading"];
|
|
16416
|
+
var _excluded$1 = ["title", "renderIcon", "className", "index", "loading", "as"];
|
|
16414
16417
|
var generateRandomWidth = function generateRandomWidth() {
|
|
16415
16418
|
// generate range 30-80
|
|
16416
16419
|
var randomNum = Math.round(Math.random() * 30 + 30);
|
|
@@ -16422,7 +16425,9 @@
|
|
|
16422
16425
|
className = _ref.className,
|
|
16423
16426
|
index = _ref.index,
|
|
16424
16427
|
loading = _ref.loading,
|
|
16428
|
+
as = _ref.as,
|
|
16425
16429
|
rest = _objectWithoutProperties(_ref, _excluded$1);
|
|
16430
|
+
var Component = as || "a";
|
|
16426
16431
|
var icon = renderIcon && renderIcon();
|
|
16427
16432
|
var _useSelectedContext = useSelectedContext(),
|
|
16428
16433
|
selected = _useSelectedContext.selected,
|
|
@@ -16441,6 +16446,7 @@
|
|
|
16441
16446
|
}));
|
|
16442
16447
|
}
|
|
16443
16448
|
return /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteItem, _extends({}, rest, {
|
|
16449
|
+
as: Component,
|
|
16444
16450
|
ref: ref,
|
|
16445
16451
|
className: classNames__default["default"]("cp-item", className),
|
|
16446
16452
|
tabIndex: 1,
|