@agnos-ui/react-bootstrap 0.10.0-next.0 → 0.10.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
2
  import { Slot } from "@agnos-ui/react-headless/slot";
3
3
  import { useDirectives, classDirective } from "@agnos-ui/react-headless/utils/directive";
4
- import { useContext, createContext, useId, useImperativeHandle, useEffect } from "react";
4
+ import { useContext, createContext, useId, useImperativeHandle, useEffect, createElement } from "react";
5
5
  import { useWidget } from "./generated/config.js";
6
6
  import { getAccordionDefaultConfig, createAccordionItem, createAccordion, factoryCreateAccordion } from "@agnos-ui/core-bootstrap/components/accordion";
7
7
  const export_getAccordionDefaultConfig = getAccordionDefaultConfig;
@@ -9,14 +9,13 @@ const export_createAccordionItem = createAccordionItem;
9
9
  const export_createAccordion = createAccordion;
10
10
  const export_factoryCreateAccordion = factoryCreateAccordion;
11
11
  const Header = (props) => {
12
- const re = new RegExp("^h[1-6]$");
13
- const Heading = re.test(props.headerTag) ? props.headerTag : "h2";
14
- return /* @__PURE__ */ jsx(Heading, { ...useDirectives([classDirective, "accordion-header"], props.directive), children: props.children });
12
+ const HeadingTag = `h${props.headingLevel}`;
13
+ return createElement(HeadingTag, { ...useDirectives([classDirective, "accordion-header"], props.directive) }, props.children);
15
14
  };
16
15
  const ItemContent = (slotContext) => /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, "accordion-collapse"], slotContext.directives.bodyContainerDirective), children: /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, "accordion-body"], slotContext.directives.bodyDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.children, props: slotContext }) }) });
17
16
  const AccordionDIContext = createContext({});
18
17
  const AccordionItemDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
19
- /* @__PURE__ */ jsx(Header, { directive: slotContext.directives.headerDirective, headerTag: slotContext.state.headingTag, children: /* @__PURE__ */ jsx("button", { ...useDirectives([classDirective, "accordion-button"], slotContext.directives.buttonDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.header, props: slotContext }) }) }),
18
+ /* @__PURE__ */ jsx(Header, { directive: slotContext.directives.headerDirective, headingLevel: slotContext.state.headingLevel, children: /* @__PURE__ */ jsx("button", { ...useDirectives([classDirective, "accordion-button"], slotContext.directives.buttonDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.header, props: slotContext }) }) }),
20
19
  slotContext.state.shouldBeInDOM && /* @__PURE__ */ jsx(ItemContent, { ...slotContext })
21
20
  ] });
22
21
  function AccordionItem(props) {
@@ -10,14 +10,13 @@ const export_createAccordionItem = accordion.createAccordionItem;
10
10
  const export_createAccordion = accordion.createAccordion;
11
11
  const export_factoryCreateAccordion = accordion.factoryCreateAccordion;
12
12
  const Header = (props) => {
13
- const re = new RegExp("^h[1-6]$");
14
- const Heading = re.test(props.headerTag) ? props.headerTag : "h2";
15
- return /* @__PURE__ */ jsxRuntime.jsx(Heading, { ...directive.useDirectives([directive.classDirective, "accordion-header"], props.directive), children: props.children });
13
+ const HeadingTag = `h${props.headingLevel}`;
14
+ return React.createElement(HeadingTag, { ...directive.useDirectives([directive.classDirective, "accordion-header"], props.directive) }, props.children);
16
15
  };
17
16
  const ItemContent = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, "accordion-collapse"], slotContext.directives.bodyContainerDirective), children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, "accordion-body"], slotContext.directives.bodyDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.children, props: slotContext }) }) });
18
17
  const AccordionDIContext = React.createContext({});
19
18
  const AccordionItemDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
20
- /* @__PURE__ */ jsxRuntime.jsx(Header, { directive: slotContext.directives.headerDirective, headerTag: slotContext.state.headingTag, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirectives([directive.classDirective, "accordion-button"], slotContext.directives.buttonDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.header, props: slotContext }) }) }),
19
+ /* @__PURE__ */ jsxRuntime.jsx(Header, { directive: slotContext.directives.headerDirective, headingLevel: slotContext.state.headingLevel, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirectives([directive.classDirective, "accordion-button"], slotContext.directives.buttonDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.header, props: slotContext }) }) }),
21
20
  slotContext.state.shouldBeInDOM && /* @__PURE__ */ jsxRuntime.jsx(ItemContent, { ...slotContext })
22
21
  ] });
23
22
  function AccordionItem(props) {
@@ -120,11 +120,11 @@ export interface AccordionProps {
120
120
  */
121
121
  itemBodyClassName: string;
122
122
  /**
123
- * The html tag to use for the accordion-item-header.
123
+ * The html heading level to use for the accordion-item-header.
124
124
  *
125
- * @defaultValue `''`
125
+ * @defaultValue `2`
126
126
  */
127
- itemHeadingTag: string;
127
+ itemHeadingLevel: 1 | 2 | 3 | 4 | 5 | 6;
128
128
  /**
129
129
  * CSS classes to be applied on the widget main container
130
130
  *
@@ -185,9 +185,9 @@ export interface AccordionItemState {
185
185
  */
186
186
  bodyClassName: string;
187
187
  /**
188
- * The html tag to use for the accordion-item-header.
188
+ * The html heading level to use for the accordion-item-header.
189
189
  */
190
- headingTag: string;
190
+ headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
191
191
  /**
192
192
  * CSS classes to be applied on the widget main container
193
193
  *
@@ -277,9 +277,9 @@ export interface AccordionItemProps {
277
277
  */
278
278
  bodyClassName: string;
279
279
  /**
280
- * The html tag to use for the accordion-item-header.
280
+ * The html heading level to use for the accordion-item-header.
281
281
  */
282
- headingTag: string;
282
+ headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
283
283
  /**
284
284
  * CSS classes to be applied on the widget main container
285
285
  *
@@ -327,7 +327,7 @@ export { export_createAccordionItem as createAccordionItem };
327
327
  declare const export_createAccordion: WidgetFactory<AccordionWidget>;
328
328
  export { export_createAccordion as createAccordion };
329
329
  /**
330
- * Create an accordion WidgetFactory based on a item factory and the list of item props that should inherit from the parent accordion
330
+ * Create an accordion WidgetFactory based on an item factory and the list of item props that should inherit from the parent accordion
331
331
  *
332
332
  * @param itemFactory - the item factory
333
333
  * @param accordionItemProps - the list of item props
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const accordion = require("../../accordion-DkUnHzTx.cjs");
3
+ const accordion = require("../../accordion-b13N6177.cjs");
4
4
  exports.Accordion = accordion.Accordion;
5
5
  exports.AccordionItem = accordion.AccordionItem;
6
6
  exports.AccordionItemDefaultSlotStructure = accordion.AccordionItemDefaultSlotStructure;
@@ -1,4 +1,4 @@
1
- import { b, a, A, d, c, f, e } from "../../accordion-Bkttdgi2.js";
1
+ import { b, a, A, d, c, f, e } from "../../accordion-Cps8J5iu.js";
2
2
  export {
3
3
  b as Accordion,
4
4
  a as AccordionItem,
@@ -52,10 +52,14 @@ export interface CarouselState<SlideData extends {
52
52
  initialized: boolean;
53
53
  /**
54
54
  * If `true`, 'previous' and 'next' navigation arrows will be visible.
55
+ *
56
+ * @defaultValue `true`
55
57
  */
56
58
  showNavigationArrows: boolean;
57
59
  /**
58
60
  * If `true`, navigation indicators at the bottom of the slide will be visible.
61
+ *
62
+ * @defaultValue `true`
59
63
  */
60
64
  showNavigationIndicators: boolean;
61
65
  /**
@@ -95,20 +99,14 @@ export interface CarouselState<SlideData extends {
95
99
  slidesData: SlideData[];
96
100
  /**
97
101
  * The structure of the carousel.
98
- *
99
- * @defaultValue `undefined`
100
102
  */
101
103
  structure: SlotContent<CarouselContext<SlideData>>;
102
104
  /**
103
105
  * The navigation layer of the carousel.
104
- *
105
- * @defaultValue `undefined`
106
106
  */
107
107
  navigation: SlotContent<CarouselContext<SlideData>>;
108
108
  /**
109
109
  * The content of each slide in the carousel.
110
- *
111
- * @defaultValue `undefined`
112
110
  */
113
111
  slide: SlotContent<CarouselSlideContext<SlideData>>;
114
112
  /**
@@ -133,14 +131,23 @@ export interface CarouselProps<SlideData extends {
133
131
  plugins: EmblaPluginType[];
134
132
  /**
135
133
  * Aria label for navigation indicators
134
+ *
135
+ * @defaultValue
136
+ * ```ts
137
+ * (index: number) => `Select slide ${index + 1}`
138
+ * ```
136
139
  */
137
140
  ariaIndicatorLabel: (index: number) => string;
138
141
  /**
139
142
  * Aria label for previous button
143
+ *
144
+ * @defaultValue `'Select previous slide'`
140
145
  */
141
146
  ariaPrevLabel: string;
142
147
  /**
143
148
  * Aria label for next button
149
+ *
150
+ * @defaultValue `'Select next slide'`
144
151
  */
145
152
  ariaNextLabel: string;
146
153
  /**
@@ -154,6 +161,8 @@ export interface CarouselProps<SlideData extends {
154
161
  * Enables choosing a custom container element which holds the slides. By default, Embla will choose the first direct child element of the root element. Provide a valid CSS selector string.
155
162
  *
156
163
  * @see {@link https://www.embla-carousel.com/api/options/#container}
164
+ *
165
+ * @defaultValue `null`
157
166
  */
158
167
  container: string | null;
159
168
  /**
@@ -207,10 +216,14 @@ export interface CarouselProps<SlideData extends {
207
216
  skipSnaps: boolean;
208
217
  /**
209
218
  * If `true`, 'previous' and 'next' navigation arrows will be visible.
219
+ *
220
+ * @defaultValue `true`
210
221
  */
211
222
  showNavigationArrows: boolean;
212
223
  /**
213
224
  * If `true`, navigation indicators at the bottom of the slide will be visible.
225
+ *
226
+ * @defaultValue `true`
214
227
  */
215
228
  showNavigationIndicators: boolean;
216
229
  /**
@@ -243,20 +256,14 @@ export interface CarouselProps<SlideData extends {
243
256
  slidesData: SlideData[];
244
257
  /**
245
258
  * The structure of the carousel.
246
- *
247
- * @defaultValue `undefined`
248
259
  */
249
260
  structure: SlotContent<CarouselContext<SlideData>>;
250
261
  /**
251
262
  * The navigation layer of the carousel.
252
- *
253
- * @defaultValue `undefined`
254
263
  */
255
264
  navigation: SlotContent<CarouselContext<SlideData>>;
256
265
  /**
257
266
  * The content of each slide in the carousel.
258
- *
259
- * @defaultValue `undefined`
260
267
  */
261
268
  slide: SlotContent<CarouselSlideContext<SlideData>>;
262
269
  /**
@@ -58,7 +58,7 @@ export interface CollapseProps {
58
58
  /**
59
59
  * If `true` the collapse is visible to the user
60
60
  *
61
- * @defaultValue `true`
61
+ * @defaultValue `false`
62
62
  */
63
63
  visible: boolean;
64
64
  /**
@@ -101,7 +101,7 @@ export interface CollapseState {
101
101
  /**
102
102
  * If `true` the collapse is visible to the user
103
103
  *
104
- * @defaultValue `true`
104
+ * @defaultValue `false`
105
105
  */
106
106
  visible: boolean;
107
107
  }
@@ -24,6 +24,12 @@ export interface DrawerState {
24
24
  * Flag to show whether the drawer is fully hidden.
25
25
  */
26
26
  hidden: boolean;
27
+ /**
28
+ * CSS classes to be applied on the widget main container
29
+ *
30
+ * @defaultValue `'w-full'`
31
+ */
32
+ className: string;
27
33
  /**
28
34
  * Which element should contain the drawer and backdrop DOM elements.
29
35
  * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.
@@ -53,12 +59,6 @@ export interface DrawerState {
53
59
  * @defaultValue `false`
54
60
  */
55
61
  resizable: boolean;
56
- /**
57
- * CSS classes to be applied on the widget main container
58
- *
59
- * @defaultValue `''`
60
- */
61
- className: string;
62
62
  /**
63
63
  * Global template for the drawer component
64
64
  */
@@ -81,7 +81,7 @@ export interface DrawerProps {
81
81
  *
82
82
  * @defaultValue
83
83
  * ```ts
84
- * () => {}
84
+ * collapseHorizontalTransition
85
85
  * ```
86
86
  */
87
87
  transition: TransitionFn;
@@ -90,45 +90,56 @@ export interface DrawerProps {
90
90
  *
91
91
  * @defaultValue
92
92
  * ```ts
93
- * () => {}
93
+ * collapseVerticalTransition
94
94
  * ```
95
95
  */
96
96
  verticalTransition: TransitionFn;
97
97
  /**
98
98
  * The transition to use for the backdrop behind the drawer (if present).
99
99
  *
100
- * @defaultValue
101
- * ```ts
102
- * () => {}
103
- * ```
100
+ * @defaultValue `fadeTransition`
104
101
  */
105
102
  backdropTransition: TransitionFn;
106
103
  /**
107
104
  * If `true` opening and closing will be animated.
105
+ *
106
+ * @defaultValue `true`
108
107
  */
109
108
  animated: boolean;
110
109
  /**
111
110
  * aria-labelledby attribute to use for the drawer element.
111
+ *
112
+ * @defaultValue `''`
112
113
  */
113
114
  ariaLabelledBy: string;
114
115
  /**
115
116
  * aria-describedby attribute to use for the drawer element.
117
+ *
118
+ * @defaultValue `''`
116
119
  */
117
120
  ariaDescribedBy: string;
118
121
  /**
119
122
  * The width of the drawer in pixels.
123
+ *
124
+ * @defaultValue `200`
120
125
  */
121
126
  width: number;
122
127
  /**
123
128
  * The height of the drawer in pixels.
129
+ *
130
+ * @defaultValue `200`
124
131
  */
125
132
  height: number;
126
133
  /**
127
134
  * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable
135
+ *
136
+ * @defaultValue `true`
128
137
  */
129
138
  backdrop: boolean;
130
139
  /**
131
140
  * If `true` allows body scrolling when the drawer is open.
141
+ *
142
+ * @defaultValue `false`
132
143
  */
133
144
  bodyScroll: boolean;
134
145
  /**
@@ -182,6 +193,12 @@ export interface DrawerProps {
182
193
  * ```
183
194
  */
184
195
  onVisibleChange: (visible: boolean) => void;
196
+ /**
197
+ * CSS classes to be applied on the widget main container
198
+ *
199
+ * @defaultValue `'w-full'`
200
+ */
201
+ className: string;
185
202
  /**
186
203
  * Which element should contain the drawer and backdrop DOM elements.
187
204
  * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.
@@ -211,12 +228,6 @@ export interface DrawerProps {
211
228
  * @defaultValue `false`
212
229
  */
213
230
  resizable: boolean;
214
- /**
215
- * CSS classes to be applied on the widget main container
216
- *
217
- * @defaultValue `''`
218
- */
219
- className: string;
220
231
  /**
221
232
  * Global template for the drawer component
222
233
  */
@@ -213,7 +213,7 @@ export interface SliderProps {
213
213
  *
214
214
  * @defaultValue
215
215
  * ```ts
216
- * (value: number) => ''
216
+ * () => ''
217
217
  * ```
218
218
  */
219
219
  ariaValueText: (value: number, sortedIndex: number) => string;
@@ -245,21 +245,21 @@ export interface SliderProps {
245
245
  * Minimum distance between two values.
246
246
  * When set to 0, no minimum distance constraint is applied.
247
247
  *
248
- * @defaultValue 0
248
+ * @defaultValue `0`
249
249
  */
250
250
  minRange: number;
251
251
  /**
252
252
  * Maximum distance between two values
253
253
  * When set to 0, no maximum distance constraint is applied.
254
254
  *
255
- * @defaultValue 0
255
+ * @defaultValue `0`
256
256
  */
257
257
  maxRange: number;
258
258
  /**
259
259
  * When true, if moving a value would break the minRange or maxRange constraint,
260
260
  * it will instead push or pull the neighboring values to keep the allowed range rather than just stopping.
261
261
  *
262
- * @defaultValue false
262
+ * @defaultValue `false`
263
263
  */
264
264
  pushRange: boolean;
265
265
  /**
@@ -31,12 +31,6 @@ export interface TreeState {
31
31
  expandedMap: {
32
32
  get(item: NormalizedTreeItem): boolean | undefined;
33
33
  };
34
- /**
35
- * Optional accessibility label for the tree if there is no explicit label
36
- *
37
- * @defaultValue `''`
38
- */
39
- ariaLabel?: string;
40
34
  /**
41
35
  * CSS classes to be applied on the widget main container
42
36
  *
@@ -102,12 +96,6 @@ export interface TreeProps {
102
96
  * ```
103
97
  */
104
98
  ariaLabelToggleFn: (label: string) => string;
105
- /**
106
- * Optional accessibility label for the tree if there is no explicit label
107
- *
108
- * @defaultValue `''`
109
- */
110
- ariaLabel?: string;
111
99
  /**
112
100
  * CSS classes to be applied on the widget main container
113
101
  *
package/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const accordion = require("./accordion-DkUnHzTx.cjs");
3
+ const accordion = require("./accordion-b13N6177.cjs");
4
4
  const alert = require("./alert-56ypguOK.cjs");
5
5
  const carousel = require("./carousel-DyA8lWos.cjs");
6
6
  const collapse = require("./collapse-Dtanmp3a.cjs");
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { b, a, A, d, c, f, e } from "./accordion-Bkttdgi2.js";
1
+ import { b, a, A, d, c, f, e } from "./accordion-Cps8J5iu.js";
2
2
  import { a as a2, A as A2, b as b2, e as e2 } from "./alert-D2bu7Ulu.js";
3
3
  import { c as c2, C, b as b3, a as a3, e as e3 } from "./carousel-C6hfiwd2.js";
4
4
  import { C as C2, a as a4, e as e4 } from "./collapse-D2gce6s6.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agnos-ui/react-bootstrap",
3
3
  "description": "Bootstrap-based component library for React.",
4
- "version": "0.10.0-next.0",
4
+ "version": "0.10.0-next.2",
5
5
  "type": "module",
6
6
  "main": "./index.cjs",
7
7
  "module": "./index.js",
@@ -49,8 +49,8 @@
49
49
  }
50
50
  },
51
51
  "dependencies": {
52
- "@agnos-ui/core-bootstrap": "0.10.0-next.0",
53
- "@agnos-ui/react-headless": "0.10.0-next.0",
52
+ "@agnos-ui/core-bootstrap": "0.10.0-next.2",
53
+ "@agnos-ui/react-headless": "0.10.0-next.2",
54
54
  "clsx": "^2.1.1"
55
55
  },
56
56
  "peerDependencies": {