@agnos-ui/react-headless 0.2.0 → 0.3.1

package/package.json

@@ -1,72 +1,84 @@
 {
 	"name": "@agnos-ui/react-headless",
+	"description": "Headless widget library for React.",
+	"version": "0.3.1",
 	"type": "module",
-	"main": "./index.js",
+	"main": "./index.cjs",
 	"module": "./index.js",
 	"types": "./index.d.ts",
 	"exports": {
 		".": {
 			"types": "./index.d.ts",
+			"require": "./index.cjs",
 			"default": "./index.js"
 		},
 		"./components/*": {
-			"types": "./components/*/*.d.ts",
-			"default": "./components/*/*.js"
+			"types": "./components/*/index.d.ts",
+			"require": "./components/*/index.cjs",
+			"default": "./components/*/index.js"
 		},
 		"./config": {
 			"types": "./config.d.ts",
+			"require": "./config.cjs",
 			"default": "./config.js"
 		},
 		"./slot": {
 			"types": "./slot.d.ts",
+			"require": "./slot.cjs",
 			"default": "./slot.js"
 		},
 		"./types": {
 			"types": "./types.d.ts",
+			"require": "./types.cjs",
 			"default": "./types.js"
 		},
 		"./services/*": {
 			"types": "./generated/services/*.d.ts",
+			"require": "./generated/services/*.cjs",
 			"default": "./generated/services/*.js"
 		},
 		"./services/transitions/*": {
 			"types": "./generated/services/transitions/*.d.ts",
+			"require": "./generated/services/transitions/*.cjs",
 			"default": "./generated/services/transitions/*.js"
 		},
 		"./utils/*": {
 			"types": "./generated/utils/*.d.ts",
+			"require": "./generated/utils/*.cjs",
 			"default": "./generated/utils/*.js"
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core": "0.2.0",
+		"@agnos-ui/core": "0.3.1",
 		"classnames": "^2.5.1"
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "*",
+		"esm-env": "*",
 		"react": "*",
 		"react-dom": "*"
 	},
 	"sideEffects": false,
-	"version": "0.2.0",
 	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/AmadeusITGroup/AgnosUI.git",
+		"url": "git+https://github.com/AmadeusITGroup/AgnosUI.git",
 		"directory": "react/headless"
 	},
 	"keywords": [
 		"react",
-		"headless",
-		"components",
-		"widgets",
+		"AgnosUI",
 		"accordion",
 		"alert",
+		"components",
 		"modal",
 		"pagination",
+		"progressbar",
 		"rating",
-		"slider"
+		"slider",
+		"toast",
+		"widgets"
 	]
 }

package/portal-B0Q5KLrA.cjs

@@ -0,0 +1,5 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const reactDom = require("react-dom");
+const Portal = ({ children, container }) => container ? reactDom.createPortal(children, container) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+exports.Portal = Portal;

package/portal-CX8X69NK.js

@@ -0,0 +1,6 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+const Portal = ({ children, container }) => container ? createPortal(children, container) : /* @__PURE__ */ jsx(Fragment, { children });
+export {
+  Portal as P
+};

package/slot.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const slotWrapperCache = /* @__PURE__ */ new WeakMap();
+const slotWrapperFactory = (slotContent) => {
+  const SlotWrapper = (props) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: slotContent(props) });
+  return SlotWrapper;
+};
+const slotWrapper = (slotContent) => {
+  let res = slotWrapperCache.get(slotContent);
+  if (!res) {
+    res = slotWrapperFactory(slotContent);
+    slotWrapperCache.set(slotContent, res);
+  }
+  return res;
+};
+const isReactComponent = (item) => item.prototype instanceof react.Component;
+const Slot = ({ slotContent, props }) => {
+  const isFunction = typeof slotContent === "function";
+  if (isFunction) {
+    const SlotComponent = isReactComponent(slotContent) ? slotContent : slotWrapper(slotContent);
+    return /* @__PURE__ */ jsxRuntime.jsx(SlotComponent, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: slotContent });
+};
+exports.Slot = Slot;

package/slot.js

@@ -1,35 +1,27 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Component } from 'react';
-const slotWrapperCache = new WeakMap();
+import { jsx, Fragment } from "react/jsx-runtime";
+import { Component } from "react";
+const slotWrapperCache = /* @__PURE__ */ new WeakMap();
 const slotWrapperFactory = (slotContent) => {
-    const SlotWrapper = (props) => _jsx(_Fragment, { children: slotContent(props) });
-    return SlotWrapper;
+  const SlotWrapper = (props) => /* @__PURE__ */ jsx(Fragment, { children: slotContent(props) });
+  return SlotWrapper;
 };
 const slotWrapper = (slotContent) => {
-    let res = slotWrapperCache.get(slotContent);
-    if (!res) {
-        res = slotWrapperFactory(slotContent);
-        slotWrapperCache.set(slotContent, res);
-    }
-    return res;
+  let res = slotWrapperCache.get(slotContent);
+  if (!res) {
+    res = slotWrapperFactory(slotContent);
+    slotWrapperCache.set(slotContent, res);
+  }
+  return res;
 };
-/* eslint-disable-next-line @typescript-eslint/ban-types */
 const isReactComponent = (item) => item.prototype instanceof Component;
-/**
- * The React Slot component, allowing to extensively customize widgets.
- *
- * The input slotContent can be a react component, a function or jsx.
- *
- * @param parameter - the react component parameter
- * @param parameter.slotContent - the slot content
- * @param parameter.props - the react component props
- * @returns the slot component
- */
-export const Slot = ({ slotContent, props }) => {
-    const isFunction = typeof slotContent === 'function';
-    if (isFunction) {
-        const SlotComponent = isReactComponent(slotContent) ? slotContent : slotWrapper(slotContent);
-        return _jsx(SlotComponent, { ...props });
-    }
-    return _jsx(_Fragment, { children: slotContent });
+const Slot = ({ slotContent, props }) => {
+  const isFunction = typeof slotContent === "function";
+  if (isFunction) {
+    const SlotComponent = isReactComponent(slotContent) ? slotContent : slotWrapper(slotContent);
+    return /* @__PURE__ */ jsx(SlotComponent, { ...props });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: slotContent });
+};
+export {
+  Slot
 };

package/stores-B8YEDwZq.js

@@ -0,0 +1,27 @@
+import { findChangedProperties } from "@agnos-ui/core/utils/stores";
+import { writable, asReadable } from "@amadeus-it-group/tansu";
+import { useState, useEffect, useRef, useMemo } from "react";
+function useObservable(store$) {
+  const [value, setValue] = useState(() => store$());
+  useEffect(() => {
+    return store$.subscribe((arg) => {
+      setValue(() => arg);
+    });
+  }, [store$]);
+  return value;
+}
+const propsEqual = (a, b) => !findChangedProperties(a, b);
+const usePropsAsStore = (props) => {
+  const storeRef = useRef();
+  if (!storeRef.current) {
+    storeRef.current = writable({ ...props }, { equal: propsEqual });
+  }
+  useEffect(() => {
+    storeRef.current.set({ ...props });
+  }, [props]);
+  return useMemo(() => asReadable(storeRef.current), [storeRef.current]);
+};
+export {
+  usePropsAsStore as a,
+  useObservable as u
+};

package/stores-DLkDMqBY.cjs

@@ -0,0 +1,26 @@
+"use strict";
+const stores = require("@agnos-ui/core/utils/stores");
+const tansu = require("@amadeus-it-group/tansu");
+const react = require("react");
+function useObservable(store$) {
+  const [value, setValue] = react.useState(() => store$());
+  react.useEffect(() => {
+    return store$.subscribe((arg) => {
+      setValue(() => arg);
+    });
+  }, [store$]);
+  return value;
+}
+const propsEqual = (a, b) => !stores.findChangedProperties(a, b);
+const usePropsAsStore = (props) => {
+  const storeRef = react.useRef();
+  if (!storeRef.current) {
+    storeRef.current = tansu.writable({ ...props }, { equal: propsEqual });
+  }
+  react.useEffect(() => {
+    storeRef.current.set({ ...props });
+  }, [props]);
+  return react.useMemo(() => tansu.asReadable(storeRef.current), [storeRef.current]);
+};
+exports.useObservable = useObservable;
+exports.usePropsAsStore = usePropsAsStore;

package/types.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const types = require("@agnos-ui/core/types");
+Object.keys(types).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => types[k]
+    });
+});

package/types.js

@@ -1 +1 @@
-export * from '@agnos-ui/core/types';
+export * from "@agnos-ui/core/types";

package/utils/directive.d.ts

@@ -1,7 +1,44 @@
-import type { Directive } from '@agnos-ui/core/types';
+import type { Directive, DirectivesAndOptParam } from '@agnos-ui/core/types';
 import type { RefCallback } from 'react';
 export * from '@agnos-ui/core/utils/directive';
-export declare function useDirective(directive: Directive<void>): RefCallback<HTMLElement>;
-export declare function useDirective<T>(directive: Directive<T>, args: T): RefCallback<HTMLElement>;
-export declare function useDirectives(directives: Directive<void>[]): RefCallback<HTMLElement>;
-export declare function useDirectives<T>(directives: Directive<T>[], args: T): RefCallback<HTMLElement>;
+/**
+ * Returns an object with the key/value attributes for JSX, derived from a list of directives.
+ *
+ * @param directives - List of directives to generate attributes from. Each parameter can be the directive or an array with the directive and its parameter
+ * @returns JSON object with key/value pairs to be applied on a JSX node.
+ */
+export declare function directiveAttributes<T extends any[]>(...directives: DirectivesAndOptParam<T>): Record<string, any>;
+/**
+ * Same as {@link directiveAttributes}, but returns an empty object when run in a browser environement.
+ *
+ * @returns JSON object with name/value for the attributes
+ */
+export declare const ssrAttributes: typeof directiveAttributes;
+/**
+ * The useDirective function.
+ *
+ * Allows to attach a provided directive to the current react component.
+ *
+ * @param directive - the directive
+ * @param args - the args to pass to the directive
+ * @returns the ref callback
+ */
+export declare const useDirective: {
+    (directive: Directive): {
+        ref: RefCallback<HTMLElement>;
+    };
+    <T>(directive: Directive<T>, args: T): {
+        ref: RefCallback<HTMLElement>;
+    };
+};
+/**
+ * The useDirectives function.
+ *
+ * Allows to attach multiple directives to the current react component.
+ *
+ * @param directives - directives
+ * @returns the ref callback
+ */
+export declare const useDirectives: <T extends any[]>(...directives: DirectivesAndOptParam<T>) => {
+    ref: RefCallback<HTMLElement>;
+};

package/utils/stores.d.ts

@@ -13,4 +13,4 @@ export declare function useObservable<T>(store$: ReadableSignal<T>): T;
  * @param props - the props
  * @returns the readable stores
  */
-export declare const usePropsAsStore: <T extends object>(props?: Partial<T> | undefined) => ReadableSignal<Partial<T>>;
+export declare const usePropsAsStore: <T extends object>(props?: Partial<T>) => ReadableSignal<Partial<T>>;

package/widget-CqgI0B-w.cjs

@@ -0,0 +1,18 @@
+"use strict";
+const stores = require("@agnos-ui/core/utils/stores");
+const react = require("react");
+const stores$1 = require("./stores-DLkDMqBY.cjs");
+function useWidget(createWidget, props = {}, propsConfig) {
+  const api = react.useMemo(() => createWidget({ ...propsConfig, props: { ...propsConfig == null ? void 0 : propsConfig.props, ...props } }), []);
+  const previousProps = react.useRef(props);
+  react.useEffect(() => {
+    const changedProps = stores.findChangedProperties(previousProps.current, props);
+    previousProps.current = props;
+    if (changedProps) {
+      api.patch(changedProps);
+    }
+  }, [props]);
+  const state = stores$1.useObservable(api.state$);
+  return [state, api];
+}
+exports.useWidget = useWidget;

package/widget-DAs9_HQ1.js

@@ -0,0 +1,19 @@
+import { findChangedProperties } from "@agnos-ui/core/utils/stores";
+import { useMemo, useRef, useEffect } from "react";
+import { u as useObservable } from "./stores-B8YEDwZq.js";
+function useWidget(createWidget, props = {}, propsConfig) {
+  const api = useMemo(() => createWidget({ ...propsConfig, props: { ...propsConfig == null ? void 0 : propsConfig.props, ...props } }), []);
+  const previousProps = useRef(props);
+  useEffect(() => {
+    const changedProps = findChangedProperties(previousProps.current, props);
+    previousProps.current = props;
+    if (changedProps) {
+      api.patch(changedProps);
+    }
+  }, [props]);
+  const state = useObservable(api.state$);
+  return [state, api];
+}
+export {
+  useWidget as u
+};

package/components/accordion/accordion.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/accordion';
-import { createAccordion as coreCreateAccordion } from '@agnos-ui/core/components/accordion';
-export const createAccordion = coreCreateAccordion;

package/components/alert/alert.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/alert';
-import { createAlert as coreCreateAlert } from '@agnos-ui/core/components/alert';
-export const createAlert = coreCreateAlert;

package/components/modal/modal.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/modal';
-import { createModal as coreCreateModal } from '@agnos-ui/core/components/modal';
-export const createModal = coreCreateModal;

package/components/pagination/pagination.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/pagination';
-import { createPagination as coreCreatePagination } from '@agnos-ui/core/components/pagination';
-export const createPagination = coreCreatePagination;

package/components/progressbar/progressbar.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/progressbar';
-import { createProgressbar as coreCreateProgressbar } from '@agnos-ui/core/components/progressbar';
-export const createProgressbar = coreCreateProgressbar;

package/components/rating/rating.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/rating';
-import { createRating as coreCreateRating } from '@agnos-ui/core/components/rating';
-export const createRating = coreCreateRating;

package/components/select/select.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/select';
-import { createSelect as coreCreateSelect } from '@agnos-ui/core/components/select';
-export const createSelect = coreCreateSelect;

package/components/slider/slider.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/slider';
-import { createSlider as coreCreateSlider } from '@agnos-ui/core/components/slider';
-export const createSlider = coreCreateSlider;

package/components/toast/toast.js

@@ -1,3 +0,0 @@
-export * from '@agnos-ui/core/components/toast';
-import { createToast as coreCreateToast } from '@agnos-ui/core/components/toast';
-export const createToast = coreCreateToast;

package/generated/config.js

@@ -1 +0,0 @@
-export * from './../config';

package/generated/index.js

@@ -1,22 +0,0 @@
-export * from './services/siblingsInert';
-export * from './services/resizeObserver';
-export * from './services/portal';
-export * from './services/navManager';
-export * from './services/intersection';
-export * from './services/hash';
-export * from './services/focustrack';
-export * from './services/floatingUI';
-export * from './services/extendWidget';
-export * from './services/transitions/simpleClassTransition';
-export * from './services/transitions/cssTransitions';
-export * from './services/transitions/collapse';
-export * from './services/transitions/bootstrap';
-export * from './services/transitions/baseTransitions';
-export * from './utils/writables';
-export * from './utils/stores';
-export * from './utils/directive';
-export * from './types';
-export * from './config';
-export * from './utils/widget';
-export * from './utils/portal';
-export * from './slot';

package/generated/services/transitions/bootstrap.d.ts

@@ -1 +0,0 @@
-export * from '@agnos-ui/core/services/transitions/bootstrap';

package/generated/services/transitions/bootstrap.js

@@ -1 +0,0 @@
-export * from '@agnos-ui/core/services/transitions/bootstrap';

package/generated/slot.js

@@ -1 +0,0 @@
-export * from './../slot';

package/generated/types.js

@@ -1 +0,0 @@
-export * from './../types';

package/utils/directive.js

@@ -1,39 +0,0 @@
-import { mergeDirectives } from '@agnos-ui/core/utils/directive';
-import { useCallback, useMemo, useRef } from 'react';
-export * from '@agnos-ui/core/utils/directive';
-/**
- * The useDirective function.
- *
- * Allows to attach a provided directive to the current react component.
- *
- * @param directive - the directive
- * @param args - the args to pass to the directive
- * @returns the ref callback
- */
-export function useDirective(directive, args) {
-    const instance = useRef();
-    const propsRef = useRef();
-    const ref = useCallback((element) => {
-        instance.current?.destroy?.();
-        instance.current = undefined;
-        if (element) {
-            instance.current = directive(element, propsRef.current);
-        }
-    }, [directive]);
-    propsRef.current = args;
-    instance.current?.update?.(args);
-    return ref;
-}
-/**
- * The useDirectives function.
- *
- * Allows to attach multiple directives to the current react component.
- *
- * @param directives - directives
- * @param args - the args to pass to the directives
- * @returns the ref callback
- */
-export function useDirectives(directives, args) {
-    const mergedDirectives = useMemo(() => mergeDirectives(...directives), directives);
-    return useDirective(mergedDirectives, args);
-}

package/utils/portal.js

@@ -1,11 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
-/**
- * A Portal component, allowing to attach content to an external container.
- *
- * @param param - the react component inputs
- * @param param.children - the react component children
- * @param param.container - the container to attach the portal to
- * @returns the portal component
- */
-export const Portal = ({ children, container }) => container ? createPortal(children, container) : _jsx(_Fragment, { children: children });

package/utils/stores.js

@@ -1,38 +0,0 @@
-import { findChangedProperties } from '@agnos-ui/core/utils/stores';
-import { asReadable, writable } from '@amadeus-it-group/tansu';
-import { useEffect, useMemo, useRef, useState } from 'react';
-export * from '@agnos-ui/core/utils/stores';
-/**
- * Observe a readable store inside of a react component.
- *
- * @param store$ - the readable store
- * @returns the observed value of the store
- */
-export function useObservable(store$) {
-    const [value, setValue] = useState(() => store$());
-    useEffect(() => {
-        return store$.subscribe((arg) => {
-            // We're passing an update function to setValue here instead of just doing setValue(arg) so that
-            // if arg is a function, it is properly used as the value instead of being called as an update function
-            setValue(() => arg);
-        });
-    }, [store$]);
-    return value;
-}
-const propsEqual = (a, b) => !findChangedProperties(a, b);
-/**
- * Turn react props into readable stores.
- *
- * @param props - the props
- * @returns the readable stores
- */
-export const usePropsAsStore = (props) => {
-    const storeRef = useRef();
-    if (!storeRef.current) {
-        storeRef.current = writable({ ...props }, { equal: propsEqual });
-    }
-    useEffect(() => {
-        storeRef.current.set({ ...props });
-    }, [props]);
-    return useMemo(() => asReadable(storeRef.current), [storeRef.current]);
-};

package/utils/widget.js

@@ -1,26 +0,0 @@
-import { findChangedProperties } from '@agnos-ui/core/utils/stores';
-import { useEffect, useMemo, useRef } from 'react';
-import { useObservable } from './stores';
-/**
- * The useWidget function.
- *
- * Allows to create and attach an agnos-ui/core widget to the current react component.
- *
- * @param createWidget - the widget factory
- * @param props - the props
- * @param propsConfig - the props config
- * @returns the state and api to track and interact with the widget
- */
-export function useWidget(createWidget, props = {}, propsConfig) {
-    const api = useMemo(() => createWidget({ ...propsConfig, props: { ...propsConfig?.props, ...props } }), []);
-    const previousProps = useRef(props);
-    useEffect(() => {
-        const changedProps = findChangedProperties(previousProps.current, props);
-        previousProps.current = props;
-        if (changedProps) {
-            api.patch(changedProps);
-        }
-    }, [props]);
-    const state = useObservable(api.state$);
-    return [state, api];
-}