@activecollab/components 1.0.300 → 1.0.302

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.
Files changed (30) hide show
  1. package/dist/cjs/components/CommandPalette/CommandPalette.styles.js +1 -1
  2. package/dist/cjs/components/CommandPalette/CommandPalette.styles.js.map +1 -1
  3. package/dist/cjs/components/CommandPalette/CommandPaletteCommandItem.js +6 -3
  4. package/dist/cjs/components/CommandPalette/CommandPaletteCommandItem.js.map +1 -1
  5. package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js +3 -25
  6. package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js.map +1 -1
  7. package/dist/cjs/components/CommandPalette/CommandPaletteItem.js +6 -3
  8. package/dist/cjs/components/CommandPalette/CommandPaletteItem.js.map +1 -1
  9. package/dist/esm/components/CommandPalette/CommandPalette.d.ts +6 -3
  10. package/dist/esm/components/CommandPalette/CommandPalette.d.ts.map +1 -1
  11. package/dist/esm/components/CommandPalette/CommandPalette.styles.d.ts +2 -2
  12. package/dist/esm/components/CommandPalette/CommandPalette.styles.d.ts.map +1 -1
  13. package/dist/esm/components/CommandPalette/CommandPalette.styles.js +1 -1
  14. package/dist/esm/components/CommandPalette/CommandPalette.styles.js.map +1 -1
  15. package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts +9 -6
  16. package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts.map +1 -1
  17. package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.js +6 -3
  18. package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.js.map +1 -1
  19. package/dist/esm/components/CommandPalette/CommandPaletteHeader.d.ts.map +1 -1
  20. package/dist/esm/components/CommandPalette/CommandPaletteHeader.js +3 -25
  21. package/dist/esm/components/CommandPalette/CommandPaletteHeader.js.map +1 -1
  22. package/dist/esm/components/CommandPalette/CommandPaletteItem.d.ts +8 -3
  23. package/dist/esm/components/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
  24. package/dist/esm/components/CommandPalette/CommandPaletteItem.js +6 -3
  25. package/dist/esm/components/CommandPalette/CommandPaletteItem.js.map +1 -1
  26. package/dist/index.js +16 -32
  27. package/dist/index.js.map +1 -1
  28. package/dist/index.min.js +1 -1
  29. package/dist/index.min.js.map +1 -1
  30. package/package.json +1 -1
package/dist/cjs/components/CommandPalette/CommandPalette.styles.js CHANGED
@@ -61,7 +61,7 @@ var StyledHeading = _styledComponents.default.p.withConfig({
61
61
 
62
62
  // prettier-ignore
63
63
  exports.StyledHeading = StyledHeading;
64
- var StyledCommandPaletteItem = _styledComponents.default.li.withConfig({
64
+ var StyledCommandPaletteItem = _styledComponents.default.a.withConfig({
65
65
  displayName: "CommandPalettestyles__StyledCommandPaletteItem",
66
66
  componentId: "sc-na3mad-10"
67
67
  })(["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) {
package/dist/cjs/components/CommandPalette/CommandPalette.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CommandPalette.styles.js","names":["StyledCommandPalette","styled","div","FontStyle","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","li","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","SpinnerLoader","StyledCommandPaletteItemLoader"],"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 border-top: 1px solid var(--color-theme-400);\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`;\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 flex-shrink: 0;\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\nexport const StyledCommandPaletteItemLoader = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n pointer-events: none;\n user-select: none;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4LAC1CC,oBAAS,CAUZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,yJAUpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,wZAMnCC,mBAAM,CAACC,EAAE,CAwBZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,4JAKtCH,mBAAM,CAACC,EAAE,CAMZ;AAAC;AAEK,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAAC;AAEK,IAAMY,UAAU,GAAGb,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAAC;AAEK,IAAMa,wBAAwB,GAAGd,yBAAM,CAACe,EAAE;EAAA;EAAA;AAAA,iIAShD;AAAC;AAEK,IAAMC,aAAa,GAAGhB,yBAAM,CAACiB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AAAA;AACO,IAAMC,wBAAwB,GAAGlB,yBAAM,CAACmB,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;AAAC;AAEK,IAAMC,+BAA+B,GAAG,IAAArB,yBAAM,EAACkB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAAC;AAEK,IAAMI,mBAAmB,GAAG,IAAAtB,yBAAM,EAACuB,sBAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAAC;AAEK,IAAMC,8BAA8B,GAAGxB,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+JAUvD;AAAC"}
1
+ {"version":3,"file":"CommandPalette.styles.js","names":["StyledCommandPalette","styled","div","FontStyle","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","a","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","SpinnerLoader","StyledCommandPaletteItemLoader"],"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 border-top: 1px solid var(--color-theme-400);\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`;\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 flex-shrink: 0;\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.a<{$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\nexport const StyledCommandPaletteItemLoader = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n pointer-events: none;\n user-select: none;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4LAC1CC,oBAAS,CAUZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,yJAUpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,wZAMnCC,mBAAM,CAACC,EAAE,CAwBZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,4JAKtCH,mBAAM,CAACC,EAAE,CAMZ;AAAC;AAEK,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAAC;AAEK,IAAMY,UAAU,GAAGb,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAAC;AAEK,IAAMa,wBAAwB,GAAGd,yBAAM,CAACe,EAAE;EAAA;EAAA;AAAA,iIAShD;AAAC;AAEK,IAAMC,aAAa,GAAGhB,yBAAM,CAACiB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AAAA;AACO,IAAMC,wBAAwB,GAAGlB,yBAAM,CAACmB,CAAC;EAAA;EAAA;AAAA,2WAS1B;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;AAAC;AAEK,IAAMC,+BAA+B,GAAG,IAAArB,yBAAM,EAACkB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAAC;AAEK,IAAMI,mBAAmB,GAAG,IAAAtB,yBAAM,EAACuB,sBAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAAC;AAEK,IAAMC,8BAA8B,GAAGxB,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+JAUvD;AAAC"}
package/dist/cjs/components/CommandPalette/CommandPaletteCommandItem.js CHANGED
@@ -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,
@@ -32,7 +34,8 @@ var CommandPaletteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
32
34
  var onMouseEnter = function onMouseEnter() {
33
35
  setSelected(index);
34
36
  };
35
- return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteCommandItem, _extends({}, rest, {
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,
@@ -44,7 +47,7 @@ var CommandPaletteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
44
47
  whitespace: "no-wrap",
45
48
  variant: "Body 1",
46
49
  color: "primary"
47
- }, title), /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null));
50
+ }, title), /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null)));
48
51
  });
49
52
  exports.CommandPaletteCommandItem = CommandPaletteCommandItem;
50
53
  CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
package/dist/cjs/components/CommandPalette/CommandPaletteCommandItem.js.map CHANGED
@@ -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, {\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;AACA;AAMA;AACA;AACA;AAIA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxC,IAAMA,yBAAyB,gBAAG,IAAAC,iBAAU,EACjD,gBAQEC,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,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBD,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,+CAA+B,eAC1BC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAW,mBAAU,EAAC,oBAAoB,EAAER,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,YAAY,EAAEM,YAAa;IAC3B,SAAS,EAAEN,KAAK,KAAKI;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,GAKdL,KAAK,CACK,eACb,6BAAC,qBAAc,OAAG,CACc;AAEtC,CAAC,CACF;AAAC;AAEFH,yBAAyB,CAACc,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}
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"}
package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js CHANGED
@@ -74,19 +74,6 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
74
74
  selectedItem.click();
75
75
  }
76
76
  }
77
-
78
- // mode === 'id' TYPE NUMBER PREVENTING KEYS
79
-
80
- if (mode === "id") {
81
- // enableNumbers && key combos
82
- var isNumber = isFinite(e.key);
83
- var enabledKeyCombos = e.metaKey && "a" || e.metaKey && "c" || e.metaKey && "v" || e.metaKey && "x" || e.key === "Backspace" || e.key === "Tab";
84
-
85
- // check conditions and remove keys
86
- if (!enabledKeyCombos && !isNumber) {
87
- e.preventDefault();
88
- }
89
- }
90
77
  };
91
78
  return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteHeader, {
92
79
  className: "cp-header"
@@ -94,7 +81,7 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
94
81
  ref: inputRef,
95
82
  autoFocus: true,
96
83
  placeholder: handleInputPlaceholder,
97
- type: mode === "id" ? "number" : "text",
84
+ type: "text",
98
85
  "aria-autocomplete": "list",
99
86
  autoCapitalize: "none",
100
87
  autoComplete: "off",
@@ -105,21 +92,12 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
105
92
  onKeyDown: handleKeyDown,
106
93
  onChange: function onChange(e) {
107
94
  var inputText = e.target.value;
108
- if (inputText.startsWith("#") && idModeEnabled) {
95
+ if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
109
96
  setMode("id");
110
- clearInput();
97
+ onChangeSearch(inputText.slice(1));
111
98
  return;
112
99
  }
113
100
  onChangeSearch(inputText);
114
- },
115
- onPaste: function onPaste(e) {
116
- e.preventDefault();
117
- var pastedText = e.clipboardData.getData("text");
118
- if (pastedText.startsWith("#") && idModeEnabled) {
119
- pastedText = pastedText.split("#")[1];
120
- setMode("id");
121
- onChangeSearch(pastedText);
122
- }
123
101
  }
124
102
  }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSpinnerLoader, {
125
103
  "aria-busy": true,
package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CommandPaletteHeader.js","names":["CommandPaletteHeader","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","idModeEnabled","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","value","useEffect","length","handleInputPlaceholder","useMemo","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","isNumber","isFinite","enabledKeyCombos","metaKey","preventDefault","name","slice","inputText","startsWith","pastedText","clipboardData","getData","split","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } 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\nexport interface CommandPaletteHeaderProps {\n loading?: boolean;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n loading = false,\n commandsLength,\n itemsLength,\n}: CommandPaletteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode, idModeEnabled } = 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 inputRef.current.value = \"\";\n onChangeSearch(\"\");\n }\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 useEffect(() => {\n focusInput();\n }, [mode]);\n\n const handleInputPlaceholder = useMemo(() => {\n if (typeof mode === \"object\") {\n return \"Search\";\n }\n\n if (mode === \"id\") {\n return \"1\";\n }\n\n return \"Search or jump to\";\n }, [mode]);\n\n const handleKeyDown = (e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n (e.target as HTMLInputElement).value === \"\"\n ) {\n setMode(\"default\");\n clearInput();\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 // mode === 'id' TYPE NUMBER PREVENTING KEYS\n\n if (mode === \"id\") {\n // enableNumbers && key combos\n const isNumber = isFinite(e.key);\n const enabledKeyCombos =\n (e.metaKey && \"a\") ||\n (e.metaKey && \"c\") ||\n (e.metaKey && \"v\") ||\n (e.metaKey && \"x\") ||\n e.key === \"Backspace\" ||\n e.key === \"Tab\";\n\n // check conditions and remove keys\n if (!enabledKeyCombos && !isNumber) {\n e.preventDefault();\n }\n }\n };\n\n return (\n <StyledCommandPaletteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n {typeof mode === \"object\" ? (\n <StyledParameter>\n {mode.name.length > 10 ? mode.name.slice(0, 10) + \"...\" : mode.name}/\n </StyledParameter>\n ) : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={handleInputPlaceholder}\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={handleKeyDown}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (inputText.startsWith(\"#\") && idModeEnabled) {\n setMode(\"id\");\n clearInput();\n return;\n }\n\n onChangeSearch(inputText);\n }}\n onPaste={(e) => {\n e.preventDefault();\n let pastedText = e.clipboardData.getData(\"text\");\n\n if (pastedText.startsWith(\"#\") && idModeEnabled) {\n pastedText = pastedText.split(\"#\")[1];\n setMode(\"id\");\n onChangeSearch(pastedText);\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\" &&\n typeof mode !== \"object\" &&\n idModeEnabled &&\n 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 }\n }}\n onClick={() => {\n setMode(\"id\");\n clearInput();\n }}\n variant=\"text gray\"\n >\n <HashtagIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n\n {search.length > 0 || mode === \"id\" || typeof mode === \"object\" ? (\n <Tooltip title=\"Clear\" placement=\"top\">\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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"}
1
+ {"version":3,"file":"CommandPaletteHeader.js","names":["CommandPaletteHeader","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","idModeEnabled","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","value","useEffect","length","handleInputPlaceholder","useMemo","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","name","slice","inputText","startsWith","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } 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\nexport interface CommandPaletteHeaderProps {\n loading?: boolean;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n loading = false,\n commandsLength,\n itemsLength,\n}: CommandPaletteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode, idModeEnabled } = 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 inputRef.current.value = \"\";\n onChangeSearch(\"\");\n }\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 useEffect(() => {\n focusInput();\n }, [mode]);\n\n const handleInputPlaceholder = useMemo(() => {\n if (typeof mode === \"object\") {\n return \"Search\";\n }\n\n if (mode === \"id\") {\n return \"1\";\n }\n\n return \"Search or jump to\";\n }, [mode]);\n\n const handleKeyDown = (e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n (e.target as HTMLInputElement).value === \"\"\n ) {\n setMode(\"default\");\n clearInput();\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\n return (\n <StyledCommandPaletteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n {typeof mode === \"object\" ? (\n <StyledParameter>\n {mode.name.length > 10 ? mode.name.slice(0, 10) + \"...\" : mode.name}/\n </StyledParameter>\n ) : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={handleInputPlaceholder}\n type=\"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={handleKeyDown}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (\n inputText.startsWith(\"#\") &&\n idModeEnabled &&\n search.length === 0\n ) {\n setMode(\"id\");\n onChangeSearch(inputText.slice(1));\n return;\n }\n\n onChangeSearch(inputText);\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\" &&\n typeof mode !== \"object\" &&\n idModeEnabled &&\n 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 }\n }}\n onClick={() => {\n setMode(\"id\");\n clearInput();\n }}\n variant=\"text gray\"\n >\n <HashtagIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n\n {search.length > 0 || mode === \"id\" || typeof mode === \"object\" ? (\n <Tooltip title=\"Clear\" placement=\"top\">\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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"}
package/dist/cjs/components/CommandPalette/CommandPaletteItem.js CHANGED
@@ -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,
@@ -50,7 +52,8 @@ var CommandPaletteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
50
52
  $_css: generateRandomWidth()
51
53
  }));
52
54
  }
53
- return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteItem, _extends({}, rest, {
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,
@@ -65,7 +68,7 @@ var CommandPaletteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
65
68
  dangerouslySetInnerHTML: {
66
69
  __html: (0, _findHighlightedSearch.findHighlightedSearch)(search, title)
67
70
  }
68
- }) : null);
71
+ }) : null));
69
72
  });
70
73
  exports.CommandPaletteItem = CommandPaletteItem;
71
74
  CommandPaletteItem.displayName = "CommandPaletteItem";
package/dist/cjs/components/CommandPalette/CommandPaletteItem.js.map CHANGED
@@ -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 Ref,\n} from \"react\";\nimport { findHighlightedSearch } from \"../../utils/findHighlightedSearch\";\nimport { LinearLoader } from \"../Loaders\";\nimport { Typography } from \"../Typography/Typography\";\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\n extends ComponentPropsWithoutRef<\"li\"> {\n title?: string;\n renderIcon?: () => ReactNode;\n className?: string;\n index?: number;\n selected?: number;\n loading?: boolean;\n}\n\nexport const CommandPaletteItem = forwardRef(\n (\n {\n title,\n renderIcon,\n className,\n index,\n loading,\n ...rest\n }: CommandPaletteItemProps,\n ref: Ref<HTMLLIElement>\n ) => {\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 <StyledCommandPaletteItem\n {...rest}\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 );\n }\n);\n\nCommandPaletteItem.displayName = \"CommandPaletteItem\";\n"],"mappings":";;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;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;AAYM,IAAMI,kBAAkB,gBAAG,IAAAC,iBAAU,EAC1C,gBASEC,GAAuB,EACpB;EAAA,IARDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAIT,IAAMC,IAAI,GAAGL,UAAU,IAAIA,UAAU,EAAE;EACvC,0BAAkC,IAAAM,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,CAACN,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,6BAAC,wCAAwB,eACnBa,IAAI;IACR,GAAG,EAAEN,GAAI;IACT,SAAS,EAAE,IAAAc,mBAAU,EAAC,SAAS,EAAEX,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeM,QAAQ,KAAKL,KAAM;IAClC,YAAY,EAAES,YAAa;IAC3B,SAAS,EAAET,KAAK,KAAKK;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,EAC9BK,MAAM,IAAIX,KAAK,gBACd,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC,SAAS;IACf,uBAAuB,EAAE;MACvBc,MAAM,EAAE,IAAAC,4CAAqB,EAACJ,MAAM,EAAEX,KAAK;IAC7C;EAAE,EACF,GACA,IAAI,CACiB;AAE/B,CAAC,CACF;AAAC;AAEFH,kBAAkB,CAACmB,WAAW,GAAG,oBAAoB;AAAC;EAAA;EAAA;AAAA,GAjCzB;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
+ {"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"}
package/dist/esm/components/CommandPalette/CommandPalette.d.ts CHANGED
@@ -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: React.ForwardRefExoticComponent<CommandPaletteItemProps & React.RefAttributes<HTMLLIElement>>;
27
- CommandItem: React.ForwardRefExoticComponent<import("./CommandPaletteCommandItem").CommandPaletteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
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
package/dist/esm/components/CommandPalette/CommandPalette.d.ts.map CHANGED
@@ -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;AAOhD,OAAO,EAEL,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAW9B,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
+ {"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"}
package/dist/esm/components/CommandPalette/CommandPalette.styles.d.ts CHANGED
@@ -9,10 +9,10 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
9
9
  export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
10
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 StyledCommandPaletteItem: import("styled-components").StyledComponent<"li", any, {
12
+ export declare const StyledCommandPaletteItem: import("styled-components").StyledComponent<"a", any, {
13
13
  $selected: boolean;
14
14
  }, never>;
15
- export declare const StyledCommandPaletteCommandItem: import("styled-components").StyledComponent<"li", any, {
15
+ export declare const StyledCommandPaletteCommandItem: import("styled-components").StyledComponent<"a", 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>;
package/dist/esm/components/CommandPalette/CommandPalette.styles.d.ts.map CHANGED
@@ -1 +1 @@
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,oEAUvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAOtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEA8BvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAW3B,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;AAEF,eAAO,MAAM,8BAA8B,oEAU1C,CAAC"}
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,oEAUvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAOtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEA8BvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAW3B,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;eAAwB,OAAO;SA4BnE,CAAC;AAEF,eAAO,MAAM,+BAA+B;eA9BiB,OAAO;SAgCnE,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC;AAEF,eAAO,MAAM,8BAA8B,oEAU1C,CAAC"}
package/dist/esm/components/CommandPalette/CommandPalette.styles.js CHANGED
@@ -44,7 +44,7 @@ export var StyledHeading = styled.p.withConfig({
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 StyledCommandPaletteItem = styled.li.withConfig({
47
+ export var StyledCommandPaletteItem = styled.a.withConfig({
48
48
  displayName: "CommandPalettestyles__StyledCommandPaletteItem",
49
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) {
package/dist/esm/components/CommandPalette/CommandPalette.styles.js.map CHANGED
@@ -1 +1 @@
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","StyledCommandPaletteItemLoader"],"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 border-top: 1px solid var(--color-theme-400);\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`;\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 flex-shrink: 0;\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\nexport const StyledCommandPaletteItemLoader = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n pointer-events: none;\n user-select: none;\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,yJAUpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,kHAOnD;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,4JAKtCX,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;AAED,OAAO,IAAMsB,8BAA8B,GAAGzB,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,+JAUvD"}
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","a","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","StyledCommandPaletteItemLoader"],"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 border-top: 1px solid var(--color-theme-400);\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`;\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 flex-shrink: 0;\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.a<{$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\nexport const StyledCommandPaletteItemLoader = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n pointer-events: none;\n user-select: none;\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,yJAUpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,kHAOnD;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,4JAKtCX,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,CAAC;EAAA;EAAA;AAAA,2WAS1B;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;AAED,OAAO,IAAMsB,8BAA8B,GAAGzB,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,+JAUvD"}
package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts CHANGED
@@ -1,10 +1,13 @@
1
- import React, { ComponentPropsWithoutRef, ReactNode } from "react";
2
- export interface CommandPaletteCommandItemProps extends ComponentPropsWithoutRef<"li"> {
1
+ import { ElementType, ReactElement, ReactNode } from "react";
2
+ import { PolymorphicComponentPropsWithRef } from "../../utils/types";
3
+ import { CommandPaletteItemProps } from "./CommandPaletteItem";
4
+ export interface CommandPaletteCommandItemProps extends CommandPaletteItemProps {
3
5
  title: string;
4
6
  renderIcon: () => ReactNode;
5
- className?: string;
6
- index?: number;
7
- selected?: number;
8
7
  }
9
- export declare const CommandPaletteCommandItem: React.ForwardRefExoticComponent<CommandPaletteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
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
+ };
10
13
  //# sourceMappingURL=CommandPaletteCommandItem.d.ts.map
package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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"}
package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.js CHANGED
@@ -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,
@@ -21,7 +23,8 @@ export var CommandPaletteCommandItem = /*#__PURE__*/forwardRef(function (_ref, r
21
23
  var onMouseEnter = function onMouseEnter() {
22
24
  setSelected(index);
23
25
  };
24
- return /*#__PURE__*/React.createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
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,
@@ -33,7 +36,7 @@ export var CommandPaletteCommandItem = /*#__PURE__*/forwardRef(function (_ref, r
33
36
  whitespace: "no-wrap",
34
37
  variant: "Body 1",
35
38
  color: "primary"
36
- }, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null));
39
+ }, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null)));
37
40
  });
38
41
  CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
39
42
  var _StyledTypography = _styled(Typography).withConfig({
package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.js.map CHANGED
@@ -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, {\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
+ {"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"}
package/dist/esm/components/CommandPalette/CommandPaletteHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CommandPaletteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"names":[],"mappings":";AAiBA,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;gDAI9B,yBAAyB;;CAgM3B,CAAC"}
1
+ {"version":3,"file":"CommandPaletteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"names":[],"mappings":";AAiBA,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;gDAI9B,yBAAyB;;CAuK3B,CAAC"}
package/dist/esm/components/CommandPalette/CommandPaletteHeader.js CHANGED
@@ -65,19 +65,6 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
65
65
  selectedItem.click();
66
66
  }
67
67
  }
68
-
69
- // mode === 'id' TYPE NUMBER PREVENTING KEYS
70
-
71
- if (mode === "id") {
72
- // enableNumbers && key combos
73
- var isNumber = isFinite(e.key);
74
- var enabledKeyCombos = e.metaKey && "a" || e.metaKey && "c" || e.metaKey && "v" || e.metaKey && "x" || e.key === "Backspace" || e.key === "Tab";
75
-
76
- // check conditions and remove keys
77
- if (!enabledKeyCombos && !isNumber) {
78
- e.preventDefault();
79
- }
80
- }
81
68
  };
82
69
  return /*#__PURE__*/React.createElement(StyledCommandPaletteHeader, {
83
70
  className: "cp-header"
@@ -85,7 +72,7 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
85
72
  ref: inputRef,
86
73
  autoFocus: true,
87
74
  placeholder: handleInputPlaceholder,
88
- type: mode === "id" ? "number" : "text",
75
+ type: "text",
89
76
  "aria-autocomplete": "list",
90
77
  autoCapitalize: "none",
91
78
  autoComplete: "off",
@@ -96,21 +83,12 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
96
83
  onKeyDown: handleKeyDown,
97
84
  onChange: function onChange(e) {
98
85
  var inputText = e.target.value;
99
- if (inputText.startsWith("#") && idModeEnabled) {
86
+ if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
100
87
  setMode("id");
101
- clearInput();
88
+ onChangeSearch(inputText.slice(1));
102
89
  return;
103
90
  }
104
91
  onChangeSearch(inputText);
105
- },
106
- onPaste: function onPaste(e) {
107
- e.preventDefault();
108
- var pastedText = e.clipboardData.getData("text");
109
- if (pastedText.startsWith("#") && idModeEnabled) {
110
- pastedText = pastedText.split("#")[1];
111
- setMode("id");
112
- onChangeSearch(pastedText);
113
- }
114
92
  }
115
93
  }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(StyledSpinnerLoader, {
116
94
  "aria-busy": true,