@inseefr/lunatic 2.5.0-fix-last-reached-page → 2.5.1-panelContainer

package/lib/components/commons/components/combo-box/selection/combo-box-label-selection.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _createCustomizableField = _interopRequireDefault(require("../../../create-customizable-field"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function isPlaceholder(option, search) {
+  return !option && (!search || search.length === 0);
+}
+function getContent(option, search, placeholder) {
+  if (option) {
+    var id = option.id,
+      value = option.value,
+      label = option.label;
+    return label ? "".concat(id || value, " - ").concat(label) : id || value;
+  }
+  if (search && search.trim().length) {
+    return search;
+  }
+  return placeholder !== null && placeholder !== void 0 ? placeholder : '';
+}
+function ComboBoxLabelSelection(_ref) {
+  var option = _ref.option,
+    placeholder = _ref.placeholder,
+    search = _ref.search,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var isPh = isPlaceholder(option, search);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('lunatic-combo-box-selected', {
+      disabled: disabled
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames["default"])({
+        placeholder: isPh,
+        selection: !isPh
+      }),
+      children: getContent(option, search, placeholder)
+    })
+  });
+}
+var _default = (0, _createCustomizableField["default"])(ComboBoxLabelSelection, 'ComboboxLabelSelection');
+exports["default"] = _default;

package/lib/components/commons/components/{default-label-renderer.spec.js → combo-box/selection/combo-box-label-selection.spec.js}

@@ -2,7 +2,7 @@
 
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _defaultLabelRenderer = _interopRequireDefault(require("./default-label-renderer"));
+var _comboBoxLabelSelection = _interopRequireDefault(require("./combo-box-label-selection"));
 var _vitest = require("vitest");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       label: 'Label'
     };
     (0, _vitest.it)('should render with selected option', function () {
-      var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_defaultLabelRenderer["default"], {
+      var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
           option: option,
           placeholder: "Select an option"
         })),
@@ -23,7 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       (0, _vitest.expect)(getByText(expectedContent)).toBeInTheDocument();
     });
     (0, _vitest.it)('should render with placeholder', function () {
-      var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_defaultLabelRenderer["default"], {
+      var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
           option: null,
           placeholder: "Select an option"
         })),
@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
       (0, _vitest.expect)(getByText('Select an option')).toBeInTheDocument();
     });
     (0, _vitest.it)('should render with search value', function () {
-      var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_defaultLabelRenderer["default"], {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxLabelSelection["default"], {
           option: null,
           search: "Search value",
           placeholder: "Select an option"

package/lib/components/commons/components/combo-box/selection/input.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _displayLabelOrInput = require("./displayLabelOrInput");
+var _createCustomizableField = _interopRequireDefault(require("../../../create-customizable-field"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -52,5 +52,5 @@ function Input(_ref) {
     onKeyDown: onKeydown
   });
 }
-var _default = (0, _displayLabelOrInput.displayLabelOrInput)(Input, 'Input');
+var _default = (0, _createCustomizableField["default"])(Input, 'ComboboxInput');
 exports["default"] = _default;

package/lib/components/commons/components/combo-box/selection/label-selection.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.LabelSelection = LabelSelection;
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _displayLabelOrInput = require("./displayLabelOrInput");
+var _comboBoxLabelSelection = _interopRequireDefault(require("./combo-box-label-selection"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function LabelSelection(_ref) {
@@ -18,16 +17,13 @@ function LabelSelection(_ref) {
     search = _ref.search,
     disabled = _ref.disabled;
   var option = selectedIndex !== undefined ? options[selectedIndex] : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])('lunatic-combo-box-selected', {
-      disabled: disabled
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderer, {
-      option: option,
-      placeholder: placeholder,
-      search: search
-    })
+  var LabelSelectionComponent = Renderer !== null && Renderer !== void 0 ? Renderer : _comboBoxLabelSelection["default"];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelSelectionComponent, {
+    option: option,
+    placeholder: placeholder,
+    search: search,
+    disabled: disabled
   });
 }
-var _default = (0, _displayLabelOrInput.displayLabelOrInput)(LabelSelection, 'LabelSelection');
+var _default = LabelSelection;
 exports["default"] = _default;

package/lib/components/commons/components/combo-box/selection/label-selection.spec.js

@@ -16,15 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
     label: 'Option 3',
     value: 'banana'
   }];
-  var LabelRenderer = function LabelRenderer(props) {
-    var _props$option$label, _props$option;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: (_props$option$label = (_props$option = props.option) === null || _props$option === void 0 ? void 0 : _props$option.label) !== null && _props$option$label !== void 0 ? _props$option$label : 'Unknown'
-    });
-  };
   (0, _vitest.it)('should render the labelRenderer when expanded is true and editable is false', function () {
     var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
-        labelRenderer: LabelRenderer,
         selectedIndex: 0,
         options: options,
         placeholder: "Select an option...",
@@ -32,18 +25,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
         disabled: false
       })),
       getByText = _render.getByText;
-    (0, _vitest.expect)(getByText('Option 1')).toBeInTheDocument();
+    (0, _vitest.expect)(getByText('apple - Option 1')).toBeInTheDocument();
   });
   (0, _vitest.it)('should add the disabled class when disabled is true', function () {
     var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection["default"], {
-        labelRenderer: LabelRenderer,
         selectedIndex: 0,
         options: options,
         placeholder: "Select an option...",
         search: "search term",
         disabled: true
       })),
-      container = _render2.container;
-    (0, _vitest.expect)(container.firstChild).toHaveClass('disabled');
+      getByText = _render2.getByText;
+    (0, _vitest.expect)(getByText('apple - Option 1').parentElement).toHaveClass('disabled');
   });
 });

package/lib/components/commons/components/combo-box/selection/selection-container.js

@@ -14,11 +14,12 @@ function SelectionContainer(_ref) {
     expanded = _ref.expanded,
     focused = _ref.focused,
     disabled = _ref.disabled,
-    labelId = _ref.labelId;
+    labelId = _ref.labelId,
+    className = _ref.className;
   var comboBoxId = "".concat(id);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     id: comboBoxId,
-    className: (0, _classnames["default"])('lunatic-combo-box-selection', {
+    className: (0, _classnames["default"])("".concat(className !== null && className !== void 0 ? className : 'lunatic', "-combo-box-selection"), {
       focused: focused,
       disabled: disabled
     }),

package/lib/components/commons/components/combo-box/selection/selection.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Selection = Selection;
 var _react = require("react");
-var _labelSelection = require("./label-selection");
-var _input = _interopRequireDefault(require("./input"));
 var _selectionContainer = _interopRequireDefault(require("./selection-container"));
+var _LabelOrInput = require("./LabelOrInput");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function Selection(_ref) {
@@ -22,32 +21,29 @@ function Selection(_ref) {
     options = _ref.options,
     editable = _ref.editable,
     labelId = _ref.labelId,
-    id = _ref.id;
+    id = _ref.id,
+    className = _ref.className;
   var onChangeEx = (0, _react.useCallback)(function (e) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
   }, [onChange]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_selectionContainer["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectionContainer["default"], {
     id: id,
     labelId: labelId,
     expanded: expanded,
     "aria-owns": "".concat(id, "-list"),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_labelSelection.LabelSelection, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelOrInput.LabelOrInput, {
       labelRenderer: labelRenderer,
       placeholder: placeholder,
       selectedIndex: selectedIndex,
       options: options,
       search: search,
-      disabled: disabled
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input["default"], {
-      id: "combobox-input-".concat(id),
-      className: "lunatic-combo-box-input",
+      disabled: disabled,
       onChange: onChangeEx,
       value: search,
-      placeholder: placeholder,
-      disabled: disabled,
       focused: focused,
       editable: editable,
       expanded: expanded
-    })]
+    })
   });
 }

package/lib/components/commons/components/combo-box/selection/selection.spec.js

@@ -15,15 +15,8 @@ var options = [{
   value: 'banana'
 }];
 (0, _vitest.describe)('Selection component', function () {
-  var LabelRenderer = function LabelRenderer(_ref) {
-    var option = _ref.option;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: option ? option.label : 'No selection'
-    });
-  };
   (0, _vitest.it)('should render correctly with default props', function () {
     var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: LabelRenderer,
         options: options
       })),
       container = _render.container;
@@ -31,7 +24,6 @@ var options = [{
   });
   (0, _vitest.it)('should render correctly when it is editable', function () {
     var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: LabelRenderer,
         options: options,
         editable: true
       })),
@@ -40,7 +32,6 @@ var options = [{
   });
   (0, _vitest.it)('should render correctly when it is expanded', function () {
     var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: LabelRenderer,
         options: options,
         expanded: true
       })),
@@ -49,40 +40,24 @@ var options = [{
   });
   (0, _vitest.it)('should render correctly when it is disabled', function () {
     var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: function labelRenderer(_ref2) {
-          var option = _ref2.option;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: option ? option.label : 'No selection'
-          });
-        },
         options: options,
-        disabled: true
+        disabled: true,
+        placeholder: "hello!"
       })),
       container = _render4.container;
     (0, _vitest.expect)(container.firstChild).toMatchSnapshot();
   });
   (0, _vitest.it)('should render the selected option when there is a selection', function () {
     var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: function labelRenderer(_ref3) {
-          var option = _ref3.option;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: option ? option.label : 'No selection'
-          });
-        },
         options: options,
-        selectedIndex: 0
+        selectedIndex: 0,
+        expanded: false
       })),
       getByText = _render5.getByText;
-    (0, _vitest.expect)(getByText('Apple')).toBeInTheDocument();
+    (0, _vitest.expect)(getByText('apple - Apple')).toBeInTheDocument();
   });
   (0, _vitest.it)('should not render the input when it is not editable', function () {
     var _render6 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
-        labelRenderer: function labelRenderer(_ref4) {
-          var option = _ref4.option;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: option ? option.label : 'No selection'
-          });
-        },
         options: options,
         placeholder: "Search fruits",
         editable: false

package/lib/components/commons/index.js

@@ -10,13 +10,6 @@ Object.defineProperty(exports, "ComboBox", {
     return _comboBox["default"];
   }
 });
-Object.defineProperty(exports, "DefaultLabelRenderer", {
-  enumerable: true,
-  get: function get() {
-    return _defaultLabelRenderer["default"];
-  }
-});
-exports.DefaultOptionRenderer = void 0;
 Object.defineProperty(exports, "Errors", {
   enumerable: true,
   get: function get() {
@@ -90,8 +83,6 @@ Object.defineProperty(exports, "useOptionsKeydown", {
     return _useOptionsKeydown["default"];
   }
 });
-var _defaultOptionRenderer = _interopRequireDefault(require("./components/default-option-renderer"));
-var _defaultLabelRenderer = _interopRequireDefault(require("./components/default-label-renderer"));
 var _fieldContainer = _interopRequireDefault(require("./components/field-container"));
 var _label = _interopRequireDefault(require("./components/label"));
 var _fieldset = _interopRequireDefault(require("./components/fieldset"));
@@ -109,6 +100,4 @@ var _safetyLabel = _interopRequireDefault(require("./safety-label"));
 var _errors = _interopRequireDefault(require("./components/errors"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var DefaultOptionRenderer = _defaultOptionRenderer["default"]; // We need to export this way to avoid crash on storybook TODO : investigate
-exports.DefaultOptionRenderer = DefaultOptionRenderer;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/components/suggester/html/suggester.js

@@ -25,15 +25,13 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function Suggester(_ref) {
   var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? 'lunatic-suggester-default-style' : _ref$className,
+    className = _ref$className === void 0 ? 'lunatic' : _ref$className,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? _i18n["default"].PLACEHOLDER : _ref$placeholder,
     _ref$onSelect = _ref.onSelect,
     onSelect = _ref$onSelect === void 0 ? _function.voidFunction : _ref$onSelect,
-    _ref$labelRenderer = _ref.labelRenderer,
-    labelRenderer = _ref$labelRenderer === void 0 ? _commons.DefaultLabelRenderer : _ref$labelRenderer,
-    _ref$optionRenderer = _ref.optionRenderer,
-    optionRenderer = _ref$optionRenderer === void 0 ? _commons.DefaultOptionRenderer : _ref$optionRenderer,
+    labelRenderer = _ref.labelRenderer,
+    optionRenderer = _ref.optionRenderer,
     value = _ref.value,
     disabled = _ref.disabled,
     id = _ref.id,

package/lib/components/suggester/lunatic-suggester.js

@@ -28,6 +28,7 @@ function LunaticSuggester(_ref) {
     missingResponse = _ref.missingResponse,
     management = _ref.management,
     response = _ref.response,
+    className = _ref.className,
     getSuggesterStatus = _ref.getSuggesterStatus;
   var onChange = (0, _useOnHandleChange["default"])({
     handleChange: handleChange,
@@ -55,7 +56,8 @@ function LunaticSuggester(_ref) {
       value: value,
       errors: errors,
       label: label,
-      getSuggesterStatus: getSuggesterStatus
+      getSuggesterStatus: getSuggesterStatus,
+      className: className
     })
   });
 }

package/lib/src/components/commons/components/combo-box/combo-box-container.d.ts

@@ -1,8 +1,10 @@
 import type { PropsWithChildren } from 'react';
+import { LunaticBaseProps } from '../../../type';
 type Props = PropsWithChildren<{
     className?: string;
     id?: string;
     classStyle?: string;
+    errors?: LunaticBaseProps['errors'];
 }>;
-export declare function ComboBoxContainer({ children, className, id, classStyle, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: import("react").ComponentType<Props>;
+export default _default;

package/lib/src/components/commons/components/combo-box/combo-box-content-box.d.ts

@@ -0,0 +1,11 @@
+import type { KeyboardEvent } from 'react';
+import React, { PropsWithChildren } from 'react';
+type Props = PropsWithChildren<{
+    focused?: boolean;
+    onFocus: () => void;
+    onKeyDown: (e: KeyboardEvent<Element>) => void;
+    className?: string;
+}>;
+export declare function ComboBoxContentBox({ children, className, onFocus, onKeyDown, focused, }: Props): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.ComponentType<Props>;
+export default _default;

package/lib/src/components/commons/components/combo-box/combo-box-content.d.ts

@@ -4,6 +4,7 @@ type Props = PropsWithChildren<{
     onBlur: () => void;
     onFocus: () => void;
     onKeyDown: (key: string) => void;
+    className?: string;
 }>;
-export declare function ComboBoxContent({ children, focused, onFocus, onBlur, onKeyDown, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBoxContent({ children, focused, onFocus, onBlur, onKeyDown, className, }: Props): import("react/jsx-runtime").JSX.Element;
 export default ComboBoxContent;

package/lib/src/components/commons/components/combo-box/combo-box.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import './combo-box.scss';
-import { ComboBoxOption } from './combo-box.type';
+import { ComboBoxOptionType } from './combo-box.type';
 import { SelectionProps } from './selection/selection';
 import { PanelProps } from './panel/panel';
 import { LunaticBaseProps } from '../../../type';
@@ -9,13 +9,13 @@ type Props = SelectionProps & PanelProps & {
     classStyle?: string;
     value: string | null;
     messageError?: string;
-    getOptionValue?: (o: ComboBoxOption) => string;
+    getOptionValue?: (o: ComboBoxOptionType) => string;
     label?: ReactNode;
     description?: ReactNode;
     errors?: LunaticBaseProps['errors'];
     onChange?: (s: string | null) => void;
     onSelect: (s: string | null) => void;
-    options: ComboBoxOption[];
+    options: ComboBoxOptionType[];
 };
 declare const _default: import("react").ComponentType<Props>;
 export default _default;

package/lib/src/components/commons/components/combo-box/combo-box.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
-import { ComboBoxOption } from './combo-box.type';
+import { ComboBoxOptionType } from './combo-box.type';
 declare const stories: Meta;
 export default stories;
 export declare const Default: Story<{
@@ -10,12 +10,13 @@ export declare const Default: Story<{
     editable?: boolean | undefined;
     labelId?: string | undefined;
     id?: string | undefined;
+    className?: string | undefined;
 } & import("./selection/label-selection").LabelSelectionProps & import("./panel/panel").PanelProps & {
     className?: string | undefined;
     classStyle?: string | undefined;
     value: string | null;
     messageError?: string | undefined;
-    getOptionValue?: ((o: ComboBoxOption) => string) | undefined;
+    getOptionValue?: ((o: ComboBoxOptionType) => string) | undefined;
     label?: import("react").ReactNode;
     description?: import("react").ReactNode;
     errors?: {
@@ -23,5 +24,5 @@ export declare const Default: Story<{
     } | undefined;
     onChange?: ((s: string | null) => void) | undefined;
     onSelect: (s: string | null) => void;
-    options: ComboBoxOption[];
+    options: ComboBoxOptionType[];
 }>;

package/lib/src/components/commons/components/combo-box/combo-box.type.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type ComboBoxOption = {
+export type ComboBoxOptionType = {
     id?: string;
     description?: ReactNode;
     label?: ReactNode;

package/lib/src/components/commons/components/combo-box/panel/combo-box-option.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComboBoxOptionType } from '../combo-box.type';
+type Props = {
+    option: ComboBoxOptionType;
+    selected?: boolean;
+};
+declare const _default: import("react").ComponentType<Props>;
+export default _default;

package/lib/src/components/commons/components/combo-box/panel/panel-container.d.ts

@@ -4,5 +4,5 @@ type Props = PropsWithChildren<{
     expanded?: boolean;
     id?: string;
 }>;
-export declare function PanelContainer({ children, focused, expanded, id }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: import("react").ComponentType<Props>;
+export default _default;

package/lib/src/components/commons/components/combo-box/panel/panel.d.ts

@@ -1,12 +1,15 @@
 import { FunctionComponent } from 'react';
-import { ComboBoxOption } from '../combo-box.type';
+import { ComboBoxOptionType } from '../combo-box.type';
 export type PanelProps = {
-    optionRenderer: FunctionComponent<{
-        option: ComboBoxOption;
+    /**
+     * @deprecated use createCustomizableField with ComboboxOptionRenderer as name.
+     */
+    optionRenderer?: FunctionComponent<{
+        option: ComboBoxOptionType;
         selected?: boolean;
         search?: string;
     }>;
-    options: Array<ComboBoxOption>;
+    options: Array<ComboBoxOptionType>;
     focused?: boolean;
     selectedIndex?: number | string | null;
     expanded?: boolean;

package/lib/src/components/commons/components/combo-box/selection/LabelOrInput.d.ts

@@ -0,0 +1,16 @@
+import { LabelSelectionProps } from './label-selection';
+import { InputProps } from './input';
+type LabelOrInputTypeProps = LabelSelectionProps & InputProps & {
+    editable?: boolean;
+    expanded?: boolean;
+};
+/**
+ * Display the input or the label of the selection based on the state of the Suggester.
+ *
+ * When the component is not focused, a representation of what is being searched
+ * is presented instead of the Input. This is related to what the user searched
+ * (i.e. the letters entered), not directly to the option chosen among the suggestions.
+ * Using the input directly to represent the selection causes a conflict with that which the user enters in order to search.
+ */
+export declare function LabelOrInput(props: LabelOrInputTypeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/src/components/commons/components/combo-box/selection/clear-button.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    className?: string;
+    search?: string;
+    onClick?: () => void;
+    editable?: boolean;
+};
+export declare const ClearButton: import("react").ComponentType<Props>;
+export {};

package/lib/src/components/commons/components/combo-box/selection/combo-box-label-selection.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComboBoxOptionType } from '../combo-box.type';
+type Props = {
+    option?: ComboBoxOptionType | null;
+    placeholder?: string;
+    search?: string;
+    disabled?: boolean;
+};
+declare const _default: import("react").ComponentType<Props>;
+export default _default;

package/lib/src/components/commons/components/combo-box/selection/input.d.ts

@@ -1,5 +1,10 @@
-declare const _default: (props: Record<string, unknown> & {
-    editable?: boolean | undefined;
-    expanded?: boolean | undefined;
-}) => import("react/jsx-runtime").JSX.Element | null;
+import React, { HTMLAttributes } from 'react';
+export type InputProps = {
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string;
+    labelledBy?: string;
+    focused?: boolean;
+} & HTMLAttributes<HTMLInputElement>;
+declare const _default: React.ComponentType<Record<string, unknown>>;
 export default _default;

package/lib/src/components/commons/components/combo-box/selection/label-selection.d.ts

@@ -1,20 +1,20 @@
 import { FunctionComponent } from 'react';
-import { ComboBoxOption } from '../combo-box.type';
+import { ComboBoxOptionType } from '../combo-box.type';
 export type LabelSelectionProps = {
-    labelRenderer: FunctionComponent<{
-        option?: ComboBoxOption;
+    /**
+     * @deprecated use createCustomizableField with ComboboxLabelRenderer as name.
+     */
+    labelRenderer?: FunctionComponent<{
+        option?: ComboBoxOptionType;
         placeholder?: string;
         search?: string;
+        disabled?: boolean;
     }>;
     placeholder?: string;
     selectedIndex?: number;
-    options: Array<ComboBoxOption>;
+    options: Array<ComboBoxOptionType>;
     search?: string;
     disabled?: boolean;
 };
 export declare function LabelSelection({ labelRenderer: Renderer, placeholder, selectedIndex, options, search, disabled, }: LabelSelectionProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: (props: LabelSelectionProps & {
-    editable?: boolean | undefined;
-    expanded?: boolean | undefined;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export default _default;
+export default LabelSelection;

package/lib/src/components/commons/components/combo-box/selection/selection-container.d.ts

@@ -5,6 +5,7 @@ type Props = PropsWithChildren<{
     disabled?: boolean;
     labelId?: string;
     id?: string;
+    className?: string;
 }>;
-declare function SelectionContainer({ children, id, expanded, focused, disabled, labelId, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function SelectionContainer({ children, id, expanded, focused, disabled, labelId, className, }: Props): import("react/jsx-runtime").JSX.Element;
 export default SelectionContainer;

package/lib/src/components/commons/components/combo-box/selection/selection.d.ts

@@ -6,5 +6,6 @@ export type SelectionProps = {
     editable?: boolean;
     labelId?: string;
     id?: string;
+    className?: string;
 } & LabelSelectionProps;
-export declare function Selection({ labelRenderer, placeholder, search, expanded, disabled, focused, onChange, selectedIndex, options, editable, labelId, id, }: SelectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Selection({ labelRenderer, placeholder, search, expanded, disabled, focused, onChange, selectedIndex, options, editable, labelId, id, className, }: SelectionProps): import("react/jsx-runtime").JSX.Element;