@activecollab/components 1.0.281 → 1.0.282

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 (16) hide show
  1. package/dist/cjs/components/CommandPalette/CommandPalette.js +19 -11
  2. package/dist/cjs/components/CommandPalette/CommandPalette.js.map +1 -1
  3. package/dist/cjs/components/Icons/collection/Image.js +6 -5
  4. package/dist/cjs/components/Icons/collection/Image.js.map +1 -1
  5. package/dist/esm/components/CommandPalette/CommandPalette.d.ts +8 -5
  6. package/dist/esm/components/CommandPalette/CommandPalette.d.ts.map +1 -1
  7. package/dist/esm/components/CommandPalette/CommandPalette.js +14 -8
  8. package/dist/esm/components/CommandPalette/CommandPalette.js.map +1 -1
  9. package/dist/esm/components/Icons/collection/Image.d.ts.map +1 -1
  10. package/dist/esm/components/Icons/collection/Image.js +6 -5
  11. package/dist/esm/components/Icons/collection/Image.js.map +1 -1
  12. package/dist/index.js +20 -12
  13. package/dist/index.js.map +1 -1
  14. package/dist/index.min.js +1 -1
  15. package/dist/index.min.js.map +1 -1
  16. package/package.json +1 -1
package/dist/cjs/components/CommandPalette/CommandPalette.js CHANGED
@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.CommandPalette = void 0;
7
+ exports._CommandPalette = exports.CommandPalette = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _Dialog = require("../Dialog");
10
- var _CommandPalette = require("./CommandPalette.styles");
10
+ var _CommandPalette2 = require("./CommandPalette.styles");
11
11
  var _CommandPaletteCommandItem = require("./CommandPaletteCommandItem");
12
12
  var _CommandPaletteHeader = require("./CommandPaletteHeader");
13
13
  var _CommandPaletteItem = require("./CommandPaletteItem");
@@ -17,6 +17,7 @@ var _deepChildrenMap = require("../../utils/deepChildrenMap");
17
17
  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode", "loading"];
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
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
20
21
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
21
22
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
22
23
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -28,7 +29,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
28
29
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
29
30
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
30
31
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
31
- var CommandPalette = function CommandPalette(_ref) {
32
+ var _CommandPalette = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
32
33
  var children = _ref.children,
33
34
  onChangeSearch = _ref.onChangeSearch,
34
35
  search = _ref.search,
@@ -121,7 +122,9 @@ var CommandPalette = function CommandPalette(_ref) {
121
122
  });
122
123
  }
123
124
  };
124
- return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, rest, /*#__PURE__*/_react.default.createElement(_context.SearchContextProvider, {
125
+ return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, _extends({}, rest, {
126
+ ref: ref
127
+ }), /*#__PURE__*/_react.default.createElement(_context.SearchContextProvider, {
125
128
  value: {
126
129
  search: search,
127
130
  onChangeSearch: onChangeSearch
@@ -131,7 +134,7 @@ var CommandPalette = function CommandPalette(_ref) {
131
134
  selected: selected,
132
135
  setSelected: setSelected
133
136
  }
134
- }, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPalette, {
137
+ }, /*#__PURE__*/_react.default.createElement(_CommandPalette2.StyledCommandPalette, {
135
138
  onKeyDown: function onKeyDown(e) {
136
139
  if (e.key === "ArrowDown") {
137
140
  e.preventDefault();
@@ -162,13 +165,18 @@ var CommandPalette = function CommandPalette(_ref) {
162
165
  commandsLength: filterChildren.commandsLength,
163
166
  itemsLength: filterChildren.itemsLength,
164
167
  loading: loading
165
- })), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteWrapper, {
168
+ })), /*#__PURE__*/_react.default.createElement(_CommandPalette2.StyledCommandPaletteWrapper, {
166
169
  ref: listWrapperRef
167
170
  }, filterChildren.items)))));
168
- };
171
+ });
172
+ exports._CommandPalette = _CommandPalette;
173
+ _CommandPalette.displayName = "CommandPalette";
174
+
175
+ // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757
176
+ var CommandPalette = Object.assign({}, _CommandPalette, {
177
+ List: _CommandPaletteList.CommandPaletteList,
178
+ Item: _CommandPaletteItem.CommandPaletteItem,
179
+ CommandItem: _CommandPaletteItem.CommandPaletteItem
180
+ });
169
181
  exports.CommandPalette = CommandPalette;
170
- CommandPalette.displayName = "CommandPalette";
171
- CommandPalette.List = _CommandPaletteList.CommandPaletteList;
172
- CommandPalette.Item = _CommandPaletteItem.CommandPaletteItem;
173
- CommandPalette.CommandItem = _CommandPaletteCommandItem.CommandPaletteCommandItem;
174
182
  //# sourceMappingURL=CommandPalette.js.map
package/dist/cjs/components/CommandPalette/CommandPalette.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CommandPalette.js","names":["CommandPalette","children","onChangeSearch","search","mode","setMode","loading","rest","useState","selected","setSelected","listWrapperRef","useRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","itemsLength","commandsLength","items","deepMap","child","item","clonedElement","type","CommandPaletteList","cloneElement","props","CommandPaletteCommandItem","index","CommandPaletteItem","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n cloneElement,\n PropsWithChildren,\n ReactElement,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n StyledCommandPalette,\n StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n CommandPaletteItem,\n CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n ModeContextProvider,\n SelectedContextProvider,\n SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface CommandPaletteProps extends DialogProps {\n onChangeSearch: (search: string) => void;\n search: string;\n mode: string;\n setMode: (value: string) => void;\n loading?: boolean;\n}\n\nexport const CommandPalette = ({\n children,\n onChangeSearch,\n search,\n mode,\n setMode,\n loading,\n ...rest\n}: PropsWithChildren<CommandPaletteProps>) => {\n const [selected, setSelected] = useState<number>(0);\n const listWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChangeSearch(e.target.value);\n };\n\n const scrollToTop = () => {\n listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const scrollToBottom = () => {\n listWrapperRef.current?.scrollTo({\n top: listWrapperRef.current.scrollHeight,\n behavior: \"smooth\",\n });\n };\n\n const filterChildren = useMemo(() => {\n let itemsLength = 0;\n let commandsLength = 0;\n\n const items = deepMap(children, (child) => {\n const item = child as ReactElement<CommandPaletteItemProps>;\n let clonedElement;\n\n if (item && item.type === CommandPaletteList) {\n clonedElement = cloneElement(item, {\n ...item.props,\n });\n }\n\n if (item && item.type === CommandPaletteCommandItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n commandsLength++;\n }\n\n if (item && item.type === CommandPaletteItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n }\n\n return clonedElement;\n });\n\n return { items, itemsLength, commandsLength };\n }, [children, selected]);\n\n const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n const items = document.querySelectorAll(\".cp-item\");\n\n let index = 0;\n let newIndex = 0;\n let newItem: Element | null = null;\n\n if (direction === \"down\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = index === items.length - 1 ? 0 : index + 1;\n } else if (direction === \"up\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = !index ? items.length - 1 : index - 1;\n } else {\n setSelected(0);\n }\n\n newItem = items[newIndex];\n\n if (newItem && typeof newIndex === \"number\") {\n setSelected(newIndex);\n\n newItem.scrollIntoView({\n behavior: \"smooth\",\n block: newIndex ? \"center\" : \"end\",\n });\n }\n };\n\n return (\n <Dialog {...rest}>\n <SearchContextProvider value={{ search, onChangeSearch }}>\n <SelectedContextProvider value={{ selected: selected, setSelected }}>\n <StyledCommandPalette\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n handleChangeSelected(\"down\");\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n handleChangeSelected(\"up\");\n }\n\n if (e.key === \"End\") {\n e.preventDefault();\n scrollToBottom();\n setSelected(filterChildren.itemsLength - 1);\n }\n\n if (e.key === \"Home\") {\n e.preventDefault();\n scrollToTop();\n setSelected(0);\n }\n }}\n >\n <ModeContextProvider value={{ mode, setMode }}>\n <CommandPaletteHeader\n handleChange={handleChange}\n commandsLength={filterChildren.commandsLength}\n itemsLength={filterChildren.itemsLength}\n loading={loading}\n />\n </ModeContextProvider>\n\n <StyledCommandPaletteWrapper ref={listWrapperRef}>\n {filterChildren.items}\n </StyledCommandPaletteWrapper>\n </StyledCommandPalette>\n </SelectedContextProvider>\n </SearchContextProvider>\n </Dialog>\n );\n};\n\nCommandPalette.displayName = \"CommandPalette\";\n\nCommandPalette.List = CommandPaletteList;\nCommandPalette.Item = CommandPaletteItem;\nCommandPalette.CommandItem = CommandPaletteCommandItem;\n"],"mappings":"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"}
1
+ {"version":3,"file":"CommandPalette.js","names":["_CommandPalette","forwardRef","ref","children","onChangeSearch","search","mode","setMode","loading","rest","useState","selected","setSelected","listWrapperRef","useRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","itemsLength","commandsLength","items","deepMap","child","item","clonedElement","type","CommandPaletteList","cloneElement","props","CommandPaletteCommandItem","index","CommandPaletteItem","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","CommandPalette","Object","assign","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n cloneElement,\n forwardRef,\n PropsWithChildren,\n ReactElement,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n StyledCommandPalette,\n StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n CommandPaletteItem,\n CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n ModeContextProvider,\n SelectedContextProvider,\n SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface CommandPaletteProps extends DialogProps {\n onChangeSearch: (search: string) => void;\n search: string;\n mode: string;\n setMode: (value: string) => void;\n loading?: boolean;\n}\n\nexport const _CommandPalette = forwardRef<\n HTMLDivElement,\n PropsWithChildren<CommandPaletteProps>\n>(\n (\n { children, onChangeSearch, search, mode, setMode, loading, ...rest },\n ref\n ) => {\n const [selected, setSelected] = useState<number>(0);\n const listWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChangeSearch(e.target.value);\n };\n\n const scrollToTop = () => {\n listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const scrollToBottom = () => {\n listWrapperRef.current?.scrollTo({\n top: listWrapperRef.current.scrollHeight,\n behavior: \"smooth\",\n });\n };\n\n const filterChildren = useMemo(() => {\n let itemsLength = 0;\n let commandsLength = 0;\n\n const items = deepMap(children, (child) => {\n const item = child as ReactElement<CommandPaletteItemProps>;\n let clonedElement;\n\n if (item && item.type === CommandPaletteList) {\n clonedElement = cloneElement(item, {\n ...item.props,\n });\n }\n\n if (item && item.type === CommandPaletteCommandItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n commandsLength++;\n }\n\n if (item && item.type === CommandPaletteItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n }\n\n return clonedElement;\n });\n\n return { items, itemsLength, commandsLength };\n }, [children, selected]);\n\n const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n const items = document.querySelectorAll(\".cp-item\");\n\n let index = 0;\n let newIndex = 0;\n let newItem: Element | null = null;\n\n if (direction === \"down\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = index === items.length - 1 ? 0 : index + 1;\n } else if (direction === \"up\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = !index ? items.length - 1 : index - 1;\n } else {\n setSelected(0);\n }\n\n newItem = items[newIndex];\n\n if (newItem && typeof newIndex === \"number\") {\n setSelected(newIndex);\n\n newItem.scrollIntoView({\n behavior: \"smooth\",\n block: newIndex ? \"center\" : \"end\",\n });\n }\n };\n\n return (\n <Dialog {...rest} ref={ref}>\n <SearchContextProvider value={{ search, onChangeSearch }}>\n <SelectedContextProvider value={{ selected: selected, setSelected }}>\n <StyledCommandPalette\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n handleChangeSelected(\"down\");\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n handleChangeSelected(\"up\");\n }\n\n if (e.key === \"End\") {\n e.preventDefault();\n scrollToBottom();\n setSelected(filterChildren.itemsLength - 1);\n }\n\n if (e.key === \"Home\") {\n e.preventDefault();\n scrollToTop();\n setSelected(0);\n }\n }}\n >\n <ModeContextProvider value={{ mode, setMode }}>\n <CommandPaletteHeader\n handleChange={handleChange}\n commandsLength={filterChildren.commandsLength}\n itemsLength={filterChildren.itemsLength}\n loading={loading}\n />\n </ModeContextProvider>\n\n <StyledCommandPaletteWrapper ref={listWrapperRef}>\n {filterChildren.items}\n </StyledCommandPaletteWrapper>\n </StyledCommandPalette>\n </SelectedContextProvider>\n </SearchContextProvider>\n </Dialog>\n );\n }\n);\n\n_CommandPalette.displayName = \"CommandPalette\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const CommandPalette = Object.assign({}, _CommandPalette, {\n List: CommandPaletteList,\n Item: CommandPaletteItem,\n CommandItem: CommandPaletteItem,\n});\n"],"mappings":"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"}
package/dist/cjs/components/Icons/collection/Image.js CHANGED
@@ -28,17 +28,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
28
28
  */
29
29
  var ImageIcon = /*#__PURE__*/_react.default.forwardRef(function (props, svgRef) {
30
30
  return /*#__PURE__*/_react.default.createElement("svg", _extends({
31
- width: 20,
32
- height: 16,
33
- viewBox: "0 0 20 16",
31
+ width: 24,
32
+ height: 24,
33
+ viewBox: "0 0 24 24",
34
34
  xmlns: "http://www.w3.org/2000/svg",
35
35
  "data-testid": "ImageIcon",
36
36
  fill: "var(--color-theme-600)",
37
37
  focusable: false,
38
38
  ref: svgRef
39
39
  }, props), /*#__PURE__*/_react.default.createElement("path", {
40
- d: "M18 0a2 2 0 011.994 1.85L20 2v12a2 2 0 01-1.85 1.995L18 16H2a2 2 0 01-1.995-1.85L0 14V2A2 2 0 011.85.005L2 0h16zm0 2H2v12h16V2zm-5.5 4l4.5 6H3l3.5-4.5 2.5 3L12.5 6zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z",
41
- fillRule: "evenodd"
40
+ fillRule: "evenodd",
41
+ clipRule: "evenodd",
42
+ d: "M20 4a2 2 0 011.994 1.85L22 6v12a2 2 0 01-1.85 1.994L20 20H4a2 2 0 01-1.995-1.85L2 18V6a2 2 0 011.85-1.995L4 4h16zm0 2H4v12h16V6zm-5.5 4l4.5 6H5l3.5-4.5 2.5 3 3.5-4.5zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"
42
43
  }));
43
44
  });
44
45
  ImageIcon.displayName = "ImageIcon";
package/dist/cjs/components/Icons/collection/Image.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","names":["ImageIcon","React","forwardRef","props","svgRef","displayName"],"sources":["../../../../../src/components/Icons/collection/Image.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ImageIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n * <ImageIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst ImageIcon = React.forwardRef(\n (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n <svg\n width={20}\n height={16}\n viewBox=\"0 0 20 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid=\"ImageIcon\"\n fill=\"var(--color-theme-600)\"\n focusable={false}\n ref={svgRef}\n {...props}\n >\n <path\n d=\"M18 0a2 2 0 011.994 1.85L20 2v12a2 2 0 01-1.85 1.995L18 16H2a2 2 0 01-1.995-1.85L0 14V2A2 2 0 011.85.005L2 0h16zm0 2H2v12h16V2zm-5.5 4l4.5 6H3l3.5-4.5 2.5 3L12.5 6zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z\"\n fillRule=\"evenodd\"\n />\n </svg>\n )\n);\nImageIcon.displayName = \"ImageIcon\";\nexport default ImageIcon;\n"],"mappings":";;;;;;AAAA;AAA0B;AAAA;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAChC,UAACC,KAAoC,EAAEC,MAAiC;EAAA,oBACtE;IACE,KAAK,EAAE,EAAG;IACV,MAAM,EAAE,EAAG;IACX,OAAO,EAAC,WAAW;IACnB,KAAK,EAAC,4BAA4B;IAClC,eAAY,WAAW;IACvB,IAAI,EAAC,wBAAwB;IAC7B,SAAS,EAAE,KAAM;IACjB,GAAG,EAAEA;EAAO,GACRD,KAAK,gBAET;IACE,CAAC,EAAC,4MAA4M;IAC9M,QAAQ,EAAC;EAAS,EAClB,CACE;AAAA,CACP,CACF;AACDH,SAAS,CAACK,WAAW,GAAG,WAAW;AAAC,eACrBL,SAAS;AAAA"}
1
+ {"version":3,"file":"Image.js","names":["ImageIcon","React","forwardRef","props","svgRef","displayName"],"sources":["../../../../../src/components/Icons/collection/Image.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ImageIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n * <ImageIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst ImageIcon = React.forwardRef(\n (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid=\"ImageIcon\"\n fill=\"var(--color-theme-600)\"\n focusable={false}\n ref={svgRef}\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M20 4a2 2 0 011.994 1.85L22 6v12a2 2 0 01-1.85 1.994L20 20H4a2 2 0 01-1.995-1.85L2 18V6a2 2 0 011.85-1.995L4 4h16zm0 2H4v12h16V6zm-5.5 4l4.5 6H5l3.5-4.5 2.5 3 3.5-4.5zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z\"\n />\n </svg>\n )\n);\nImageIcon.displayName = \"ImageIcon\";\nexport default ImageIcon;\n"],"mappings":";;;;;;AAAA;AAA0B;AAAA;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAChC,UAACC,KAAoC,EAAEC,MAAiC;EAAA,oBACtE;IACE,KAAK,EAAE,EAAG;IACV,MAAM,EAAE,EAAG;IACX,OAAO,EAAC,WAAW;IACnB,KAAK,EAAC,4BAA4B;IAClC,eAAY,WAAW;IACvB,IAAI,EAAC,wBAAwB;IAC7B,SAAS,EAAE,KAAM;IACjB,GAAG,EAAEA;EAAO,GACRD,KAAK,gBAET;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC;EAA+M,EACjN,CACE;AAAA,CACP,CACF;AACDH,SAAS,CAACK,WAAW,GAAG,WAAW;AAAC,eACrBL,SAAS;AAAA"}
package/dist/esm/components/CommandPalette/CommandPalette.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { PropsWithChildren } from "react";
1
+ import React from "react";
2
2
  import { DialogProps } from "../Dialog";
3
3
  import { CommandPaletteItemProps } from "./CommandPaletteItem";
4
4
  export interface CommandPaletteProps extends DialogProps {
@@ -8,14 +8,17 @@ export interface CommandPaletteProps extends DialogProps {
8
8
  setMode: (value: string) => void;
9
9
  loading?: boolean;
10
10
  }
11
- export declare const CommandPalette: {
12
- ({ children, onChangeSearch, search, mode, setMode, loading, ...rest }: PropsWithChildren<CommandPaletteProps>): JSX.Element;
13
- displayName: string;
11
+ export declare const _CommandPalette: React.ForwardRefExoticComponent<CommandPaletteProps & {
12
+ children?: React.ReactNode;
13
+ } & React.RefAttributes<HTMLDivElement>>;
14
+ export declare const CommandPalette: React.ForwardRefExoticComponent<CommandPaletteProps & {
15
+ children?: React.ReactNode;
16
+ } & React.RefAttributes<HTMLDivElement>> & {
14
17
  List: {
15
18
  ({ children, heading, visible, }: React.PropsWithChildren<import("./CommandPaletteList").CommandPaletteListProps>): JSX.Element | null;
16
19
  displayName: string;
17
20
  };
18
21
  Item: React.ForwardRefExoticComponent<CommandPaletteItemProps & React.RefAttributes<HTMLLIElement>>;
19
- CommandItem: React.ForwardRefExoticComponent<import("./CommandPaletteCommandItem").CommandPaletteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
22
+ CommandItem: React.ForwardRefExoticComponent<CommandPaletteItemProps & React.RefAttributes<HTMLLIElement>>;
20
23
  };
21
24
  //# 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,KAAK,EAAE,EAGZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAOhD,OAAO,EAEL,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAW9B,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc;4EAQxB,kBAAkB,mBAAmB,CAAC;;;;;;;;CAiJxC,CAAC"}
1
+ {"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAOhD,OAAO,EAEL,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAW9B,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,eAAe;;wCAyJ3B,CAAC;AAKF,eAAO,MAAM,cAAc;;;;;;;;;CAIzB,CAAC"}
package/dist/esm/components/CommandPalette/CommandPalette.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
  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode", "loading"];
4
- import React, { cloneElement, useMemo, useRef, useState } from "react";
4
+ import React, { cloneElement, forwardRef, useMemo, useRef, useState } from "react";
5
5
  import { Dialog } from "../Dialog";
6
6
  import { StyledCommandPalette, StyledCommandPaletteWrapper } from "./CommandPalette.styles";
7
7
  import { CommandPaletteCommandItem } from "./CommandPaletteCommandItem";
@@ -10,7 +10,7 @@ import { CommandPaletteItem } from "./CommandPaletteItem";
10
10
  import { CommandPaletteList } from "./CommandPaletteList";
11
11
  import { ModeContextProvider, SelectedContextProvider, SearchContextProvider } from "./context";
12
12
  import { deepMap } from "../../utils/deepChildrenMap";
13
- export var CommandPalette = function CommandPalette(_ref) {
13
+ export var _CommandPalette = /*#__PURE__*/forwardRef(function (_ref, ref) {
14
14
  var children = _ref.children,
15
15
  onChangeSearch = _ref.onChangeSearch,
16
16
  search = _ref.search,
@@ -102,7 +102,9 @@ export var CommandPalette = function CommandPalette(_ref) {
102
102
  });
103
103
  }
104
104
  };
105
- return /*#__PURE__*/React.createElement(Dialog, rest, /*#__PURE__*/React.createElement(SearchContextProvider, {
105
+ return /*#__PURE__*/React.createElement(Dialog, _extends({}, rest, {
106
+ ref: ref
107
+ }), /*#__PURE__*/React.createElement(SearchContextProvider, {
106
108
  value: {
107
109
  search: search,
108
110
  onChangeSearch: onChangeSearch
@@ -146,9 +148,13 @@ export var CommandPalette = function CommandPalette(_ref) {
146
148
  })), /*#__PURE__*/React.createElement(StyledCommandPaletteWrapper, {
147
149
  ref: listWrapperRef
148
150
  }, filterChildren.items)))));
149
- };
150
- CommandPalette.displayName = "CommandPalette";
151
- CommandPalette.List = CommandPaletteList;
152
- CommandPalette.Item = CommandPaletteItem;
153
- CommandPalette.CommandItem = CommandPaletteCommandItem;
151
+ });
152
+ _CommandPalette.displayName = "CommandPalette";
153
+
154
+ // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757
155
+ export var CommandPalette = Object.assign({}, _CommandPalette, {
156
+ List: CommandPaletteList,
157
+ Item: CommandPaletteItem,
158
+ CommandItem: CommandPaletteItem
159
+ });
154
160
  //# sourceMappingURL=CommandPalette.js.map
package/dist/esm/components/CommandPalette/CommandPalette.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CommandPalette.js","names":["React","cloneElement","useMemo","useRef","useState","Dialog","StyledCommandPalette","StyledCommandPaletteWrapper","CommandPaletteCommandItem","CommandPaletteHeader","CommandPaletteItem","CommandPaletteList","ModeContextProvider","SelectedContextProvider","SearchContextProvider","deepMap","CommandPalette","children","onChangeSearch","search","mode","setMode","loading","rest","selected","setSelected","listWrapperRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","itemsLength","commandsLength","items","child","item","clonedElement","type","props","index","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n cloneElement,\n PropsWithChildren,\n ReactElement,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n StyledCommandPalette,\n StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n CommandPaletteItem,\n CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n ModeContextProvider,\n SelectedContextProvider,\n SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface CommandPaletteProps extends DialogProps {\n onChangeSearch: (search: string) => void;\n search: string;\n mode: string;\n setMode: (value: string) => void;\n loading?: boolean;\n}\n\nexport const CommandPalette = ({\n children,\n onChangeSearch,\n search,\n mode,\n setMode,\n loading,\n ...rest\n}: PropsWithChildren<CommandPaletteProps>) => {\n const [selected, setSelected] = useState<number>(0);\n const listWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChangeSearch(e.target.value);\n };\n\n const scrollToTop = () => {\n listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const scrollToBottom = () => {\n listWrapperRef.current?.scrollTo({\n top: listWrapperRef.current.scrollHeight,\n behavior: \"smooth\",\n });\n };\n\n const filterChildren = useMemo(() => {\n let itemsLength = 0;\n let commandsLength = 0;\n\n const items = deepMap(children, (child) => {\n const item = child as ReactElement<CommandPaletteItemProps>;\n let clonedElement;\n\n if (item && item.type === CommandPaletteList) {\n clonedElement = cloneElement(item, {\n ...item.props,\n });\n }\n\n if (item && item.type === CommandPaletteCommandItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n commandsLength++;\n }\n\n if (item && item.type === CommandPaletteItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n }\n\n return clonedElement;\n });\n\n return { items, itemsLength, commandsLength };\n }, [children, selected]);\n\n const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n const items = document.querySelectorAll(\".cp-item\");\n\n let index = 0;\n let newIndex = 0;\n let newItem: Element | null = null;\n\n if (direction === \"down\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = index === items.length - 1 ? 0 : index + 1;\n } else if (direction === \"up\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = !index ? items.length - 1 : index - 1;\n } else {\n setSelected(0);\n }\n\n newItem = items[newIndex];\n\n if (newItem && typeof newIndex === \"number\") {\n setSelected(newIndex);\n\n newItem.scrollIntoView({\n behavior: \"smooth\",\n block: newIndex ? \"center\" : \"end\",\n });\n }\n };\n\n return (\n <Dialog {...rest}>\n <SearchContextProvider value={{ search, onChangeSearch }}>\n <SelectedContextProvider value={{ selected: selected, setSelected }}>\n <StyledCommandPalette\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n handleChangeSelected(\"down\");\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n handleChangeSelected(\"up\");\n }\n\n if (e.key === \"End\") {\n e.preventDefault();\n scrollToBottom();\n setSelected(filterChildren.itemsLength - 1);\n }\n\n if (e.key === \"Home\") {\n e.preventDefault();\n scrollToTop();\n setSelected(0);\n }\n }}\n >\n <ModeContextProvider value={{ mode, setMode }}>\n <CommandPaletteHeader\n handleChange={handleChange}\n commandsLength={filterChildren.commandsLength}\n itemsLength={filterChildren.itemsLength}\n loading={loading}\n />\n </ModeContextProvider>\n\n <StyledCommandPaletteWrapper ref={listWrapperRef}>\n {filterChildren.items}\n </StyledCommandPaletteWrapper>\n </StyledCommandPalette>\n </SelectedContextProvider>\n </SearchContextProvider>\n </Dialog>\n );\n};\n\nCommandPalette.displayName = \"CommandPalette\";\n\nCommandPalette.List = CommandPaletteList;\nCommandPalette.Item = CommandPaletteItem;\nCommandPalette.CommandItem = CommandPaletteCommandItem;\n"],"mappings":"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"}
1
+ {"version":3,"file":"CommandPalette.js","names":["React","cloneElement","forwardRef","useMemo","useRef","useState","Dialog","StyledCommandPalette","StyledCommandPaletteWrapper","CommandPaletteCommandItem","CommandPaletteHeader","CommandPaletteItem","CommandPaletteList","ModeContextProvider","SelectedContextProvider","SearchContextProvider","deepMap","_CommandPalette","ref","children","onChangeSearch","search","mode","setMode","loading","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","CommandPalette","Object","assign","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n cloneElement,\n forwardRef,\n PropsWithChildren,\n ReactElement,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n StyledCommandPalette,\n StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n CommandPaletteItem,\n CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n ModeContextProvider,\n SelectedContextProvider,\n SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface CommandPaletteProps extends DialogProps {\n onChangeSearch: (search: string) => void;\n search: string;\n mode: string;\n setMode: (value: string) => void;\n loading?: boolean;\n}\n\nexport const _CommandPalette = forwardRef<\n HTMLDivElement,\n PropsWithChildren<CommandPaletteProps>\n>(\n (\n { children, onChangeSearch, search, mode, setMode, loading, ...rest },\n ref\n ) => {\n const [selected, setSelected] = useState<number>(0);\n const listWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChangeSearch(e.target.value);\n };\n\n const scrollToTop = () => {\n listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n };\n\n const scrollToBottom = () => {\n listWrapperRef.current?.scrollTo({\n top: listWrapperRef.current.scrollHeight,\n behavior: \"smooth\",\n });\n };\n\n const filterChildren = useMemo(() => {\n let itemsLength = 0;\n let commandsLength = 0;\n\n const items = deepMap(children, (child) => {\n const item = child as ReactElement<CommandPaletteItemProps>;\n let clonedElement;\n\n if (item && item.type === CommandPaletteList) {\n clonedElement = cloneElement(item, {\n ...item.props,\n });\n }\n\n if (item && item.type === CommandPaletteCommandItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n commandsLength++;\n }\n\n if (item && item.type === CommandPaletteItem) {\n clonedElement = cloneElement(item, {\n ...item.props,\n index: itemsLength,\n selected,\n });\n\n itemsLength++;\n }\n\n return clonedElement;\n });\n\n return { items, itemsLength, commandsLength };\n }, [children, selected]);\n\n const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n const items = document.querySelectorAll(\".cp-item\");\n\n let index = 0;\n let newIndex = 0;\n let newItem: Element | null = null;\n\n if (direction === \"down\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = index === items.length - 1 ? 0 : index + 1;\n } else if (direction === \"up\") {\n items.forEach((_, i) => {\n if (i === selected) {\n index = i;\n }\n });\n\n newIndex = !index ? items.length - 1 : index - 1;\n } else {\n setSelected(0);\n }\n\n newItem = items[newIndex];\n\n if (newItem && typeof newIndex === \"number\") {\n setSelected(newIndex);\n\n newItem.scrollIntoView({\n behavior: \"smooth\",\n block: newIndex ? \"center\" : \"end\",\n });\n }\n };\n\n return (\n <Dialog {...rest} ref={ref}>\n <SearchContextProvider value={{ search, onChangeSearch }}>\n <SelectedContextProvider value={{ selected: selected, setSelected }}>\n <StyledCommandPalette\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n handleChangeSelected(\"down\");\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n handleChangeSelected(\"up\");\n }\n\n if (e.key === \"End\") {\n e.preventDefault();\n scrollToBottom();\n setSelected(filterChildren.itemsLength - 1);\n }\n\n if (e.key === \"Home\") {\n e.preventDefault();\n scrollToTop();\n setSelected(0);\n }\n }}\n >\n <ModeContextProvider value={{ mode, setMode }}>\n <CommandPaletteHeader\n handleChange={handleChange}\n commandsLength={filterChildren.commandsLength}\n itemsLength={filterChildren.itemsLength}\n loading={loading}\n />\n </ModeContextProvider>\n\n <StyledCommandPaletteWrapper ref={listWrapperRef}>\n {filterChildren.items}\n </StyledCommandPaletteWrapper>\n </StyledCommandPalette>\n </SelectedContextProvider>\n </SearchContextProvider>\n </Dialog>\n );\n }\n);\n\n_CommandPalette.displayName = \"CommandPalette\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const CommandPalette = Object.assign({}, _CommandPalette, {\n List: CommandPaletteList,\n Item: CommandPaletteItem,\n CommandItem: CommandPaletteItem,\n});\n"],"mappings":"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"}
package/dist/esm/components/Icons/collection/Image.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,SAAS,qlPAmBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,SAAS,qlPAoBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/dist/esm/components/Icons/collection/Image.js CHANGED
@@ -22,17 +22,18 @@ import React from "react";
22
22
  */
23
23
  var ImageIcon = /*#__PURE__*/React.forwardRef(function (props, svgRef) {
24
24
  return /*#__PURE__*/React.createElement("svg", _extends({
25
- width: 20,
26
- height: 16,
27
- viewBox: "0 0 20 16",
25
+ width: 24,
26
+ height: 24,
27
+ viewBox: "0 0 24 24",
28
28
  xmlns: "http://www.w3.org/2000/svg",
29
29
  "data-testid": "ImageIcon",
30
30
  fill: "var(--color-theme-600)",
31
31
  focusable: false,
32
32
  ref: svgRef
33
33
  }, props), /*#__PURE__*/React.createElement("path", {
34
- d: "M18 0a2 2 0 011.994 1.85L20 2v12a2 2 0 01-1.85 1.995L18 16H2a2 2 0 01-1.995-1.85L0 14V2A2 2 0 011.85.005L2 0h16zm0 2H2v12h16V2zm-5.5 4l4.5 6H3l3.5-4.5 2.5 3L12.5 6zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z",
35
- fillRule: "evenodd"
34
+ fillRule: "evenodd",
35
+ clipRule: "evenodd",
36
+ d: "M20 4a2 2 0 011.994 1.85L22 6v12a2 2 0 01-1.85 1.994L20 20H4a2 2 0 01-1.995-1.85L2 18V6a2 2 0 011.85-1.995L4 4h16zm0 2H4v12h16V6zm-5.5 4l4.5 6H5l3.5-4.5 2.5 3 3.5-4.5zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"
36
37
  }));
37
38
  });
38
39
  ImageIcon.displayName = "ImageIcon";
package/dist/esm/components/Icons/collection/Image.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","names":["React","ImageIcon","forwardRef","props","svgRef","displayName"],"sources":["../../../../../src/components/Icons/collection/Image.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ImageIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n * <ImageIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst ImageIcon = React.forwardRef(\n (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n <svg\n width={20}\n height={16}\n viewBox=\"0 0 20 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid=\"ImageIcon\"\n fill=\"var(--color-theme-600)\"\n focusable={false}\n ref={svgRef}\n {...props}\n >\n <path\n d=\"M18 0a2 2 0 011.994 1.85L20 2v12a2 2 0 01-1.85 1.995L18 16H2a2 2 0 01-1.995-1.85L0 14V2A2 2 0 011.85.005L2 0h16zm0 2H2v12h16V2zm-5.5 4l4.5 6H3l3.5-4.5 2.5 3L12.5 6zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z\"\n fillRule=\"evenodd\"\n />\n </svg>\n )\n);\nImageIcon.displayName = \"ImageIcon\";\nexport default ImageIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,SAAS,gBAAGD,KAAK,CAACE,UAAU,CAChC,UAACC,KAAoC,EAAEC,MAAiC;EAAA,oBACtE;IACE,KAAK,EAAE,EAAG;IACV,MAAM,EAAE,EAAG;IACX,OAAO,EAAC,WAAW;IACnB,KAAK,EAAC,4BAA4B;IAClC,eAAY,WAAW;IACvB,IAAI,EAAC,wBAAwB;IAC7B,SAAS,EAAE,KAAM;IACjB,GAAG,EAAEA;EAAO,GACRD,KAAK,gBAET;IACE,CAAC,EAAC,4MAA4M;IAC9M,QAAQ,EAAC;EAAS,EAClB,CACE;AAAA,CACP,CACF;AACDF,SAAS,CAACI,WAAW,GAAG,WAAW;AACnC,eAAeJ,SAAS"}
1
+ {"version":3,"file":"Image.js","names":["React","ImageIcon","forwardRef","props","svgRef","displayName"],"sources":["../../../../../src/components/Icons/collection/Image.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ImageIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n * <ImageIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst ImageIcon = React.forwardRef(\n (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid=\"ImageIcon\"\n fill=\"var(--color-theme-600)\"\n focusable={false}\n ref={svgRef}\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M20 4a2 2 0 011.994 1.85L22 6v12a2 2 0 01-1.85 1.994L20 20H4a2 2 0 01-1.995-1.85L2 18V6a2 2 0 011.85-1.995L4 4h16zm0 2H4v12h16V6zm-5.5 4l4.5 6H5l3.5-4.5 2.5 3 3.5-4.5zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z\"\n />\n </svg>\n )\n);\nImageIcon.displayName = \"ImageIcon\";\nexport default ImageIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,SAAS,gBAAGD,KAAK,CAACE,UAAU,CAChC,UAACC,KAAoC,EAAEC,MAAiC;EAAA,oBACtE;IACE,KAAK,EAAE,EAAG;IACV,MAAM,EAAE,EAAG;IACX,OAAO,EAAC,WAAW;IACnB,KAAK,EAAC,4BAA4B;IAClC,eAAY,WAAW;IACvB,IAAI,EAAC,wBAAwB;IAC7B,SAAS,EAAE,KAAM;IACjB,GAAG,EAAEA;EAAO,GACRD,KAAK,gBAET;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC;EAA+M,EACjN,CACE;AAAA,CACP,CACF;AACDF,SAAS,CAACI,WAAW,GAAG,WAAW;AACnC,eAAeJ,SAAS"}
package/dist/index.js CHANGED
@@ -4234,17 +4234,18 @@
4234
4234
  */
4235
4235
  var ImageIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
4236
4236
  return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
4237
- width: 20,
4238
- height: 16,
4239
- viewBox: "0 0 20 16",
4237
+ width: 24,
4238
+ height: 24,
4239
+ viewBox: "0 0 24 24",
4240
4240
  xmlns: "http://www.w3.org/2000/svg",
4241
4241
  "data-testid": "ImageIcon",
4242
4242
  fill: "var(--color-theme-600)",
4243
4243
  focusable: false,
4244
4244
  ref: svgRef
4245
4245
  }, props), /*#__PURE__*/React__default["default"].createElement("path", {
4246
- d: "M18 0a2 2 0 011.994 1.85L20 2v12a2 2 0 01-1.85 1.995L18 16H2a2 2 0 01-1.995-1.85L0 14V2A2 2 0 011.85.005L2 0h16zm0 2H2v12h16V2zm-5.5 4l4.5 6H3l3.5-4.5 2.5 3L12.5 6zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z",
4247
- fillRule: "evenodd"
4246
+ fillRule: "evenodd",
4247
+ clipRule: "evenodd",
4248
+ d: "M20 4a2 2 0 011.994 1.85L22 6v12a2 2 0 01-1.85 1.994L20 20H4a2 2 0 01-1.995-1.85L2 18V6a2 2 0 011.85-1.995L4 4h16zm0 2H4v12h16V6zm-5.5 4l4.5 6H5l3.5-4.5 2.5 3 3.5-4.5zm-8-3a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"
4248
4249
  }));
4249
4250
  });
4250
4251
  ImageIcon.displayName = "ImageIcon";
@@ -16365,7 +16366,7 @@
16365
16366
  };
16366
16367
 
16367
16368
  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode", "loading"];
16368
- var CommandPalette = function CommandPalette(_ref) {
16369
+ var _CommandPalette = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
16369
16370
  var children = _ref.children,
16370
16371
  onChangeSearch = _ref.onChangeSearch,
16371
16372
  search = _ref.search,
@@ -16458,7 +16459,9 @@
16458
16459
  });
16459
16460
  }
16460
16461
  };
16461
- return /*#__PURE__*/React__default["default"].createElement(Dialog, rest, /*#__PURE__*/React__default["default"].createElement(SearchContextProvider, {
16462
+ return /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({}, rest, {
16463
+ ref: ref
16464
+ }), /*#__PURE__*/React__default["default"].createElement(SearchContextProvider, {
16462
16465
  value: {
16463
16466
  search: search,
16464
16467
  onChangeSearch: onChangeSearch
@@ -16502,11 +16505,15 @@
16502
16505
  })), /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteWrapper, {
16503
16506
  ref: listWrapperRef
16504
16507
  }, filterChildren.items)))));
16505
- };
16506
- CommandPalette.displayName = "CommandPalette";
16507
- CommandPalette.List = CommandPaletteList;
16508
- CommandPalette.Item = CommandPaletteItem;
16509
- CommandPalette.CommandItem = CommandPaletteCommandItem;
16508
+ });
16509
+ _CommandPalette.displayName = "CommandPalette";
16510
+
16511
+ // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757
16512
+ var CommandPalette = Object.assign({}, _CommandPalette, {
16513
+ List: CommandPaletteList,
16514
+ Item: CommandPaletteItem,
16515
+ CommandItem: CommandPaletteItem
16516
+ });
16510
16517
 
16511
16518
  exports.Accordion = Accordion;
16512
16519
  exports.AccordionContext = AccordionContext;
@@ -16791,6 +16798,7 @@
16791
16798
  exports.Wizard = Wizard;
16792
16799
  exports.WorkloadIcon = WorkloadIcon$1;
16793
16800
  exports.YearMonthPicker = YearMonthPicker;
16801
+ exports._CommandPalette = _CommandPalette;
16794
16802
  exports._Dialog = _Dialog;
16795
16803
  exports._List = _List;
16796
16804
  exports.isOptionGroup = isOptionGroup;