@pisell/private-materials 6.3.3 → 6.3.5

package/lib/plus/productSelect/ProductList/index.js

@@ -0,0 +1,86 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/productSelect/ProductList/index.tsx
+var ProductList_exports = {};
+__export(ProductList_exports, {
+  GRID_LAYOUTS: () => import_gridComponents.GRID_LAYOUTS,
+  createCustomGrid: () => import_gridComponents.createCustomGrid,
+  createGridComponents: () => import_gridComponents.createGridComponents,
+  createTwoColumnGrid: () => import_gridComponents.createTwoColumnGrid,
+  default: () => ProductList_default
+});
+module.exports = __toCommonJS(ProductList_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_gridComponents = require("./gridComponents");
+var DefaultListComponent = (0, import_react.memo)(({ children, ...listProps }) => /* @__PURE__ */ import_react.default.createElement("div", { className: "product-list-wrapper", ...listProps }, children));
+var DefaultItemComponent = (0, import_react.memo)(({ children, index, ...itemProps }) => /* @__PURE__ */ import_react.default.createElement("div", { ...itemProps, "data-index": index, "data-item-index": index }, children));
+var ProductList = (0, import_react.forwardRef)((props, ref) => {
+  const { className, data, context, components, itemContent } = props;
+  const ListComponent = (0, import_react.useMemo)(
+    () => (components == null ? void 0 : components.List) || DefaultListComponent,
+    [components == null ? void 0 : components.List]
+  );
+  const ItemComponent = (0, import_react.useMemo)(
+    () => (components == null ? void 0 : components.Item) || DefaultItemComponent,
+    [components == null ? void 0 : components.Item]
+  );
+  const itemContentRenderer = (0, import_react.useMemo)(() => {
+    if (itemContent) {
+      return (item, index) => itemContent(index, item, context);
+    }
+    return (item, index) => /* @__PURE__ */ import_react.default.createElement("div", null, index);
+  }, [itemContent, context]);
+  const renderedItems = (0, import_react.useMemo)(() => {
+    return data == null ? void 0 : data.map((item, index) => {
+      const content = itemContentRenderer(item, index);
+      return /* @__PURE__ */ import_react.default.createElement(
+        ItemComponent,
+        {
+          key: `${item.id || index}-${index}`,
+          item,
+          index,
+          "data-index": index,
+          "data-item-index": index,
+          context
+        },
+        content
+      );
+    });
+  }, [data, ItemComponent, itemContentRenderer]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(className) }, /* @__PURE__ */ import_react.default.createElement(ListComponent, { ref, context }, renderedItems));
+});
+var ProductList_default = ProductList;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GRID_LAYOUTS,
+  createCustomGrid,
+  createGridComponents,
+  createTwoColumnGrid
+});

package/lib/plus/productSelect/components/IntersectionObserver.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+declare global {
+    interface Window {
+        IntersectionObserver: typeof IntersectionObserver;
+    }
+}
+interface IntersectionObserverContextValue {
+    initialized: boolean;
+    register: (params: {
+        ref: React.RefObject<HTMLElement>;
+        callback: (entry: IntersectionObserverEntry) => void;
+    }) => void;
+    unregister: (params: {
+        ref: React.RefObject<HTMLElement>;
+    }) => void;
+}
+declare type PriorityMode = 'top' | 'bottom' | 'left' | 'right' | undefined;
+interface IntersectionObserverProps {
+    children: ReactNode;
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    priorityMode?: PriorityMode;
+}
+interface IntersectionTriggerOptions {
+    once?: boolean;
+    onHide?: (cleanup: () => void) => void;
+    onShow?: (cleanup: () => void) => void;
+}
+interface IntersectionTriggerProps extends IntersectionTriggerOptions {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const IntersectionObserverContext: React.Context<IntersectionObserverContextValue>;
+declare const Consumer: React.Consumer<IntersectionObserverContextValue>;
+export declare const IntersectionObserverProvider: React.FC<IntersectionObserverProps>;
+export declare const IntersectionTrigger: React.FC<IntersectionTriggerProps>;
+export type { IntersectionObserverProps, IntersectionTriggerProps, IntersectionTriggerOptions, IntersectionObserverContextValue, PriorityMode, };
+export { IntersectionObserverContext, Consumer as IntersectionObserverConsumer, };
+export default IntersectionObserverProvider;

package/lib/plus/productSelect/components/IntersectionObserver.js

@@ -0,0 +1,269 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/productSelect/components/IntersectionObserver.tsx
+var IntersectionObserver_exports = {};
+__export(IntersectionObserver_exports, {
+  IntersectionObserverConsumer: () => Consumer,
+  IntersectionObserverContext: () => IntersectionObserverContext,
+  IntersectionObserverProvider: () => IntersectionObserverProvider,
+  IntersectionTrigger: () => IntersectionTrigger,
+  default: () => IntersectionObserver_default
+});
+module.exports = __toCommonJS(IntersectionObserver_exports);
+var import_react = __toESM(require("react"));
+var IntersectionObserverContext = (0, import_react.createContext)({
+  initialized: false,
+  register: () => {
+  },
+  unregister: () => {
+  }
+});
+var { Provider, Consumer } = IntersectionObserverContext;
+var IntersectionObserverProvider = ({
+  children,
+  root = null,
+  rootMargin = "0px",
+  threshold = 0,
+  priorityMode
+}) => {
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const [initialized, setInitialized] = (0, import_react.useState)(false);
+  const observerRef = (0, import_react.useRef)(null);
+  const callbackMapRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const findCallback = (0, import_react.useCallback)((target) => {
+    return callbackMapRef.current.get(target);
+  }, []);
+  const selectPriorityEntry = (0, import_react.useCallback)(
+    (entries, mode) => {
+      if (entries.length === 0) return void 0;
+      if (entries.length === 1) return entries[0];
+      switch (mode) {
+        case "top":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.top < prev.boundingClientRect.top ? curr : prev
+          );
+        case "bottom":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.bottom > prev.boundingClientRect.bottom ? curr : prev
+          );
+        case "left":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.left < prev.boundingClientRect.left ? curr : prev
+          );
+        case "right":
+          return entries.reduce(
+            (prev, curr) => curr.boundingClientRect.right > prev.boundingClientRect.right ? curr : prev
+          );
+        default:
+          return entries[0];
+      }
+    },
+    []
+  );
+  const observerOptions = (0, import_react.useMemo)(
+    () => ({
+      root,
+      rootMargin,
+      threshold
+    }),
+    [root, rootMargin, threshold]
+  );
+  const createObserver = (0, import_react.useCallback)(() => {
+    if (typeof window !== "undefined" && !window.IntersectionObserver) {
+      console.warn("IntersectionObserver is not supported in this browser");
+      return null;
+    }
+    return new IntersectionObserver((entries) => {
+      if (entries.length === 0) return;
+      try {
+        if (!priorityMode) {
+          entries.forEach((entry) => {
+            const callback = findCallback(entry.target);
+            if (callback) {
+              callback(entry);
+            }
+          });
+          return;
+        }
+        const visibleEntries = [];
+        const invisibleEntries = [];
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            visibleEntries.push(entry);
+          } else {
+            invisibleEntries.push(entry);
+          }
+        });
+        invisibleEntries.forEach((entry) => {
+          const callback = findCallback(entry.target);
+          if (callback) {
+            callback(entry);
+          }
+        });
+        if (visibleEntries.length > 0) {
+          const selectedEntry = selectPriorityEntry(
+            visibleEntries,
+            priorityMode
+          );
+          if (selectedEntry) {
+            const callback = findCallback(selectedEntry.target);
+            if (callback) {
+              callback(selectedEntry);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("IntersectionObserver callback error:", error);
+      }
+    }, observerOptions);
+  }, [observerOptions, priorityMode, findCallback, selectPriorityEntry]);
+  const register = (0, import_react.useCallback)(
+    ({
+      ref,
+      callback
+    }) => {
+      if ((ref == null ? void 0 : ref.current) && (observerRef == null ? void 0 : observerRef.current)) {
+        const element = ref.current;
+        if (callbackMapRef.current.has(element)) {
+          return;
+        }
+        callbackMapRef.current.set(element, callback);
+        observerRef.current.observe(element);
+      }
+    },
+    []
+  );
+  const unregister = (0, import_react.useCallback)(
+    ({ ref }) => {
+      if ((ref == null ? void 0 : ref.current) && (observerRef == null ? void 0 : observerRef.current)) {
+        const element = ref.current;
+        callbackMapRef.current.delete(element);
+        observerRef.current.unobserve(element);
+      }
+    },
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (mounted) {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      observerRef.current = createObserver();
+      setInitialized(true);
+    }
+  }, [mounted, createObserver]);
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        callbackMapRef.current.clear();
+        setInitialized(false);
+      }
+    };
+  }, []);
+  const contextValue = {
+    initialized,
+    register,
+    unregister
+  };
+  return /* @__PURE__ */ import_react.default.createElement(Provider, { value: contextValue }, children);
+};
+var useIntersectionTrigger = (elementRef, options = {}) => {
+  const { once = false, onHide, onShow } = options;
+  const { initialized, register, unregister } = (0, import_react.useContext)(
+    IntersectionObserverContext
+  );
+  const [isIntersecting, setIsIntersecting] = (0, import_react.useState)(false);
+  const cleanup = (0, import_react.useCallback)(
+    () => unregister({ ref: elementRef }),
+    [elementRef, unregister]
+  );
+  const intersectionCallback = (0, import_react.useCallback)(
+    (entry) => {
+      if (entry.isIntersecting) {
+        onShow == null ? void 0 : onShow(cleanup);
+        if (once) {
+          unregister({ ref: elementRef });
+        }
+      } else {
+        onHide == null ? void 0 : onHide(cleanup);
+      }
+      setIsIntersecting(entry.isIntersecting);
+    },
+    [onShow, onHide, once, cleanup, unregister, elementRef]
+  );
+  const registerRef = (0, import_react.useRef)();
+  registerRef.current = () => {
+    return register({
+      ref: elementRef,
+      callback: intersectionCallback
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (initialized) {
+      (_a = registerRef.current) == null ? void 0 : _a.call(registerRef);
+    }
+    return () => {
+      cleanup();
+    };
+  }, [initialized, cleanup]);
+  return { isIntersecting };
+};
+var IntersectionTrigger = ({
+  children,
+  className,
+  style = {},
+  ...options
+}) => {
+  const elementRef = (0, import_react.useRef)(null);
+  const { isIntersecting } = useIntersectionTrigger(elementRef, options);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className,
+      ref: elementRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        ...style
+      }
+    },
+    children
+  );
+};
+var IntersectionObserver_default = IntersectionObserverProvider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IntersectionObserverConsumer,
+  IntersectionObserverContext,
+  IntersectionObserverProvider,
+  IntersectionTrigger
+});

package/lib/plus/productSelect/components/TabsStructure/TabsStructure.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { TabsStructureProps, TabListContainerProps, TabItemProps, RailProps, SelectionIndicatorProps, ScrollShadowProps, ChevronControlsProps, ChevronButtonProps } from './types';
+declare global {
+    interface WeakRef<T extends object> {
+        deref(): T | undefined;
+    }
+    interface WeakRefConstructor {
+        new <T extends object>(target: T): WeakRef<T>;
+    }
+    const WeakRef: WeakRefConstructor | undefined;
+}
+declare const TabListContainer: React.ForwardRefExoticComponent<Omit<TabListContainerProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const TabItem: React.ForwardRefExoticComponent<Omit<TabItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Rail: React.ForwardRefExoticComponent<Omit<RailProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectionIndicator: React.ForwardRefExoticComponent<Omit<SelectionIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollShadow: React.ForwardRefExoticComponent<Omit<ScrollShadowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChevronButton: React.ForwardRefExoticComponent<Omit<ChevronButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ChevronControls: React.FC<ChevronControlsProps>;
+declare type TabsStructureComponent = React.FC<TabsStructureProps> & {
+    Rail: typeof Rail;
+    ListContainer: typeof TabListContainer;
+    Item: typeof TabItem;
+    SelectionIndicator: typeof SelectionIndicator;
+    ScrollShadow: typeof ScrollShadow;
+    ChevronControls: typeof ChevronControls;
+    ChevronButton: typeof ChevronButton;
+};
+declare const TabsStructureWithSubComponents: TabsStructureComponent;
+export default TabsStructureWithSubComponents;
+export { TabListContainer, TabItem, Rail, SelectionIndicator, ScrollShadow, ChevronControls, ChevronButton, };