@apia/components 2.0.7 → 2.0.8

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

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

@@ -1 +1 @@
-{"version":3,"file":"SortableListItem.js","sources":["../../../src/components/SortableList/SortableListItem.tsx"],"sourcesContent":["import { Box, BoxProps } from '@apia/theme';\nimport { ReactNode, memo } from 'react';\nimport { useSortableListHandler } from './SortableListHandler';\n\nexport type TSortableListItem = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  additionalProps?: any;\n  boxProps?: Omit<BoxProps, 'id'>;\n  id: string;\n  children: ReactNode;\n};\n\nexport const SortableListItem = memo(\n  ({ boxProps, id, children }: TSortableListItem) => {\n    return (\n      <Box\n        {...boxProps}\n        as={boxProps?.as ?? 'li'}\n        className={`sortableList__item ${boxProps?.className ?? ''}`}\n        draggable\n        id={id}\n        ref={useSortableListHandler().useItemEvents()}\n      >\n        {children}\n      </Box>\n    );\n  },\n);\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;;;;"}
+{"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.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/SortableList/index.tsx"],"sourcesContent":["import { BoxProps, makeStyledComponent } from '@apia/theme';\nimport { Children, ReactElement, ReactNode } from 'react';\nimport { SortableListContext } from './SortableListHandler';\nimport { SortableListItem, TSortableListItem } from './SortableListItem';\n\nexport const UnstyledSortableList = ({\n  boxProps,\n  children,\n  onSortChange,\n}: {\n  boxProps?: BoxProps;\n  children: ReactNode;\n  onSortChange?: (items: ReactElement<TSortableListItem>[]) => unknown;\n}) => {\n  Children.forEach(children, (el) => {\n    if ((el as ReactElement<TSortableListItem>)?.type !== SortableListItem)\n      throw new Error(\n        `Every children of a SortableList must be of type SortableListItem`,\n      );\n  });\n\n  return (\n    <SortableListContext onSortChange={onSortChange} boxProps={boxProps}>\n      {children}\n    </SortableListContext>\n  );\n};\n\nexport const SortableList = makeStyledComponent(\n  'SortableList',\n  'layout.common.components.sortableList',\n  {\n    '.sortableList': { display: 'flex', flexDirection: 'column' },\n    '.sortableList__item': {\n      cursor: 'pointer',\n    },\n    '.dragging': {\n      opacity: '0.3',\n    },\n    '.dragover': { position: 'relative' },\n    '.dragover:after': {\n      display: 'block',\n      content: '\"\"',\n      position: 'absolute',\n      height: '4px',\n      left: '0',\n      top: '-4px',\n      bottom: 'auto',\n      width: '100%',\n      backgroundColor: 'palette.background.default',\n      zIndex: 9,\n    },\n    '.dragover.after:after': {\n      top: 'auto',\n      bottom: '-4px',\n    },\n  },\n  UnstyledSortableList,\n);\n\nexport { SortableListItem };\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;;;;"}
+{"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.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarController.js","sources":["../../../src/components/Toolbar/ToolbarController.tsx"],"sourcesContent":["import { EventEmitter } from '@apia/util';\nimport {\n  createContext,\n  useContext,\n  ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { TToolbarIconButton } from './types';\n\ntype TClickListener = () => unknown;\ntype TItemState = Pick<\n  TToolbarIconButton,\n  'disabled' | 'toggled' | 'isLoading'\n>;\n\nexport class ToolbarController extends EventEmitter<{\n  pressEnter: string;\n  updateItemState: string;\n}> {\n  eventListeners: Record<string, TClickListener[]> = {};\n  itemsState: Record<string, TItemState> = {};\n\n  hooks = {\n    useItemState: (id: string, initialState: TItemState) => {\n      const [state, setState] = useState(initialState);\n\n      useEffect(() => {\n        this.itemsState[id] = initialState;\n        this.on('updateItemState', (evId) => {\n          if (evId === id) {\n            setState({ ...this.itemsState[id] });\n          }\n        });\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, []);\n\n      return state;\n    },\n  };\n\n  setItemState = (id: string, newState: Partial<TItemState>) => {\n    this.itemsState[id] = { ...this.itemsState[id], ...newState };\n    this.emit('updateItemState', id);\n  };\n\n  Context = ({ children }: { children: ReactNode }) => {\n    return (\n      <ToolbarControllerContext.Provider value={this}>\n        {children}\n      </ToolbarControllerContext.Provider>\n    );\n  };\n}\n\nexport const ToolbarControllerContext = createContext<ToolbarController | null>(\n  null,\n);\n\nexport const useToolbarControllerContext = () => {\n  const context = useContext(ToolbarControllerContext);\n\n  if (!context) throw new Error('There is no Toolbar controller context');\n\n  return context;\n};\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;;;;"}
+{"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.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarInput.js","sources":["../../../src/components/Toolbar/ToolbarInput.tsx"],"sourcesContent":["import { FieldLabel } from '../forms';\nimport { TToolInput } from './types';\nimport { Input } from '@apia/theme';\n\nexport const ToolbarInput = (tool: TToolInput) => {\n  const input = <Input className=\"toolbar__input\" {...tool.inputProps} />;\n\n  if (tool.label) return <FieldLabel label={tool.label}>{input}</FieldLabel>;\n\n  return input;\n};\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;;;;"}
+{"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.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSelect.js","sources":["../../../src/components/Toolbar/ToolbarSelect.tsx"],"sourcesContent":["import { Select, SelectProps, getVariant } from '@apia/theme';\n\nexport const ToolbarSelect = (props: SelectProps) => {\n  return (\n    <Select\n      {...props}\n      className={`toolbar__select ${props?.className ?? ''}`}\n      {...(props.variant ? getVariant(props.variant) : null)}\n    >\n      {props.children}\n    </Select>\n  );\n};\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;;;;"}
+{"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.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSeparator.js","sources":["../../../src/components/Toolbar/ToolbarSeparator.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\n\nexport const ToolbarSeparator = () => {\n  return <Box className=\"toolbar__separator\">&nbsp;</Box>;\n};\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;;;;"}
+{"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;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTextButton.js","sources":["../../../src/components/Toolbar/ToolbarTextButton.tsx"],"sourcesContent":["import { getVariant } from '@apia/theme';\nimport { ISimpleButton, SimpleButton } from '../forms';\n\nexport const ToolbarTextButton = (props: ISimpleButton) => {\n  return (\n    <SimpleButton\n      {...props}\n      className={`toolbar__textButton ${props?.className ?? ''}`}\n      {...(props.variant ? getVariant(props.variant) : null)}\n    >\n      {props.children}\n    </SimpleButton>\n  );\n};\n"],"names":[],"mappings":";;;;AAGa,MAAA,iBAAA,GAAoB,CAAC,KAAyB,KAAA;AACzD,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAW,EAAA,CAAA,oBAAA,EAAuB,KAAO,EAAA,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MACvD,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;;;;"}
+{"version":3,"file":"ToolbarTextButton.js","sources":["../../../src/components/Toolbar/ToolbarTextButton.tsx"],"sourcesContent":["import { getVariant } from '@apia/theme';\r\nimport { ISimpleButton, SimpleButton } from '../forms';\r\n\r\nexport const ToolbarTextButton = (props: ISimpleButton) => {\r\n  return (\r\n    <SimpleButton\r\n      {...props}\r\n      className={`toolbar__textButton ${props?.className ?? ''}`}\r\n      {...(props.variant ? getVariant(props.variant) : null)}\r\n    >\r\n      {props.children}\r\n    </SimpleButton>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;AAGa,MAAA,iBAAA,GAAoB,CAAC,KAAyB,KAAA;AACzD,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAW,EAAA,CAAA,oBAAA,EAAuB,KAAO,EAAA,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MACvD,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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Toolbar/index.tsx"],"sourcesContent":["import { useMount } from '@apia/util';\nimport { TToolbarIconButton } from './types';\nimport { Box, getVariant, makeStyledComponent } from '@apia/theme';\nimport { styles } from './styles';\nimport { ReactNode, useMemo } from 'react';\nimport { ToolbarController } from './ToolbarController';\nimport { ToolbarTextButton } from './ToolbarTextButton';\nimport { ToolbarIconButton } from './ToolbarIconButton';\nimport { ToolbarInput } from './ToolbarInput';\nimport { ToolbarSeparator } from './ToolbarSeparator';\nimport { ToolbarSelect } from './ToolbarSelect';\n\nconst Toolbar = makeStyledComponent<{\n  children: ReactNode;\n  /**\n   * El controlador permite gestionar el estado de los distintos elementos de\n   * la toolbar\n   */\n  getController?: (newController: ToolbarController) => unknown;\n}>(\n  'toolbar',\n  'layout.components.toolbar',\n  styles,\n  ({ children, getController }) => {\n    const controller = useMemo(() => new ToolbarController(), []);\n\n    useMount(() => {\n      getController?.(controller);\n    });\n\n    return (\n      <controller.Context>\n        <Box className=\"toolbar\" {...getVariant('layout.components.toolbar')}>\n          {children}\n        </Box>\n      </controller.Context>\n    );\n  },\n  true,\n);\n\nexport type { TToolbarIconButton as TToolDefinition };\nexport {\n  ToolbarIconButton,\n  ToolbarInput,\n  ToolbarTextButton,\n  Toolbar,\n  ToolbarController,\n  ToolbarSeparator,\n  ToolbarSelect,\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,OAAU,GAAA,mBAAA;AAAA,EAQd,SAAA;AAAA,EACA,2BAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAC,EAAE,QAAU,EAAA,aAAA,EAAoB,KAAA;AAC/B,IAAA,MAAM,aAAa,OAAQ,CAAA,MAAM,IAAI,iBAAkB,EAAA,EAAG,EAAE,CAAA,CAAA;AAE5D,IAAA,QAAA,CAAS,MAAM;AACb,MAAA,aAAA,GAAgB,UAAU,CAAA,CAAA;AAAA,KAC3B,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,UAAA,CAAW,OAAX,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,SAAA,EAAW,GAAG,UAAA,CAAW,2BAA2B,CAAA,EAChE,UACH,CACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,IAAA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Toolbar/index.tsx"],"sourcesContent":["import { useMount } from '@apia/util';\r\nimport { TToolbarIconButton } from './types';\r\nimport { Box, getVariant, makeStyledComponent } from '@apia/theme';\r\nimport { styles } from './styles';\r\nimport { ReactNode, useMemo } from 'react';\r\nimport { ToolbarController } from './ToolbarController';\r\nimport { ToolbarTextButton } from './ToolbarTextButton';\r\nimport { ToolbarIconButton } from './ToolbarIconButton';\r\nimport { ToolbarInput } from './ToolbarInput';\r\nimport { ToolbarSeparator } from './ToolbarSeparator';\r\nimport { ToolbarSelect } from './ToolbarSelect';\r\n\r\nconst Toolbar = makeStyledComponent<{\r\n  children: ReactNode;\r\n  /**\r\n   * El controlador permite gestionar el estado de los distintos elementos de\r\n   * la toolbar\r\n   */\r\n  getController?: (newController: ToolbarController) => unknown;\r\n}>(\r\n  'toolbar',\r\n  'layout.components.toolbar',\r\n  styles,\r\n  ({ children, getController }) => {\r\n    const controller = useMemo(() => new ToolbarController(), []);\r\n\r\n    useMount(() => {\r\n      getController?.(controller);\r\n    });\r\n\r\n    return (\r\n      <controller.Context>\r\n        <Box className=\"toolbar\" {...getVariant('layout.components.toolbar')}>\r\n          {children}\r\n        </Box>\r\n      </controller.Context>\r\n    );\r\n  },\r\n  true,\r\n);\r\n\r\nexport type { TToolbarIconButton as TToolDefinition };\r\nexport {\r\n  ToolbarIconButton,\r\n  ToolbarInput,\r\n  ToolbarTextButton,\r\n  Toolbar,\r\n  ToolbarController,\r\n  ToolbarSeparator,\r\n  ToolbarSelect,\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,OAAU,GAAA,mBAAA;AAAA,EAQd,SAAA;AAAA,EACA,2BAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAC,EAAE,QAAU,EAAA,aAAA,EAAoB,KAAA;AAC/B,IAAA,MAAM,aAAa,OAAQ,CAAA,MAAM,IAAI,iBAAkB,EAAA,EAAG,EAAE,CAAA,CAAA;AAE5D,IAAA,QAAA,CAAS,MAAM;AACb,MAAA,aAAA,GAAgB,UAAU,CAAA,CAAA;AAAA,KAC3B,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,UAAA,CAAW,OAAX,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,SAAA,EAAW,GAAG,UAAA,CAAW,2BAA2B,CAAA,EAChE,UACH,CACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,IAAA;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../src/components/Toolbar/styles.ts"],"sourcesContent":["import { ThemeUICSSObject } from '@apia/theme';\n\nexport const styles: ThemeUICSSObject = {\n  alignItems: 'center',\n  backgroundColor: 'palette.background.default',\n  display: 'flex',\n  gap: '2px',\n  py: '4px',\n  px: '8px',\n\n  '& > *': {\n    alignItems: 'center',\n    borderRadius: '4px',\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    outline: 'none !important',\n    p: 0,\n  },\n\n  '.toolbar__textButton': (theme) => ({\n    variant: 'buttons.primary-sm',\n    background: 'transparent',\n    border: 'none',\n    color: 'palette.text.primary',\n\n    ...theme.palette.getStatesFromDefinition(\n      {\n        backgroundColor: theme.palette.background.default,\n      },\n      { states: { default: false } },\n    ),\n\n    '&.primary': theme.palette.getStatesFromPath('buttons.primary'),\n  }),\n\n  '.toolbar__select': () => ({\n    padding: '4px',\n    paddingLeft: '8px',\n    paddingRight: '32px',\n  }),\n\n  '.toolbar__button': {\n    border: 'none',\n    borderRadius: '4px',\n    height: '32px',\n    width: '32px',\n    background: 'transparent',\n    svg: {\n      path: {\n        fill: 'palette.text.primary',\n      },\n    },\n\n    '&:disabled': {\n      svg: {\n        path: {\n          fill: 'palette.border.section',\n        },\n      },\n    },\n  },\n\n  '.fieldLabel': {\n    display: 'flex',\n    flexDirection: 'row',\n    gap: 3,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  '.toolbar__input': {\n    borderRadius: '4px',\n    p: 3,\n    width: '80px',\n  },\n\n  '.toolbar__separator': {\n    borderLeft: '1px solid',\n    borderRight: '1px solid',\n    borderColor: 'palette.gray.750',\n    height: '60%',\n    width: '3px',\n  },\n\n  '.toggled': (theme) => {\n    return {\n      ...theme.palette.getOneState(\n        { backgroundColor: theme.palette.background.default },\n        'selected',\n      ),\n    };\n  },\n};\n"],"names":[],"mappings":"AAEO,MAAM,MAA2B,GAAA;AAAA,EACtC,UAAY,EAAA,QAAA;AAAA,EACZ,eAAiB,EAAA,4BAAA;AAAA,EACjB,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,KAAA;AAAA,EACL,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EAEJ,OAAS,EAAA;AAAA,IACP,UAAY,EAAA,QAAA;AAAA,IACZ,YAAc,EAAA,KAAA;AAAA,IACd,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,CAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,iBAAA;AAAA,IACT,CAAG,EAAA,CAAA;AAAA,GACL;AAAA,EAEA,sBAAA,EAAwB,CAAC,KAAW,MAAA;AAAA,IAClC,OAAS,EAAA,oBAAA;AAAA,IACT,UAAY,EAAA,aAAA;AAAA,IACZ,MAAQ,EAAA,MAAA;AAAA,IACR,KAAO,EAAA,sBAAA;AAAA,IAEP,GAAG,MAAM,OAAQ,CAAA,uBAAA;AAAA,MACf;AAAA,QACE,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,OAAA;AAAA,OAC5C;AAAA,MACA,EAAE,MAAA,EAAQ,EAAE,OAAA,EAAS,OAAQ,EAAA;AAAA,KAC/B;AAAA,IAEA,WAAa,EAAA,KAAA,CAAM,OAAQ,CAAA,iBAAA,CAAkB,iBAAiB,CAAA;AAAA,GAChE,CAAA;AAAA,EAEA,oBAAoB,OAAO;AAAA,IACzB,OAAS,EAAA,KAAA;AAAA,IACT,WAAa,EAAA,KAAA;AAAA,IACb,YAAc,EAAA,MAAA;AAAA,GAChB,CAAA;AAAA,EAEA,kBAAoB,EAAA;AAAA,IAClB,MAAQ,EAAA,MAAA;AAAA,IACR,YAAc,EAAA,KAAA;AAAA,IACd,MAAQ,EAAA,MAAA;AAAA,IACR,KAAO,EAAA,MAAA;AAAA,IACP,UAAY,EAAA,aAAA;AAAA,IACZ,GAAK,EAAA;AAAA,MACH,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,sBAAA;AAAA,OACR;AAAA,KACF;AAAA,IAEA,YAAc,EAAA;AAAA,MACZ,GAAK,EAAA;AAAA,QACH,IAAM,EAAA;AAAA,UACJ,IAAM,EAAA,wBAAA;AAAA,SACR;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAAA,EAEA,aAAe,EAAA;AAAA,IACb,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,KAAA;AAAA,IACf,GAAK,EAAA,CAAA;AAAA,IACL,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,GAClB;AAAA,EAEA,iBAAmB,EAAA;AAAA,IACjB,YAAc,EAAA,KAAA;AAAA,IACd,CAAG,EAAA,CAAA;AAAA,IACH,KAAO,EAAA,MAAA;AAAA,GACT;AAAA,EAEA,qBAAuB,EAAA;AAAA,IACrB,UAAY,EAAA,WAAA;AAAA,IACZ,WAAa,EAAA,WAAA;AAAA,IACb,WAAa,EAAA,kBAAA;AAAA,IACb,MAAQ,EAAA,KAAA;AAAA,IACR,KAAO,EAAA,KAAA;AAAA,GACT;AAAA,EAEA,UAAA,EAAY,CAAC,KAAU,KAAA;AACrB,IAAO,OAAA;AAAA,MACL,GAAG,MAAM,OAAQ,CAAA,WAAA;AAAA,QACf,EAAE,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,WAAW,OAAQ,EAAA;AAAA,QACpD,UAAA;AAAA,OACF;AAAA,KACF,CAAA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../src/components/Toolbar/styles.ts"],"sourcesContent":["import { ThemeUICSSObject } from '@apia/theme';\r\n\r\nexport const styles: ThemeUICSSObject = {\r\n  alignItems: 'center',\r\n  backgroundColor: 'palette.background.default',\r\n  display: 'flex',\r\n  gap: '2px',\r\n  py: '4px',\r\n  px: '8px',\r\n\r\n  '& > *': {\r\n    alignItems: 'center',\r\n    borderRadius: '4px',\r\n    display: 'flex',\r\n    flexShrink: 0,\r\n    justifyContent: 'center',\r\n    outline: 'none !important',\r\n    p: 0,\r\n  },\r\n\r\n  '.toolbar__textButton': (theme) => ({\r\n    variant: 'buttons.primary-sm',\r\n    background: 'transparent',\r\n    border: 'none',\r\n    color: 'palette.text.primary',\r\n\r\n    ...theme.palette.getStatesFromDefinition(\r\n      {\r\n        backgroundColor: theme.palette.background.default,\r\n      },\r\n      { states: { default: false } },\r\n    ),\r\n\r\n    '&.primary': theme.palette.getStatesFromPath('buttons.primary'),\r\n  }),\r\n\r\n  '.toolbar__select': () => ({\r\n    padding: '4px',\r\n    paddingLeft: '8px',\r\n    paddingRight: '32px',\r\n  }),\r\n\r\n  '.toolbar__button': {\r\n    border: 'none',\r\n    borderRadius: '4px',\r\n    height: '32px',\r\n    width: '32px',\r\n    background: 'transparent',\r\n    svg: {\r\n      path: {\r\n        fill: 'palette.text.primary',\r\n      },\r\n    },\r\n\r\n    '&:disabled': {\r\n      svg: {\r\n        path: {\r\n          fill: 'palette.border.section',\r\n        },\r\n      },\r\n    },\r\n  },\r\n\r\n  '.fieldLabel': {\r\n    display: 'flex',\r\n    flexDirection: 'row',\r\n    gap: 3,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n\r\n  '.toolbar__input': {\r\n    borderRadius: '4px',\r\n    p: 3,\r\n    width: '80px',\r\n  },\r\n\r\n  '.toolbar__separator': {\r\n    borderLeft: '1px solid',\r\n    borderRight: '1px solid',\r\n    borderColor: 'palette.gray.750',\r\n    height: '60%',\r\n    width: '3px',\r\n  },\r\n\r\n  '.toggled': (theme) => {\r\n    return {\r\n      ...theme.palette.getOneState(\r\n        { backgroundColor: theme.palette.background.default },\r\n        'selected',\r\n      ),\r\n    };\r\n  },\r\n};\r\n"],"names":[],"mappings":"AAEO,MAAM,MAA2B,GAAA;AAAA,EACtC,UAAY,EAAA,QAAA;AAAA,EACZ,eAAiB,EAAA,4BAAA;AAAA,EACjB,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,KAAA;AAAA,EACL,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EAEJ,OAAS,EAAA;AAAA,IACP,UAAY,EAAA,QAAA;AAAA,IACZ,YAAc,EAAA,KAAA;AAAA,IACd,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,CAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,iBAAA;AAAA,IACT,CAAG,EAAA,CAAA;AAAA,GACL;AAAA,EAEA,sBAAA,EAAwB,CAAC,KAAW,MAAA;AAAA,IAClC,OAAS,EAAA,oBAAA;AAAA,IACT,UAAY,EAAA,aAAA;AAAA,IACZ,MAAQ,EAAA,MAAA;AAAA,IACR,KAAO,EAAA,sBAAA;AAAA,IAEP,GAAG,MAAM,OAAQ,CAAA,uBAAA;AAAA,MACf;AAAA,QACE,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,OAAA;AAAA,OAC5C;AAAA,MACA,EAAE,MAAA,EAAQ,EAAE,OAAA,EAAS,OAAQ,EAAA;AAAA,KAC/B;AAAA,IAEA,WAAa,EAAA,KAAA,CAAM,OAAQ,CAAA,iBAAA,CAAkB,iBAAiB,CAAA;AAAA,GAChE,CAAA;AAAA,EAEA,oBAAoB,OAAO;AAAA,IACzB,OAAS,EAAA,KAAA;AAAA,IACT,WAAa,EAAA,KAAA;AAAA,IACb,YAAc,EAAA,MAAA;AAAA,GAChB,CAAA;AAAA,EAEA,kBAAoB,EAAA;AAAA,IAClB,MAAQ,EAAA,MAAA;AAAA,IACR,YAAc,EAAA,KAAA;AAAA,IACd,MAAQ,EAAA,MAAA;AAAA,IACR,KAAO,EAAA,MAAA;AAAA,IACP,UAAY,EAAA,aAAA;AAAA,IACZ,GAAK,EAAA;AAAA,MACH,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,sBAAA;AAAA,OACR;AAAA,KACF;AAAA,IAEA,YAAc,EAAA;AAAA,MACZ,GAAK,EAAA;AAAA,QACH,IAAM,EAAA;AAAA,UACJ,IAAM,EAAA,wBAAA;AAAA,SACR;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAAA,EAEA,aAAe,EAAA;AAAA,IACb,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,KAAA;AAAA,IACf,GAAK,EAAA,CAAA;AAAA,IACL,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,GAClB;AAAA,EAEA,iBAAmB,EAAA;AAAA,IACjB,YAAc,EAAA,KAAA;AAAA,IACd,CAAG,EAAA,CAAA;AAAA,IACH,KAAO,EAAA,MAAA;AAAA,GACT;AAAA,EAEA,qBAAuB,EAAA;AAAA,IACrB,UAAY,EAAA,WAAA;AAAA,IACZ,WAAa,EAAA,WAAA;AAAA,IACb,WAAa,EAAA,kBAAA;AAAA,IACb,MAAQ,EAAA,KAAA;AAAA,IACR,KAAO,EAAA,KAAA;AAAA,GACT;AAAA,EAEA,UAAA,EAAY,CAAC,KAAU,KAAA;AACrB,IAAO,OAAA;AAAA,MACL,GAAG,MAAM,OAAQ,CAAA,WAAA;AAAA,QACf,EAAE,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,WAAW,OAAQ,EAAA;AAAA,QACpD,UAAA;AAAA,OACF;AAAA,KACF,CAAA;AAAA,GACF;AACF;;;;"}

package/dist/components/accordion/Accordion.d.ts

@@ -9,6 +9,7 @@ interface IAccordionProps {
     children?: ReactNode;
     className?: string;
     getHandler?: (handler: AccordionHandler) => unknown;
+    singleExpand?: boolean;
     /**
      * Por defecto usa la variante layout.common.components.accordion.primary
      */

package/dist/components/accordion/Accordion.js

@@ -10,6 +10,7 @@ const Accordion = ({
   children,
   className,
   getHandler,
+  singleExpand,
   variant = "layout.common.components.accordion.primary"
 }) => {
   const id = useMemo(() => uniqueId(), []);
@@ -18,6 +19,7 @@ const Accordion = ({
       animationDuration,
       children,
       getHandler,
+      singleExpand,
       variant
     });
   });
@@ -25,6 +27,7 @@ const Accordion = ({
     animationDuration,
     children,
     getHandler,
+    singleExpand,
     variant
   });
   if (!shallowEqual(
@@ -32,6 +35,7 @@ const Accordion = ({
       animationDuration,
       children,
       getHandler,
+      singleExpand,
       variant
     },
     propsRef.current
@@ -40,12 +44,14 @@ const Accordion = ({
       animationDuration,
       children,
       getHandler,
+      singleExpand,
       variant
     };
     handler.updateProps({
       animationDuration,
       children,
       getHandler,
+      singleExpand,
       variant
     });
   }

package/dist/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { useRef, FC, ReactNode, useEffect, useState, useMemo } from 'react';\nimport { AccordionHandler } from './handler';\nimport { KeyHandler } from './KeyHandler';\nimport { shallowEqual } from '@apia/store';\nimport { uniqueId } from '../ListBox/common';\n\nexport interface IAccordionProps {\n  /**\n   * Tiempo en ms que dura la animación. Por defecto se usa 150.\n   */\n  animationDuration?: number;\n  children?: ReactNode;\n  className?: string;\n  getHandler?: (handler: AccordionHandler) => unknown;\n  /**\n   * Por defecto usa la variante layout.common.components.accordion.primary\n   */\n  variant?: string;\n}\n\nexport const Accordion: FC<IAccordionProps> = ({\n  animationDuration = 150,\n  children,\n  className,\n  getHandler,\n  variant = 'layout.common.components.accordion.primary',\n}) => {\n  const id = useMemo(() => uniqueId(), []);\n\n  const [handler] = useState(() => {\n    return new AccordionHandler(id, {\n      animationDuration,\n      children,\n      getHandler,\n      variant,\n    });\n  });\n  const propsRef = useRef({\n    animationDuration,\n    children,\n    getHandler,\n    variant,\n  });\n  if (\n    !shallowEqual(\n      {\n        animationDuration,\n        children,\n        getHandler,\n        variant,\n      },\n      propsRef.current,\n    )\n  ) {\n    propsRef.current = {\n      animationDuration,\n      children,\n      getHandler,\n      variant,\n    };\n    handler.updateProps({\n      animationDuration,\n      children,\n      getHandler,\n      variant,\n    });\n  }\n\n  const Provider = handler.hooks.useAccordionContextProvider();\n\n  useEffect(() => {\n    getHandler?.(handler);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [getHandler, handler]);\n\n  return (\n    <Provider>\n      <KeyHandler className={`accordion ${className ?? ''}`}>\n        {children}\n      </KeyHandler>\n    </Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAoBO,MAAM,YAAiC,CAAC;AAAA,EAC7C,iBAAoB,GAAA,GAAA;AAAA,EACpB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAU,GAAA,4CAAA;AACZ,CAAM,KAAA;AACJ,EAAA,MAAM,KAAK,OAAQ,CAAA,MAAM,QAAS,EAAA,EAAG,EAAE,CAAA,CAAA;AAEvC,EAAA,MAAM,CAAC,OAAO,CAAI,GAAA,QAAA,CAAS,MAAM;AAC/B,IAAO,OAAA,IAAI,iBAAiB,EAAI,EAAA;AAAA,MAC9B,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACF,CAAA,CAAA;AACD,EAAA,MAAM,WAAW,MAAO,CAAA;AAAA,IACtB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,GACD,CAAA,CAAA;AACD,EAAA,IACE,CAAC,YAAA;AAAA,IACC;AAAA,MACE,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF;AAAA,IACA,QAAS,CAAA,OAAA;AAAA,GAEX,EAAA;AACA,IAAA,QAAA,CAAS,OAAU,GAAA;AAAA,MACjB,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF,CAAA;AACA,IAAA,OAAA,CAAQ,WAAY,CAAA;AAAA,MAClB,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,KAAA,CAAM,2BAA4B,EAAA,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,GAAa,OAAO,CAAA,CAAA;AAAA,GAEnB,EAAA,CAAC,UAAY,EAAA,OAAO,CAAC,CAAA,CAAA;AAExB,EACE,uBAAA,GAAA,CAAC,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,aAAa,SAAa,IAAA,EAAE,CAChD,CAAA,EAAA,QAAA,EACH,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { useRef, FC, ReactNode, useEffect, useState, useMemo } from 'react';\r\nimport { AccordionHandler } from './handler';\r\nimport { KeyHandler } from './KeyHandler';\r\nimport { shallowEqual } from '@apia/store';\r\nimport { uniqueId } from '../ListBox/common';\r\n\r\nexport interface IAccordionProps {\r\n  /**\r\n   * Tiempo en ms que dura la animación. Por defecto se usa 150.\r\n   */\r\n  animationDuration?: number;\r\n  children?: ReactNode;\r\n  className?: string;\r\n  getHandler?: (handler: AccordionHandler) => unknown;\r\n  singleExpand?: boolean;\r\n  /**\r\n   * Por defecto usa la variante layout.common.components.accordion.primary\r\n   */\r\n  variant?: string;\r\n}\r\n\r\nexport const Accordion: FC<IAccordionProps> = ({\r\n  animationDuration = 150,\r\n  children,\r\n  className,\r\n  getHandler,\r\n  singleExpand,\r\n  variant = 'layout.common.components.accordion.primary',\r\n}) => {\r\n  const id = useMemo(() => uniqueId(), []);\r\n\r\n  const [handler] = useState(() => {\r\n    return new AccordionHandler(id, {\r\n      animationDuration,\r\n      children,\r\n      getHandler,\r\n      singleExpand,\r\n      variant,\r\n    });\r\n  });\r\n  const propsRef = useRef({\r\n    animationDuration,\r\n    children,\r\n    getHandler,\r\n    singleExpand,\r\n    variant,\r\n  });\r\n  if (\r\n    !shallowEqual(\r\n      {\r\n        animationDuration,\r\n        children,\r\n        getHandler,\r\n        singleExpand,\r\n        variant,\r\n      },\r\n      propsRef.current,\r\n    )\r\n  ) {\r\n    propsRef.current = {\r\n      animationDuration,\r\n      children,\r\n      getHandler,\r\n      singleExpand,\r\n      variant,\r\n    };\r\n    handler.updateProps({\r\n      animationDuration,\r\n      children,\r\n      getHandler,\r\n      singleExpand,\r\n      variant,\r\n    });\r\n  }\r\n\r\n  const Provider = handler.hooks.useAccordionContextProvider();\r\n\r\n  useEffect(() => {\r\n    getHandler?.(handler);\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [getHandler, handler]);\r\n\r\n  return (\r\n    <Provider>\r\n      <KeyHandler className={`accordion ${className ?? ''}`}>\r\n        {children}\r\n      </KeyHandler>\r\n    </Provider>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAqBO,MAAM,YAAiC,CAAC;AAAA,EAC7C,iBAAoB,GAAA,GAAA;AAAA,EACpB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAU,GAAA,4CAAA;AACZ,CAAM,KAAA;AACJ,EAAA,MAAM,KAAK,OAAQ,CAAA,MAAM,QAAS,EAAA,EAAG,EAAE,CAAA,CAAA;AAEvC,EAAA,MAAM,CAAC,OAAO,CAAI,GAAA,QAAA,CAAS,MAAM;AAC/B,IAAO,OAAA,IAAI,iBAAiB,EAAI,EAAA;AAAA,MAC9B,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACF,CAAA,CAAA;AACD,EAAA,MAAM,WAAW,MAAO,CAAA;AAAA,IACtB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA;AAAA,GACD,CAAA,CAAA;AACD,EAAA,IACE,CAAC,YAAA;AAAA,IACC;AAAA,MACE,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,KACF;AAAA,IACA,QAAS,CAAA,OAAA;AAAA,GAEX,EAAA;AACA,IAAA,QAAA,CAAS,OAAU,GAAA;AAAA,MACjB,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,KACF,CAAA;AACA,IAAA,OAAA,CAAQ,WAAY,CAAA;AAAA,MAClB,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,KAAA,CAAM,2BAA4B,EAAA,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,GAAa,OAAO,CAAA,CAAA;AAAA,GAEnB,EAAA,CAAC,UAAY,EAAA,OAAO,CAAC,CAAA,CAAA;AAExB,EACE,uBAAA,GAAA,CAAC,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,aAAa,SAAa,IAAA,EAAE,CAChD,CAAA,EAAA,QAAA,EACH,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/accordion/AccordionItem.d.ts

@@ -11,9 +11,10 @@ interface IAccordionItemProps {
      */
     buttonProps?: IAccordionItemButton;
     children?: ReactNode;
+    defaultExpanded?: boolean;
     id: TId;
 }
-declare const AccordionItem: ({ children, id, ...props }: IAccordionItemProps) => React.JSX.Element;
+declare const AccordionItem: ({ children, defaultExpanded, id, ...props }: IAccordionItemProps) => React.JSX.Element;
 
 export { AccordionItem, type IAccordionItemProps };
 //# sourceMappingURL=AccordionItem.d.ts.map

package/dist/components/accordion/AccordionItem.js

@@ -5,6 +5,7 @@ import { useAccordionContext } from './context.js';
 
 const AccordionItem = ({
   children,
+  defaultExpanded,
   id,
   ...props
 }) => {
@@ -13,7 +14,10 @@ const AccordionItem = ({
   const hasRegistered = useRef(false);
   if (!hasRegistered.current) {
     hasRegistered.current = true;
-    context.registerItem(id, { isChecked: false, isExpanded: false });
+    context.registerItem(id, {
+      isChecked: false,
+      isExpanded: !!defaultExpanded
+    });
   }
   return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(AccordionItemContent, { id, ...props, children }) });
 };

package/dist/components/accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../src/components/accordion/AccordionItem.tsx"],"sourcesContent":["import { ReactNode, useRef } from 'react';\nimport { AccordionItemContent } from './AccordionItemContent';\nimport { useAccordionContext } from './context';\nimport { TId } from '@apia/util';\nimport { IAccordionItemButton } from './defaultElements/DefaultAccordionItemButton';\n\nexport interface IAccordionItemProps {\n  /**\n   * Cada elemento del acordeón tiene dos formas de renderizar el botón. O bien\n   * se pasa un elemento AccordionItemButton como hijo o bien se pasan\n   * buttonProps. En caso contrario, el elemento no tendrá botón.\n   */\n  buttonProps?: IAccordionItemButton;\n  children?: ReactNode;\n  id: TId;\n}\n\nexport const AccordionItem = ({\n  children,\n  id,\n  ...props\n}: IAccordionItemProps) => {\n  const context = useAccordionContext();\n  const Provider = context.hooks.useItemContextProvider(id);\n  const hasRegistered = useRef(false);\n\n  if (!hasRegistered.current) {\n    hasRegistered.current = true;\n    context.registerItem(id, { isChecked: false, isExpanded: false });\n  }\n\n  return (\n    <Provider>\n      <AccordionItemContent id={id} {...props}>\n        {children}\n      </AccordionItemContent>\n    </Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,EAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,UAAU,mBAAoB,EAAA,CAAA;AACpC,EAAA,MAAM,QAAW,GAAA,OAAA,CAAQ,KAAM,CAAA,sBAAA,CAAuB,EAAE,CAAA,CAAA;AACxD,EAAM,MAAA,aAAA,GAAgB,OAAO,KAAK,CAAA,CAAA;AAElC,EAAI,IAAA,CAAC,cAAc,OAAS,EAAA;AAC1B,IAAA,aAAA,CAAc,OAAU,GAAA,IAAA,CAAA;AACxB,IAAA,OAAA,CAAQ,aAAa,EAAI,EAAA,EAAE,WAAW,KAAO,EAAA,UAAA,EAAY,OAAO,CAAA,CAAA;AAAA,GAClE;AAEA,EACE,uBAAA,GAAA,CAAC,YACC,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,IAAS,GAAG,KAAA,EAC/B,UACH,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../src/components/accordion/AccordionItem.tsx"],"sourcesContent":["import { ReactNode, useRef } from 'react';\r\nimport { AccordionItemContent } from './AccordionItemContent';\r\nimport { useAccordionContext } from './context';\r\nimport { TId } from '@apia/util';\r\nimport { IAccordionItemButton } from './defaultElements/DefaultAccordionItemButton';\r\n\r\nexport interface IAccordionItemProps {\r\n  /**\r\n   * Cada elemento del acordeón tiene dos formas de renderizar el botón. O bien\r\n   * se pasa un elemento AccordionItemButton como hijo o bien se pasan\r\n   * buttonProps. En caso contrario, el elemento no tendrá botón.\r\n   */\r\n  buttonProps?: IAccordionItemButton;\r\n  children?: ReactNode;\r\n  defaultExpanded?: boolean;\r\n  id: TId;\r\n}\r\n\r\nexport const AccordionItem = ({\r\n  children,\r\n  defaultExpanded,\r\n  id,\r\n  ...props\r\n}: IAccordionItemProps) => {\r\n  const context = useAccordionContext();\r\n  const Provider = context.hooks.useItemContextProvider(id);\r\n  const hasRegistered = useRef(false);\r\n\r\n  if (!hasRegistered.current) {\r\n    hasRegistered.current = true;\r\n    context.registerItem(id, {\r\n      isChecked: false,\r\n      isExpanded: !!defaultExpanded,\r\n    });\r\n  }\r\n\r\n  return (\r\n    <Provider>\r\n      <AccordionItemContent id={id} {...props}>\r\n        {children}\r\n      </AccordionItemContent>\r\n    </Provider>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,eAAA;AAAA,EACA,EAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,UAAU,mBAAoB,EAAA,CAAA;AACpC,EAAA,MAAM,QAAW,GAAA,OAAA,CAAQ,KAAM,CAAA,sBAAA,CAAuB,EAAE,CAAA,CAAA;AACxD,EAAM,MAAA,aAAA,GAAgB,OAAO,KAAK,CAAA,CAAA;AAElC,EAAI,IAAA,CAAC,cAAc,OAAS,EAAA;AAC1B,IAAA,aAAA,CAAc,OAAU,GAAA,IAAA,CAAA;AACxB,IAAA,OAAA,CAAQ,aAAa,EAAI,EAAA;AAAA,MACvB,SAAW,EAAA,KAAA;AAAA,MACX,UAAA,EAAY,CAAC,CAAC,eAAA;AAAA,KACf,CAAA,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAC,YACC,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,IAAS,GAAG,KAAA,EAC/B,UACH,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/accordion/AccordionItemButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItemButton.js","sources":["../../../src/components/accordion/AccordionItemButton.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport type TAccordionItemButton = {\n  children?: ReactNode;\n};\n\nexport const AccordionItemButton = ({ children }: TAccordionItemButton) => {\n  return <>{children}</>;\n};\n"],"names":[],"mappings":";;AAMO,MAAM,mBAAsB,GAAA,CAAC,EAAE,QAAA,EAAqC,KAAA;AACzE,EAAA,uCAAU,QAAS,EAAA,CAAA,CAAA;AACrB;;;;"}
+{"version":3,"file":"AccordionItemButton.js","sources":["../../../src/components/accordion/AccordionItemButton.tsx"],"sourcesContent":["import { ReactNode } from 'react';\r\n\r\nexport type TAccordionItemButton = {\r\n  children?: ReactNode;\r\n};\r\n\r\nexport const AccordionItemButton = ({ children }: TAccordionItemButton) => {\r\n  return <>{children}</>;\r\n};\r\n"],"names":[],"mappings":";;AAMO,MAAM,mBAAsB,GAAA,CAAC,EAAE,QAAA,EAAqC,KAAA;AACzE,EAAA,uCAAU,QAAS,EAAA,CAAA,CAAA;AACrB;;;;"}

package/dist/components/accordion/AccordionItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItemContent.js","sources":["../../../src/components/accordion/AccordionItemContent.tsx"],"sourcesContent":["import { Children, ReactElement } from 'react';\nimport { AccordionItemButton } from './AccordionItemButton';\nimport { DefaultAccordionItemButton } from './defaultElements/DefaultAccordionItemButton';\nimport { IAccordionItemProps } from './AccordionItem';\nimport AnimateHeight from 'react-animate-height';\nimport { useAccordionContext } from './context';\nimport { Box } from '@apia/theme';\n\nexport const AccordionItemContent = ({\n  children,\n  buttonProps,\n}: IAccordionItemProps) => {\n  let button = null;\n\n  const actualChildren = Children.toArray(children).filter((current) => {\n    if (typeof current !== 'string' && typeof current !== 'number') {\n      const element = current as ReactElement;\n\n      if (element.type === AccordionItemButton) {\n        button = element;\n        return false;\n      }\n    }\n    return true;\n  });\n\n  if (button === null && buttonProps)\n    button = <DefaultAccordionItemButton {...buttonProps} />;\n\n  const handler = useAccordionContext();\n  const isExpanded = handler.hooks.useItemStateSelector(\n    (current) => current.isExpanded,\n  );\n  const duration = handler.hooks.usePropsSelector(\n    (current) => current.animationDuration,\n  );\n  const id = handler.hooks.useItemId();\n\n  return (\n    <Box className=\"accordion__item\" data-id={id}>\n      {button}\n      <AnimateHeight\n        className=\"accordion__item__content\"\n        height={isExpanded ? 'auto' : 0}\n        duration={duration}\n        id={`accordion__${handler.id}__${id}`}\n      >\n        {actualChildren}\n      </AnimateHeight>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,WAAA;AACF,CAA2B,KAAA;AACzB,EAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AAEb,EAAA,MAAM,iBAAiB,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAE,CAAA,MAAA,CAAO,CAAC,OAAY,KAAA;AACpE,IAAA,IAAI,OAAO,OAAA,KAAY,QAAY,IAAA,OAAO,YAAY,QAAU,EAAA;AAC9D,MAAA,MAAM,OAAU,GAAA,OAAA,CAAA;AAEhB,MAAI,IAAA,OAAA,CAAQ,SAAS,mBAAqB,EAAA;AACxC,QAAS,MAAA,GAAA,OAAA,CAAA;AACT,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,IAAI,WAAW,IAAQ,IAAA,WAAA;AACrB,IAAS,MAAA,mBAAA,GAAA,CAAC,0BAA4B,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA,CAAA;AAExD,EAAA,MAAM,UAAU,mBAAoB,EAAA,CAAA;AACpC,EAAM,MAAA,UAAA,GAAa,QAAQ,KAAM,CAAA,oBAAA;AAAA,IAC/B,CAAC,YAAY,OAAQ,CAAA,UAAA;AAAA,GACvB,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,QAAQ,KAAM,CAAA,gBAAA;AAAA,IAC7B,CAAC,YAAY,OAAQ,CAAA,iBAAA;AAAA,GACvB,CAAA;AACA,EAAM,MAAA,EAAA,GAAK,OAAQ,CAAA,KAAA,CAAM,SAAU,EAAA,CAAA;AAEnC,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,iBAAA,EAAkB,WAAS,EACvC,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA;AAAA,oBACD,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,0BAAA;AAAA,QACV,MAAA,EAAQ,aAAa,MAAS,GAAA,CAAA;AAAA,QAC9B,QAAA;AAAA,QACA,EAAI,EAAA,CAAA,WAAA,EAAc,OAAQ,CAAA,EAAE,KAAK,EAAE,CAAA,CAAA;AAAA,QAElC,QAAA,EAAA,cAAA;AAAA,OAAA;AAAA,KACH;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AccordionItemContent.js","sources":["../../../src/components/accordion/AccordionItemContent.tsx"],"sourcesContent":["import { Children, ReactElement } from 'react';\r\nimport { AccordionItemButton } from './AccordionItemButton';\r\nimport { DefaultAccordionItemButton } from './defaultElements/DefaultAccordionItemButton';\r\nimport { IAccordionItemProps } from './AccordionItem';\r\nimport AnimateHeight from 'react-animate-height';\r\nimport { useAccordionContext } from './context';\r\nimport { Box } from '@apia/theme';\r\n\r\nexport const AccordionItemContent = ({\r\n  children,\r\n  buttonProps,\r\n}: IAccordionItemProps) => {\r\n  let button = null;\r\n\r\n  const actualChildren = Children.toArray(children).filter((current) => {\r\n    if (typeof current !== 'string' && typeof current !== 'number') {\r\n      const element = current as ReactElement;\r\n\r\n      if (element.type === AccordionItemButton) {\r\n        button = element;\r\n        return false;\r\n      }\r\n    }\r\n    return true;\r\n  });\r\n\r\n  if (button === null && buttonProps)\r\n    button = <DefaultAccordionItemButton {...buttonProps} />;\r\n\r\n  const handler = useAccordionContext();\r\n  const isExpanded = handler.hooks.useItemStateSelector(\r\n    (current) => current.isExpanded,\r\n  );\r\n  const duration = handler.hooks.usePropsSelector(\r\n    (current) => current.animationDuration,\r\n  );\r\n  const id = handler.hooks.useItemId();\r\n\r\n  return (\r\n    <Box className=\"accordion__item\" data-id={id}>\r\n      {button}\r\n      <AnimateHeight\r\n        className=\"accordion__item__content\"\r\n        height={isExpanded ? 'auto' : 0}\r\n        duration={duration}\r\n        id={`accordion__${handler.id}__${id}`}\r\n      >\r\n        {actualChildren}\r\n      </AnimateHeight>\r\n    </Box>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;;;AAQO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,WAAA;AACF,CAA2B,KAAA;AACzB,EAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AAEb,EAAA,MAAM,iBAAiB,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAE,CAAA,MAAA,CAAO,CAAC,OAAY,KAAA;AACpE,IAAA,IAAI,OAAO,OAAA,KAAY,QAAY,IAAA,OAAO,YAAY,QAAU,EAAA;AAC9D,MAAA,MAAM,OAAU,GAAA,OAAA,CAAA;AAEhB,MAAI,IAAA,OAAA,CAAQ,SAAS,mBAAqB,EAAA;AACxC,QAAS,MAAA,GAAA,OAAA,CAAA;AACT,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,IAAI,WAAW,IAAQ,IAAA,WAAA;AACrB,IAAS,MAAA,mBAAA,GAAA,CAAC,0BAA4B,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA,CAAA;AAExD,EAAA,MAAM,UAAU,mBAAoB,EAAA,CAAA;AACpC,EAAM,MAAA,UAAA,GAAa,QAAQ,KAAM,CAAA,oBAAA;AAAA,IAC/B,CAAC,YAAY,OAAQ,CAAA,UAAA;AAAA,GACvB,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,QAAQ,KAAM,CAAA,gBAAA;AAAA,IAC7B,CAAC,YAAY,OAAQ,CAAA,iBAAA;AAAA,GACvB,CAAA;AACA,EAAM,MAAA,EAAA,GAAK,OAAQ,CAAA,KAAA,CAAM,SAAU,EAAA,CAAA;AAEnC,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,iBAAA,EAAkB,WAAS,EACvC,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA;AAAA,oBACD,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,0BAAA;AAAA,QACV,MAAA,EAAQ,aAAa,MAAS,GAAA,CAAA;AAAA,QAC9B,QAAA;AAAA,QACA,EAAI,EAAA,CAAA,WAAA,EAAc,OAAQ,CAAA,EAAE,KAAK,EAAE,CAAA,CAAA;AAAA,QAElC,QAAA,EAAA,cAAA;AAAA,OAAA;AAAA,KACH;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/accordion/KeyHandler.js

@@ -1,73 +1,78 @@
 import { jsx } from '@apia/theme/jsx-runtime';
 import { Box, getVariant } from '@apia/theme';
-import { useState, useEffect } from 'react';
 import { useAccordionContext } from './context.js';
+import { useCallback } from 'react';
 
 const KeyHandler = (props) => {
-  const [ref, setRef] = useState(null);
   const handler = useAccordionContext();
-  useEffect(() => {
-    if (ref) {
-      ref.addEventListener("keydown", (ev) => {
-        const accordionItem = ev.target?.closest(
-          ".accordion__item"
-        );
-        const accordion = ev.target?.closest(".accordion");
-        const allItems = [
-          ...accordion?.querySelectorAll(".accordion__item") ?? []
-        ];
-        const currentIndex = allItems.findIndex(
-          (current) => current === accordionItem
-        );
-        if (ev.code === "ArrowDown") {
-          if (currentIndex < allItems.length - 1) {
-            ev.preventDefault();
-            allItems[currentIndex + 1]?.querySelector(
-              ".accordion__item__button"
-            )?.focus();
-          }
-        } else if (ev.code === "ArrowUp") {
-          if (currentIndex > 0) {
-            ev.preventDefault();
-            allItems[currentIndex - 1]?.querySelector(
-              ".accordion__item__button"
-            )?.focus();
-          }
-        } else if (ev.code === "ArrowLeft") {
-          if (allItems[currentIndex]?.querySelector(
-            '[aria-expanded="true"]'
-          )) {
-            ev.preventDefault();
-            allItems[currentIndex]?.querySelector(
-              ".accordion__item__button"
-            )?.click();
-          }
-        } else if (ev.code === "ArrowRight") {
-          if (allItems[currentIndex]?.querySelector(
-            '[aria-expanded="false"]'
-          )) {
-            ev.preventDefault();
-            allItems[currentIndex]?.querySelector(
-              ".accordion__item__button"
-            )?.click();
-          }
-        } else if (ev.code === "Space") {
-          ev.preventDefault();
-          ev.stopPropagation();
-          const id = accordionItem.dataset.id;
-          handler.udpateItem(id, {
-            isChecked: !handler.itemsState[id].isChecked
-          });
-        }
-      });
-    }
-  }, [handler, ref]);
   const variant = handler.hooks.usePropsSelector((current) => current.variant);
   return /* @__PURE__ */ jsx(
     Box,
     {
       ...props,
-      ref: setRef,
+      ref: useCallback(
+        (ref) => {
+          if (ref) {
+            ref.addEventListener("keydown", (ev) => {
+              if (ev.target.closest(".accordion__item__content"))
+                return;
+              const accordionItem = ev.target?.closest(
+                ".accordion__item"
+              );
+              const accordion = ev.target?.closest(
+                ".accordion"
+              );
+              const allItems = [
+                ...accordion?.querySelectorAll(".accordion__item") ?? []
+              ];
+              const currentIndex = allItems.findIndex(
+                (current) => current === accordionItem
+              );
+              if (ev.code === "ArrowDown") {
+                if (currentIndex < allItems.length - 1) {
+                  ev.preventDefault();
+                  allItems[currentIndex + 1]?.querySelector(
+                    ".accordion__item__button"
+                  )?.focus();
+                }
+              } else if (ev.code === "ArrowUp") {
+                if (currentIndex > 0) {
+                  ev.preventDefault();
+                  allItems[currentIndex - 1]?.querySelector(
+                    ".accordion__item__button"
+                  )?.focus();
+                }
+              } else if (ev.code === "ArrowLeft") {
+                if (allItems[currentIndex]?.querySelector(
+                  '[aria-expanded="true"]'
+                )) {
+                  ev.preventDefault();
+                  allItems[currentIndex]?.querySelector(
+                    ".accordion__item__button"
+                  )?.click();
+                }
+              } else if (ev.code === "ArrowRight") {
+                if (allItems[currentIndex]?.querySelector(
+                  '[aria-expanded="false"]'
+                )) {
+                  ev.preventDefault();
+                  allItems[currentIndex]?.querySelector(
+                    ".accordion__item__button"
+                  )?.click();
+                }
+              } else if (ev.code === "Space") {
+                ev.preventDefault();
+                ev.stopPropagation();
+                const id = accordionItem.dataset.id;
+                handler.udpateItem(id, {
+                  isChecked: !handler.itemsState[id].isChecked
+                });
+              }
+            });
+          }
+        },
+        [handler]
+      ),
       ...variant ? getVariant(variant) : void 0
     }
   );

package/dist/components/accordion/KeyHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyHandler.js","sources":["../../../src/components/accordion/KeyHandler.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@apia/theme';\nimport { useEffect, useState } from 'react';\nimport { useAccordionContext } from './context';\nimport { getVariant } from '@apia/theme';\n\nexport const KeyHandler = (props: BoxProps) => {\n  const [ref, setRef] = useState<HTMLDivElement | null>(null);\n  const handler = useAccordionContext();\n\n  useEffect(() => {\n    if (ref) {\n      ref.addEventListener('keydown', (ev) => {\n        const accordionItem = (ev.target as HTMLElement)?.closest(\n          '.accordion__item',\n        ) as HTMLElement;\n        const accordion = (ev.target as HTMLElement)?.closest('.accordion');\n        const allItems = [\n          ...(accordion?.querySelectorAll('.accordion__item') ?? []),\n        ];\n        const currentIndex = allItems.findIndex(\n          (current) => current === accordionItem,\n        );\n\n        if (ev.code === 'ArrowDown') {\n          if (currentIndex < allItems.length - 1) {\n            ev.preventDefault();\n            (\n              (allItems[currentIndex + 1] as HTMLElement)?.querySelector(\n                '.accordion__item__button',\n              ) as HTMLElement\n            )?.focus();\n          }\n        } else if (ev.code === 'ArrowUp') {\n          if (currentIndex > 0) {\n            ev.preventDefault();\n            (\n              (allItems[currentIndex - 1] as HTMLElement)?.querySelector(\n                '.accordion__item__button',\n              ) as HTMLElement\n            )?.focus();\n          }\n        } else if (ev.code === 'ArrowLeft') {\n          if (\n            (allItems[currentIndex] as HTMLElement)?.querySelector(\n              '[aria-expanded=\"true\"]',\n            ) as HTMLElement\n          ) {\n            ev.preventDefault();\n            (\n              (allItems[currentIndex] as HTMLElement)?.querySelector(\n                '.accordion__item__button',\n              ) as HTMLElement\n            )?.click();\n          }\n        } else if (ev.code === 'ArrowRight') {\n          if (\n            (allItems[currentIndex] as HTMLElement)?.querySelector(\n              '[aria-expanded=\"false\"]',\n            ) as HTMLElement\n          ) {\n            ev.preventDefault();\n            (\n              (allItems[currentIndex] as HTMLElement)?.querySelector(\n                '.accordion__item__button',\n              ) as HTMLElement\n            )?.click();\n          }\n        } else if (ev.code === 'Space') {\n          ev.preventDefault();\n          ev.stopPropagation();\n          const id = accordionItem.dataset.id as string;\n          handler.udpateItem(id, {\n            isChecked: !handler.itemsState[id].isChecked,\n          });\n        }\n      });\n    }\n  }, [handler, ref]);\n\n  const variant = handler.hooks.usePropsSelector((current) => current.variant);\n\n  return (\n    <Box\n      {...props}\n      ref={setRef}\n      {...(variant ? getVariant(variant) : undefined)}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"KeyHandler.js","sources":["../../../src/components/accordion/KeyHandler.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@apia/theme';\r\nimport { useAccordionContext } from './context';\r\nimport { getVariant } from '@apia/theme';\r\nimport { useCallback } from 'react';\r\n\r\nexport const KeyHandler = (props: BoxProps) => {\r\n  const handler = useAccordionContext();\r\n\r\n  const variant = handler.hooks.usePropsSelector((current) => current.variant);\r\n\r\n  return (\r\n    <Box\r\n      {...props}\r\n      ref={useCallback(\r\n        (ref: HTMLElement | null) => {\r\n          if (ref) {\r\n            ref.addEventListener('keydown', (ev) => {\r\n              if (\r\n                (ev.target as HTMLElement).closest('.accordion__item__content')\r\n              )\r\n                return;\r\n\r\n              const accordionItem = (ev.target as HTMLElement)?.closest(\r\n                '.accordion__item',\r\n              ) as HTMLElement;\r\n              const accordion = (ev.target as HTMLElement)?.closest(\r\n                '.accordion',\r\n              );\r\n              const allItems = [\r\n                ...(accordion?.querySelectorAll('.accordion__item') ?? []),\r\n              ];\r\n              const currentIndex = allItems.findIndex(\r\n                (current) => current === accordionItem,\r\n              );\r\n\r\n              if (ev.code === 'ArrowDown') {\r\n                if (currentIndex < allItems.length - 1) {\r\n                  ev.preventDefault();\r\n                  (\r\n                    (allItems[currentIndex + 1] as HTMLElement)?.querySelector(\r\n                      '.accordion__item__button',\r\n                    ) as HTMLElement\r\n                  )?.focus();\r\n                }\r\n              } else if (ev.code === 'ArrowUp') {\r\n                if (currentIndex > 0) {\r\n                  ev.preventDefault();\r\n                  (\r\n                    (allItems[currentIndex - 1] as HTMLElement)?.querySelector(\r\n                      '.accordion__item__button',\r\n                    ) as HTMLElement\r\n                  )?.focus();\r\n                }\r\n              } else if (ev.code === 'ArrowLeft') {\r\n                if (\r\n                  (allItems[currentIndex] as HTMLElement)?.querySelector(\r\n                    '[aria-expanded=\"true\"]',\r\n                  ) as HTMLElement\r\n                ) {\r\n                  ev.preventDefault();\r\n                  (\r\n                    (allItems[currentIndex] as HTMLElement)?.querySelector(\r\n                      '.accordion__item__button',\r\n                    ) as HTMLElement\r\n                  )?.click();\r\n                }\r\n              } else if (ev.code === 'ArrowRight') {\r\n                if (\r\n                  (allItems[currentIndex] as HTMLElement)?.querySelector(\r\n                    '[aria-expanded=\"false\"]',\r\n                  ) as HTMLElement\r\n                ) {\r\n                  ev.preventDefault();\r\n                  (\r\n                    (allItems[currentIndex] as HTMLElement)?.querySelector(\r\n                      '.accordion__item__button',\r\n                    ) as HTMLElement\r\n                  )?.click();\r\n                }\r\n              } else if (ev.code === 'Space') {\r\n                ev.preventDefault();\r\n                ev.stopPropagation();\r\n                const id = accordionItem.dataset.id as string;\r\n                handler.udpateItem(id, {\r\n                  isChecked: !handler.itemsState[id].isChecked,\r\n                });\r\n              }\r\n            });\r\n          }\r\n        },\r\n        [handler],\r\n      )}\r\n      {...(variant ? getVariant(variant) : undefined)}\r\n    />\r\n  );\r\n};\r\n"],"names":[],"mappings":"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"}

package/dist/components/accordion/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../src/components/accordion/context.ts"],"sourcesContent":["import { TId } from '@apia/util';\nimport { createContext, useContext } from 'react';\nimport { TAccordionHandler } from '.';\n\nexport const AccordionContext = createContext<TAccordionHandler | null>(null);\nexport const AccordionItemContext = createContext<TId | null>(null);\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext);\n  if (!context) throw new Error('There is no AccordionContext');\n  return context;\n};\n"],"names":[],"mappings":";;AAIa,MAAA,gBAAA,GAAmB,cAAwC,IAAI,EAAA;AAC/D,MAAA,oBAAA,GAAuB,cAA0B,IAAI,EAAA;AAE3D,MAAM,sBAAsB,MAAM;AACvC,EAAM,MAAA,OAAA,GAAU,WAAW,gBAAgB,CAAA,CAAA;AAC3C,EAAA,IAAI,CAAC,OAAA;AAAS,IAAM,MAAA,IAAI,MAAM,8BAA8B,CAAA,CAAA;AAC5D,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"context.js","sources":["../../../src/components/accordion/context.ts"],"sourcesContent":["import { TId } from '@apia/util';\r\nimport { createContext, useContext } from 'react';\r\nimport { TAccordionHandler } from '.';\r\n\r\nexport const AccordionContext = createContext<TAccordionHandler | null>(null);\r\nexport const AccordionItemContext = createContext<TId | null>(null);\r\n\r\nexport const useAccordionContext = () => {\r\n  const context = useContext(AccordionContext);\r\n  if (!context) throw new Error('There is no AccordionContext');\r\n  return context;\r\n};\r\n"],"names":[],"mappings":";;AAIa,MAAA,gBAAA,GAAmB,cAAwC,IAAI,EAAA;AAC/D,MAAA,oBAAA,GAAuB,cAA0B,IAAI,EAAA;AAE3D,MAAM,sBAAsB,MAAM;AACvC,EAAM,MAAA,OAAA,GAAU,WAAW,gBAAgB,CAAA,CAAA;AAC3C,EAAA,IAAI,CAAC,OAAA;AAAS,IAAM,MAAA,IAAI,MAAM,8BAA8B,CAAA,CAAA;AAC5D,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

package/dist/components/accordion/defaultElements/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/accordion/defaultElements/Checkbox.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { Icon } from '@apia/icons';\n\nexport interface ICheckbox {\n  checked: boolean;\n  disabled?: boolean;\n  onChange: (checked: boolean) => unknown;\n}\n\nexport const Checkbox = (props: ICheckbox) => {\n  return (\n    <Box\n      className=\"accordion__item__button__check\"\n      onClick={(ev) => {\n        ev.stopPropagation();\n        ev.preventDefault();\n        if (!props.disabled) props.onChange?.(!props.checked);\n      }}\n    >\n      {props.checked && <Icon title=\"\" name=\"Check\" />}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AASa,MAAA,QAAA,GAAW,CAAC,KAAqB,KAAA;AAC5C,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,gCAAA;AAAA,MACV,OAAA,EAAS,CAAC,EAAO,KAAA;AACf,QAAA,EAAA,CAAG,eAAgB,EAAA,CAAA;AACnB,QAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AAClB,QAAA,IAAI,CAAC,KAAM,CAAA,QAAA;AAAU,UAAM,KAAA,CAAA,QAAA,GAAW,CAAC,KAAA,CAAM,OAAO,CAAA,CAAA;AAAA,OACtD;AAAA,MAEC,gBAAM,OAAW,oBAAA,GAAA,CAAC,QAAK,KAAM,EAAA,EAAA,EAAG,MAAK,OAAQ,EAAA,CAAA;AAAA,KAAA;AAAA,GAChD,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/accordion/defaultElements/Checkbox.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { Icon } from '@apia/icons';\r\n\r\nexport interface ICheckbox {\r\n  checked: boolean;\r\n  disabled?: boolean;\r\n  onChange: (checked: boolean) => unknown;\r\n}\r\n\r\nexport const Checkbox = (props: ICheckbox) => {\r\n  return (\r\n    <Box\r\n      className=\"accordion__item__button__check\"\r\n      onClick={(ev) => {\r\n        ev.stopPropagation();\r\n        ev.preventDefault();\r\n        if (!props.disabled) props.onChange?.(!props.checked);\r\n      }}\r\n    >\r\n      {props.checked && <Icon title=\"\" name=\"Check\" />}\r\n    </Box>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;AASa,MAAA,QAAA,GAAW,CAAC,KAAqB,KAAA;AAC5C,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,gCAAA;AAAA,MACV,OAAA,EAAS,CAAC,EAAO,KAAA;AACf,QAAA,EAAA,CAAG,eAAgB,EAAA,CAAA;AACnB,QAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AAClB,QAAA,IAAI,CAAC,KAAM,CAAA,QAAA;AAAU,UAAM,KAAA,CAAA,QAAA,GAAW,CAAC,KAAA,CAAM,OAAO,CAAA,CAAA;AAAA,OACtD;AAAA,MAEC,gBAAM,OAAW,oBAAA,GAAA,CAAC,QAAK,KAAM,EAAA,EAAA,EAAG,MAAK,OAAQ,EAAA,CAAA;AAAA,KAAA;AAAA,GAChD,CAAA;AAEJ;;;;"}

package/dist/components/accordion/defaultElements/DefaultAccordionItemButton.js

@@ -17,9 +17,7 @@ const DefaultAccordionItemButton = (props) => {
     (ev) => {
       props.onClick?.(ev);
       if (!ev.isDefaultPrevented())
-        handler.udpateItem(id, (current) => ({
-          isExpanded: !current.isExpanded
-        }));
+        handler.toggleItem(id);
     },
     [handler, id, props]
   );