@agnos-ui/react-bootstrap 0.3.0 → 0.4.0-next.0

package/components/rating/rating.gen.d.ts

@@ -0,0 +1,179 @@
+import type { SlotContent, Widget, Directive } from '@agnos-ui/react-headless/types';
+export interface RatingState {
+    /**
+     * the aria value of the rating
+     */
+    ariaValueText: string;
+    /**
+     * the visible value of the rating (it changes when hovering over the rating even though the real value did not change)
+     */
+    visibleRating: number;
+    /**
+     * is the rating interactive i.e. listening to hover, click and keyboard events
+     */
+    interactive: boolean;
+    /**
+     * the list of stars
+     */
+    stars: StarContext[];
+    /**
+     * The current rating. Could be a decimal value like `3.75`.
+     */
+    rating: number;
+    /**
+     * The maximum rating that can be given.
+     */
+    maxRating: number;
+    /**
+     * If `true`, the rating is disabled.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the rating can't be changed.
+     */
+    readonly: boolean;
+    /**
+     * Define if the rating can be reset.
+     *
+     * If set to true, the user can 'unset' the rating value by cliking on the current rating value.
+     */
+    resettable: boolean;
+    /**
+     * Allows setting a custom rating tabindex.
+     * If the component is disabled, `tabindex` will still be set to `-1`.
+     */
+    tabindex: number;
+    /**
+     * The aria label
+     */
+    ariaLabel: string;
+    /**
+     * The aria labelled by
+     */
+    ariaLabelledBy: string;
+    /**
+     * CSS classes to be applied on the widget main container
+     */
+    className: string;
+    /**
+     * The template to override the way each star is displayed.
+     */
+    star: SlotContent<StarContext>;
+}
+export interface RatingProps {
+    /**
+     * Return the value for the 'aria-valuetext' attribute.
+     */
+    ariaValueTextFn: (rating: number, maxRating: number) => string;
+    /**
+     * An event emitted when the rating is changed.
+     *
+     * Event payload is equal to the newly selected rating.
+     */
+    onRatingChange: (rating: number) => void;
+    /**
+     * An event emitted when the user is hovering over a given rating.
+     *
+     * Event payload is equal to the rating being hovered over.
+     */
+    onHover: (rating: number) => void;
+    /**
+     * An event emitted when the user stops hovering over a given rating.
+     *
+     * Event payload is equal to the rating of the last item being hovered over.
+     */
+    onLeave: (rating: number) => void;
+    /**
+     * The current rating. Could be a decimal value like `3.75`.
+     */
+    rating: number;
+    /**
+     * The maximum rating that can be given.
+     */
+    maxRating: number;
+    /**
+     * If `true`, the rating is disabled.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the rating can't be changed.
+     */
+    readonly: boolean;
+    /**
+     * Define if the rating can be reset.
+     *
+     * If set to true, the user can 'unset' the rating value by cliking on the current rating value.
+     */
+    resettable: boolean;
+    /**
+     * Allows setting a custom rating tabindex.
+     * If the component is disabled, `tabindex` will still be set to `-1`.
+     */
+    tabindex: number;
+    /**
+     * The aria label
+     */
+    ariaLabel: string;
+    /**
+     * The aria labelled by
+     */
+    ariaLabelledBy: string;
+    /**
+     * CSS classes to be applied on the widget main container
+     */
+    className: string;
+    /**
+     * The template to override the way each star is displayed.
+     */
+    star: SlotContent<StarContext>;
+}
+export type RatingWidget = Widget<RatingProps, RatingState, object, RatingActions, RatingDirectives>;
+export interface StarContext {
+    /**
+     * indicates how much the current star is filled, from 0 to 100
+     */
+    fill: number;
+    /**
+     * the position of the star in the rating
+     */
+    index: number;
+}
+export interface RatingDirectives {
+    /**
+     * A directive to be applied to the main container
+     * This will handle the keydown, mouseleave, tabindex and aria attributes
+     */
+    containerDirective: Directive;
+    /**
+     * A directive to be applied on each star element
+     */
+    starDirective: Directive<{
+        index: number;
+    }>;
+}
+export interface RatingActions {
+    /**
+     * Method to be used when a star is clicked.
+     *
+     * To be used in the onclick event of a star
+     */
+    click(index: number): void;
+    /**
+     * Method to be used when the mouse enter in a star.
+     *
+     * To be used in the onmouseenter of a star
+     */
+    hover(index: number): void;
+    /**
+     * Method to be used when the mouse leave the widget.
+     *
+     * To be used in the onmouseleave of the rating container
+     */
+    leave(): void;
+    /**
+     * Method to be used to handle the keyboard.
+     *
+     * To be used in the onkeydown of the rating container
+     */
+    handleKey(event: KeyboardEvent): void;
+}

package/components/select/index.cjs

@@ -1,13 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const select = require("../../select-DHik5ocI.cjs");
-const select$1 = require("@agnos-ui/core-bootstrap/components/select");
+const select = require("../../select-CxX_TdVh.cjs");
 exports.Select = select.Select;
 exports.createSelect = select.createSelect;
-Object.keys(select$1).forEach((k) => {
-  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
-    Object.defineProperty(exports, k, {
-      enumerable: true,
-      get: () => select$1[k]
-    });
-});
+exports.getSelectDefaultConfig = select.getSelectDefaultConfig;

package/components/select/index.js

@@ -1,6 +1,6 @@
-import { S, c } from "../../select-B_Thv-qd.js";
-export * from "@agnos-ui/core-bootstrap/components/select";
+import { S, c, g } from "../../select-CEXxOyRB.js";
 export {
   S as Select,
-  c as createSelect
+  c as createSelect,
+  g as getSelectDefaultConfig
 };

package/components/select/select.d.ts

@@ -1,9 +1,6 @@
-import type { AdaptSlotContentProps, AdaptWidgetSlots, PropsConfig, WidgetProps, WidgetState } from '@agnos-ui/react-headless/types';
-export * from '@agnos-ui/core-bootstrap/components/select';
-export type SelectWidget<Item> = AdaptWidgetSlots<import('@agnos-ui/core-bootstrap/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-bootstrap/components/select').SelectContext<Item>>;
-export type SelectItemContext<Item> = AdaptSlotContentProps<import('@agnos-ui/core-bootstrap/components/select').SelectItemContext<Item>>;
+import type { PropsConfig } from '@agnos-ui/react-headless/types';
+import type { SelectProps, SelectWidget } from './select.gen';
+export type * from './select.gen';
 export declare const createSelect: <Item>(propsConfig?: PropsConfig<SelectProps<Item>>) => SelectWidget<Item>;
+export declare const getSelectDefaultConfig: () => SelectProps<any>;
 export declare function Select<Item>(props: Partial<SelectProps<Item>>): import("react/jsx-runtime").JSX.Element;

package/components/select/select.gen.d.ts

@@ -0,0 +1,293 @@
+import type { WidgetSlotContext, SlotContent, Widget, Directive } from '@agnos-ui/react-headless/types';
+import type { Placement } from '@floating-ui/dom';
+import type { HasFocus } from '@agnos-ui/react-headless/services/focustrack';
+import type { FloatingUI } from '@agnos-ui/react-headless/services/floatingUI';
+export type SelectContext<Item> = WidgetSlotContext<SelectWidget<Item>>;
+export type SelectItemContext<Item> = SelectContext<Item> & {
+    /**
+     * Contextual data related to an item
+     */
+    itemContext: ItemContext<Item>;
+};
+export interface SelectState<Item> {
+    /**
+     * List of item contexts, to be displayed in the menu
+     */
+    visibleItems: ItemContext<Item>[];
+    /**
+     * List of selected items to be display
+     */
+    selectedContexts: ItemContext<Item>[];
+    /**
+     * Highlighted item context.
+     * It is designed to define the highlighted item in the dropdown menu
+     */
+    highlighted: ItemContext<Item> | undefined;
+    /**
+     * Current placement of the dropdown
+     */
+    placement: Placement | undefined;
+    /**
+     * id used for the input inside the select
+     */
+    id: string | undefined;
+    /**
+     * aria-label used for the input inside the select
+     */
+    ariaLabel: string | undefined;
+    /**
+     * List of selected item ids
+     */
+    selected: Item[];
+    /**
+     * Filtered text to be display in the filter input
+     */
+    filterText: string;
+    /**
+     * true if the select is disabled
+     */
+    disabled: boolean;
+    /**
+     * true if the select is open
+     */
+    open: boolean;
+    /**
+     * Class to be added on the dropdown menu container
+     */
+    menuClassName: string;
+    /**
+     * Class to be added on menu items
+     */
+    menuItemClassName: string;
+    /**
+     * Class to be added on selected items (displayed in the input zone)
+     */
+    badgeClassName: string;
+    /**
+     * true if a loading process is being done
+     */
+    loading: boolean;
+    /**
+     * CSS classes to be applied on the widget main container
+     */
+    className: string;
+    /**
+     * The template to override the way each badge on the left of the input is displayed.
+     * This define the content of the badge inside the badge container.
+     */
+    badgeLabel: SlotContent<SelectItemContext<Item>>;
+    /**
+     * The template to override the way each item is displayed in the list.
+     * This define the content of the badge inside the badge container.
+     */
+    itemLabel: SlotContent<SelectItemContext<Item>>;
+}
+export interface SelectProps<Item> {
+    /**
+     * List of available items for the dropdown
+     */
+    items: Item[];
+    /**
+     * List of allowed placements for the dropdown.
+     * This refers to the [allowedPlacements from floating UI](https://floating-ui.com/docs/autoPlacement#allowedplacements), given the different [Placement possibilities](https://floating-ui.com/docs/computePosition#placement).
+     */
+    allowedPlacements: Placement[];
+    /**
+     * Custom function to get the id of an item
+     * By default, the item is returned
+     */
+    itemIdFn(item: Item): string;
+    /**
+     * Retrieves navigable elements within an HTML element containing badges and the input.
+     */
+    navSelector(node: HTMLElement): NodeListOf<HTMLSpanElement | HTMLInputElement>;
+    /**
+     * Callback called dropdown open state change
+     */
+    onOpenChange(isOpen: boolean): void;
+    /**
+     * Callback called when the text filter change
+     */
+    onFilterTextChange(text: string): void;
+    /**
+     * Callback called when the selection change
+     */
+    onSelectedChange(selected: Item[]): void;
+    /**
+     * id used for the input inside the select
+     */
+    id: string | undefined;
+    /**
+     * aria-label used for the input inside the select
+     */
+    ariaLabel: string | undefined;
+    /**
+     * List of selected item ids
+     */
+    selected: Item[];
+    /**
+     * Filtered text to be display in the filter input
+     */
+    filterText: string;
+    /**
+     * true if the select is disabled
+     */
+    disabled: boolean;
+    /**
+     * true if the select is open
+     */
+    open: boolean;
+    /**
+     * Class to be added on the dropdown menu container
+     */
+    menuClassName: string;
+    /**
+     * Class to be added on menu items
+     */
+    menuItemClassName: string;
+    /**
+     * Class to be added on selected items (displayed in the input zone)
+     */
+    badgeClassName: string;
+    /**
+     * true if a loading process is being done
+     */
+    loading: boolean;
+    /**
+     * CSS classes to be applied on the widget main container
+     */
+    className: string;
+    /**
+     * The template to override the way each badge on the left of the input is displayed.
+     * This define the content of the badge inside the badge container.
+     */
+    badgeLabel: SlotContent<SelectItemContext<Item>>;
+    /**
+     * The template to override the way each item is displayed in the list.
+     * This define the content of the badge inside the badge container.
+     */
+    itemLabel: SlotContent<SelectItemContext<Item>>;
+}
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions<Item>, SelectDirectives<Item>>;
+export interface ItemContext<T> {
+    /**
+     * Original item given in the parameters
+     */
+    item: T;
+    /**
+     * Unique id to identify the item
+     */
+    id: string;
+    /**
+     * Specify if the item is checked
+     */
+    selected: boolean;
+}
+export interface SelectApi<Item> {
+    /**
+     * Clear all the selected items
+     */
+    clear(): void;
+    /**
+     * Clear the filter text
+     */
+    clearText(): void;
+    /**
+     * Highlight the given item, if there is a corresponding match among the visible list
+     */
+    highlight(item: Item): void;
+    /**
+     * Highlight the first item among the visible list
+     */
+    highlightFirst(): void;
+    /**
+     * Highlight the previous item among the visible list
+     * Loop to the last item if needed
+     */
+    highlightPrevious(): void;
+    /**
+     * Highlight the next item among the visible list.
+     * Loop to the first item if needed
+     */
+    highlightNext(): void;
+    /**
+     * Highlight the last item among the visible list
+     */
+    highlightLast(): void;
+    /**
+     * Select the provided item.
+     * The selected list is used to
+     */
+    select(item: Item): void;
+    /**
+     * Unselect the provided item.
+     */
+    unselect(item: Item): void;
+    /**
+     * Toggle the selection of an item
+     */
+    toggleItem(item: Item, selected?: boolean): void;
+    /**
+     * open the select
+     */
+    open(): void;
+    /**
+     * close the select
+     */
+    close(): void;
+    /**
+     * Toggle the dropdown menu
+     */
+    toggle(isOpen?: boolean): void;
+}
+export interface SelectDirectives<Item> {
+    /**
+     * Directive to be used in the input group and the menu containers
+     */
+    hasFocusDirective: HasFocus['directive'];
+    /**
+     * Directive that enables dynamic positioning of menu element
+     */
+    floatingDirective: FloatingUI['directives']['floatingDirective'];
+    /**
+     * A directive to be applied to the input group element serves as the base for menu positioning
+     */
+    referenceDirective: FloatingUI['directives']['referenceDirective'];
+    /**
+     * A directive to be applied to the element that contains the badges and the input
+     */
+    inputContainerDirective: Directive;
+    /**
+     * A directive that applies all the necessary attributes to the container badges
+     */
+    badgeAttributesDirective: Directive<ItemContext<Item>>;
+    /**
+     * A directive that applies all the necessary attributes to the dropdown menu
+     */
+    menuAttributesDirective: Directive;
+    /**
+     * A directive that applies all the necessary attributes to the dropdown item
+     */
+    itemAttributesDirective: Directive<ItemContext<Item>>;
+}
+export interface SelectActions<Item> {
+    /**
+     * Method to be plugged to on the 'input' event. The input text will be used as the filter text.
+     */
+    onInput: (e: {
+        target: any;
+    }) => void;
+    /**
+     * Method to be attached to the node element to close a badge on click.
+     */
+    onRemoveBadgeClick: (event: MouseEvent, item: Item) => void;
+    /**
+     * Method to be plugged to on an keydown event of the main input, in order to control the keyboard interactions with the highlighted item.
+     * It manages arrow keys to move the highlighted item, or enter to toggle the item.
+     */
+    onInputKeydown: (event: KeyboardEvent) => void;
+    /**
+     * Method to be plugged to on an keydown event of a badge container, in order to manage main actions on badges.
+     */
+    onBadgeKeydown: (event: KeyboardEvent, item: Item) => void;
+}

package/components/slider/index.cjs

@@ -1,15 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const slider = require("../../slider-DUv6gRI9.cjs");
-const slider$1 = require("@agnos-ui/core-bootstrap/components/slider");
+const slider = require("../../slider-Du37lWVJ.cjs");
 exports.DefaultSlotHandle = slider.DefaultSlotHandle;
 exports.DefaultSlotStructure = slider.DefaultSlotStructure;
 exports.Slider = slider.Slider;
 exports.createSlider = slider.createSlider;
-Object.keys(slider$1).forEach((k) => {
-  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
-    Object.defineProperty(exports, k, {
-      enumerable: true,
-      get: () => slider$1[k]
-    });
-});
+exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;

package/components/slider/index.js

@@ -1,8 +1,8 @@
-import { D, a, S, c } from "../../slider-DLdA-y4u.js";
-export * from "@agnos-ui/core-bootstrap/components/slider";
+import { D, a, S, c, g } from "../../slider-CnK847iw.js";
 export {
   D as DefaultSlotHandle,
   a as DefaultSlotStructure,
   S as Slider,
-  c as createSlider
+  c as createSlider,
+  g as getSliderDefaultConfig
 };

package/components/slider/slider.d.ts

@@ -1,13 +1,9 @@
-import type { AdaptSlotContentProps, AdaptWidgetSlots, WidgetFactory, WidgetProps, WidgetState } from '@agnos-ui/react-headless/types';
+import type { WidgetFactory } from '@agnos-ui/react-headless/types';
 import type { PropsWithChildren } from 'react';
-export * from '@agnos-ui/core-bootstrap/components/slider';
-export type SliderWidget = AdaptWidgetSlots<import('@agnos-ui/core-bootstrap/components/slider').SliderWidget>;
-export type SliderProps = WidgetProps<SliderWidget>;
-export type SliderState = WidgetState<SliderWidget>;
-export type SliderContext = AdaptSlotContentProps<import('@agnos-ui/core-bootstrap/components/slider').SliderContext>;
-export type SliderSlotLabelContext = AdaptSlotContentProps<import('@agnos-ui/core-bootstrap/components/slider').SliderSlotLabelContext>;
-export type SliderSlotHandleContext = AdaptSlotContentProps<import('@agnos-ui/core-bootstrap/components/slider').SliderSlotHandleContext>;
+import type { SliderWidget, SliderSlotHandleContext, SliderContext, SliderProps } from './slider.gen';
+export type * from './slider.gen';
 export declare const createSlider: WidgetFactory<SliderWidget>;
+export declare const getSliderDefaultConfig: () => SliderProps;
 export declare const DefaultSlotHandle: (slotContext: SliderSlotHandleContext) => import("react/jsx-runtime").JSX.Element;
 export declare const DefaultSlotStructure: (slotContext: SliderContext) => import("react/jsx-runtime").JSX.Element;
 export declare function Slider(props: PropsWithChildren<Partial<SliderProps>>): import("react/jsx-runtime").JSX.Element;