@db-ux/react-core-components 4.9.0 → 4.10.0

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.
Files changed (166) hide show
  1. package/CHANGELOG.md +17 -1
  2. package/README.md +97 -35
  3. package/dist/components/accordion/accordion.js +102 -86
  4. package/dist/components/accordion/model.d.ts +2 -2
  5. package/dist/components/accordion/model.js +4 -2
  6. package/dist/components/accordion-item/accordion-item.d.ts +2 -1
  7. package/dist/components/accordion-item/accordion-item.js +89 -56
  8. package/dist/components/accordion-item/model.d.ts +5 -1
  9. package/dist/components/badge/badge.js +72 -32
  10. package/dist/components/badge/model.d.ts +1 -1
  11. package/dist/components/badge/model.js +12 -1
  12. package/dist/components/brand/brand.js +60 -13
  13. package/dist/components/brand/model.d.ts +1 -1
  14. package/dist/components/button/button.js +75 -21
  15. package/dist/components/button/model.d.ts +1 -1
  16. package/dist/components/button/model.js +13 -2
  17. package/dist/components/card/card.js +65 -15
  18. package/dist/components/card/model.d.ts +1 -1
  19. package/dist/components/card/model.js +8 -2
  20. package/dist/components/checkbox/checkbox.js +163 -157
  21. package/dist/components/checkbox/model.d.ts +1 -1
  22. package/dist/components/custom-button/custom-button.js +65 -10
  23. package/dist/components/custom-button/model.d.ts +2 -2
  24. package/dist/components/custom-select/custom-select.js +509 -727
  25. package/dist/components/custom-select/model.d.ts +4 -4
  26. package/dist/components/custom-select/model.js +8 -1
  27. package/dist/components/custom-select-dropdown/custom-select-dropdown.js +62 -11
  28. package/dist/components/custom-select-dropdown/model.d.ts +1 -1
  29. package/dist/components/custom-select-dropdown/model.js +8 -1
  30. package/dist/components/custom-select-form-field/custom-select-form-field.js +57 -10
  31. package/dist/components/custom-select-form-field/model.d.ts +1 -1
  32. package/dist/components/custom-select-list/custom-select-list.js +60 -11
  33. package/dist/components/custom-select-list/model.d.ts +1 -1
  34. package/dist/components/custom-select-list-item/custom-select-list-item.js +89 -32
  35. package/dist/components/custom-select-list-item/model.d.ts +1 -1
  36. package/dist/components/custom-select-list-item/model.js +4 -1
  37. package/dist/components/divider/divider.js +60 -10
  38. package/dist/components/divider/model.d.ts +1 -1
  39. package/dist/components/divider/model.js +4 -2
  40. package/dist/components/drawer/drawer.js +118 -97
  41. package/dist/components/drawer/model.d.ts +1 -1
  42. package/dist/components/drawer/model.js +14 -4
  43. package/dist/components/header/header.js +143 -65
  44. package/dist/components/header/model.d.ts +1 -1
  45. package/dist/components/icon/icon.js +61 -12
  46. package/dist/components/icon/model.d.ts +1 -1
  47. package/dist/components/icon/model.js +11 -1
  48. package/dist/components/infotext/infotext.js +62 -12
  49. package/dist/components/infotext/model.d.ts +1 -1
  50. package/dist/components/input/input.js +198 -167
  51. package/dist/components/input/model.d.ts +1 -1
  52. package/dist/components/input/model.js +21 -5
  53. package/dist/components/link/link.js +70 -12
  54. package/dist/components/link/model.d.ts +1 -1
  55. package/dist/components/link/model.js +8 -3
  56. package/dist/components/navigation/model.d.ts +1 -1
  57. package/dist/components/navigation/navigation.js +57 -11
  58. package/dist/components/navigation-item/model.d.ts +6 -2
  59. package/dist/components/navigation-item/navigation-item.js +117 -81
  60. package/dist/components/notification/model.d.ts +1 -1
  61. package/dist/components/notification/model.js +12 -3
  62. package/dist/components/notification/notification.js +100 -32
  63. package/dist/components/page/model.d.ts +1 -1
  64. package/dist/components/page/model.js +4 -2
  65. package/dist/components/page/page.js +74 -46
  66. package/dist/components/popover/model.d.ts +1 -1
  67. package/dist/components/popover/popover.js +126 -125
  68. package/dist/components/radio/model.d.ts +1 -1
  69. package/dist/components/radio/radio.js +124 -85
  70. package/dist/components/section/model.d.ts +1 -1
  71. package/dist/components/section/section.js +59 -10
  72. package/dist/components/select/model.d.ts +1 -1
  73. package/dist/components/select/select.js +188 -191
  74. package/dist/components/stack/model.d.ts +1 -1
  75. package/dist/components/stack/model.js +14 -4
  76. package/dist/components/stack/stack.js +63 -10
  77. package/dist/components/switch/model.d.ts +1 -1
  78. package/dist/components/switch/switch.js +182 -150
  79. package/dist/components/tab-item/model.d.ts +1 -1
  80. package/dist/components/tab-item/tab-item.js +105 -76
  81. package/dist/components/tab-list/model.d.ts +1 -1
  82. package/dist/components/tab-list/tab-list.js +60 -11
  83. package/dist/components/tab-panel/model.d.ts +1 -1
  84. package/dist/components/tab-panel/tab-panel.js +59 -13
  85. package/dist/components/tabs/model.d.ts +3 -3
  86. package/dist/components/tabs/model.js +4 -2
  87. package/dist/components/tabs/tabs.js +191 -178
  88. package/dist/components/tag/model.d.ts +1 -1
  89. package/dist/components/tag/model.js +4 -1
  90. package/dist/components/tag/tag.js +91 -32
  91. package/dist/components/textarea/model.d.ts +1 -1
  92. package/dist/components/textarea/model.js +13 -2
  93. package/dist/components/textarea/textarea.js +165 -150
  94. package/dist/components/tooltip/model.d.ts +1 -1
  95. package/dist/components/tooltip/model.js +4 -1
  96. package/dist/components/tooltip/tooltip.js +119 -115
  97. package/dist/index.js +64 -81
  98. package/dist/shared/constants.js +32 -94
  99. package/dist/shared/figma.d.ts +12 -6
  100. package/dist/shared/model.js +73 -22
  101. package/dist/utils/document-click-listener.js +26 -29
  102. package/dist/utils/document-scroll-listener.js +30 -38
  103. package/dist/utils/floating-components.js +107 -358
  104. package/dist/utils/form-components.js +34 -60
  105. package/dist/utils/index.js +49 -167
  106. package/dist/utils/navigation.js +68 -135
  107. package/dist/utils/react.js +10 -15
  108. package/package.json +11 -8
  109. package/dist/components/accordion/index.js +0 -1
  110. package/dist/components/accordion-item/index.js +0 -1
  111. package/dist/components/accordion-item/model.js +0 -1
  112. package/dist/components/badge/index.js +0 -1
  113. package/dist/components/brand/index.js +0 -1
  114. package/dist/components/brand/model.js +0 -1
  115. package/dist/components/button/index.js +0 -1
  116. package/dist/components/card/index.js +0 -1
  117. package/dist/components/checkbox/index.js +0 -1
  118. package/dist/components/checkbox/model.js +0 -1
  119. package/dist/components/custom-button/index.js +0 -1
  120. package/dist/components/custom-button/model.js +0 -1
  121. package/dist/components/custom-select/index.js +0 -1
  122. package/dist/components/custom-select-dropdown/index.js +0 -1
  123. package/dist/components/custom-select-form-field/index.js +0 -1
  124. package/dist/components/custom-select-form-field/model.js +0 -1
  125. package/dist/components/custom-select-list/index.js +0 -1
  126. package/dist/components/custom-select-list/model.js +0 -1
  127. package/dist/components/custom-select-list-item/index.js +0 -1
  128. package/dist/components/divider/index.js +0 -1
  129. package/dist/components/drawer/index.js +0 -1
  130. package/dist/components/header/index.js +0 -1
  131. package/dist/components/header/model.js +0 -1
  132. package/dist/components/icon/index.js +0 -1
  133. package/dist/components/infotext/index.js +0 -1
  134. package/dist/components/infotext/model.js +0 -1
  135. package/dist/components/input/index.js +0 -1
  136. package/dist/components/link/index.js +0 -1
  137. package/dist/components/navigation/index.js +0 -1
  138. package/dist/components/navigation/model.js +0 -1
  139. package/dist/components/navigation-item/index.js +0 -1
  140. package/dist/components/navigation-item/model.js +0 -1
  141. package/dist/components/notification/index.js +0 -1
  142. package/dist/components/page/index.js +0 -1
  143. package/dist/components/popover/index.js +0 -1
  144. package/dist/components/popover/model.js +0 -1
  145. package/dist/components/radio/index.js +0 -1
  146. package/dist/components/radio/model.js +0 -1
  147. package/dist/components/section/index.js +0 -1
  148. package/dist/components/section/model.js +0 -1
  149. package/dist/components/select/index.js +0 -1
  150. package/dist/components/select/model.js +0 -1
  151. package/dist/components/stack/index.js +0 -1
  152. package/dist/components/switch/index.js +0 -1
  153. package/dist/components/switch/model.js +0 -1
  154. package/dist/components/tab-item/index.js +0 -1
  155. package/dist/components/tab-item/model.js +0 -1
  156. package/dist/components/tab-list/index.js +0 -1
  157. package/dist/components/tab-list/model.js +0 -1
  158. package/dist/components/tab-panel/index.js +0 -1
  159. package/dist/components/tab-panel/model.js +0 -1
  160. package/dist/components/tabs/index.js +0 -1
  161. package/dist/components/tag/index.js +0 -1
  162. package/dist/components/textarea/index.js +0 -1
  163. package/dist/components/tooltip/index.js +0 -1
  164. package/dist/shared/examples/index.js +0 -4
  165. package/dist/shared/figma.js +0 -1
  166. package/dist/shared/showcase/show-code-link.js +0 -51
@@ -1,7 +1,7 @@
1
- import { BaseFormProps, ClickEvent, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GeneralEvent, GlobalProps, GlobalState, IconProps, InputEvent, InteractionEvent, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
2
- import { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
3
- import { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
4
- import { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
1
+ import type { BaseFormProps, ClickEvent, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GeneralEvent, GlobalProps, GlobalState, IconProps, InputEvent, InteractionEvent, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
2
+ import type { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
3
+ import type { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
4
+ import type { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
5
5
  export type CustomSelectOptionType = {
6
6
  /**
7
7
  * Disables this option
@@ -1 +1,8 @@
1
- export const SelectedTypeList = ['amount', 'text', 'tag'];
1
+ //#region src/components/custom-select/model.ts
2
+ var e = [
3
+ "amount",
4
+ "text",
5
+ "tag"
6
+ ];
7
+ //#endregion
8
+ export { e as SelectedTypeList };
@@ -1,13 +1,64 @@
1
1
  "use client";
2
- import * as React from "react";
3
- import { filterPassingProps, getRootProps } from "../../utils/react";
4
- import { useRef, forwardRef } from "react";
5
- import { cls } from "../../utils";
6
- function DBCustomSelectDropdownFn(props, component) {
7
- var _a, _b;
8
- props = Object.assign({ width: "fixed" }, props);
9
- const _ref = component || useRef(component);
10
- return (React.createElement("article", Object.assign({ "data-spacing": "none", ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-custom-select-dropdown db-card", props.className), "data-width": props.width }), props.children));
2
+ import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
3
+ import { cls as n } from "../../utils/index.js";
4
+ import { forwardRef as r, useRef as i } from "react";
5
+ import { jsx as a } from "react/jsx-runtime";
6
+ //#region src/components/custom-select-dropdown/custom-select-dropdown.tsx
7
+ function o(r, o) {
8
+ return r = {
9
+ width: "fixed",
10
+ ...r
11
+ }, /* @__PURE__ */ a("article", {
12
+ "data-spacing": "none",
13
+ ref: o || i(o),
14
+ ...e(r, [
15
+ "data-icon-variant",
16
+ "data-icon-variant-before",
17
+ "data-icon-variant-after",
18
+ "data-icon-weight",
19
+ "data-icon-weight-before",
20
+ "data-icon-weight-after",
21
+ "data-interactive",
22
+ "data-force-mobile",
23
+ "data-color",
24
+ "data-container-color",
25
+ "data-bg-color",
26
+ "data-on-bg-color",
27
+ "data-color-scheme",
28
+ "data-font-size",
29
+ "data-headline-size",
30
+ "data-divider",
31
+ "data-focus",
32
+ "data-font",
33
+ "data-density"
34
+ ]),
35
+ id: r.id ?? r.propOverrides?.id,
36
+ ...t(r, [
37
+ "data-icon-variant",
38
+ "data-icon-variant-before",
39
+ "data-icon-variant-after",
40
+ "data-icon-weight",
41
+ "data-icon-weight-before",
42
+ "data-icon-weight-after",
43
+ "data-interactive",
44
+ "data-force-mobile",
45
+ "data-color",
46
+ "data-container-color",
47
+ "data-bg-color",
48
+ "data-on-bg-color",
49
+ "data-color-scheme",
50
+ "data-font-size",
51
+ "data-headline-size",
52
+ "data-divider",
53
+ "data-focus",
54
+ "data-font",
55
+ "data-density"
56
+ ]),
57
+ className: n("db-custom-select-dropdown db-card", r.className),
58
+ "data-width": r.width,
59
+ children: r.children
60
+ });
11
61
  }
12
- const DBCustomSelectDropdown = forwardRef(DBCustomSelectDropdownFn);
13
- export default DBCustomSelectDropdown;
62
+ var s = r(o);
63
+ //#endregion
64
+ export { s as default };
@@ -1,4 +1,4 @@
1
- import { GlobalProps, GlobalState } from '../../shared/model';
1
+ import type { GlobalProps, GlobalState } from '../../shared/model';
2
2
  export declare const CustomSelectDropdownWidthList: readonly ["fixed", "auto", "full"];
3
3
  export type CustomSelectDropdownWidthType = (typeof CustomSelectDropdownWidthList)[number];
4
4
  export type DBCustomSelectDropdownDefaultProps = {
@@ -1 +1,8 @@
1
- export const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'];
1
+ //#region src/components/custom-select-dropdown/model.ts
2
+ var e = [
3
+ "fixed",
4
+ "auto",
5
+ "full"
6
+ ];
7
+ //#endregion
8
+ export { e as CustomSelectDropdownWidthList };
@@ -1,12 +1,59 @@
1
1
  "use client";
2
- import * as React from "react";
3
- import { filterPassingProps, getRootProps } from "../../utils/react";
4
- import { useRef, forwardRef } from "react";
5
- import { cls } from "../../utils";
6
- function DBCustomSelectFormFieldFn(props, component) {
7
- var _a, _b;
8
- const _ref = component || useRef(component);
9
- return (React.createElement("summary", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-custom-select-form-field", props.className) }), props.children));
2
+ import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
3
+ import { cls as n } from "../../utils/index.js";
4
+ import { forwardRef as r, useRef as i } from "react";
5
+ import { jsx as a } from "react/jsx-runtime";
6
+ //#region src/components/custom-select-form-field/custom-select-form-field.tsx
7
+ function o(r, o) {
8
+ return /* @__PURE__ */ a("summary", {
9
+ ref: o || i(o),
10
+ ...e(r, [
11
+ "data-icon-variant",
12
+ "data-icon-variant-before",
13
+ "data-icon-variant-after",
14
+ "data-icon-weight",
15
+ "data-icon-weight-before",
16
+ "data-icon-weight-after",
17
+ "data-interactive",
18
+ "data-force-mobile",
19
+ "data-color",
20
+ "data-container-color",
21
+ "data-bg-color",
22
+ "data-on-bg-color",
23
+ "data-color-scheme",
24
+ "data-font-size",
25
+ "data-headline-size",
26
+ "data-divider",
27
+ "data-focus",
28
+ "data-font",
29
+ "data-density"
30
+ ]),
31
+ id: r.id ?? r.propOverrides?.id,
32
+ ...t(r, [
33
+ "data-icon-variant",
34
+ "data-icon-variant-before",
35
+ "data-icon-variant-after",
36
+ "data-icon-weight",
37
+ "data-icon-weight-before",
38
+ "data-icon-weight-after",
39
+ "data-interactive",
40
+ "data-force-mobile",
41
+ "data-color",
42
+ "data-container-color",
43
+ "data-bg-color",
44
+ "data-on-bg-color",
45
+ "data-color-scheme",
46
+ "data-font-size",
47
+ "data-headline-size",
48
+ "data-divider",
49
+ "data-focus",
50
+ "data-font",
51
+ "data-density"
52
+ ]),
53
+ className: n("db-custom-select-form-field", r.className),
54
+ children: r.children
55
+ });
10
56
  }
11
- const DBCustomSelectFormField = forwardRef(DBCustomSelectFormFieldFn);
12
- export default DBCustomSelectFormField;
57
+ var s = r(o);
58
+ //#endregion
59
+ export { s as default };
@@ -1,4 +1,4 @@
1
- import { GlobalProps, GlobalState } from '../../shared/model';
1
+ import type { GlobalProps, GlobalState } from '../../shared/model';
2
2
  export type DBCustomSelectFormFieldDefaultProps = {};
3
3
  export type DBCustomSelectFormFieldProps = DBCustomSelectFormFieldDefaultProps & GlobalProps;
4
4
  export type DBCustomSelectFormFieldDefaultState = {};
@@ -1,13 +1,62 @@
1
1
  "use client";
2
- import * as React from "react";
3
- import { filterPassingProps, getRootProps } from "../../utils/react";
4
- import { useRef, forwardRef } from "react";
5
- import { cls } from "../../utils";
6
- function DBCustomSelectListFn(props, component) {
7
- var _a, _b;
8
- const _ref = component || useRef(component);
9
- return (React.createElement("div", Object.assign({ role: props.multiple ? "group" : "radiogroup", "aria-label": props.label, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-custom-select-list", props.className) }),
10
- React.createElement("ul", null, props.children)));
2
+ import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
3
+ import { cls as n } from "../../utils/index.js";
4
+ import { forwardRef as r, useRef as i } from "react";
5
+ import { jsx as a } from "react/jsx-runtime";
6
+ //#region src/components/custom-select-list/custom-select-list.tsx
7
+ function o(r, o) {
8
+ let s = o || i(o);
9
+ return /* @__PURE__ */ a("div", {
10
+ role: r.multiple ? "group" : "radiogroup",
11
+ "aria-label": r.label,
12
+ ref: s,
13
+ ...e(r, [
14
+ "data-icon-variant",
15
+ "data-icon-variant-before",
16
+ "data-icon-variant-after",
17
+ "data-icon-weight",
18
+ "data-icon-weight-before",
19
+ "data-icon-weight-after",
20
+ "data-interactive",
21
+ "data-force-mobile",
22
+ "data-color",
23
+ "data-container-color",
24
+ "data-bg-color",
25
+ "data-on-bg-color",
26
+ "data-color-scheme",
27
+ "data-font-size",
28
+ "data-headline-size",
29
+ "data-divider",
30
+ "data-focus",
31
+ "data-font",
32
+ "data-density"
33
+ ]),
34
+ id: r.id ?? r.propOverrides?.id,
35
+ ...t(r, [
36
+ "data-icon-variant",
37
+ "data-icon-variant-before",
38
+ "data-icon-variant-after",
39
+ "data-icon-weight",
40
+ "data-icon-weight-before",
41
+ "data-icon-weight-after",
42
+ "data-interactive",
43
+ "data-force-mobile",
44
+ "data-color",
45
+ "data-container-color",
46
+ "data-bg-color",
47
+ "data-on-bg-color",
48
+ "data-color-scheme",
49
+ "data-font-size",
50
+ "data-headline-size",
51
+ "data-divider",
52
+ "data-focus",
53
+ "data-font",
54
+ "data-density"
55
+ ]),
56
+ className: n("db-custom-select-list", r.className),
57
+ children: /* @__PURE__ */ a("ul", { children: r.children })
58
+ });
11
59
  }
12
- const DBCustomSelectList = forwardRef(DBCustomSelectListFn);
13
- export default DBCustomSelectList;
60
+ var s = r(o);
61
+ //#endregion
62
+ export { s as default };
@@ -1,4 +1,4 @@
1
- import { GlobalProps, GlobalState } from '../../shared/model';
1
+ import type { GlobalProps, GlobalState } from '../../shared/model';
2
2
  export type DBCustomSelectListDefaultProps = {
3
3
  label?: string;
4
4
  multiple?: boolean;
@@ -1,34 +1,91 @@
1
1
  "use client";
2
- import * as React from "react";
3
- import { filterPassingProps, getRootProps } from "../../utils/react";
4
- import { useState, useRef, useEffect, forwardRef } from "react";
5
- import { cls, getBoolean, getBooleanAsString } from "../../utils";
6
- function DBCustomSelectListItemFn(props, component) {
7
- var _a, _b;
8
- const _ref = component || useRef(component);
9
- const [hasDivider, setHasDivider] = useState(() => false);
10
- function handleChange(event) {
11
- event.stopPropagation();
12
- if (props.onChange) {
13
- props.onChange(event);
14
- }
15
- }
16
- function getIconTrailing() {
17
- if (props.isGroupTitle || props.type === "checkbox") {
18
- return;
19
- }
20
- return getBoolean(props.checked, "checked") ? "check" : "x_placeholder";
21
- }
22
- useEffect(() => {
23
- setHasDivider(Boolean(props.isGroupTitle || props.showDivider));
24
- }, [props.isGroupTitle, props.showDivider]);
25
- return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-custom-select-list-item", props.className, {
26
- "db-checkbox": props.type === "checkbox" && !props.isGroupTitle,
27
- "db-radio": props.type !== "checkbox" && !props.isGroupTitle,
28
- }), "data-divider": getBooleanAsString(hasDivider) }), !props.isGroupTitle ? (React.createElement("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-icon-trailing": getIconTrailing() },
29
- React.createElement("input", { className: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: props.type, name: props.name, form: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, onChange: (event) => handleChange(event) }),
30
- props.label ? React.createElement(React.Fragment, null, props.label) : null,
31
- props.children)) : (React.createElement("span", null, props.groupTitle))));
2
+ import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
3
+ import { cls as n, getBoolean as r, getBooleanAsString as i } from "../../utils/index.js";
4
+ import { forwardRef as a, useEffect as o, useRef as s, useState as c } from "react";
5
+ import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
6
+ //#region src/components/custom-select-list-item/custom-select-list-item.tsx
7
+ function f(a, f) {
8
+ let p = f || s(f), [m, h] = c(() => !1);
9
+ function g(e) {
10
+ e.stopPropagation(), a.onChange && a.onChange(e);
11
+ }
12
+ function _() {
13
+ if (!(a.isGroupTitle || a.type === "checkbox")) return r(a.checked, "checked") ? "check" : "x_placeholder";
14
+ }
15
+ return o(() => {
16
+ h(!!(a.isGroupTitle || a.showDivider));
17
+ }, [a.isGroupTitle, a.showDivider]), /* @__PURE__ */ u("li", {
18
+ ref: p,
19
+ ...e(a, [
20
+ "data-icon-variant",
21
+ "data-icon-variant-before",
22
+ "data-icon-variant-after",
23
+ "data-icon-weight",
24
+ "data-icon-weight-before",
25
+ "data-icon-weight-after",
26
+ "data-interactive",
27
+ "data-force-mobile",
28
+ "data-color",
29
+ "data-container-color",
30
+ "data-bg-color",
31
+ "data-on-bg-color",
32
+ "data-color-scheme",
33
+ "data-font-size",
34
+ "data-headline-size",
35
+ "data-divider",
36
+ "data-focus",
37
+ "data-font",
38
+ "data-density"
39
+ ]),
40
+ id: a.id ?? a.propOverrides?.id,
41
+ ...t(a, [
42
+ "data-icon-variant",
43
+ "data-icon-variant-before",
44
+ "data-icon-variant-after",
45
+ "data-icon-weight",
46
+ "data-icon-weight-before",
47
+ "data-icon-weight-after",
48
+ "data-interactive",
49
+ "data-force-mobile",
50
+ "data-color",
51
+ "data-container-color",
52
+ "data-bg-color",
53
+ "data-on-bg-color",
54
+ "data-color-scheme",
55
+ "data-font-size",
56
+ "data-headline-size",
57
+ "data-divider",
58
+ "data-focus",
59
+ "data-font",
60
+ "data-density"
61
+ ]),
62
+ className: n("db-custom-select-list-item", a.className, {
63
+ "db-checkbox": a.type === "checkbox" && !a.isGroupTitle,
64
+ "db-radio": a.type !== "checkbox" && !a.isGroupTitle
65
+ }),
66
+ "data-divider": i(m),
67
+ children: a.isGroupTitle ? /* @__PURE__ */ u("span", { children: a.groupTitle }) : /* @__PURE__ */ d("label", {
68
+ "data-icon": a.type !== "checkbox" && a.icon ? a.icon : void 0,
69
+ "data-show-icon": i(a.showIcon),
70
+ "data-icon-trailing": _(),
71
+ children: [
72
+ /* @__PURE__ */ u("input", {
73
+ className: "db-custom-select-list-item-checkbox",
74
+ "data-disable-focus": "true",
75
+ type: a.type,
76
+ name: a.name,
77
+ form: a.name,
78
+ checked: r(a.checked, "checked"),
79
+ disabled: r(a.disabled, "disabled"),
80
+ value: a.value,
81
+ onChange: (e) => g(e)
82
+ }),
83
+ a.label ? /* @__PURE__ */ u(l, { children: a.label }) : null,
84
+ a.children
85
+ ]
86
+ })
87
+ });
32
88
  }
33
- const DBCustomSelectListItem = forwardRef(DBCustomSelectListItemFn);
34
- export default DBCustomSelectListItem;
89
+ var p = a(f);
90
+ //#endregion
91
+ export { p as default };
@@ -1,4 +1,4 @@
1
- import { BaseFormProps, ChangeEventProps, ChangeEventState, FormCheckProps, GlobalProps, IconProps, ShowIconProps, ValueProps } from '../../shared/model';
1
+ import type { BaseFormProps, ChangeEventProps, ChangeEventState, FormCheckProps, GlobalProps, IconProps, ShowIconProps, ValueProps } from '../../shared/model';
2
2
  export declare const CustomSelectListItemTypeList: readonly ["checkbox", "radio"];
3
3
  export type CustomSelectListItemTypeType = (typeof CustomSelectListItemTypeList)[number];
4
4
  export type DBCustomSelectListItemExtraProps = {
@@ -1 +1,4 @@
1
- export const CustomSelectListItemTypeList = ['checkbox', 'radio'];
1
+ //#region src/components/custom-select-list-item/model.ts
2
+ var e = ["checkbox", "radio"];
3
+ //#endregion
4
+ export { e as CustomSelectListItemTypeList };
@@ -1,12 +1,62 @@
1
1
  "use client";
2
- import * as React from "react";
3
- import { filterPassingProps, getRootProps } from "../../utils/react";
4
- import { useRef, forwardRef } from "react";
5
- import { cls } from "../../utils";
6
- function DBDividerFn(props, component) {
7
- var _a, _b;
8
- const _ref = component || useRef(component);
9
- return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-margin": props.margin, "data-variant": props.variant, "data-emphasis": props.emphasis, "data-width": props.width }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-divider", props.className) })));
2
+ import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
3
+ import { cls as n } from "../../utils/index.js";
4
+ import { forwardRef as r, useRef as i } from "react";
5
+ import { jsx as a } from "react/jsx-runtime";
6
+ //#region src/components/divider/divider.tsx
7
+ function o(r, o) {
8
+ return /* @__PURE__ */ a("div", {
9
+ ref: o || i(o),
10
+ ...e(r, [
11
+ "data-icon-variant",
12
+ "data-icon-variant-before",
13
+ "data-icon-variant-after",
14
+ "data-icon-weight",
15
+ "data-icon-weight-before",
16
+ "data-icon-weight-after",
17
+ "data-interactive",
18
+ "data-force-mobile",
19
+ "data-color",
20
+ "data-container-color",
21
+ "data-bg-color",
22
+ "data-on-bg-color",
23
+ "data-color-scheme",
24
+ "data-font-size",
25
+ "data-headline-size",
26
+ "data-divider",
27
+ "data-focus",
28
+ "data-font",
29
+ "data-density"
30
+ ]),
31
+ id: r.id ?? r.propOverrides?.id,
32
+ "data-margin": r.margin,
33
+ "data-variant": r.variant,
34
+ "data-emphasis": r.emphasis,
35
+ "data-width": r.width,
36
+ ...t(r, [
37
+ "data-icon-variant",
38
+ "data-icon-variant-before",
39
+ "data-icon-variant-after",
40
+ "data-icon-weight",
41
+ "data-icon-weight-before",
42
+ "data-icon-weight-after",
43
+ "data-interactive",
44
+ "data-force-mobile",
45
+ "data-color",
46
+ "data-container-color",
47
+ "data-bg-color",
48
+ "data-on-bg-color",
49
+ "data-color-scheme",
50
+ "data-font-size",
51
+ "data-headline-size",
52
+ "data-divider",
53
+ "data-focus",
54
+ "data-font",
55
+ "data-density"
56
+ ]),
57
+ className: n("db-divider", r.className)
58
+ });
10
59
  }
11
- const DBDivider = forwardRef(DBDividerFn);
12
- export default DBDivider;
60
+ var s = r(o);
61
+ //#endregion
62
+ export { s as default };
@@ -1,4 +1,4 @@
1
- import { EmphasisProps, GlobalProps, GlobalState, MarginProps, WidthProps } from '../../shared/model';
1
+ import type { EmphasisProps, GlobalProps, GlobalState, MarginProps, WidthProps } from '../../shared/model';
2
2
  export declare const DividerMarginList: readonly ["none", "_"];
3
3
  export type DividerMarginType = (typeof DividerMarginList)[number];
4
4
  export declare const DividerVariantList: readonly ["horizontal", "vertical"];
@@ -1,2 +1,4 @@
1
- export const DividerMarginList = ['none', '_'];
2
- export const DividerVariantList = ['horizontal', 'vertical'];
1
+ //#region src/components/divider/model.ts
2
+ var e = ["none", "_"], t = ["horizontal", "vertical"];
3
+ //#endregion
4
+ export { e as DividerMarginList, t as DividerVariantList };