@apia/components 2.0.9 → 2.0.11

package/dist/components/SortableList/SortableListHandler.js

@@ -0,0 +1,161 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { EventEmitter, useSubscription } from '@apia/util';
+import { createContext, useMemo, useContext, Children, isValidElement, useRef, useCallback } from 'react';
+import { Box } from '@apia/theme';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _emitter, _items, _moveItem;
+function getTargetItem(ev) {
+  return ev.target.closest(
+    ".sortableList__item"
+  );
+}
+class SortableListHandler {
+  constructor() {
+    __privateAdd(this, _emitter, new EventEmitter());
+    __privateAdd(this, _items, []);
+    __publicField(this, "updateChildren", (items) => {
+      __privateSet(this, _items, Children.toArray(items).filter(
+        (el) => isValidElement(el)
+      ));
+    });
+    __privateAdd(this, _moveItem, (movingId, idBefore, after) => {
+      if (movingId === idBefore)
+        return;
+      const itemIndex = __privateGet(this, _items).findIndex(
+        (search) => search.props.id === movingId
+      );
+      const item = __privateGet(this, _items).splice(itemIndex, 1)[0];
+      const insertIndex = __privateGet(this, _items).findIndex(
+        (search) => search.props.id === idBefore
+      );
+      __privateGet(this, _items).splice(insertIndex + (after ? 1 : 0), 0, item);
+      __privateGet(this, _emitter).emit("sort", null);
+    });
+    __publicField(this, "useItemEvents", () => {
+      const unsuscribe = useRef(() => {
+      });
+      const ref = useCallback((el) => {
+        unsuscribe.current();
+        if (el) {
+          const handleDragEnd = (ev) => {
+            getTargetItem(ev).classList.remove("dragging");
+          };
+          const handleDrop = (ev) => {
+            const target = getTargetItem(ev);
+            __privateGet(this, _moveItem).call(this, ev.dataTransfer.getData("text"), target.id, target.classList.contains("after"));
+            target.classList.remove("dragover");
+            target.classList.remove("after");
+          };
+          const handleDragLeave = (ev) => {
+            getTargetItem(ev).classList.remove("dragover");
+          };
+          const handleDragOver = (ev) => {
+            ev.preventDefault();
+            ev.dataTransfer.dropEffect = "move";
+            getTargetItem(ev).classList.add("dragover");
+            const bounding = getTargetItem(ev).getBoundingClientRect();
+            if (ev.clientY - bounding.top > bounding.height / 2)
+              getTargetItem(ev).classList.add("after");
+            else
+              getTargetItem(ev).classList.remove("after");
+          };
+          document.addEventListener("dragend", handleDragEnd);
+          el.addEventListener("drop", handleDrop);
+          el.addEventListener("dragleave", handleDragLeave);
+          el.addEventListener("dragover", handleDragOver);
+          unsuscribe.current = () => {
+            document.removeEventListener("dragend", handleDragEnd);
+            el.removeEventListener("drop", handleDrop);
+            el.removeEventListener("dragleave", handleDragLeave);
+            el.removeEventListener("dragover", handleDragOver);
+          };
+        }
+      }, []);
+      return ref;
+    });
+    __publicField(this, "useSortChange", (onSortChange) => {
+      useSubscription({
+        makeSubscription: () => {
+          return __privateGet(this, _emitter).on("sort", () => {
+            onSortChange?.([...__privateGet(this, _items)]);
+          });
+        }
+      });
+    });
+    __publicField(this, "useWrapperEvents", () => {
+      const unsuscribe = useRef(() => {
+      });
+      const ref = useCallback((el) => {
+        unsuscribe.current();
+        if (el) {
+          let handleDrag2 = function(ev) {
+            const target = ev.target;
+            if (ev.dataTransfer) {
+              ev.dataTransfer.effectAllowed = "all";
+              ev.dataTransfer.setData("text", target.id);
+              target.classList.add("dragging");
+            }
+          };
+          el.addEventListener("dragstart", handleDrag2);
+          unsuscribe.current = () => {
+            el.removeEventListener("dragstart", handleDrag2);
+          };
+        }
+      }, []);
+      return ref;
+    });
+  }
+}
+_emitter = new WeakMap();
+_items = new WeakMap();
+_moveItem = new WeakMap();
+const con = createContext({});
+const SortableListContext = ({
+  boxProps,
+  children,
+  onSortChange
+}) => {
+  const handler = useMemo(() => new SortableListHandler(), []);
+  handler.useSortChange(onSortChange);
+  handler.updateChildren(children);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...boxProps,
+      as: boxProps?.as ?? "ul",
+      className: `sortableList ${boxProps?.className ?? ""}`,
+      ref: handler.useWrapperEvents(),
+      children: /* @__PURE__ */ jsx(con.Provider, { value: handler, children })
+    }
+  );
+};
+function useSortableListHandler() {
+  return useContext(con);
+}
+
+export { SortableListContext, SortableListHandler, useSortableListHandler };
+//# sourceMappingURL=SortableListHandler.js.map

package/dist/components/SortableList/SortableListHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableListHandler.js","sources":["../../../src/components/SortableList/SortableListHandler.tsx"],"sourcesContent":["import { EventEmitter } from '@apia/util';\r\nimport {\r\n  Children,\r\n  ReactElement,\r\n  ReactNode,\r\n  createContext,\r\n  isValidElement,\r\n  useCallback,\r\n  useContext,\r\n  useMemo,\r\n  useRef,\r\n} from 'react';\r\nimport { useSubscription } from '@apia/util';\r\nimport { Box, BoxProps } from '@apia/theme';\r\nimport { TSortableListItem } from './SortableListItem';\r\n\r\ntype THover = { id: string; after: boolean };\r\n\r\nfunction getTargetItem(ev: Event) {\r\n  return (ev.target as HTMLElement).closest(\r\n    '.sortableList__item',\r\n  ) as HTMLElement;\r\n}\r\n\r\nexport class SortableListHandler {\r\n  #emitter = new EventEmitter<{ hover: THover; sort: null }>();\r\n\r\n  #items: ReactElement<{ id: string }>[] = [];\r\n\r\n  updateChildren = (items: ReactNode) => {\r\n    this.#items = Children.toArray(items).filter((el): el is ReactElement =>\r\n      isValidElement(el),\r\n    );\r\n  };\r\n\r\n  #moveItem = (movingId: string, idBefore: string, after: boolean) => {\r\n    if (movingId === idBefore) return;\r\n\r\n    const itemIndex = this.#items.findIndex(\r\n      (search) => search.props.id === movingId,\r\n    );\r\n    const item = this.#items.splice(itemIndex, 1)![0]!;\r\n    const insertIndex = this.#items.findIndex(\r\n      (search) => search.props.id === idBefore,\r\n    );\r\n\r\n    this.#items.splice(insertIndex + (after ? 1 : 0), 0, item);\r\n    this.#emitter.emit('sort', null);\r\n  };\r\n\r\n  useItemEvents = () => {\r\n    const unsuscribe = useRef(() => {});\r\n    const ref = useCallback((el: HTMLElement) => {\r\n      unsuscribe.current();\r\n\r\n      if (el) {\r\n        const handleDragEnd = (ev: DragEvent) => {\r\n          getTargetItem(ev).classList.remove('dragging');\r\n        };\r\n\r\n        const handleDrop = (ev: DragEvent) => {\r\n          const target = getTargetItem(ev);\r\n\r\n          this.#moveItem(\r\n            ev.dataTransfer!.getData('text'),\r\n            target.id,\r\n            target.classList.contains('after'),\r\n          );\r\n\r\n          target.classList.remove('dragover');\r\n          target.classList.remove('after');\r\n        };\r\n\r\n        const handleDragLeave = (ev: DragEvent) => {\r\n          getTargetItem(ev).classList.remove('dragover');\r\n        };\r\n\r\n        const handleDragOver = (ev: DragEvent) => {\r\n          ev.preventDefault();\r\n          // eslint-disable-next-line no-param-reassign\r\n          ev.dataTransfer!.dropEffect = 'move';\r\n          getTargetItem(ev).classList.add('dragover');\r\n\r\n          const bounding = getTargetItem(ev).getBoundingClientRect();\r\n          if (ev.clientY - bounding.top > bounding.height / 2)\r\n            getTargetItem(ev).classList.add('after');\r\n          else getTargetItem(ev).classList.remove('after');\r\n        };\r\n\r\n        document.addEventListener('dragend', handleDragEnd);\r\n        el.addEventListener('drop', handleDrop);\r\n        el.addEventListener('dragleave', handleDragLeave);\r\n        el.addEventListener('dragover', handleDragOver);\r\n\r\n        unsuscribe.current = () => {\r\n          document.removeEventListener('dragend', handleDragEnd);\r\n          el.removeEventListener('drop', handleDrop);\r\n          el.removeEventListener('dragleave', handleDragLeave);\r\n          el.removeEventListener('dragover', handleDragOver);\r\n        };\r\n      }\r\n    }, []);\r\n\r\n    return ref;\r\n  };\r\n\r\n  useSortChange = (onSortChange?: (items: ReactElement[]) => unknown) => {\r\n    useSubscription({\r\n      makeSubscription: () => {\r\n        return this.#emitter.on('sort', () => {\r\n          onSortChange?.([...this.#items]);\r\n        });\r\n      },\r\n    });\r\n  };\r\n\r\n  useWrapperEvents = () => {\r\n    const unsuscribe = useRef(() => {});\r\n    const ref = useCallback((el: HTMLElement) => {\r\n      unsuscribe.current();\r\n\r\n      if (el) {\r\n        function handleDrag(ev: DragEvent) {\r\n          const target = ev.target as HTMLElement;\r\n\r\n          if (ev.dataTransfer) {\r\n            // eslint-disable-next-line no-param-reassign\r\n            ev.dataTransfer.effectAllowed = 'all';\r\n            ev.dataTransfer.setData('text', target.id);\r\n            target.classList.add('dragging');\r\n          }\r\n        }\r\n\r\n        el.addEventListener('dragstart', handleDrag);\r\n\r\n        unsuscribe.current = () => {\r\n          el.removeEventListener('dragstart', handleDrag);\r\n        };\r\n      }\r\n    }, []);\r\n\r\n    return ref;\r\n  };\r\n}\r\n\r\nconst con = createContext<SortableListHandler>({} as SortableListHandler);\r\n\r\nexport const SortableListContext = ({\r\n  boxProps,\r\n  children,\r\n  onSortChange,\r\n}: {\r\n  boxProps?: BoxProps;\r\n  children: ReactNode;\r\n  onSortChange?: (items: ReactElement<TSortableListItem>[]) => unknown;\r\n}) => {\r\n  // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  const handler = useMemo(() => new SortableListHandler(), []);\r\n  handler.useSortChange(onSortChange);\r\n  handler.updateChildren(children);\r\n\r\n  return (\r\n    <Box\r\n      {...boxProps}\r\n      as={boxProps?.as ?? 'ul'}\r\n      className={`sortableList ${boxProps?.className ?? ''}`}\r\n      ref={handler.useWrapperEvents()}\r\n    >\r\n      <con.Provider value={handler}>{children}</con.Provider>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport function useSortableListHandler() {\r\n  return useContext(con);\r\n}\r\n\r\nexport type { TSortableListItem };\r\n"],"names":["handleDrag"],"mappings":"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"}

package/dist/components/SortableList/SortableListItem.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { BoxProps } from '@apia/theme';
+
+type TSortableListItem = {
+    additionalProps?: any;
+    boxProps?: Omit<BoxProps, 'id'>;
+    id: string;
+    children: ReactNode;
+};
+declare const SortableListItem: React.MemoExoticComponent<({ boxProps, id, children }: TSortableListItem) => React.JSX.Element>;
+
+export { SortableListItem, type TSortableListItem };
+//# sourceMappingURL=SortableListItem.d.ts.map

package/dist/components/SortableList/SortableListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableListItem.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/SortableList/SortableListItem.js

@@ -0,0 +1,24 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { memo } from 'react';
+import { useSortableListHandler } from './SortableListHandler.js';
+
+const SortableListItem = memo(
+  ({ boxProps, id, children }) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ...boxProps,
+        as: boxProps?.as ?? "li",
+        className: `sortableList__item ${boxProps?.className ?? ""}`,
+        draggable: true,
+        id,
+        ref: useSortableListHandler().useItemEvents(),
+        children
+      }
+    );
+  }
+);
+
+export { SortableListItem };
+//# sourceMappingURL=SortableListItem.js.map

package/dist/components/SortableList/SortableListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableListItem.js","sources":["../../../src/components/SortableList/SortableListItem.tsx"],"sourcesContent":["import { Box, BoxProps } from '@apia/theme';\r\nimport { ReactNode, memo } from 'react';\r\nimport { useSortableListHandler } from './SortableListHandler';\r\n\r\nexport type TSortableListItem = {\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  additionalProps?: any;\r\n  boxProps?: Omit<BoxProps, 'id'>;\r\n  id: string;\r\n  children: ReactNode;\r\n};\r\n\r\nexport const SortableListItem = memo(\r\n  ({ boxProps, id, children }: TSortableListItem) => {\r\n    return (\r\n      <Box\r\n        {...boxProps}\r\n        as={boxProps?.as ?? 'li'}\r\n        className={`sortableList__item ${boxProps?.className ?? ''}`}\r\n        draggable\r\n        id={id}\r\n        ref={useSortableListHandler().useItemEvents()}\r\n      >\r\n        {children}\r\n      </Box>\r\n    );\r\n  },\r\n);\r\n"],"names":[],"mappings":";;;;;AAYO,MAAM,gBAAmB,GAAA,IAAA;AAAA,EAC9B,CAAC,EAAE,QAAU,EAAA,EAAA,EAAI,UAAkC,KAAA;AACjD,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACE,GAAG,QAAA;AAAA,QACJ,EAAA,EAAI,UAAU,EAAM,IAAA,IAAA;AAAA,QACpB,SAAW,EAAA,CAAA,mBAAA,EAAsB,QAAU,EAAA,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,QAC1D,SAAS,EAAA,IAAA;AAAA,QACT,EAAA;AAAA,QACA,GAAA,EAAK,sBAAuB,EAAA,CAAE,aAAc,EAAA;AAAA,QAE3C,QAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/SortableList/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { BoxProps } from '@apia/theme';
+import { TSortableListItem } from './SortableListItem.js';
+export { SortableListItem } from './SortableListItem.js';
+
+declare const UnstyledSortableList: ({ boxProps, children, onSortChange, }: {
+    boxProps?: BoxProps | undefined;
+    children: ReactNode;
+    onSortChange?: ((items: ReactElement<TSortableListItem>[]) => unknown) | undefined;
+}) => React.JSX.Element;
+declare const SortableList: ((props: {
+    boxProps?: BoxProps | undefined;
+    children: ReactNode;
+    onSortChange?: ((items: ReactElement<TSortableListItem>[]) => unknown) | undefined;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+
+export { SortableList, UnstyledSortableList };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SortableList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/SortableList/index.js

@@ -0,0 +1,53 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { makeStyledComponent } from '@apia/theme';
+import { Children } from 'react';
+import { SortableListContext } from './SortableListHandler.js';
+import { SortableListItem } from './SortableListItem.js';
+
+const UnstyledSortableList = ({
+  boxProps,
+  children,
+  onSortChange
+}) => {
+  Children.forEach(children, (el) => {
+    if (el?.type !== SortableListItem)
+      throw new Error(
+        `Every children of a SortableList must be of type SortableListItem`
+      );
+  });
+  return /* @__PURE__ */ jsx(SortableListContext, { onSortChange, boxProps, children });
+};
+const SortableList = makeStyledComponent(
+  "SortableList",
+  "layout.common.components.sortableList",
+  {
+    ".sortableList": { display: "flex", flexDirection: "column" },
+    ".sortableList__item": {
+      cursor: "pointer"
+    },
+    ".dragging": {
+      opacity: "0.3"
+    },
+    ".dragover": { position: "relative" },
+    ".dragover:after": {
+      display: "block",
+      content: '""',
+      position: "absolute",
+      height: "4px",
+      left: "0",
+      top: "-4px",
+      bottom: "auto",
+      width: "100%",
+      backgroundColor: "palette.background.default",
+      zIndex: 9
+    },
+    ".dragover.after:after": {
+      top: "auto",
+      bottom: "-4px"
+    }
+  },
+  UnstyledSortableList
+);
+
+export { SortableList, SortableListItem, UnstyledSortableList };
+//# sourceMappingURL=index.js.map

package/dist/components/SortableList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import { BoxProps, makeStyledComponent } from '@apia/theme';\r\nimport { Children, ReactElement, ReactNode } from 'react';\r\nimport { SortableListContext } from './SortableListHandler';\r\nimport { SortableListItem, TSortableListItem } from './SortableListItem';\r\n\r\nexport const UnstyledSortableList = ({\r\n  boxProps,\r\n  children,\r\n  onSortChange,\r\n}: {\r\n  boxProps?: BoxProps;\r\n  children: ReactNode;\r\n  onSortChange?: (items: ReactElement<TSortableListItem>[]) => unknown;\r\n}) => {\r\n  Children.forEach(children, (el) => {\r\n    if ((el as ReactElement<TSortableListItem>)?.type !== SortableListItem)\r\n      throw new Error(\r\n        `Every children of a SortableList must be of type SortableListItem`,\r\n      );\r\n  });\r\n\r\n  return (\r\n    <SortableListContext onSortChange={onSortChange} boxProps={boxProps}>\r\n      {children}\r\n    </SortableListContext>\r\n  );\r\n};\r\n\r\nexport const SortableList = makeStyledComponent(\r\n  'SortableList',\r\n  'layout.common.components.sortableList',\r\n  {\r\n    '.sortableList': { display: 'flex', flexDirection: 'column' },\r\n    '.sortableList__item': {\r\n      cursor: 'pointer',\r\n    },\r\n    '.dragging': {\r\n      opacity: '0.3',\r\n    },\r\n    '.dragover': { position: 'relative' },\r\n    '.dragover:after': {\r\n      display: 'block',\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      height: '4px',\r\n      left: '0',\r\n      top: '-4px',\r\n      bottom: 'auto',\r\n      width: '100%',\r\n      backgroundColor: 'palette.background.default',\r\n      zIndex: 9,\r\n    },\r\n    '.dragover.after:after': {\r\n      top: 'auto',\r\n      bottom: '-4px',\r\n    },\r\n  },\r\n  UnstyledSortableList,\r\n);\r\n\r\nexport { SortableListItem };\r\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AACF,CAIM,KAAA;AACJ,EAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,EAAO,KAAA;AACjC,IAAA,IAAK,IAAwC,IAAS,KAAA,gBAAA;AACpD,MAAA,MAAM,IAAI,KAAA;AAAA,QACR,CAAA,iEAAA,CAAA;AAAA,OACF,CAAA;AAAA,GACH,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,mBAAA,EAAA,EAAoB,YAA4B,EAAA,QAAA,EAC9C,QACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,YAAe,GAAA,mBAAA;AAAA,EAC1B,cAAA;AAAA,EACA,uCAAA;AAAA,EACA;AAAA,IACE,eAAiB,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,IAC5D,qBAAuB,EAAA;AAAA,MACrB,MAAQ,EAAA,SAAA;AAAA,KACV;AAAA,IACA,WAAa,EAAA;AAAA,MACX,OAAS,EAAA,KAAA;AAAA,KACX;AAAA,IACA,WAAA,EAAa,EAAE,QAAA,EAAU,UAAW,EAAA;AAAA,IACpC,iBAAmB,EAAA;AAAA,MACjB,OAAS,EAAA,OAAA;AAAA,MACT,OAAS,EAAA,IAAA;AAAA,MACT,QAAU,EAAA,UAAA;AAAA,MACV,MAAQ,EAAA,KAAA;AAAA,MACR,IAAM,EAAA,GAAA;AAAA,MACN,GAAK,EAAA,MAAA;AAAA,MACL,MAAQ,EAAA,MAAA;AAAA,MACR,KAAO,EAAA,MAAA;AAAA,MACP,eAAiB,EAAA,4BAAA;AAAA,MACjB,MAAQ,EAAA,CAAA;AAAA,KACV;AAAA,IACA,uBAAyB,EAAA;AAAA,MACvB,GAAK,EAAA,MAAA;AAAA,MACL,MAAQ,EAAA,MAAA;AAAA,KACV;AAAA,GACF;AAAA,EACA,oBAAA;AACF;;;;"}

package/dist/components/Toolbar/ToolbarController.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { EventEmitter } from '@apia/util';
+import { TToolbarIconButton } from './types.js';
+
+type TClickListener = () => unknown;
+type TItemState = Pick<TToolbarIconButton, 'disabled' | 'toggled' | 'isLoading'>;
+declare class ToolbarController extends EventEmitter<{
+    pressEnter: string;
+    updateItemState: string;
+}> {
+    eventListeners: Record<string, TClickListener[]>;
+    itemsState: Record<string, TItemState>;
+    hooks: {
+        useItemState: (id: string, initialState: TItemState) => TItemState;
+    };
+    setItemState: (id: string, newState: Partial<TItemState>) => void;
+    Context: ({ children }: {
+        children: ReactNode;
+    }) => React.JSX.Element;
+}
+
+export { ToolbarController };
+//# sourceMappingURL=ToolbarController.d.ts.map

package/dist/components/Toolbar/ToolbarController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarController.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Toolbar/ToolbarController.js

@@ -0,0 +1,50 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { EventEmitter } from '@apia/util';
+import { createContext, useState, useEffect, useContext } from 'react';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ToolbarController extends EventEmitter {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "eventListeners", {});
+    __publicField(this, "itemsState", {});
+    __publicField(this, "hooks", {
+      useItemState: (id, initialState) => {
+        const [state, setState] = useState(initialState);
+        useEffect(() => {
+          this.itemsState[id] = initialState;
+          this.on("updateItemState", (evId) => {
+            if (evId === id) {
+              setState({ ...this.itemsState[id] });
+            }
+          });
+        }, []);
+        return state;
+      }
+    });
+    __publicField(this, "setItemState", (id, newState) => {
+      this.itemsState[id] = { ...this.itemsState[id], ...newState };
+      this.emit("updateItemState", id);
+    });
+    __publicField(this, "Context", ({ children }) => {
+      return /* @__PURE__ */ jsx(ToolbarControllerContext.Provider, { value: this, children });
+    });
+  }
+}
+const ToolbarControllerContext = createContext(
+  null
+);
+const useToolbarControllerContext = () => {
+  const context = useContext(ToolbarControllerContext);
+  if (!context)
+    throw new Error("There is no Toolbar controller context");
+  return context;
+};
+
+export { ToolbarController, ToolbarControllerContext, useToolbarControllerContext };
+//# sourceMappingURL=ToolbarController.js.map

package/dist/components/Toolbar/ToolbarController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarController.js","sources":["../../../src/components/Toolbar/ToolbarController.tsx"],"sourcesContent":["import { EventEmitter } from '@apia/util';\r\nimport {\r\n  createContext,\r\n  useContext,\r\n  ReactNode,\r\n  useEffect,\r\n  useState,\r\n} from 'react';\r\nimport { TToolbarIconButton } from './types';\r\n\r\ntype TClickListener = () => unknown;\r\ntype TItemState = Pick<\r\n  TToolbarIconButton,\r\n  'disabled' | 'toggled' | 'isLoading'\r\n>;\r\n\r\nexport class ToolbarController extends EventEmitter<{\r\n  pressEnter: string;\r\n  updateItemState: string;\r\n}> {\r\n  eventListeners: Record<string, TClickListener[]> = {};\r\n  itemsState: Record<string, TItemState> = {};\r\n\r\n  hooks = {\r\n    useItemState: (id: string, initialState: TItemState) => {\r\n      const [state, setState] = useState(initialState);\r\n\r\n      useEffect(() => {\r\n        this.itemsState[id] = initialState;\r\n        this.on('updateItemState', (evId) => {\r\n          if (evId === id) {\r\n            setState({ ...this.itemsState[id] });\r\n          }\r\n        });\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n      }, []);\r\n\r\n      return state;\r\n    },\r\n  };\r\n\r\n  setItemState = (id: string, newState: Partial<TItemState>) => {\r\n    this.itemsState[id] = { ...this.itemsState[id], ...newState };\r\n    this.emit('updateItemState', id);\r\n  };\r\n\r\n  Context = ({ children }: { children: ReactNode }) => {\r\n    return (\r\n      <ToolbarControllerContext.Provider value={this}>\r\n        {children}\r\n      </ToolbarControllerContext.Provider>\r\n    );\r\n  };\r\n}\r\n\r\nexport const ToolbarControllerContext = createContext<ToolbarController | null>(\r\n  null,\r\n);\r\n\r\nexport const useToolbarControllerContext = () => {\r\n  const context = useContext(ToolbarControllerContext);\r\n\r\n  if (!context) throw new Error('There is no Toolbar controller context');\r\n\r\n  return context;\r\n};\r\n"],"names":[],"mappings":";;;;;;;;;;AAgBO,MAAM,0BAA0B,YAGpC,CAAA;AAAA,EAHI,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA;AAIL,IAAA,aAAA,CAAA,IAAA,EAAA,gBAAA,EAAmD,EAAC,CAAA,CAAA;AACpD,IAAA,aAAA,CAAA,IAAA,EAAA,YAAA,EAAyC,EAAC,CAAA,CAAA;AAE1C,IAAQ,aAAA,CAAA,IAAA,EAAA,OAAA,EAAA;AAAA,MACN,YAAA,EAAc,CAAC,EAAA,EAAY,YAA6B,KAAA;AACtD,QAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA,CAAA;AAE/C,QAAA,SAAA,CAAU,MAAM;AACd,UAAK,IAAA,CAAA,UAAA,CAAW,EAAE,CAAI,GAAA,YAAA,CAAA;AACtB,UAAK,IAAA,CAAA,EAAA,CAAG,iBAAmB,EAAA,CAAC,IAAS,KAAA;AACnC,YAAA,IAAI,SAAS,EAAI,EAAA;AACf,cAAA,QAAA,CAAS,EAAE,GAAG,IAAA,CAAK,UAAW,CAAA,EAAE,GAAG,CAAA,CAAA;AAAA,aACrC;AAAA,WACD,CAAA,CAAA;AAAA,SAEH,EAAG,EAAE,CAAA,CAAA;AAEL,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF,CAAA,CAAA;AAEA,IAAe,aAAA,CAAA,IAAA,EAAA,cAAA,EAAA,CAAC,IAAY,QAAkC,KAAA;AAC5D,MAAK,IAAA,CAAA,UAAA,CAAW,EAAE,CAAA,GAAI,EAAE,GAAG,KAAK,UAAW,CAAA,EAAE,CAAG,EAAA,GAAG,QAAS,EAAA,CAAA;AAC5D,MAAK,IAAA,CAAA,IAAA,CAAK,mBAAmB,EAAE,CAAA,CAAA;AAAA,KACjC,CAAA,CAAA;AAEA,IAAU,aAAA,CAAA,IAAA,EAAA,SAAA,EAAA,CAAC,EAAE,QAAA,EAAwC,KAAA;AACnD,MAAA,2BACG,wBAAyB,CAAA,QAAA,EAAzB,EAAkC,KAAA,EAAO,MACvC,QACH,EAAA,CAAA,CAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAAA;AACF,CAAA;AAEO,MAAM,wBAA2B,GAAA,aAAA;AAAA,EACtC,IAAA;AACF,EAAA;AAEO,MAAM,8BAA8B,MAAM;AAC/C,EAAM,MAAA,OAAA,GAAU,WAAW,wBAAwB,CAAA,CAAA;AAEnD,EAAA,IAAI,CAAC,OAAA;AAAS,IAAM,MAAA,IAAI,MAAM,wCAAwC,CAAA,CAAA;AAEtE,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

package/dist/components/Toolbar/ToolbarIconButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TToolbarIconButton } from './types.js';
+
+declare const ToolbarIconButton: ({ id, action, allowToggle, defaultToggled, disabled, icon, iconSize, isLoading: outerIsLoading, title, toggled: toggledProp, }: TToolbarIconButton) => React.JSX.Element;
+
+export { ToolbarIconButton };
+//# sourceMappingURL=ToolbarIconButton.d.ts.map

package/dist/components/Toolbar/ToolbarIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarIconButton.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Toolbar/ToolbarIconButton.js

@@ -0,0 +1,108 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useToolbarControllerContext } from './ToolbarController.js';
+import { usePrevious, useMount } from '@apia/util';
+import { IconButton } from '../forms/buttons/IconButton.js';
+
+const ToolbarIconButton = ({
+  id,
+  action,
+  allowToggle,
+  defaultToggled,
+  disabled,
+  icon,
+  iconSize,
+  isLoading: outerIsLoading,
+  title,
+  toggled: toggledProp
+}) => {
+  const [innerIsToggled, setInnerIsToggled] = useState(
+    toggledProp ?? (allowToggle ? defaultToggled ?? false : false)
+  );
+  const [isDisabled, setIsDisabled] = useState(!!disabled);
+  const context = useToolbarControllerContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const previousIsLoading = usePrevious(outerIsLoading);
+  if (previousIsLoading.current !== outerIsLoading)
+    setIsLoading(!!outerIsLoading);
+  const lastDisabledProp = usePrevious(disabled);
+  if (lastDisabledProp.current !== disabled) {
+    setIsDisabled(!!disabled);
+  }
+  const lastToggledProp = useRef(toggledProp);
+  if (toggledProp !== void 0 && innerIsToggled !== toggledProp && lastToggledProp.current !== toggledProp) {
+    lastToggledProp.current = toggledProp;
+    setInnerIsToggled(toggledProp);
+  }
+  const handleClick = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      if (lastToggledProp.current !== void 0) {
+        await action(
+          { isToggled: !lastToggledProp.current, isLoading },
+          context
+        );
+      } else if (allowToggle) {
+        let isToggled = false;
+        setInnerIsToggled((current) => {
+          isToggled = !current;
+          return isToggled;
+        });
+        await action({ isToggled, isLoading }, context);
+      } else {
+        await action({ isToggled: false, isLoading }, context);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    setIsLoading(false);
+  }, [action, allowToggle, context, isLoading]);
+  useEffect(() => {
+    const unsuscribe1 = context.on("updateItemState", (evId) => {
+      if (evId === id) {
+        setInnerIsToggled(!!context.itemsState[evId].toggled);
+        setIsDisabled(!!context.itemsState[evId].disabled);
+      }
+    });
+    const unsuscribe2 = context.on("pressEnter", (evId) => {
+      if (evId === id)
+        void handleClick();
+    });
+    return () => {
+      unsuscribe1();
+      unsuscribe2();
+    };
+  }, [context, id, handleClick]);
+  useMount(() => {
+    if (context.itemsState[id]) {
+      if (context.itemsState[id].disabled !== void 0) {
+        setIsDisabled(!!context.itemsState[id].disabled);
+      }
+      if (context.itemsState[id].toggled !== void 0) {
+        setInnerIsToggled(!!context.itemsState[id].toggled);
+      }
+    } else
+      context.itemsState[id] = {
+        disabled: isDisabled,
+        toggled: innerIsToggled,
+        ...context.itemsState[id]
+      };
+  });
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      className: `toolbar__button ${innerIsToggled ? "toggled" : ""}`,
+      size: iconSize ?? "Md",
+      icon,
+      onClick: handleClick,
+      "data-id": id,
+      title,
+      disabled: isDisabled,
+      variant: "icon-outline",
+      isLoading
+    }
+  );
+};
+
+export { ToolbarIconButton };
+//# sourceMappingURL=ToolbarIconButton.js.map

package/dist/components/Toolbar/ToolbarIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarIconButton.js","sources":["../../../src/components/Toolbar/ToolbarIconButton.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\r\nimport { useToolbarControllerContext } from './ToolbarController';\r\nimport { TToolbarIconButton } from './types';\r\nimport { useMount, usePrevious } from '@apia/util';\r\nimport { IconButton } from '../forms';\r\n\r\nexport const ToolbarIconButton = ({\r\n  id,\r\n  action,\r\n  allowToggle,\r\n  defaultToggled,\r\n  disabled,\r\n  icon,\r\n  iconSize,\r\n  isLoading: outerIsLoading,\r\n  title,\r\n  toggled: toggledProp,\r\n}: TToolbarIconButton) => {\r\n  const [innerIsToggled, setInnerIsToggled] = useState<boolean>(\r\n    toggledProp ?? (allowToggle ? defaultToggled ?? false : false),\r\n  );\r\n  const [isDisabled, setIsDisabled] = useState(!!disabled);\r\n  const context = useToolbarControllerContext();\r\n  const [isLoading, setIsLoading] = useState(false);\r\n\r\n  const previousIsLoading = usePrevious(outerIsLoading);\r\n  if (previousIsLoading.current !== outerIsLoading)\r\n    setIsLoading(!!outerIsLoading);\r\n\r\n  const lastDisabledProp = usePrevious(disabled);\r\n  if (lastDisabledProp.current !== disabled) {\r\n    setIsDisabled(!!disabled);\r\n  }\r\n\r\n  /**\r\n   * Si la prop toggled cambia y no está undefined, se debe actualizar el\r\n   * estado interno.\r\n   */\r\n  const lastToggledProp = useRef<boolean | undefined>(toggledProp);\r\n  if (\r\n    toggledProp !== undefined &&\r\n    innerIsToggled !== toggledProp &&\r\n    lastToggledProp.current !== toggledProp\r\n  ) {\r\n    lastToggledProp.current = toggledProp;\r\n    setInnerIsToggled(toggledProp);\r\n  }\r\n\r\n  const handleClick = useCallback(async () => {\r\n    setIsLoading(true);\r\n    try {\r\n      if (lastToggledProp.current !== undefined) {\r\n        await action(\r\n          { isToggled: !lastToggledProp.current, isLoading },\r\n          context,\r\n        );\r\n      } else if (allowToggle) {\r\n        let isToggled = false;\r\n        setInnerIsToggled((current) => {\r\n          isToggled = !current;\r\n          return isToggled;\r\n        });\r\n        await action({ isToggled, isLoading }, context);\r\n      } else {\r\n        await action({ isToggled: false, isLoading }, context);\r\n      }\r\n    } catch (e) {\r\n      console.error(e);\r\n    }\r\n    setIsLoading(false);\r\n  }, [action, allowToggle, context, isLoading]);\r\n\r\n  /**\r\n   * Se maneja el uso de teclado para hacer click sobre el elemento\r\n   */\r\n  useEffect(() => {\r\n    const unsuscribe1 = context.on('updateItemState', (evId) => {\r\n      if (evId === id) {\r\n        setInnerIsToggled(!!context.itemsState[evId].toggled);\r\n        setIsDisabled(!!context.itemsState[evId].disabled);\r\n      }\r\n    });\r\n    const unsuscribe2 = context.on('pressEnter', (evId) => {\r\n      if (evId === id) void handleClick();\r\n    });\r\n\r\n    return () => {\r\n      unsuscribe1();\r\n      unsuscribe2();\r\n    };\r\n  }, [context, id, handleClick]);\r\n\r\n  useMount(() => {\r\n    if (context.itemsState[id]) {\r\n      if (context.itemsState[id].disabled !== undefined) {\r\n        setIsDisabled(!!context.itemsState[id].disabled);\r\n      }\r\n      if (context.itemsState[id].toggled !== undefined) {\r\n        setInnerIsToggled(!!context.itemsState[id].toggled);\r\n      }\r\n    } else\r\n      context.itemsState[id] = {\r\n        disabled: isDisabled,\r\n        toggled: innerIsToggled,\r\n        ...context.itemsState[id],\r\n      };\r\n  });\r\n\r\n  return (\r\n    <IconButton\r\n      className={`toolbar__button ${innerIsToggled ? 'toggled' : ''}`}\r\n      size={iconSize ?? 'Md'}\r\n      icon={icon}\r\n      onClick={handleClick}\r\n      data-id={id}\r\n      title={title}\r\n      disabled={isDisabled}\r\n      variant=\"icon-outline\"\r\n      isLoading={isLoading}\r\n    />\r\n  );\r\n};\r\n"],"names":[],"mappings":"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"}

package/dist/components/Toolbar/ToolbarInput.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TToolInput } from './types.js';
+
+declare const ToolbarInput: (tool: TToolInput) => React.JSX.Element;
+
+export { ToolbarInput };
+//# sourceMappingURL=ToolbarInput.d.ts.map

package/dist/components/Toolbar/ToolbarInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarInput.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Toolbar/ToolbarInput.js

@@ -0,0 +1,13 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Input } from '@apia/theme';
+import { FieldLabel } from '../forms/FieldLabel.js';
+
+const ToolbarInput = (tool) => {
+  const input = /* @__PURE__ */ jsx(Input, { className: "toolbar__input", ...tool.inputProps });
+  if (tool.label)
+    return /* @__PURE__ */ jsx(FieldLabel, { label: tool.label, children: input });
+  return input;
+};
+
+export { ToolbarInput };
+//# sourceMappingURL=ToolbarInput.js.map

package/dist/components/Toolbar/ToolbarInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarInput.js","sources":["../../../src/components/Toolbar/ToolbarInput.tsx"],"sourcesContent":["import { FieldLabel } from '../forms';\r\nimport { TToolInput } from './types';\r\nimport { Input } from '@apia/theme';\r\n\r\nexport const ToolbarInput = (tool: TToolInput) => {\r\n  const input = <Input className=\"toolbar__input\" {...tool.inputProps} />;\r\n\r\n  if (tool.label) return <FieldLabel label={tool.label}>{input}</FieldLabel>;\r\n\r\n  return input;\r\n};\r\n"],"names":[],"mappings":";;;;AAIa,MAAA,YAAA,GAAe,CAAC,IAAqB,KAAA;AAChD,EAAA,MAAM,wBAAS,GAAA,CAAA,KAAA,EAAA,EAAM,WAAU,gBAAkB,EAAA,GAAG,KAAK,UAAY,EAAA,CAAA,CAAA;AAErE,EAAA,IAAI,IAAK,CAAA,KAAA;AAAO,IAAA,uBAAQ,GAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,IAAA,CAAK,OAAQ,QAAM,EAAA,KAAA,EAAA,CAAA,CAAA;AAE7D,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}

package/dist/components/Toolbar/ToolbarSelect.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SelectProps } from '@apia/theme';
+
+declare const ToolbarSelect: (props: SelectProps) => React.JSX.Element;
+
+export { ToolbarSelect };
+//# sourceMappingURL=ToolbarSelect.d.ts.map

package/dist/components/Toolbar/ToolbarSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSelect.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Toolbar/ToolbarSelect.js

@@ -0,0 +1,17 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Select, getVariant } from '@apia/theme';
+
+const ToolbarSelect = (props) => {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...props,
+      className: `toolbar__select ${props?.className ?? ""}`,
+      ...props.variant ? getVariant(props.variant) : null,
+      children: props.children
+    }
+  );
+};
+
+export { ToolbarSelect };
+//# sourceMappingURL=ToolbarSelect.js.map

package/dist/components/Toolbar/ToolbarSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSelect.js","sources":["../../../src/components/Toolbar/ToolbarSelect.tsx"],"sourcesContent":["import { Select, SelectProps, getVariant } from '@apia/theme';\r\n\r\nexport const ToolbarSelect = (props: SelectProps) => {\r\n  return (\r\n    <Select\r\n      {...props}\r\n      className={`toolbar__select ${props?.className ?? ''}`}\r\n      {...(props.variant ? getVariant(props.variant) : null)}\r\n    >\r\n      {props.children}\r\n    </Select>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;AAEa,MAAA,aAAA,GAAgB,CAAC,KAAuB,KAAA;AACnD,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAW,EAAA,CAAA,gBAAA,EAAmB,KAAO,EAAA,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MACnD,GAAI,KAAM,CAAA,OAAA,GAAU,UAAW,CAAA,KAAA,CAAM,OAAO,CAAI,GAAA,IAAA;AAAA,MAEhD,QAAM,EAAA,KAAA,CAAA,QAAA;AAAA,KAAA;AAAA,GACT,CAAA;AAEJ;;;;"}

package/dist/components/Toolbar/ToolbarSeparator.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+declare const ToolbarSeparator: () => React.JSX.Element;
+
+export { ToolbarSeparator };
+//# sourceMappingURL=ToolbarSeparator.d.ts.map

package/dist/components/Toolbar/ToolbarSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparator.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Toolbar/ToolbarSeparator.js

@@ -0,0 +1,9 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+
+const ToolbarSeparator = () => {
+  return /* @__PURE__ */ jsx(Box, { className: "toolbar__separator", children: "\xA0" });
+};
+
+export { ToolbarSeparator };
+//# sourceMappingURL=ToolbarSeparator.js.map

package/dist/components/Toolbar/ToolbarSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparator.js","sources":["../../../src/components/Toolbar/ToolbarSeparator.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\n\r\nexport const ToolbarSeparator = () => {\r\n  return <Box className=\"toolbar__separator\">&nbsp;</Box>;\r\n};\r\n"],"names":[],"mappings":";;;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,uBAAQ,GAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,oBAAA,EAAqB,QAAM,EAAA,MAAA,EAAA,CAAA,CAAA;AACnD;;;;"}