@activecollab/components 1.0.266 → 1.0.268

package/dist/esm/components/CommandPallete/CommandPallete.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode"];
-import React, { cloneElement, useEffect, useMemo, useRef, useState } from "react";
+import React, { cloneElement, useMemo, useRef, useState } from "react";
 import { deepMap } from "react-children-utilities";
 import { Dialog } from "../Dialog";
 import { StyledCommandPallete, StyledCommandPalleteWrapper } from "./CommandPallete.styles";
+import { CommandPalleteCommandItem } from "./CommandPalleteCommandItem";
 import { CommandPalleteHeader } from "./CommandPalleteHeader";
 import { CommandPalleteItem } from "./CommandPalleteItem";
 import { CommandPalleteList } from "./CommandPalleteList";
@@ -38,32 +39,37 @@ export var CommandPallete = function CommandPallete(_ref) {
     });
   };
   var filterChildren = useMemo(function () {
-    var index = 0;
+    var itemsLength = 0;
+    var commandsLength = 0;
     var items = deepMap(children, function (child) {
       var item = child;
       var clonedElement;
       if (item && item.type === CommandPalleteList) {
         clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props));
       }
+      if (item && item.type === CommandPalleteCommandItem) {
+        clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
+          index: itemsLength,
+          selected: selected
+        }));
+        itemsLength++;
+        commandsLength++;
+      }
       if (item && item.type === CommandPalleteItem) {
         clonedElement = /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
-          index: index,
+          index: itemsLength,
           selected: selected
         }));
-        index++;
+        itemsLength++;
       }
       return clonedElement;
     });
     return {
       items: items,
-      index: index
+      itemsLength: itemsLength,
+      commandsLength: commandsLength
     };
   }, [children, selected]);
-  useEffect(function () {
-    if (search.length === 0) {
-      setSelected(0);
-    }
-  }, [search, selected]);
   var handleChangeSelected = function handleChangeSelected(direction) {
     var items = document.querySelectorAll(".cp-item");
     var index = 0;
@@ -113,7 +119,7 @@ export var CommandPallete = function CommandPallete(_ref) {
       if (e.key === "End") {
         e.preventDefault();
         scrollToBottom();
-        setSelected(filterChildren.index - 1);
+        setSelected(filterChildren.itemsLength - 1);
       }
       if (e.key === "Home") {
         e.preventDefault();
@@ -129,7 +135,9 @@ export var CommandPallete = function CommandPallete(_ref) {
   }, /*#__PURE__*/React.createElement(CommandPalleteHeader, {
     search: search,
     handleChange: handleChange,
-    onChangeSearch: onChangeSearch
+    onChangeSearch: onChangeSearch,
+    commandsLength: filterChildren.commandsLength,
+    itemsLength: filterChildren.itemsLength
   })), /*#__PURE__*/React.createElement(StyledCommandPalleteWrapper, {
     ref: listWrapperRef
   }, filterChildren.items))));
@@ -137,4 +145,5 @@ export var CommandPallete = function CommandPallete(_ref) {
 CommandPallete.displayName = "CommandPallete";
 CommandPallete.List = CommandPalleteList;
 CommandPallete.Item = CommandPalleteItem;
+CommandPallete.CommandItem = CommandPalleteCommandItem;
 //# sourceMappingURL=CommandPallete.js.map

package/dist/esm/components/CommandPallete/CommandPallete.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.js","names":["React","cloneElement","useEffect","useMemo","useRef","useState","deepMap","Dialog","StyledCommandPallete","StyledCommandPalleteWrapper","CommandPalleteHeader","CommandPalleteItem","CommandPalleteList","ModeContextProvider","SelectedContextProvider","CommandPallete","children","onChangeSearch","search","mode","setMode","rest","selected","setSelected","listWrapperRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","index","items","child","item","clonedElement","type","props","length","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","scrollIntoView","block","key","preventDefault","displayName","List","Item"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { deepMap } from \"react-children-utilities\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPallete,\n  StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport {\n  CommandPalleteItem,\n  CommandPalleteItemProps,\n} from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\nimport { ModeContextProvider, SelectedContextProvider } from \"./context\";\n\nexport interface CommandPalleteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  commands: { visible: boolean; title: string; renderIcon: () => ReactNode }[];\n  mode: string;\n  setMode: (value: string) => void;\n  loading?: boolean;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  mode,\n  setMode,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n  const [selected, setSelected] = useState<number>(0);\n  const listWrapperRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChangeSearch(e.target.value);\n  };\n\n  const scrollToTop = () => {\n    listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n  };\n\n  const scrollToBottom = () => {\n    listWrapperRef.current?.scrollTo({\n      top: listWrapperRef.current.scrollHeight,\n      behavior: \"smooth\",\n    });\n  };\n\n  const filterChildren = useMemo(() => {\n    let index = 0;\n\n    const items = deepMap(children, (child) => {\n      const item = child as ReactElement<CommandPalleteItemProps>;\n      let clonedElement;\n\n      if (item && item.type === CommandPalleteList) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n        });\n      }\n\n      if (item && item.type === CommandPalleteItem) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n          index,\n          selected,\n        });\n\n        index++;\n      }\n\n      return clonedElement;\n    });\n\n    return { items, index };\n  }, [children, selected]);\n\n  useEffect(() => {\n    if (search.length === 0) {\n      setSelected(0);\n    }\n  }, [search, selected]);\n\n  const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n    const items = document.querySelectorAll(\".cp-item\");\n\n    let index = 0;\n    let newIndex = 0;\n    let newItem: Element | null = null;\n\n    if (direction === \"down\") {\n      items.forEach((_, i) => {\n        if (i === selected) {\n          index = i;\n        }\n      });\n\n      newIndex = index === items.length - 1 ? 0 : index + 1;\n    } else if (direction === \"up\") {\n      items.forEach((_, i) => {\n        if (i === selected) {\n          index = i;\n        }\n      });\n\n      newIndex = !index ? items.length - 1 : index - 1;\n    } else {\n      setSelected(0);\n    }\n\n    newItem = items[newIndex];\n\n    if (newItem && typeof newIndex === \"number\") {\n      setSelected(newIndex);\n\n      newItem.scrollIntoView({\n        behavior: \"smooth\",\n        block: newIndex ? \"center\" : \"end\",\n      });\n    }\n  };\n\n  return (\n    <Dialog {...rest}>\n      <SelectedContextProvider value={{ selected: selected, setSelected }}>\n        <StyledCommandPallete\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              handleChangeSelected(\"down\");\n            }\n\n            if (e.key === \"ArrowUp\") {\n              e.preventDefault();\n              handleChangeSelected(\"up\");\n            }\n\n            if (e.key === \"End\") {\n              e.preventDefault();\n              scrollToBottom();\n              setSelected(filterChildren.index - 1);\n            }\n\n            if (e.key === \"Home\") {\n              e.preventDefault();\n              scrollToTop();\n              setSelected(0);\n            }\n          }}\n        >\n          <ModeContextProvider value={{ mode, setMode }}>\n            <CommandPalleteHeader\n              search={search}\n              handleChange={handleChange}\n              onChangeSearch={onChangeSearch}\n            />\n          </ModeContextProvider>\n\n          <StyledCommandPalleteWrapper ref={listWrapperRef}>\n            {filterChildren.items}\n          </StyledCommandPalleteWrapper>\n        </StyledCommandPallete>\n      </SelectedContextProvider>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\n"],"mappings":"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"}
+{"version":3,"file":"CommandPallete.js","names":["React","cloneElement","useMemo","useRef","useState","deepMap","Dialog","StyledCommandPallete","StyledCommandPalleteWrapper","CommandPalleteCommandItem","CommandPalleteHeader","CommandPalleteItem","CommandPalleteList","ModeContextProvider","SelectedContextProvider","CommandPallete","children","onChangeSearch","search","mode","setMode","rest","selected","setSelected","listWrapperRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","itemsLength","commandsLength","items","child","item","clonedElement","type","props","index","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { deepMap } from \"react-children-utilities\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPallete,\n  StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteCommandItem } from \"./CommandPalleteCommandItem\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport {\n  CommandPalleteItem,\n  CommandPalleteItemProps,\n} from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\nimport { ModeContextProvider, SelectedContextProvider } from \"./context\";\n\nexport interface CommandPalleteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  mode: string;\n  setMode: (value: string) => void;\n  loading?: boolean;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  mode,\n  setMode,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n  const [selected, setSelected] = useState<number>(0);\n  const listWrapperRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChangeSearch(e.target.value);\n  };\n\n  const scrollToTop = () => {\n    listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n  };\n\n  const scrollToBottom = () => {\n    listWrapperRef.current?.scrollTo({\n      top: listWrapperRef.current.scrollHeight,\n      behavior: \"smooth\",\n    });\n  };\n\n  const filterChildren = useMemo(() => {\n    let itemsLength = 0;\n    let commandsLength = 0;\n\n    const items = deepMap(children, (child) => {\n      const item = child as ReactElement<CommandPalleteItemProps>;\n      let clonedElement;\n\n      if (item && item.type === CommandPalleteList) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n        });\n      }\n\n      if (item && item.type === CommandPalleteCommandItem) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n          index: itemsLength,\n          selected,\n        });\n\n        itemsLength++;\n        commandsLength++;\n      }\n\n      if (item && item.type === CommandPalleteItem) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n          index: itemsLength,\n          selected,\n        });\n\n        itemsLength++;\n      }\n\n      return clonedElement;\n    });\n\n    return { items, itemsLength, commandsLength };\n  }, [children, selected]);\n\n  const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n    const items = document.querySelectorAll(\".cp-item\");\n\n    let index = 0;\n    let newIndex = 0;\n    let newItem: Element | null = null;\n\n    if (direction === \"down\") {\n      items.forEach((_, i) => {\n        if (i === selected) {\n          index = i;\n        }\n      });\n\n      newIndex = index === items.length - 1 ? 0 : index + 1;\n    } else if (direction === \"up\") {\n      items.forEach((_, i) => {\n        if (i === selected) {\n          index = i;\n        }\n      });\n\n      newIndex = !index ? items.length - 1 : index - 1;\n    } else {\n      setSelected(0);\n    }\n\n    newItem = items[newIndex];\n\n    if (newItem && typeof newIndex === \"number\") {\n      setSelected(newIndex);\n\n      newItem.scrollIntoView({\n        behavior: \"smooth\",\n        block: newIndex ? \"center\" : \"end\",\n      });\n    }\n  };\n\n  return (\n    <Dialog {...rest}>\n      <SelectedContextProvider value={{ selected: selected, setSelected }}>\n        <StyledCommandPallete\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              handleChangeSelected(\"down\");\n            }\n\n            if (e.key === \"ArrowUp\") {\n              e.preventDefault();\n              handleChangeSelected(\"up\");\n            }\n\n            if (e.key === \"End\") {\n              e.preventDefault();\n              scrollToBottom();\n              setSelected(filterChildren.itemsLength - 1);\n            }\n\n            if (e.key === \"Home\") {\n              e.preventDefault();\n              scrollToTop();\n              setSelected(0);\n            }\n          }}\n        >\n          <ModeContextProvider value={{ mode, setMode }}>\n            <CommandPalleteHeader\n              search={search}\n              handleChange={handleChange}\n              onChangeSearch={onChangeSearch}\n              commandsLength={filterChildren.commandsLength}\n              itemsLength={filterChildren.itemsLength}\n            />\n          </ModeContextProvider>\n\n          <StyledCommandPalleteWrapper ref={listWrapperRef}>\n            {filterChildren.items}\n          </StyledCommandPalleteWrapper>\n        </StyledCommandPallete>\n      </SelectedContextProvider>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\nCommandPallete.CommandItem = CommandPalleteCommandItem;\n"],"mappings":"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"}

package/dist/esm/components/CommandPallete/CommandPallete.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,oBAAoB,oEAMhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEASvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEAqBvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAU3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAAyB,OAAO;SA4BpE,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC"}
+{"version":3,"file":"CommandPallete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,oBAAoB,oEAMhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEASvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEA0BvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAU3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAAyB,OAAO;SA4BpE,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC"}

package/dist/esm/components/CommandPallete/CommandPallete.styles.js

@@ -21,7 +21,7 @@ export var StyledSearchIcon = styled.div.withConfig({
 export var StyledInput = styled.input.withConfig({
   displayName: "CommandPalletestyles__StyledInput",
   componentId: "sc-16m145d-4"
-})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{display:none;}::placeholder{color:var(--color-theme-transparent-500);}"], screen.sm);
+})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}"], screen.sm);
 export var StyledParameter = styled.span.withConfig({
   displayName: "CommandPalletestyles__StyledParameter",
   componentId: "sc-16m145d-5"

package/dist/esm/components/CommandPallete/CommandPallete.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.js","names":["styled","FontStyle","screen","SpinnerLoader","StyledCommandPallete","div","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li","$selected","StyledSpinnerLoader"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPallete = 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\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n\n  &:not(:empty) {\n    padding-bottom: 8px;\n    padding-top: 8px;\n  }\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n  border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  width: 100%;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    display: none;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = 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 StyledCommandPalleteItem = 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 StyledSpinnerLoader = styled(SpinnerLoader)`\n  margin-right: 4px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,YAAY;AAE1C,OAAO,IAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,+GAC1CJ,SAAS,CAKZ;AAED,OAAO,IAAMK,2BAA2B,GAAGN,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,6GASpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAED,OAAO,IAAMG,gBAAgB,GAAGR,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGT,MAAM,CAACU,KAAK;EAAA;EAAA;AAAA,qSAMnCR,MAAM,CAACS,EAAE,CAeZ;AAED,OAAO,IAAMC,eAAe,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,8IAItCX,MAAM,CAACS,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGd,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGf,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGhB,MAAM,CAACiB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGlB,MAAM,CAACmB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGpB,MAAM,CAACqB,EAAE;EAAA;EAAA;AAAA,2WAS3B;EAAA,IAAEC,SAAS,QAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5E;EAAA,IAAEA,SAAS,SAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAED,OAAO,IAAMC,mBAAmB,GAAGvB,MAAM,CAACG,aAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD"}
+{"version":3,"file":"CommandPallete.styles.js","names":["styled","FontStyle","screen","SpinnerLoader","StyledCommandPallete","div","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li","$selected","StyledSpinnerLoader"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPallete = 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\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n\n  &:not(:empty) {\n    padding-bottom: 8px;\n    padding-top: 8px;\n  }\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n  border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  width: 100%;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = 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 StyledCommandPalleteItem = 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 StyledSpinnerLoader = styled(SpinnerLoader)`\n  margin-right: 4px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,YAAY;AAE1C,OAAO,IAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,+GAC1CJ,SAAS,CAKZ;AAED,OAAO,IAAMK,2BAA2B,GAAGN,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,6GASpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAED,OAAO,IAAMG,gBAAgB,GAAGR,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGT,MAAM,CAACU,KAAK;EAAA;EAAA;AAAA,uWAMnCR,MAAM,CAACS,EAAE,CAoBZ;AAED,OAAO,IAAMC,eAAe,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,8IAItCX,MAAM,CAACS,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGd,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGf,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGhB,MAAM,CAACiB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGlB,MAAM,CAACmB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGpB,MAAM,CAACqB,EAAE;EAAA;EAAA;AAAA,2WAS3B;EAAA,IAAEC,SAAS,QAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5E;EAAA,IAAEA,SAAS,SAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAED,OAAO,IAAMC,mBAAmB,GAAGvB,MAAM,CAACG,aAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD"}

package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.d.ts

@@ -0,0 +1,10 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface CommandPalleteCommandItemProps extends ComponentPropsWithoutRef<"li"> {
+    title: string;
+    renderIcon: () => ReactNode;
+    className?: string;
+    index?: number;
+    selected?: number;
+}
+export declare const CommandPalleteCommandItem: React.ForwardRefExoticComponent<CommandPalleteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=CommandPalleteCommandItem.d.ts.map

package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalleteCommandItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteCommandItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAExB,SAAS,EAEV,MAAM,OAAO,CAAC;AAMf,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"}

package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _styled from "styled-components";
+var _excluded = ["title", "renderIcon", "className", "index"];
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import { ArrowRightIcon } from "../Icons";
+import { Typography } from "../Typography/Typography";
+import { StyledCommandPalleteItem, StyledIcon } from "./CommandPallete.styles";
+import { useSelectedContext } from "./context";
+export var CommandPalleteCommandItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var title = _ref.title,
+    renderIcon = _ref.renderIcon,
+    className = _ref.className,
+    index = _ref.index,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var icon = renderIcon();
+  var _useSelectedContext = useSelectedContext(),
+    selected = _useSelectedContext.selected,
+    setSelected = _useSelectedContext.setSelected;
+  var onMouseOver = function onMouseOver() {
+    setSelected(index);
+  };
+  return /*#__PURE__*/React.createElement(StyledCommandPalleteItem, _extends({}, rest, {
+    ref: ref,
+    className: classNames("cp-item cp-command", className),
+    tabIndex: 1,
+    "aria-selected": selected === index,
+    onMouseOver: onMouseOver,
+    $selected: index === selected
+  }), /*#__PURE__*/React.createElement(StyledIcon, null, icon), /*#__PURE__*/React.createElement(_StyledTypography, {
+    overflow: "truncate",
+    whitespace: "no-wrap",
+    variant: "Body 1",
+    color: "primary"
+  }, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null));
+});
+CommandPalleteCommandItem.displayName = "CommandPalleteCommandItem";
+var _StyledTypography = _styled(Typography).withConfig({
+  displayName: "CommandPalleteCommandItem___StyledTypography",
+  componentId: "sc-12i2mxl-0"
+})(["flex:1;"]);
+//# sourceMappingURL=CommandPalleteCommandItem.js.map

package/dist/esm/components/CommandPallete/CommandPalleteCommandItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalleteCommandItem.js","names":["classNames","React","forwardRef","ArrowRightIcon","Typography","StyledCommandPalleteItem","StyledIcon","useSelectedContext","CommandPalleteCommandItem","ref","title","renderIcon","className","index","rest","icon","selected","setSelected","onMouseOver","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteCommandItem.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 { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteCommandItemProps\n  extends ComponentPropsWithoutRef<\"li\"> {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPalleteCommandItem = forwardRef(\n  (\n    {\n      title,\n      renderIcon,\n      className,\n      index,\n      ...rest\n    }: CommandPalleteCommandItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseOver = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPalleteItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item cp-command\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseOver={onMouseOver}\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      </StyledCommandPalleteItem>\n    );\n  }\n);\n\nCommandPalleteCommandItem.displayName = \"CommandPalleteCommandItem\";\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,SAASC,wBAAwB,EAAEC,UAAU,QAAQ,yBAAyB;AAC9E,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,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxBD,WAAW,CAACJ,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,oBAAC,wBAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAET,UAAU,CAAC,oBAAoB,EAAEY,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeI,QAAQ,KAAKH,KAAM;IAClC,WAAW,EAAEK,WAAY;IACzB,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,CACO;AAE/B,CAAC,CACF;AAEDF,yBAAyB,CAACW,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}

package/dist/esm/components/CommandPallete/CommandPalleteHeader.d.ts

@@ -4,9 +4,11 @@ export interface CommandPalleteHeaderProps {
     handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
     loading?: boolean;
     onChangeSearch: (value: string) => void;
+    commandsLength: number;
+    itemsLength: number;
 }
 export declare const CommandPalleteHeader: {
-    ({ search, handleChange, loading, onChangeSearch, }: CommandPalleteHeaderProps): JSX.Element;
+    ({ search, handleChange, loading, commandsLength, itemsLength, onChangeSearch, }: CommandPalleteHeaderProps): JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=CommandPalleteHeader.d.ts.map

package/dist/esm/components/CommandPallete/CommandPalleteHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAU,MAAM,OAAO,CAAC;AAgBnD,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB;yDAK9B,yBAAyB;;CA2H3B,CAAC"}
+{"version":3,"file":"CommandPalleteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAqB,MAAM,OAAO,CAAC;AAgB9D,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;sFAO9B,yBAAyB;;CAiJ3B,CAAC"}

package/dist/esm/components/CommandPallete/CommandPalleteHeader.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { IconButton } from "../IconButton";
 import { CloseIcon, HashtagIcon, SearchLargeIcon } from "../Icons";
 import { Tooltip } from "../Tooltip";
@@ -10,13 +10,16 @@ export var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
     handleChange = _ref.handleChange,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
+    commandsLength = _ref.commandsLength,
+    itemsLength = _ref.itemsLength,
     onChangeSearch = _ref.onChangeSearch;
   var inputRef = useRef(null);
   var _useModeContext = useModeContext(),
     mode = _useModeContext.mode,
     setMode = _useModeContext.setMode;
   var _useSelectedContext = useSelectedContext(),
-    setSelected = _useSelectedContext.setSelected;
+    setSelected = _useSelectedContext.setSelected,
+    selected = _useSelectedContext.selected;
   var focusInput = function focusInput() {
     if (inputRef && inputRef.current) {
       inputRef.current.focus();
@@ -24,10 +27,18 @@ export var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
   };
   var clearInput = function clearInput() {
     if (inputRef && inputRef.current) {
-      inputRef.current.value = "";
       onChangeSearch("");
     }
   };
+  useEffect(function () {
+    if (search.length > 0) {
+      if (itemsLength > commandsLength) {
+        setSelected(commandsLength);
+      } else {
+        setSelected(0);
+      }
+    }
+  }, [search, commandsLength, itemsLength, setSelected]);
   return /*#__PURE__*/React.createElement(StyledCommandPalleteHeader, {
     className: "cp-header"
   }, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, /*#__PURE__*/React.createElement(StyledInput, {
@@ -43,9 +54,15 @@ export var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
     spellCheck: false,
     value: search,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === "Backspace" && mode === "id" && search.length === 0) {
+      if (e.key === "Backspace" && mode !== "default" && search.length === 0) {
         setMode("default");
       }
+      if (e.key === "Enter") {
+        var selectedItem = document.querySelectorAll(".cp-item")[selected];
+        if (itemsLength > 0) {
+          selectedItem.click();
+        }
+      }
     },
     onChange: function onChange(e) {
       var inputText = e.target.value;
@@ -54,7 +71,6 @@ export var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
         clearInput();
       }
       handleChange(e);
-      setSelected(0);
     },
     onPaste: function onPaste(e) {
       var pastedText = e.clipboardData.getData("text");

package/dist/esm/components/CommandPallete/CommandPalleteHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.js","names":["React","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","mode","setMode","setSelected","focusInput","current","focus","clearInput","value","e","key","length","inputText","target","startsWith","pastedText","clipboardData","getData","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n  StyledSpinnerLoader,\n} from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\n\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n  const { setSelected } = useSelectedContext();\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  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n        type={mode === \"id\" ? \"number\" : \"text\"}\n        aria-autocomplete=\"list\"\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        role=\"combobox\"\n        spellCheck={false}\n        value={search}\n        onKeyDown={(e) => {\n          if (e.key === \"Backspace\" && mode === \"id\" && search.length === 0) {\n            setMode(\"default\");\n          }\n        }}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n\n          handleChange(e);\n          setSelected(0);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\n            setMode(\"id\");\n          }\n        }}\n      />\n\n      <StyledActionWrapper>\n        {loading ? (\n          <StyledSpinnerLoader\n            aria-busy={true}\n            aria-label=\"Loading...\"\n            aria-valuemax={100}\n            aria-valuemin={0}\n            role=\"progressbar\"\n          />\n        ) : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}
+{"version":3,"file":"CommandPalleteHeader.js","names":["React","useEffect","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","CommandPalleteHeader","search","handleChange","loading","commandsLength","itemsLength","onChangeSearch","inputRef","mode","setMode","setSelected","selected","focusInput","current","focus","clearInput","length","e","key","selectedItem","document","querySelectorAll","click","inputText","target","value","startsWith","pastedText","clipboardData","getData","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n  StyledSpinnerLoader,\n} from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\n\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n  commandsLength: number;\n  itemsLength: number;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  commandsLength,\n  itemsLength,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n  const { setSelected, selected } = useSelectedContext();\n\n  const focusInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const clearInput = () => {\n    if (inputRef && inputRef.current) {\n      onChangeSearch(\"\");\n    }\n  };\n\n  useEffect(() => {\n    if (search.length > 0) {\n      if (itemsLength > commandsLength) {\n        setSelected(commandsLength);\n      } else {\n        setSelected(0);\n      }\n    }\n  }, [search, commandsLength, itemsLength, setSelected]);\n\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n        type={mode === \"id\" ? \"number\" : \"text\"}\n        aria-autocomplete=\"list\"\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        role=\"combobox\"\n        spellCheck={false}\n        value={search}\n        onKeyDown={(e) => {\n          if (\n            e.key === \"Backspace\" &&\n            mode !== \"default\" &&\n            search.length === 0\n          ) {\n            setMode(\"default\");\n          }\n\n          if (e.key === \"Enter\") {\n            const selectedItem = document.querySelectorAll(\".cp-item\")[\n              selected\n            ] as HTMLElement;\n\n            if (itemsLength > 0) {\n              selectedItem.click();\n            }\n          }\n        }}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n\n          handleChange(e);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\n            setMode(\"id\");\n          }\n        }}\n      />\n\n      <StyledActionWrapper>\n        {loading ? (\n          <StyledSpinnerLoader\n            aria-busy={true}\n            aria-label=\"Loading...\"\n            aria-valuemax={100}\n            aria-valuemin={0}\n            role=\"progressbar\"\n          />\n        ) : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}

package/dist/esm/components/CommandPallete/CommandPalleteItem.d.ts

@@ -1,5 +1,5 @@
-import React, { HTMLAttributes, ReactNode } from "react";
-export interface CommandPalleteItemProps extends HTMLAttributes<HTMLLIElement> {
+import React, { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface CommandPalleteItemProps extends ComponentPropsWithoutRef<"li"> {
     title: string;
     renderIcon: () => ReactNode;
     className?: string;

package/dist/esm/components/CommandPallete/CommandPalleteItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAK1E,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC5E,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,kBAAkB,+FAkC9B,CAAC"}
+{"version":3,"file":"CommandPalleteItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAExB,SAAS,EAEV,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,uBACf,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,kBAAkB,+FAkC9B,CAAC"}

package/dist/esm/components/CommandPallete/CommandPalleteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteItem.js","names":["classNames","React","forwardRef","Typography","StyledCommandPalleteItem","StyledIcon","useSelectedContext","CommandPalleteItem","ref","title","renderIcon","className","index","rest","icon","selected","setSelected","onMouseOver","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteItemProps extends HTMLAttributes<HTMLLIElement> {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPalleteItem = forwardRef(\n  (\n    { title, renderIcon, className, index, ...rest }: CommandPalleteItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseOver = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPalleteItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseOver={onMouseOver}\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        >\n          {title}\n        </Typography>\n      </StyledCommandPalleteItem>\n    );\n  }\n);\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":";;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,UAAU,QAAwC,OAAO;AACzE,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,wBAAwB,EAAEC,UAAU,QAAQ,yBAAyB;AAC9E,SAASC,kBAAkB,QAAQ,WAAW;AAU9C,OAAO,IAAMC,kBAAkB,gBAAGL,UAAU,CAC1C,gBAEEM,GAAuB,EACpB;EAAA,IAFDC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,IAAI;EAG9C,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkCJ,kBAAkB,EAAE;IAA9CS,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxBD,WAAW,CAACJ,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,oBAAC,wBAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAER,UAAU,CAAC,SAAS,EAAEW,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeI,QAAQ,KAAKH,KAAM;IAClC,WAAW,EAAEK,WAAY;IACzB,SAAS,EAAEL,KAAK,KAAKG;EAAS,iBAE9B,oBAAC,UAAU,QAAED,IAAI,CAAc,eAC/B,oBAAC,UAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAEdL,KAAK,CACK,CACY;AAE/B,CAAC,CACF;AAEDF,kBAAkB,CAACW,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteItem.js","names":["classNames","React","forwardRef","Typography","StyledCommandPalleteItem","StyledIcon","useSelectedContext","CommandPalleteItem","ref","title","renderIcon","className","index","rest","icon","selected","setSelected","onMouseOver","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteItemProps\n  extends ComponentPropsWithoutRef<\"li\"> {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPalleteItem = forwardRef(\n  (\n    { title, renderIcon, className, index, ...rest }: CommandPalleteItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseOver = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPalleteItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseOver={onMouseOver}\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        >\n          {title}\n        </Typography>\n      </StyledCommandPalleteItem>\n    );\n  }\n);\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":";;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAEVC,UAAU,QAGL,OAAO;AACd,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,wBAAwB,EAAEC,UAAU,QAAQ,yBAAyB;AAC9E,SAASC,kBAAkB,QAAQ,WAAW;AAW9C,OAAO,IAAMC,kBAAkB,gBAAGL,UAAU,CAC1C,gBAEEM,GAAuB,EACpB;EAAA,IAFDC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,IAAI;EAG9C,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkCJ,kBAAkB,EAAE;IAA9CS,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxBD,WAAW,CAACJ,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,oBAAC,wBAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAER,UAAU,CAAC,SAAS,EAAEW,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeI,QAAQ,KAAKH,KAAM;IAClC,WAAW,EAAEK,WAAY;IACzB,SAAS,EAAEL,KAAK,KAAKG;EAAS,iBAE9B,oBAAC,UAAU,QAAED,IAAI,CAAc,eAC/B,oBAAC,UAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAEdL,KAAK,CACK,CACY;AAE/B,CAAC,CACF;AAEDF,kBAAkB,CAACW,WAAW,GAAG,oBAAoB"}

package/dist/index.js

@@ -15693,12 +15693,14 @@
   var StyledBadge = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledBadge",
     componentId: "sc-6o8do5-0"
-  })(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";position:absolute;pointer-events:none;z-index:1;", " ", " ", " ", ""], function (props) {
+  })(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], FontStyle, function (props) {
     return props.backgroundColor;
   }, function (props) {
     return props.dimension + "px";
   }, function (props) {
     return props.dimension + "px";
+  }, function (props) {
+    return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
   }, function (_ref) {
     var position = _ref.position;
     return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
@@ -15742,14 +15744,16 @@
       _ref$backgroundColor = _ref.backgroundColor,
       backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
       _ref$isVisible = _ref.isVisible,
-      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+      value = _ref.value;
     return isVisible ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
       className: classNames__default["default"]("c-badge", className),
       dimension: dimension,
       position: position,
       backgroundColor: backgroundColor,
-      role: "status"
-    }) : null;
+      role: "status",
+      value: value
+    }, value && value > 100 ? 99 + "+" : value) : null;
   };
 
   exports.Accordion = Accordion;