@apia/components 1.0.4 → 2.0.0

package/dist/components/IconsList/Icon.js

@@ -0,0 +1,42 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { useMemo } from 'react';
+import { useIconsListStoreContext } from './store/context.js';
+import { useIconRendererContext } from './context.js';
+
+const Icon = (props) => {
+  const { useProps } = useIconsListStoreContext();
+  const ref = useProps("cell", {
+    columnIndex: props.colIndex,
+    rowIndex: props.rowIndex
+  });
+  const Renderer = useIconRendererContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      role: "gridcell",
+      "data-id": props.id,
+      className: `iconsList__iconWrapper ${props.className ?? ""}`,
+      "aria-label": props.ariaLabel,
+      sx: useMemo(
+        () => ({
+          width: `${props.width}px`,
+          ".iconsList__icon__image__wrapper": {
+            height: `${props.width - 4}px`
+          },
+          ".iconsList__icon__image": {
+            maxHeight: `${props.width - 32}px`,
+            maxWidth: `${props.width - 32}px`
+          }
+        }),
+        [props.width]
+      ),
+      "aria-colindex": props.colIndex,
+      children: /* @__PURE__ */ jsx(Renderer, { ...props })
+    }
+  );
+};
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

package/dist/components/IconsList/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/components/IconsList/Icon.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { TIcon } from '.';\nimport { useMemo } from 'react';\nimport { useIconsListStoreContext } from './store/context';\nimport { useIconRendererContext } from './context';\n\nexport const Icon = (\n  props: TIcon & { rowIndex: number; colIndex: number; width: number },\n) => {\n  const { useProps } = useIconsListStoreContext();\n\n  const ref = useProps<HTMLElement>('cell', {\n    columnIndex: props.colIndex,\n    rowIndex: props.rowIndex,\n  });\n\n  const Renderer = useIconRendererContext();\n\n  return (\n    <Box\n      ref={ref}\n      role=\"gridcell\"\n      data-id={props.id}\n      className={`iconsList__iconWrapper ${props.className ?? ''}`}\n      aria-label={props.ariaLabel}\n      sx={useMemo(\n        () => ({\n          width: `${props.width}px`,\n\n          '.iconsList__icon__image__wrapper': {\n            height: `${props.width - 4}px`,\n          },\n\n          '.iconsList__icon__image': {\n            maxHeight: `${props.width - 32}px`,\n            maxWidth: `${props.width - 32}px`,\n          },\n        }),\n        [props.width],\n      )}\n      aria-colindex={props.colIndex}\n    >\n      <Renderer {...props} />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMa,MAAA,IAAA,GAAO,CAClB,KACG,KAAA;AACH,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,wBAAyB,EAAA,CAAA;AAE9C,EAAM,MAAA,GAAA,GAAM,SAAsB,MAAQ,EAAA;AAAA,IACxC,aAAa,KAAM,CAAA,QAAA;AAAA,IACnB,UAAU,KAAM,CAAA,QAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAA,MAAM,WAAW,sBAAuB,EAAA,CAAA;AAExC,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAK,EAAA,UAAA;AAAA,MACL,WAAS,KAAM,CAAA,EAAA;AAAA,MACf,SAAW,EAAA,CAAA,uBAAA,EAA0B,KAAM,CAAA,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MAC1D,cAAY,KAAM,CAAA,SAAA;AAAA,MAClB,EAAI,EAAA,OAAA;AAAA,QACF,OAAO;AAAA,UACL,KAAA,EAAO,CAAG,EAAA,KAAA,CAAM,KAAK,CAAA,EAAA,CAAA;AAAA,UAErB,kCAAoC,EAAA;AAAA,YAClC,MAAQ,EAAA,CAAA,EAAG,KAAM,CAAA,KAAA,GAAQ,CAAC,CAAA,EAAA,CAAA;AAAA,WAC5B;AAAA,UAEA,yBAA2B,EAAA;AAAA,YACzB,SAAW,EAAA,CAAA,EAAG,KAAM,CAAA,KAAA,GAAQ,EAAE,CAAA,EAAA,CAAA;AAAA,YAC9B,QAAU,EAAA,CAAA,EAAG,KAAM,CAAA,KAAA,GAAQ,EAAE,CAAA,EAAA,CAAA;AAAA,WAC/B;AAAA,SACF,CAAA;AAAA,QACA,CAAC,MAAM,KAAK,CAAA;AAAA,OACd;AAAA,MACA,iBAAe,KAAM,CAAA,QAAA;AAAA,MAErB,QAAA,kBAAA,GAAA,CAAC,QAAU,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA,KAAA;AAAA,GACvB,CAAA;AAEJ;;;;"}

package/dist/components/IconsList/IconWrapper.js

@@ -0,0 +1,24 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { Icon } from './Icon.js';
+import { justToFillTheRow } from './util.js';
+
+const IconWrapper = ({
+  icon,
+  iconWidth,
+  rowIndex,
+  colIndex
+}) => {
+  return icon === justToFillTheRow ? /* @__PURE__ */ jsx(Box, { sx: { width: `${iconWidth}px` }, className: "fill__the__row" }) : /* @__PURE__ */ jsx(
+    Icon,
+    {
+      rowIndex,
+      colIndex,
+      width: iconWidth,
+      ...icon
+    }
+  );
+};
+
+export { IconWrapper };
+//# sourceMappingURL=IconWrapper.js.map

package/dist/components/IconsList/IconWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconWrapper.js","sources":["../../../src/components/IconsList/IconWrapper.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { TIcon } from '.';\nimport { Icon } from './Icon';\nimport { justToFillTheRow } from './util';\n\nexport const IconWrapper = <P extends Record<string, unknown>>({\n  icon,\n  iconWidth,\n  rowIndex,\n  colIndex,\n}: {\n  icon: string | TIcon<P>;\n  iconWidth: number;\n  rowIndex: number;\n  colIndex: number;\n}) => {\n  return icon === justToFillTheRow ? (\n    <Box sx={{ width: `${iconWidth}px` }} className=\"fill__the__row\" />\n  ) : (\n    <Icon\n      rowIndex={rowIndex}\n      colIndex={colIndex}\n      width={iconWidth}\n      {...(icon as TIcon<P>)}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAKO,MAAM,cAAc,CAAoC;AAAA,EAC7D,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AACF,CAKM,KAAA;AACJ,EAAA,OAAO,IAAS,KAAA,gBAAA,mBACb,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,KAAO,EAAA,CAAA,EAAG,SAAS,CAAA,EAAA,CAAA,EAAQ,EAAA,SAAA,EAAU,kBAAiB,CAEjE,mBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAI,IAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ;;;;"}

package/dist/components/IconsList/KeyHandler.js

@@ -0,0 +1,147 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { useCallback } from 'react';
+import { useIconsListStoreContext } from './store/context.js';
+import { isChild, noNaN } from '@apia/util';
+import { ApiaUtil } from '../../objects/ApiaUtil/index.js';
+
+function findIcon(icons, arg) {
+  const iconId = arg instanceof HTMLElement ? arg.closest(".iconsList__iconWrapper[data-id]")?.dataset?.id : arg;
+  if (iconId !== void 0) {
+    const icon = icons.find((current) => String(current.id) === iconId);
+    return icon ?? null;
+  }
+}
+const KeyHandler = ({
+  children,
+  icons,
+  onIconClick,
+  onIconDoubleClick,
+  onIconGetDetails,
+  onIconKeyDown,
+  storeId
+}) => {
+  const { actions, getState } = useIconsListStoreContext();
+  const showIconDetails = useCallback(
+    (icon) => {
+      if (onIconGetDetails) {
+        ApiaUtil.instance.tooltips.open({
+          attachToElement: () => document.querySelector(
+            `#${storeId} .iconsList__iconWrapper[data-id="${icon.id}"]`
+          ),
+          children: onIconGetDetails(icon),
+          closeOnClick: false,
+          minSize: { width: 200, height: 0 }
+        });
+      }
+    },
+    [onIconGetDetails, storeId]
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "iconsList__keyHandler",
+      tabIndex: 0,
+      onFocus: useCallback(
+        (ev) => {
+          if (!isChild(
+            ev.target,
+            (current) => current.classList?.contains("iconsList__keyHandler")
+          ))
+            return;
+          const icon = findIcon(icons, getState().focusedId);
+          if (icon) {
+            showIconDetails(icon);
+          }
+        },
+        [getState, icons, showIconDetails]
+      ),
+      onMouseDown: useCallback(
+        (ev) => {
+          if (ev.target instanceof HTMLElement) {
+            const colIndex = noNaN(
+              ev.target.closest("[aria-colindex]")?.ariaColIndex,
+              -1
+            );
+            const rowIndex = noNaN(
+              ev.target.closest("[aria-rowindex]")?.ariaRowIndex,
+              -1
+            );
+            if (colIndex >= 0 && rowIndex >= 0) {
+              actions.setFocused({
+                colIndex,
+                rowIndex
+              });
+            }
+          }
+        },
+        [actions]
+      ),
+      onClick: useCallback(
+        (ev) => {
+          const icon = findIcon(icons, ev.target);
+          if (icon)
+            showIconDetails(icon);
+          if (onIconClick && icon) {
+            onIconClick(ev, icon);
+          }
+        },
+        [icons, onIconClick, showIconDetails]
+      ),
+      onDoubleClick: useCallback(
+        (ev) => {
+          if (onIconDoubleClick) {
+            const icon = findIcon(icons, ev.target);
+            if (icon)
+              onIconDoubleClick(ev, icon);
+          }
+        },
+        [icons, onIconDoubleClick]
+      ),
+      onKeyDown: useCallback(
+        (ev) => {
+          function showIconByFocusChange() {
+            const icon = findIcon(icons, getState().focusedId);
+            if (icon)
+              showIconDetails(icon);
+            if (icon && onIconKeyDown) {
+              onIconKeyDown(ev, icon);
+            }
+          }
+          function shoutKeyDown() {
+            const icon = findIcon(icons, getState().focusedId);
+            if (icon && onIconKeyDown) {
+              onIconKeyDown(ev, icon);
+            }
+          }
+          switch (ev.code) {
+            case "ArrowUp":
+              actions.arrowUp();
+              showIconByFocusChange();
+              break;
+            case "ArrowDown":
+              actions.arrowDown();
+              showIconByFocusChange();
+              break;
+            case "ArrowRight":
+              actions.arrowRight();
+              showIconByFocusChange();
+              break;
+            case "ArrowLeft":
+              actions.arrowLeft();
+              showIconByFocusChange();
+              break;
+            default:
+              shoutKeyDown();
+              break;
+          }
+        },
+        [actions, getState, icons, onIconKeyDown, showIconDetails]
+      ),
+      children
+    }
+  );
+};
+
+export { KeyHandler };
+//# sourceMappingURL=KeyHandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyHandler.js","sources":["../../../src/components/IconsList/KeyHandler.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Box } from '@apia/theme';\nimport {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  useCallback,\n} from 'react';\nimport { useIconsListStoreContext } from './store/context';\nimport { isChild, TId, noNaN } from '@apia/util';\nimport { TIcon, TIconsList } from './types';\nimport { ApiaUtil } from '../../objects/ApiaUtil';\n\nfunction findIcon(icons: TIcon[], arg: EventTarget | TId) {\n  const iconId =\n    arg instanceof HTMLElement\n      ? arg.closest<HTMLElement>('.iconsList__iconWrapper[data-id]')?.dataset\n          ?.id\n      : arg;\n\n  if (iconId !== undefined) {\n    const icon = icons.find((current) => String(current.id) === iconId);\n\n    return icon ?? null;\n  }\n}\n\nexport const KeyHandler = ({\n  children,\n  icons,\n  onIconClick,\n  onIconDoubleClick,\n  onIconGetDetails,\n  onIconKeyDown,\n  storeId,\n}: { children: ReactNode; storeId: TId } & Pick<\n  TIconsList<any>,\n  | 'icons'\n  | 'onIconClick'\n  | 'onIconDoubleClick'\n  | 'onIconGetDetails'\n  | 'onIconKeyDown'\n>) => {\n  const { actions, getState } = useIconsListStoreContext();\n\n  const showIconDetails = useCallback(\n    (icon: TIcon) => {\n      if (onIconGetDetails) {\n        ApiaUtil.instance.tooltips.open({\n          attachToElement: () =>\n            document.querySelector(\n              `#${storeId} .iconsList__iconWrapper[data-id=\"${icon.id}\"]`,\n            ) as HTMLElement,\n          children: onIconGetDetails(icon),\n          closeOnClick: false,\n          minSize: { width: 200, height: 0 },\n        });\n      }\n    },\n    [onIconGetDetails, storeId],\n  );\n\n  return (\n    <Box\n      className=\"iconsList__keyHandler\"\n      tabIndex={0}\n      onFocus={useCallback(\n        (ev: FocusEvent) => {\n          if (\n            !isChild(ev.target as HTMLElement, (current) =>\n              current.classList?.contains('iconsList__keyHandler'),\n            )\n          )\n            return;\n          const icon = findIcon(icons, getState().focusedId);\n          if (icon) {\n            showIconDetails(icon);\n          }\n        },\n        [getState, icons, showIconDetails],\n      )}\n      onMouseDown={useCallback(\n        (ev: MouseEvent) => {\n          if (ev.target instanceof HTMLElement) {\n            const colIndex = noNaN(\n              ev.target.closest('[aria-colindex]')?.ariaColIndex,\n              -1,\n            );\n            const rowIndex = noNaN(\n              ev.target.closest('[aria-rowindex]')?.ariaRowIndex,\n              -1,\n            );\n\n            if (colIndex >= 0 && rowIndex >= 0) {\n              actions.setFocused({\n                colIndex,\n                rowIndex,\n              });\n            }\n          }\n        },\n        [actions],\n      )}\n      onClick={useCallback(\n        (ev: MouseEvent<HTMLElement>) => {\n          const icon = findIcon(icons, ev.target);\n\n          if (icon) showIconDetails(icon);\n          if (onIconClick && icon) {\n            onIconClick(ev, icon);\n          }\n        },\n        [icons, onIconClick, showIconDetails],\n      )}\n      onDoubleClick={useCallback(\n        (ev: MouseEvent<HTMLElement>) => {\n          if (onIconDoubleClick) {\n            const icon = findIcon(icons, ev.target);\n            if (icon) onIconDoubleClick(ev, icon);\n          }\n        },\n        [icons, onIconDoubleClick],\n      )}\n      onKeyDown={useCallback(\n        (ev: KeyboardEvent<HTMLElement>) => {\n          function showIconByFocusChange() {\n            const icon = findIcon(icons, getState().focusedId);\n\n            if (icon) showIconDetails(icon);\n            if (icon && onIconKeyDown) {\n              onIconKeyDown(ev, icon);\n            }\n          }\n\n          function shoutKeyDown() {\n            const icon = findIcon(icons, getState().focusedId);\n            if (icon && onIconKeyDown) {\n              onIconKeyDown(ev, icon);\n            }\n          }\n\n          switch (ev.code) {\n            case 'ArrowUp':\n              actions.arrowUp();\n              showIconByFocusChange();\n              break;\n            case 'ArrowDown':\n              actions.arrowDown();\n              showIconByFocusChange();\n              break;\n            case 'ArrowRight':\n              actions.arrowRight();\n              showIconByFocusChange();\n              break;\n            case 'ArrowLeft':\n              actions.arrowLeft();\n              showIconByFocusChange();\n              break;\n            default:\n              shoutKeyDown();\n              break;\n          }\n        },\n        [actions, getState, icons, onIconKeyDown, showIconDetails],\n      )}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/IconsList/context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+const IconRendererContext = createContext(
+  null
+);
+function useIconRendererContext() {
+  const context = useContext(IconRendererContext);
+  if (!context)
+    throw new Error("There is no IconRendererContext");
+  return context;
+}
+
+export { IconRendererContext, useIconRendererContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/IconsList/context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { TIconRenderer } from './types';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const IconRendererContext = createContext<TIconRenderer<any> | null>(\n  null,\n);\n\nexport function useIconRendererContext<\n  P extends Record<string, unknown> = Record<string, unknown>,\n>() {\n  const context = useContext(IconRendererContext);\n\n  if (!context) throw new Error('There is no IconRendererContext');\n\n  return context as TIconRenderer<P>;\n}\n"],"names":[],"mappings":";;AAIO,MAAM,mBAAsB,GAAA,aAAA;AAAA,EACjC,IAAA;AACF,EAAA;AAEO,SAAS,sBAEZ,GAAA;AACF,EAAM,MAAA,OAAA,GAAU,WAAW,mBAAmB,CAAA,CAAA;AAE9C,EAAA,IAAI,CAAC,OAAA;AAAS,IAAM,MAAA,IAAI,MAAM,iCAAiC,CAAA,CAAA;AAE/D,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ForwardedRef } from 'react';
+import { TIconsList } from './types.js';
+export { TIcon, TIconRenderer } from './types.js';
+
+declare const IconsList: {
+    <P extends Record<string, unknown>>(props: TIconsList<P>, ref: ForwardedRef<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+
+export { IconsList, TIconsList };
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/IconsList/index.js

@@ -0,0 +1,119 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { makeStyledComponent, Box, Grid } from '@apia/theme';
+import { forwardRef, useMemo, useState, useCallback, useEffect } from 'react';
+import { useStore } from './store/useStore.js';
+import { uniqueId } from '../ListBox/common.js';
+import { KeyHandler } from './KeyHandler.js';
+import { styles } from './styles.js';
+import { getBreakpoints, useStyles, getRowIcons } from './util.js';
+import { IconWrapper } from './IconWrapper.js';
+import { DefaultIconRenderer } from './renderers/DefaultIconRenderer.js';
+import { IconRendererContext } from './context.js';
+import { useLatest, usePrevious } from '@apia/util';
+import { shallowEqual } from '@apia/store';
+import { makeResponsiveComponent } from '../responsive/makeResponsiveComponent.js';
+
+const IconsListNonForwarded = (props, ref) => {
+  const propsRef = useLatest(props);
+  let render = () => {
+  };
+  const previousProps = usePrevious(props);
+  if (!shallowEqual(props, previousProps.current)) {
+    setTimeout(() => render(), 0);
+  }
+  const ResponsiveContainer = useMemo(() => {
+    const iconWidth = propsRef.current.iconWidth ?? 100;
+    const minGap = propsRef.current.minHorizontalGap ?? 30;
+    const blockWidth = iconWidth + minGap;
+    const styledComponent = (styledComponentProps) => {
+      const { breakPoint, containerWidth } = styledComponentProps;
+      const [, doRender] = useState(true);
+      render = useCallback(() => doRender((current) => !current), []);
+      const storeId = useMemo(() => uniqueId("IconsList"), []);
+      const [actions, useProps, , , Context] = useStore({ storeId });
+      const rows = Math.ceil(propsRef.current.icons.length / breakPoint);
+      const sx = useStyles({
+        breakPoint,
+        containerWidth,
+        iconWidth: propsRef.current.iconWidth ?? 100,
+        verticalGap: propsRef.current.verticalGap,
+        removeHorizontalPadding: propsRef.current.removeHorizontalPadding
+      });
+      useEffect(() => {
+        actions.recalculateIndexByResize();
+      }, [breakPoint]);
+      const IconRenderer = propsRef.current.iconRenderer ?? DefaultIconRenderer;
+      const gridRef = useProps("grid", {
+        columns: breakPoint,
+        iconsCount: propsRef.current.icons.length,
+        rows
+      });
+      return /* @__PURE__ */ jsx(IconRendererContext.Provider, { value: IconRenderer, children: /* @__PURE__ */ jsx(Context, { children: /* @__PURE__ */ jsx(
+        KeyHandler,
+        {
+          icons: propsRef.current.icons,
+          onIconClick: propsRef.current.onIconClick,
+          onIconDoubleClick: propsRef.current.onIconDoubleClick,
+          onIconGetDetails: propsRef.current.onIconGetDetails,
+          onIconKeyDown: propsRef.current.onIconKeyDown,
+          storeId,
+          children: /* @__PURE__ */ jsx(Box, { ref: gridRef, children: Array(rows).fill(1).map((_, i) => {
+            const icons = getRowIcons({
+              breakPoint,
+              i,
+              icons: propsRef.current.icons
+            });
+            return /* @__PURE__ */ jsx(
+              Grid,
+              {
+                "aria-rowindex": i + 1,
+                role: "row",
+                ref,
+                sx,
+                children: icons.map((current, j) => /* @__PURE__ */ jsx(
+                  IconWrapper,
+                  {
+                    colIndex: j + 1,
+                    icon: current,
+                    iconWidth: propsRef.current.iconWidth ?? 100,
+                    rowIndex: i + 1
+                  },
+                  uniqueId(String(j + i))
+                ))
+              },
+              i
+            );
+          }) })
+        }
+      ) }) });
+    };
+    const Component = makeResponsiveComponent({
+      breakPoints: getBreakpoints(blockWidth),
+      Component: makeStyledComponent(
+        "IconsList",
+        "layout.common.components.iconsList",
+        styles,
+        styledComponent
+      ),
+      debounce: 50
+    });
+    return Component;
+  }, []);
+  if (previousProps.current?.iconWidth !== props.iconWidth) {
+    const iconWidth = props.iconWidth ?? 100;
+    const minGap = props.minHorizontalGap ?? 30;
+    const blockWidth = iconWidth + minGap;
+    setTimeout(
+      () => ResponsiveContainer.setBreakpoints.current(getBreakpoints(blockWidth)),
+      0
+    );
+  }
+  return /* @__PURE__ */ jsx(ResponsiveContainer, {});
+};
+IconsListNonForwarded.displayName = "IconsList";
+const IconsList = forwardRef(
+  IconsListNonForwarded
+);
+
+export { DefaultIconRenderer, IconsList };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/IconsList/index.tsx"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { Box, Grid } from '@apia/theme';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { makeResponsiveComponent } from '../responsive';\nimport { useStore } from './store/useStore';\nimport { uniqueId } from '../ListBox/common';\nimport { makeStyledComponent } from '@apia/theme';\nimport { KeyHandler } from './KeyHandler';\nimport { styles } from './styles';\nimport { getBreakpoints, getRowIcons, useStyles } from './util';\nimport { IconWrapper } from './IconWrapper';\nimport { DefaultIconRenderer } from './renderers/DefaultIconRenderer';\nimport { TIconsList, TIcon, TIconRenderer } from './types';\nimport { IconRendererContext } from './context';\nimport { useLatest, usePrevious } from '@apia/util';\nimport { shallowEqual } from '@apia/store';\n\nexport type { TIcon, TIconRenderer, TIconsList };\n\nconst IconsListNonForwarded = <P extends Record<string, unknown>>(\n  props: TIconsList<P>,\n  ref: ForwardedRef<HTMLDivElement>,\n) => {\n  const propsRef = useLatest(props);\n  let render: () => void = () => {};\n  const previousProps = usePrevious(props);\n  if (!shallowEqual(props, previousProps.current)) {\n    setTimeout(() => render(), 0);\n  }\n\n  const ResponsiveContainer = useMemo(() => {\n    const iconWidth = propsRef.current.iconWidth ?? 100;\n    const minGap = propsRef.current.minHorizontalGap ?? 30;\n    const blockWidth = iconWidth + minGap;\n    const styledComponent = (styledComponentProps: unknown) => {\n      const { breakPoint, containerWidth } = styledComponentProps as {\n        breakPoint: number;\n        containerWidth: number;\n      };\n      const [, doRender] = useState(true);\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      render = useCallback(() => doRender((current) => !current), []);\n      const storeId = useMemo(() => uniqueId('IconsList'), []);\n      const [actions, useProps, , , Context] = useStore({ storeId });\n      const rows = Math.ceil(propsRef.current.icons.length / breakPoint);\n      const sx = useStyles({\n        breakPoint,\n        containerWidth,\n        iconWidth: propsRef.current.iconWidth ?? 100,\n        verticalGap: propsRef.current.verticalGap,\n        removeHorizontalPadding: propsRef.current.removeHorizontalPadding,\n      });\n\n      useEffect(() => {\n        actions.recalculateIndexByResize();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [breakPoint]);\n      const IconRenderer = propsRef.current.iconRenderer ?? DefaultIconRenderer;\n      const gridRef = useProps('grid', {\n        columns: breakPoint,\n        iconsCount: propsRef.current.icons.length,\n        rows,\n      });\n\n      return (\n        <IconRendererContext.Provider value={IconRenderer}>\n          <Context>\n            <KeyHandler\n              icons={propsRef.current.icons}\n              onIconClick={propsRef.current.onIconClick}\n              onIconDoubleClick={propsRef.current.onIconDoubleClick}\n              onIconGetDetails={propsRef.current.onIconGetDetails}\n              onIconKeyDown={propsRef.current.onIconKeyDown}\n              storeId={storeId}\n            >\n              <Box ref={gridRef}>\n                {Array(rows)\n                  .fill(1)\n                  .map((_, i) => {\n                    const icons = getRowIcons({\n                      breakPoint,\n                      i,\n                      icons: propsRef.current.icons,\n                    });\n                    return (\n                      <Grid\n                        aria-rowindex={i + 1}\n                        role=\"row\"\n                        key={i}\n                        ref={ref}\n                        sx={sx}\n                      >\n                        {icons.map((current, j) => (\n                          <IconWrapper\n                            key={uniqueId(String(j + i))}\n                            colIndex={j + 1}\n                            icon={current}\n                            iconWidth={propsRef.current.iconWidth ?? 100}\n                            rowIndex={i + 1}\n                          />\n                        ))}\n                      </Grid>\n                    );\n                  })}\n              </Box>\n            </KeyHandler>\n          </Context>\n        </IconRendererContext.Provider>\n      );\n    };\n\n    const Component = makeResponsiveComponent({\n      breakPoints: getBreakpoints(blockWidth),\n      Component: makeStyledComponent(\n        'IconsList',\n        'layout.common.components.iconsList',\n        styles,\n        styledComponent,\n      ),\n      debounce: 50,\n    });\n\n    return Component;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (previousProps.current?.iconWidth !== props.iconWidth) {\n    const iconWidth = props.iconWidth ?? 100;\n    const minGap = props.minHorizontalGap ?? 30;\n\n    const blockWidth = iconWidth + minGap;\n    setTimeout(\n      () =>\n        ResponsiveContainer.setBreakpoints.current(getBreakpoints(blockWidth)),\n      0,\n    );\n  }\n\n  return <ResponsiveContainer />;\n};\n\nIconsListNonForwarded.displayName = 'IconsList';\n\nexport const IconsList = forwardRef(\n  IconsListNonForwarded,\n) as typeof IconsListNonForwarded;\n\nexport { DefaultIconRenderer };\n"],"names":[],"mappings":"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"}

package/dist/components/IconsList/renderers/DefaultIconRenderer.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TIcon } from '../types.js';
+
+declare const DefaultIconRenderer: React.NamedExoticComponent<TIcon<Record<string, unknown>>>;
+
+export { DefaultIconRenderer };
+//# sourceMappingURL=DefaultIconRenderer.d.ts.map

package/dist/components/IconsList/renderers/DefaultIconRenderer.d.ts.map

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

package/dist/components/IconsList/renderers/DefaultIconRenderer.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { Icon } from '@apia/icons';
+import { Box, Image } from '@apia/theme';
+import { memo } from 'react';
+
+const DefaultIconRendererNoMemo = (props) => {
+  if (!props.icon && !props.imageUrl) {
+    console.error({ props });
+    throw new Error("The icon has no imageUrl nor icon defined");
+  }
+  return /* @__PURE__ */ jsxs(Box, { title: props.label, className: "iconsList__icon__wrapper", children: [
+    /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
+      props.imageUrl && /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "iconsList__icon__image",
+          src: props.imageUrl,
+          role: "none",
+          alt: ""
+        }
+      ),
+      props.icon && /* @__PURE__ */ jsx(Icon, { icon: props.icon, title: props.ariaLabel })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
+  ] });
+};
+const DefaultIconRenderer = memo(DefaultIconRendererNoMemo);
+
+export { DefaultIconRenderer };
+//# sourceMappingURL=DefaultIconRenderer.js.map

package/dist/components/IconsList/renderers/DefaultIconRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultIconRenderer.js","sources":["../../../../src/components/IconsList/renderers/DefaultIconRenderer.tsx"],"sourcesContent":["import { Icon } from '@apia/icons';\nimport { TIconRenderer } from '../types';\nimport { Box, Image } from '@apia/theme';\nimport { memo } from 'react';\n\nconst DefaultIconRendererNoMemo: TIconRenderer = (props) => {\n  if (!props.icon && !props.imageUrl) {\n    console.error({ props });\n    throw new Error('The icon has no imageUrl nor icon defined');\n  }\n\n  return (\n    <Box title={props.label} className=\"iconsList__icon__wrapper\">\n      <Box className=\"iconsList__icon__image__wrapper\">\n        {props.imageUrl && (\n          <Image\n            className=\"iconsList__icon__image\"\n            src={props.imageUrl}\n            role=\"none\"\n            alt=\"\"\n          />\n        )}\n        {props.icon && <Icon icon={props.icon} title={props.ariaLabel} />}\n      </Box>\n      <Box className=\"iconsList__icon__label\">{props.label}</Box>\n    </Box>\n  );\n};\n\nexport const DefaultIconRenderer = memo(DefaultIconRendererNoMemo);\n"],"names":[],"mappings":";;;;;AAKA,MAAM,yBAAA,GAA2C,CAAC,KAAU,KAAA;AAC1D,EAAA,IAAI,CAAC,KAAA,CAAM,IAAQ,IAAA,CAAC,MAAM,QAAU,EAAA;AAClC,IAAQ,OAAA,CAAA,KAAA,CAAM,EAAE,KAAA,EAAO,CAAA,CAAA;AACvB,IAAM,MAAA,IAAI,MAAM,2CAA2C,CAAA,CAAA;AAAA,GAC7D;AAEA,EAAA,4BACG,GAAI,EAAA,EAAA,KAAA,EAAO,KAAM,CAAA,KAAA,EAAO,WAAU,0BACjC,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,GAAA,EAAA,EAAI,WAAU,iCACZ,EAAA,QAAA,EAAA;AAAA,MAAA,KAAA,CAAM,QACL,oBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,wBAAA;AAAA,UACV,KAAK,KAAM,CAAA,QAAA;AAAA,UACX,IAAK,EAAA,MAAA;AAAA,UACL,GAAI,EAAA,EAAA;AAAA,SAAA;AAAA,OACN;AAAA,MAED,KAAA,CAAM,wBAAS,GAAA,CAAA,IAAA,EAAA,EAAK,MAAM,KAAM,CAAA,IAAA,EAAM,KAAO,EAAA,KAAA,CAAM,SAAW,EAAA,CAAA;AAAA,KACjE,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,wBAAA,EAA0B,gBAAM,KAAM,EAAA,CAAA;AAAA,GACvD,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,mBAAA,GAAsB,KAAK,yBAAyB;;;;"}

package/dist/components/IconsList/store/context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+const StoreContext = createContext({});
+const useIconsListStoreContext = () => {
+  return useContext(StoreContext);
+};
+
+export { StoreContext, useIconsListStoreContext };
+//# sourceMappingURL=context.js.map

package/dist/components/IconsList/store/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../src/components/IconsList/store/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport {\n  TActionsMap,\n  TDistinctorProperties,\n  TGetState,\n  TRegisterStateChangeListener,\n  TUseProperties,\n} from '@apia/dom-store';\nimport { TCellDistinctions, TGridDistinctions, TState } from './types';\nimport { operations } from './operations';\n\nexport type TStoreContext = {\n  actions: TActionsMap<TState, typeof operations>;\n  useProps: TUseProperties<\n    TState,\n    {\n      cell: [\n        (\n          distinctions: TCellDistinctions,\n          state: TState,\n        ) => TDistinctorProperties,\n      ];\n      grid: [\n        (\n          distinctions: TGridDistinctions,\n          state: TState,\n        ) => TDistinctorProperties,\n      ];\n    }\n  >;\n  getState: TGetState<TState>;\n  registerStateChangeListener: TRegisterStateChangeListener<TState>;\n};\n\nexport const StoreContext = createContext<TStoreContext>({} as TStoreContext);\n\nexport const useIconsListStoreContext = () => {\n  return useContext(StoreContext);\n};\n"],"names":[],"mappings":";;AAkCa,MAAA,YAAA,GAAe,aAA6B,CAAA,EAAmB,EAAA;AAErE,MAAM,2BAA2B,MAAM;AAC5C,EAAA,OAAO,WAAW,YAAY,CAAA,CAAA;AAChC;;;;"}

package/dist/components/IconsList/store/distinctors.js

@@ -0,0 +1,42 @@
+const distinctors = {
+  grid: [
+    (distinctors2, state) => {
+      return {
+        etc: {
+          "aria-activedescendant": distinctors2.iconsCount > 0 ? `${state.storeId}__${state.focusedRow}__${state.focusedColumn}` : void 0,
+          role: "grid",
+          "aria-rowcount": distinctors2.rows,
+          "aria-colcount": distinctors2.columns,
+          id: state.storeId
+        }
+      };
+    }
+  ],
+  cell: [
+    (distinctions, state) => {
+      const isFocused = state.focusedColumn === distinctions.columnIndex && state.focusedRow === distinctions.rowIndex;
+      return {
+        etc: {
+          id: `${state.storeId}__${distinctions.rowIndex}__${distinctions.columnIndex}`
+        },
+        classList: {
+          add: isFocused ? ["focused"] : void 0,
+          remove: isFocused ? void 0 : ["focused"]
+        }
+      };
+    },
+    (_, state) => {
+      const focusedCell = document.querySelector(
+        `#${state.storeId} [aria-rowindex="${state.focusedRow}"] [aria-colindex="${state.focusedColumn}"]`
+      );
+      focusedCell?.scrollIntoView({
+        behavior: "instant",
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  ]
+};
+
+export { distinctors };
+//# sourceMappingURL=distinctors.js.map

package/dist/components/IconsList/store/distinctors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"distinctors.js","sources":["../../../../src/components/IconsList/store/distinctors.ts"],"sourcesContent":["import { TDistinctors } from '@apia/dom-store';\nimport { TCellDistinctions, TGridDistinctions, TState } from './types';\n\nexport const distinctors: TDistinctors<TState> = {\n  grid: [\n    (distinctors: TGridDistinctions, state) => {\n      return {\n        etc: {\n          'aria-activedescendant':\n            distinctors.iconsCount > 0\n              ? `${state.storeId}__${state.focusedRow}__${state.focusedColumn}`\n              : undefined,\n          role: 'grid',\n          'aria-rowcount': distinctors.rows,\n          'aria-colcount': distinctors.columns,\n          id: state.storeId,\n        },\n      };\n    },\n  ],\n  cell: [\n    (distinctions: TCellDistinctions, state) => {\n      const isFocused =\n        state.focusedColumn === distinctions.columnIndex &&\n        state.focusedRow === distinctions.rowIndex;\n      return {\n        etc: {\n          id: `${state.storeId}__${distinctions.rowIndex}__${distinctions.columnIndex}`,\n        },\n        classList: {\n          add: isFocused ? ['focused'] : undefined,\n          remove: isFocused ? undefined : ['focused'],\n        },\n      };\n    },\n    (_: TState, state: TState) => {\n      const focusedCell = document.querySelector(\n        `#${state.storeId} [aria-rowindex=\"${state.focusedRow}\"] [aria-colindex=\"${state.focusedColumn}\"]`,\n      );\n\n      focusedCell?.scrollIntoView({\n        behavior: 'instant',\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    },\n  ],\n};\n"],"names":["distinctors"],"mappings":"AAGO,MAAM,WAAoC,GAAA;AAAA,EAC/C,IAAM,EAAA;AAAA,IACJ,CAACA,cAAgC,KAAU,KAAA;AACzC,MAAO,OAAA;AAAA,QACL,GAAK,EAAA;AAAA,UACH,uBACEA,EAAAA,YAAAA,CAAY,UAAa,GAAA,CAAA,GACrB,CAAG,EAAA,KAAA,CAAM,OAAO,CAAA,EAAA,EAAK,KAAM,CAAA,UAAU,CAAK,EAAA,EAAA,KAAA,CAAM,aAAa,CAC7D,CAAA,GAAA,KAAA,CAAA;AAAA,UACN,IAAM,EAAA,MAAA;AAAA,UACN,iBAAiBA,YAAY,CAAA,IAAA;AAAA,UAC7B,iBAAiBA,YAAY,CAAA,OAAA;AAAA,UAC7B,IAAI,KAAM,CAAA,OAAA;AAAA,SACZ;AAAA,OACF,CAAA;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,CAAC,cAAiC,KAAU,KAAA;AAC1C,MAAA,MAAM,YACJ,KAAM,CAAA,aAAA,KAAkB,aAAa,WACrC,IAAA,KAAA,CAAM,eAAe,YAAa,CAAA,QAAA,CAAA;AACpC,MAAO,OAAA;AAAA,QACL,GAAK,EAAA;AAAA,UACH,EAAA,EAAI,GAAG,KAAM,CAAA,OAAO,KAAK,YAAa,CAAA,QAAQ,CAAK,EAAA,EAAA,YAAA,CAAa,WAAW,CAAA,CAAA;AAAA,SAC7E;AAAA,QACA,SAAW,EAAA;AAAA,UACT,GAAK,EAAA,SAAA,GAAY,CAAC,SAAS,CAAI,GAAA,KAAA,CAAA;AAAA,UAC/B,MAAQ,EAAA,SAAA,GAAY,KAAY,CAAA,GAAA,CAAC,SAAS,CAAA;AAAA,SAC5C;AAAA,OACF,CAAA;AAAA,KACF;AAAA,IACA,CAAC,GAAW,KAAkB,KAAA;AAC5B,MAAA,MAAM,cAAc,QAAS,CAAA,aAAA;AAAA,QAC3B,CAAA,CAAA,EAAI,MAAM,OAAO,CAAA,iBAAA,EAAoB,MAAM,UAAU,CAAA,mBAAA,EAAsB,MAAM,aAAa,CAAA,EAAA,CAAA;AAAA,OAChG,CAAA;AAEA,MAAA,WAAA,EAAa,cAAe,CAAA;AAAA,QAC1B,QAAU,EAAA,SAAA;AAAA,QACV,KAAO,EAAA,SAAA;AAAA,QACP,MAAQ,EAAA,SAAA;AAAA,OACT,CAAA,CAAA;AAAA,KACH;AAAA,GACF;AACF;;;;"}

package/dist/components/IconsList/store/keysMaker.js

@@ -0,0 +1,8 @@
+const makeCellKey = (distinctions) => `${distinctions.columnIndex}__${distinctions.rowIndex}`;
+const keysMakers = {
+  cell: makeCellKey,
+  grid: () => "grid"
+};
+
+export { keysMakers, makeCellKey };
+//# sourceMappingURL=keysMaker.js.map

package/dist/components/IconsList/store/keysMaker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keysMaker.js","sources":["../../../../src/components/IconsList/store/keysMaker.ts"],"sourcesContent":["import { TDistinctors, TKeysMaker } from '@apia/dom-store';\nimport { TState } from './types';\n\nexport const makeCellKey = (distinctions: {\n  columnIndex: number;\n  rowIndex: number;\n}) => `${distinctions.columnIndex}__${distinctions.rowIndex}`;\n\nexport const keysMakers: TKeysMaker<TState, TDistinctors<TState>> = {\n  cell: makeCellKey,\n  grid: () => 'grid',\n};\n"],"names":[],"mappings":"AAGa,MAAA,WAAA,GAAc,CAAC,YAGtB,KAAA,CAAA,EAAG,aAAa,WAAW,CAAA,EAAA,EAAK,aAAa,QAAQ,CAAA,EAAA;AAEpD,MAAM,UAAuD,GAAA;AAAA,EAClE,IAAM,EAAA,WAAA;AAAA,EACN,MAAM,MAAM,MAAA;AACd;;;;"}