@agnos-ui/react-headless 0.0.1-alpha.1 → 0.0.1-alpha.11

package/components/accordion/accordion.d.ts

@@ -0,0 +1,11 @@
+export * from '@agnos-ui/core/components/accordion';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, WidgetFactory, WidgetProps, WidgetState } from '../../types';
+export type AccordionWidget = AdaptWidgetSlots<import('@agnos-ui/core/components/accordion').AccordionWidget>;
+export type AccordionProps = WidgetProps<AccordionWidget>;
+export type AccordionState = WidgetState<AccordionWidget>;
+export type AccordionApi = AccordionWidget['api'];
+export type AccordionItemWidget = AdaptWidgetSlots<import('@agnos-ui/core/components/accordion').AccordionItemWidget>;
+export type AccordionItemProps = WidgetProps<AccordionItemWidget>;
+export type AccordionItemState = WidgetState<AccordionItemWidget>;
+export type AccordionItemContext = AdaptSlotContentProps<import('@agnos-ui/core/components/accordion').AccordionItemContext>;
+export declare const createAccordion: WidgetFactory<AccordionWidget>;

package/components/accordion/accordion.js

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

package/components/accordion/index.d.ts

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

package/components/accordion/index.js

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

package/components/alert/alert.d.ts

@@ -0,0 +1,7 @@
+export * from '@agnos-ui/core/components/alert';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, WidgetFactory, WidgetProps, WidgetState } from '../../types';
+export type AlertWidget = AdaptWidgetSlots<import('@agnos-ui/core/components/alert').AlertWidget>;
+export type AlertProps = WidgetProps<AlertWidget>;
+export type AlertState = WidgetState<AlertWidget>;
+export type AlertContext = AdaptSlotContentProps<import('@agnos-ui/core/components/alert').AlertContext>;
+export declare const createAlert: WidgetFactory<AlertWidget>;

package/components/alert/alert.js

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

package/components/alert/index.d.ts

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

package/components/alert/index.js

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

package/components/modal/index.d.ts

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

package/components/modal/index.js

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

package/components/modal/modal.d.ts

@@ -0,0 +1,7 @@
+export * from '@agnos-ui/core/components/modal';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, PropsConfig, WidgetProps, WidgetState } from '../../types';
+export type ModalWidget<Data> = AdaptWidgetSlots<import('@agnos-ui/core/components/modal').ModalWidget<Data>>;
+export type ModalProps<Data> = WidgetProps<ModalWidget<Data>>;
+export type ModalState<Data> = WidgetState<ModalWidget<Data>>;
+export type ModalContext<Data> = AdaptSlotContentProps<import('@agnos-ui/core/components/modal').ModalContext<Data>>;
+export declare const createModal: <Data>(propsConfig?: PropsConfig<ModalProps<Data>>) => ModalWidget<Data>;

package/components/modal/modal.js

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

package/components/pagination/index.d.ts

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

package/components/pagination/index.js

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

package/components/pagination/pagination.d.ts

@@ -0,0 +1,8 @@
+export * from '@agnos-ui/core/components/pagination';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, WidgetFactory, WidgetProps, WidgetState } from '../../types';
+export type PaginationWidget = AdaptWidgetSlots<import('@agnos-ui/core/components/pagination').PaginationWidget>;
+export type PaginationProps = WidgetProps<PaginationWidget>;
+export type PaginationState = WidgetState<PaginationWidget>;
+export type PaginationContext = AdaptSlotContentProps<import('@agnos-ui/core/components/pagination').PaginationContext>;
+export type PaginationNumberContext = AdaptSlotContentProps<import('@agnos-ui/core/components/pagination').PaginationNumberContext>;
+export declare const createPagination: WidgetFactory<PaginationWidget>;

package/components/pagination/pagination.js

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

package/components/progressbar/index.d.ts

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

package/components/progressbar/index.js

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

package/components/progressbar/progressbar.d.ts

@@ -0,0 +1,7 @@
+export * from '@agnos-ui/core/components/progressbar';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, WidgetFactory, WidgetProps, WidgetState } from '../../types';
+export type ProgressbarWidget = AdaptWidgetSlots<import('@agnos-ui/core/components/progressbar').ProgressbarWidget>;
+export type ProgressbarProps = WidgetProps<ProgressbarWidget>;
+export type ProgressbarState = WidgetState<ProgressbarWidget>;
+export type ProgressbarContext = AdaptSlotContentProps<import('@agnos-ui/core/components/progressbar').ProgressbarContext>;
+export declare const createProgressbar: WidgetFactory<ProgressbarWidget>;

package/components/progressbar/progressbar.js

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

package/components/rating/index.d.ts

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

package/components/rating/index.js

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

package/components/rating/rating.d.ts

@@ -0,0 +1,6 @@
+export * from '@agnos-ui/core/components/rating';
+import type { AdaptWidgetSlots, WidgetFactory, WidgetProps, WidgetState } from '../../types';
+export type RatingWidget = AdaptWidgetSlots<import('@agnos-ui/core/components/rating').RatingWidget>;
+export type RatingProps = WidgetProps<RatingWidget>;
+export type RatingState = WidgetState<RatingWidget>;
+export declare const createRating: WidgetFactory<RatingWidget>;

package/components/rating/rating.js

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

package/components/select/index.d.ts

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

package/components/select/index.js

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

package/components/select/select.d.ts

@@ -0,0 +1,8 @@
+export * from '@agnos-ui/core/components/select';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, PropsConfig, WidgetProps, WidgetState } from '../../types';
+export type SelectWidget<Item> = AdaptWidgetSlots<import('@agnos-ui/core/components/select').SelectWidget<Item>>;
+export type SelectProps<Item> = WidgetProps<SelectWidget<Item>>;
+export type SelectState<Item> = WidgetState<SelectWidget<Item>>;
+export type SelectContext<Item> = AdaptSlotContentProps<import('@agnos-ui/core/components/select').SelectContext<Item>>;
+export type SelectItemContext<Item> = AdaptSlotContentProps<import('@agnos-ui/core/components/select').SelectItemContext<Item>>;
+export declare const createSelect: <Item>(propsConfig?: PropsConfig<SelectProps<Item>>) => SelectWidget<Item>;

package/components/select/select.js

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

package/components/slider/index.d.ts

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

package/components/slider/index.js

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

package/components/slider/slider.d.ts

@@ -0,0 +1 @@
+export * from '@agnos-ui/core/components/slider';

package/components/slider/slider.js

@@ -0,0 +1 @@
+export * from '@agnos-ui/core/components/slider';

package/config.d.ts

@@ -0,0 +1,32 @@
+import type { Widget, WidgetFactory, WidgetProps, WidgetState } from '@agnos-ui/core/types';
+import { type WidgetsConfigStore, type WidgetsConfig as CoreWidgetsConfig, type Partial2Levels } from '@agnos-ui/core/config';
+import type { ReactNode } from 'react';
+import type { AdaptPropsSlots } from './types';
+export * from '@agnos-ui/core/config';
+export type WidgetsConfig = {
+    [WidgetName in keyof CoreWidgetsConfig]: AdaptPropsSlots<CoreWidgetsConfig[WidgetName]>;
+};
+type DefaultConfigInput<Config> = Partial2Levels<Config> & {
+    adaptParentConfig?: (config: Partial2Levels<Config>) => Partial2Levels<Config>;
+    children?: ReactNode | undefined;
+};
+/**
+ * A factory to create the use functions and react component to allow widgets to be context-aware.
+ *
+ * It can be used when extending the core and creating new widgets.
+ *
+ * @param widgetsConfigContext - the widgets config context
+ * @returns the use functions and react component
+ */
+export declare const widgetsConfigFactory: <Config extends {
+    [widgetName: string]: object;
+} = WidgetsConfig>(widgetsConfigContext?: import("react").Context<WidgetsConfigStore<Config> | undefined>) => {
+    /**
+     * React context which can be used to provide or consume the widgets default configuration store.
+     */
+    widgetsConfigContext: import("react").Context<WidgetsConfigStore<Config> | undefined>;
+    useWidgetContext: <Props extends object>(widgetName: keyof Config | null, defaultConfig?: Partial<Props> | undefined) => import("@amadeus-it-group/tansu").ReadableSignal<Partial<Props>>;
+    useWidgetWithConfig: <W extends Widget<object, object, object, object, object>>(factory: WidgetFactory<W>, props: Partial<WidgetProps<W>> | undefined, widgetName: keyof Config | null, defaultProps?: Partial<WidgetProps<W>> | undefined) => [WidgetState<W>, W];
+    WidgetsDefaultConfig: ({ children, adaptParentConfig, ...props }: DefaultConfigInput<Config>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const widgetsConfigContext: import("react").Context<WidgetsConfigStore<WidgetsConfig> | undefined>, WidgetsDefaultConfig: ({ children, adaptParentConfig, ...props }: DefaultConfigInput<WidgetsConfig>) => import("react/jsx-runtime").JSX.Element, useWidgetContext: <Props extends object>(widgetName: keyof CoreWidgetsConfig | null, defaultConfig?: Partial<Props> | undefined) => import("@amadeus-it-group/tansu").ReadableSignal<Partial<Props>>, useWidgetWithConfig: <W extends Widget<object, object, object, object, object>>(factory: WidgetFactory<W>, props: Partial<WidgetProps<W>> | undefined, widgetName: keyof CoreWidgetsConfig | null, defaultProps?: Partial<WidgetProps<W>> | undefined) => [WidgetState<W>, W];

package/config.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createWidgetsConfig } from '@agnos-ui/core/config';
+import { computed } from '@amadeus-it-group/tansu';
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { useWidget } from './utils/widget';
+import { usePropsAsStore } from './utils/stores';
+export * from '@agnos-ui/core/config';
+/**
+ * A factory to create the use functions and react component to allow widgets to be context-aware.
+ *
+ * It can be used when extending the core and creating new widgets.
+ *
+ * @param widgetsConfigContext - the widgets config context
+ * @returns the use functions and react component
+ */
+export const widgetsConfigFactory = (widgetsConfigContext = createContext(undefined)) => {
+    const useWidgetContext = (widgetName, defaultConfig) => {
+        const widgetsConfig = useContext(widgetsConfigContext);
+        const defaultConfig$ = usePropsAsStore(defaultConfig);
+        return useMemo(() => computed(() => ({ ...defaultConfig$(), ...(widgetName ? widgetsConfig?.()[widgetName] : undefined) })), [widgetsConfig]);
+    };
+    const useWidgetWithConfig = (factory, props, widgetName, defaultProps) => useWidget(factory, props, { config: useWidgetContext(widgetName, defaultProps) });
+    /**
+     * React component that provides in the React context (for all AgnosUI descendant widgets) a new widgets default configuration
+     * store that inherits from any widgets default configuration store already defined at an upper level in the React context hierarchy.
+     * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
+     *
+     * @remarks
+     * The configuration is computed from the parent configuration in two steps:
+     * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+     * If adaptParentConfig is not specified, this step is skipped.
+     * - second step: the configuration from step 1 is merged (2-levels deep) with the properties of the component.
+     *
+     * @param componentInputs - the react component inputs
+     * @param componentInputs.children - the react component children
+     * @param componentInputs.adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+     * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
+     * default configuration to be used.
+     * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+     * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+     *
+     * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+     * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+     * The resulting store is writable, its set function is actually the set function of the own$ store.
+     *
+     * @example
+     * ```tsx
+     * <WidgetsDefaultConfig
+     *   adaptParentConfig={(parentConfig) => {
+     *     parentConfig.rating = parentConfig.rating ?? {};
+     *     parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
+     *     return parentConfig;
+     *   }}
+     *   rating={{slotStar: MyCustomSlotStar}}
+     * />
+     * ```
+     */
+    const WidgetsDefaultConfig = ({ children, adaptParentConfig, ...props }) => {
+        const config$ = useContext(widgetsConfigContext);
+        let storeRecreated = false;
+        const store$ = useMemo(() => {
+            const store = createWidgetsConfig(config$, adaptParentConfig);
+            store.set(props);
+            storeRecreated = true;
+            return store;
+        }, [config$, adaptParentConfig]);
+        useEffect(() => {
+            if (!storeRecreated) {
+                store$.set(props);
+            }
+        }, [props]);
+        return _jsx(widgetsConfigContext.Provider, { value: store$, children: children });
+    };
+    return {
+        /**
+         * React context which can be used to provide or consume the widgets default configuration store.
+         */
+        widgetsConfigContext,
+        useWidgetContext,
+        useWidgetWithConfig,
+        WidgetsDefaultConfig,
+    };
+};
+export const { widgetsConfigContext, WidgetsDefaultConfig, useWidgetContext, useWidgetWithConfig } = widgetsConfigFactory();

package/generated/config.d.ts

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

package/generated/config.js

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

package/generated/index.d.ts

@@ -0,0 +1,20 @@
+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 './services/siblingsInert';
+export * from './services/portal';
+export * from './services/navManager';
+export * from './services/intersection';
+export * from './services/focustrack';
+export * from './services/floatingUI';
+export * from './services/extendWidget';
+export * from './utils/widget';
+export * from './utils/portal';
+export * from './slot';

package/generated/index.js

@@ -0,0 +1,20 @@
+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 './services/siblingsInert';
+export * from './services/portal';
+export * from './services/navManager';
+export * from './services/intersection';
+export * from './services/focustrack';
+export * from './services/floatingUI';
+export * from './services/extendWidget';
+export * from './utils/widget';
+export * from './utils/portal';
+export * from './slot';

package/generated/services/extendWidget.d.ts

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

package/generated/services/extendWidget.js

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

package/generated/services/floatingUI.d.ts

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

package/generated/services/floatingUI.js

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

package/generated/services/focustrack.d.ts

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

package/generated/services/focustrack.js

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

package/generated/services/intersection.d.ts

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

package/generated/services/intersection.js

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

package/generated/services/navManager.d.ts

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

package/generated/services/navManager.js

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

package/generated/services/portal.d.ts

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

package/generated/services/portal.js

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

package/generated/services/siblingsInert.d.ts

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

package/generated/services/siblingsInert.js

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

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

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

package/generated/services/transitions/baseTransitions.js

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

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

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

package/generated/services/transitions/bootstrap.js

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

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

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

package/generated/services/transitions/collapse.js

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

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

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

package/generated/services/transitions/cssTransitions.js

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

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

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

package/generated/services/transitions/simpleClassTransition.js

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

package/generated/slot.d.ts

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

package/generated/slot.js

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

package/generated/types.d.ts

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

package/generated/types.js

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

package/generated/utils/directive.d.ts

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

package/generated/utils/directive.js

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

package/generated/utils/portal.d.ts

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

package/generated/utils/portal.js

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

package/generated/utils/stores.d.ts

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

package/generated/utils/stores.js

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

package/generated/utils/widget.d.ts

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

package/generated/utils/widget.js

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

package/generated/utils/writables.d.ts

@@ -0,0 +1 @@
+export * from '@agnos-ui/core/utils/writables';

package/generated/utils/writables.js

@@ -0,0 +1 @@
+export * from '@agnos-ui/core/utils/writables';

package/index.d.ts

@@ -1,34 +1,9 @@
-export * from '@agnos-ui/core';
-export * from './Portal';
-export * from './Slot';
-export * from './WidgetsDefaultConfig';
-export * from './utils';
-import type { WidgetProps, WidgetState } from '@agnos-ui/core';
-import type { AdaptSlotContentProps, AdaptWidgetSlots } from './utils';
-export type { SlotContent, WidgetsConfig } from './utils';
-export type AccordionWidget = AdaptWidgetSlots<import('@agnos-ui/core').AccordionWidget>;
-export type AccordionProps = WidgetProps<AccordionWidget>;
-export type AccordionState = WidgetState<AccordionWidget>;
-export type AccordionItemWidget = AdaptWidgetSlots<import('@agnos-ui/core').AccordionItemWidget>;
-export type AccordionItemProps = WidgetProps<AccordionItemWidget>;
-export type AccordionItemState = WidgetState<AccordionItemWidget>;
-export type AccordionItemContext = AdaptSlotContentProps<import('@agnos-ui/core').AccordionItemContext>;
-export type AlertWidget = AdaptWidgetSlots<import('@agnos-ui/core').AlertWidget>;
-export type AlertProps = WidgetProps<AlertWidget>;
-export type AlertState = WidgetState<AlertWidget>;
-export type AlertContext = AdaptSlotContentProps<import('@agnos-ui/core').AlertContext>;
-export type ModalWidget = AdaptWidgetSlots<import('@agnos-ui/core').ModalWidget>;
-export type ModalProps = WidgetProps<ModalWidget>;
-export type ModalState = WidgetState<ModalWidget>;
-export type ModalContext = AdaptSlotContentProps<import('@agnos-ui/core').ModalContext>;
-export type PaginationWidget = AdaptWidgetSlots<import('@agnos-ui/core').PaginationWidget>;
-export type PaginationProps = WidgetProps<PaginationWidget>;
-export type PaginationState = WidgetState<PaginationWidget>;
-export type PaginationContext = AdaptSlotContentProps<import('@agnos-ui/core').PaginationContext>;
-export type PaginationNumberContext = AdaptSlotContentProps<import('@agnos-ui/core').PaginationNumberContext>;
-export type RatingWidget = AdaptWidgetSlots<import('@agnos-ui/core').RatingWidget>;
-export type RatingProps = WidgetProps<RatingWidget>;
-export type RatingState = WidgetState<RatingWidget>;
-export type SelectWidget<Item> = AdaptWidgetSlots<import('@agnos-ui/core').SelectWidget<Item>>;
-export type SelectProps<Item> = WidgetProps<SelectWidget<Item>>;
-export type SelectState<Item> = WidgetState<SelectWidget<Item>>;
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/modal';
+export * from './components/pagination';
+export * from './components/progressbar';
+export * from './components/rating';
+export * from './components/select';
+export * from './components/slider';
+export * from './generated';

package/index.js

@@ -1,5 +1,9 @@
-export * from '@agnos-ui/core';
-export * from './Portal';
-export * from './Slot';
-export * from './WidgetsDefaultConfig';
-export * from './utils';
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/modal';
+export * from './components/pagination';
+export * from './components/progressbar';
+export * from './components/rating';
+export * from './components/select';
+export * from './components/slider';
+export * from './generated';

package/package.json

@@ -8,19 +8,47 @@
 		".": {
 			"types": "./index.d.ts",
 			"default": "./index.js"
+		},
+		"./components/*": {
+			"types": "./components/*/*.d.ts",
+			"default": "./components/*/*.js"
+		},
+		"./config": {
+			"types": "./config.d.ts",
+			"default": "./config.js"
+		},
+		"./slot": {
+			"types": "./slot.d.ts",
+			"default": "./slot.js"
+		},
+		"./types": {
+			"types": "./types.d.ts",
+			"default": "./types.js"
+		},
+		"./services/*": {
+			"types": "./generated/services/*.d.ts",
+			"default": "./generated/services/*.js"
+		},
+		"./services/transitions/*": {
+			"types": "./generated/services/transitions/*.d.ts",
+			"default": "./generated/services/transitions/*.js"
+		},
+		"./utils/*": {
+			"types": "./generated/utils/*.d.ts",
+			"default": "./generated/utils/*.js"
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core": "0.0.1-alpha.1",
-		"@amadeus-it-group/tansu": "0.0.22",
-		"classnames": "^2.3.2"
+		"@agnos-ui/core": "0.0.1-alpha.11",
+		"@amadeus-it-group/tansu": "1.0.0",
+		"classnames": "^2.5.1"
 	},
 	"peerDependencies": {
 		"react": "*",
 		"react-dom": "*"
 	},
 	"sideEffects": false,
-	"version": "0.0.1-alpha.1",
+	"version": "0.0.1-alpha.11",
 	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
 	"license": "MIT",
@@ -38,6 +66,7 @@
 		"alert",
 		"modal",
 		"pagination",
-		"rating"
+		"rating",
+		"slider"
 	]
 }

package/slot.d.ts

@@ -0,0 +1,15 @@
+import type { SlotContent } from './types';
+/**
+ * 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 declare const Slot: <Props extends object>({ slotContent, props }: {
+    slotContent: SlotContent<Props>;
+    props: Props;
+}) => import("react/jsx-runtime").JSX.Element;

package/{Slot.js → slot.js}

@@ -15,6 +15,16 @@ const slotWrapper = (slotContent) => {
 };
 /* 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) {

package/types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export * from '@agnos-ui/core/types';
+import type { SlotContent as CoreSlotContent, Widget, WidgetFactory, WidgetProps, WidgetSlotContext, WidgetState } from '@agnos-ui/core/types';
+export type SlotContent<Props extends object = object> = CoreSlotContent<Props> | ((props: Props) => React.ReactNode) | React.ComponentType<Props> | React.ReactNode;
+export type AdaptSlotContentProps<Props extends Record<string, any>> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<AdaptWidgetSlots<U>> & AdaptPropsSlots<Omit<Props, keyof WidgetSlotContext<any>>> : AdaptPropsSlots<Props>;
+export type AdaptPropsSlots<Props> = Omit<Props, `slot${string}`> & {
+    [K in keyof Props & `slot${string}`]: Props[K] extends CoreSlotContent<infer U> ? SlotContent<AdaptSlotContentProps<U>> : Props[K];
+};
+export type AdaptWidgetFactories<T> = {
+    [K in keyof T]: T[K] extends WidgetFactory<infer U> ? WidgetFactory<AdaptWidgetSlots<U>> : T[K];
+};
+export type AdaptWidgetSlots<W extends Widget> = Widget<AdaptPropsSlots<WidgetProps<W>>, AdaptPropsSlots<WidgetState<W>>, AdaptWidgetFactories<W['api']>, W['actions'], W['directives']>;

package/types.js

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

package/utils/directive.d.ts

@@ -0,0 +1,7 @@
+import type { Directive } 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>;

package/utils/directive.js

@@ -0,0 +1,39 @@
+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.d.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+/**
+ * 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 declare const Portal: ({ children, container }: PropsWithChildren<{
+    container: Element | DocumentFragment | null | undefined;
+}>) => import("react/jsx-runtime").JSX.Element;

package/utils/portal.js

@@ -0,0 +1,11 @@
+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.d.ts

@@ -0,0 +1,16 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+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 declare function useObservable<T>(store$: ReadableSignal<T>): T;
+/**
+ * Turn react props into readable stores.
+ *
+ * @param props - the props
+ * @returns the readable stores
+ */
+export declare const usePropsAsStore: <T extends object>(props?: Partial<T> | undefined) => ReadableSignal<Partial<T>>;

package/utils/stores.js

@@ -0,0 +1,38 @@
+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.d.ts

@@ -0,0 +1,12 @@
+import type { PropsConfig, Widget, WidgetFactory, WidgetProps, WidgetState } from '@agnos-ui/core/types';
+/**
+ * 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 declare function useWidget<W extends Widget>(createWidget: WidgetFactory<W>, props?: Partial<WidgetProps<W>>, propsConfig?: PropsConfig<WidgetProps<W>>): [WidgetState<W>, W];

package/utils/widget.js

@@ -0,0 +1,26 @@
+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];
+}

package/Portal.d.ts

@@ -1,4 +0,0 @@
-import type { PropsWithChildren } from 'react';
-export declare const Portal: ({ children, container }: PropsWithChildren<{
-    container: Element | DocumentFragment | null | undefined;
-}>) => import("react/jsx-runtime").JSX.Element;

package/Portal.js

@@ -1,3 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
-export const Portal = ({ children, container }) => container ? createPortal(children, container) : _jsx(_Fragment, { children: children });

package/Slot.d.ts

@@ -1,5 +0,0 @@
-import type { SlotContent } from './utils';
-export declare const Slot: <Props extends object>({ slotContent, props }: {
-    slotContent: SlotContent<Props>;
-    props: Props;
-}) => import("react/jsx-runtime").JSX.Element;

package/WidgetsDefaultConfig.d.ts

@@ -1,48 +0,0 @@
-import type { Partial2Levels } from '@agnos-ui/core';
-import type { PropsWithChildren } from 'react';
-import type { WidgetsConfig } from './utils';
-/**
- * React component that provides in the React context (for all AgnosUI descendant widgets) a new widgets default configuration
- * store that inherits from any widgets default configuration store already defined at an upper level in the React context hierarchy.
- * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
- *
- * @remarks
- * The configuration is computed from the parent configuration in two steps:
- * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
- * If adaptParentConfig is not specified, this step is skipped.
- * - second step: the configuration from step 1 is merged (2-levels deep) with the properties of the component.
- *
- * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
- * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
- * default configuration to be used.
- * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
- * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
- *
- * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
- * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
- * The resulting store is writable, its set function is actually the set function of the own$ store.
- *
- * @example
- * ```tsx
- * <WidgetsDefaultConfig
- *   adaptParentConfig={(parentConfig) => {
- *     parentConfig.rating = parentConfig.rating ?? {};
- *     parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
- *     return parentConfig;
- *   }}
- *   rating={{slotStar: MyCustomSlotStar}}
- * />
- * ```
- */
-export declare const WidgetsDefaultConfig: ({ children, adaptParentConfig, ...props }: Partial<{
-    pagination: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").PaginationProps>>;
-    rating: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").RatingProps>>;
-    select: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").SelectProps<any>>>;
-    modal: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").ModalProps>>;
-    alert: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").AlertProps>>;
-    accordion: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").AccordionProps>>;
-}> & {
-    children?: import("react").ReactNode;
-} & {
-    adaptParentConfig?: ((config: Partial2Levels<WidgetsConfig>) => Partial2Levels<WidgetsConfig>) | undefined;
-}) => import("react/jsx-runtime").JSX.Element;

package/WidgetsDefaultConfig.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createWidgetsConfig } from '@agnos-ui/core';
-import { useContext, useEffect, useMemo } from 'react';
-import { widgetsConfigContext } from './utils';
-/**
- * React component that provides in the React context (for all AgnosUI descendant widgets) a new widgets default configuration
- * store that inherits from any widgets default configuration store already defined at an upper level in the React context hierarchy.
- * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
- *
- * @remarks
- * The configuration is computed from the parent configuration in two steps:
- * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
- * If adaptParentConfig is not specified, this step is skipped.
- * - second step: the configuration from step 1 is merged (2-levels deep) with the properties of the component.
- *
- * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
- * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
- * default configuration to be used.
- * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
- * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
- *
- * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
- * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
- * The resulting store is writable, its set function is actually the set function of the own$ store.
- *
- * @example
- * ```tsx
- * <WidgetsDefaultConfig
- *   adaptParentConfig={(parentConfig) => {
- *     parentConfig.rating = parentConfig.rating ?? {};
- *     parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
- *     return parentConfig;
- *   }}
- *   rating={{slotStar: MyCustomSlotStar}}
- * />
- * ```
- */
-export const WidgetsDefaultConfig = ({ children, adaptParentConfig, ...props }) => {
-    const config$ = useContext(widgetsConfigContext);
-    let storeRecreated = false;
-    const store$ = useMemo(() => {
-        const store = createWidgetsConfig(config$, adaptParentConfig);
-        store.set(props);
-        storeRecreated = true;
-        return store;
-    }, [config$, adaptParentConfig]);
-    useEffect(() => {
-        if (!storeRecreated) {
-            store$.set(props);
-        }
-    }, [props]);
-    return _jsx(widgetsConfigContext.Provider, { value: store$, children: children });
-};

package/utils.d.ts

@@ -1,22 +0,0 @@
-import type { Directive, Widget, WidgetFactory, WidgetProps, WidgetState, WidgetsConfigStore } from '@agnos-ui/core';
-import type { ReadableSignal } from '@amadeus-it-group/tansu';
-import type { RefCallback } from 'react';
-import type { SlotContent as CoreSlotContent, WidgetsConfig as CoreWidgetsConfig, WidgetSlotContext } from '@agnos-ui/core';
-export type SlotContent<Props extends object = object> = CoreSlotContent<Props> | ((props: Props) => React.ReactNode) | React.ComponentType<Props> | React.ReactNode;
-export type AdaptSlotContentProps<Props extends Record<string, any>> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<AdaptWidgetSlots<U>> & AdaptPropsSlots<Omit<Props, keyof WidgetSlotContext<any>>> : AdaptPropsSlots<Props>;
-export type AdaptPropsSlots<Props> = Omit<Props, `slot${string}`> & {
-    [K in keyof Props & `slot${string}`]: Props[K] extends CoreSlotContent<infer U> ? SlotContent<AdaptSlotContentProps<U>> : Props[K];
-};
-export type WidgetsConfig = {
-    [WidgetName in keyof CoreWidgetsConfig]: AdaptPropsSlots<CoreWidgetsConfig[WidgetName]>;
-};
-export type AdaptWidgetSlots<W extends Widget> = Widget<AdaptPropsSlots<WidgetProps<W>>, AdaptPropsSlots<WidgetState<W>>, W['api'], W['actions'], W['directives']>;
-export declare function useWidget<Factory extends (...arg: any[]) => Widget>(createWidget: Factory, props?: Partial<WidgetProps<ReturnType<Factory>>>, ...initProps: Parameters<Factory>): [WidgetState<ReturnType<Factory>>, ReturnType<Factory>];
-export declare function useObservable<T>(store$: ReadableSignal<T>): T;
-export declare function useDirective(directive: Directive<void>): RefCallback<HTMLElement>;
-export declare function useDirective<T>(directive: Directive<T>, args: T): RefCallback<HTMLElement>;
-/**
- * React context which can be used to provide or consume the widgets default configuration store.
- */
-export declare const widgetsConfigContext: import("react").Context<WidgetsConfigStore<WidgetsConfig> | undefined>;
-export declare const useWidgetWithConfig: <W extends Widget<object, object, object, object, object>>(factory: WidgetFactory<W>, props: Partial<AdaptPropsSlots<WidgetProps<W>>> | undefined, widgetName: keyof WidgetsConfig | null, defaultProps?: Partial<AdaptPropsSlots<WidgetProps<W>>> | undefined) => [AdaptPropsSlots<WidgetState<W>>, AdaptWidgetSlots<W>];

package/utils.js

@@ -1,67 +0,0 @@
-import { findChangedProperties } from '@agnos-ui/core';
-import { asReadable, computed, writable } from '@amadeus-it-group/tansu';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-export function useWidget(createWidget, props = {}, ...initProps) {
-    const apiRef = useRef(undefined);
-    if (!apiRef.current) {
-        apiRef.current = createWidget(...initProps);
-        apiRef.current.patch(props);
-    }
-    const api = apiRef.current;
-    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 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;
-}
-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;
-}
-/**
- * React context which can be used to provide or consume the widgets default configuration store.
- */
-export const widgetsConfigContext = createContext(undefined);
-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]);
-};
-const useWidgetContext = (widgetName, defaultConfig) => {
-    const widgetsConfig = useContext(widgetsConfigContext);
-    const defaultConfig$ = usePropsAsStore(defaultConfig);
-    return useMemo(() => computed(() => ({ ...defaultConfig$(), ...(widgetName ? widgetsConfig?.()[widgetName] : undefined) })), [widgetsConfig]);
-};
-export const useWidgetWithConfig = (factory, props, widgetName, defaultProps) => useWidget(factory, props, useWidgetContext(widgetName, defaultProps));