arengibook 3.0.5-select → 3.0.6-select

package/dist/index.js

@@ -36896,7 +36896,12 @@ var Dropdown = function Dropdown(props) {
     } : _props$valueStyle,
     onChange = props.onChange,
     _props$optionStyle = props.optionStyle,
-    optionStyle = _props$optionStyle === void 0 ? {} : _props$optionStyle,
+    optionStyle = _props$optionStyle === void 0 ? {
+      maxWidth: '250px',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    } : _props$optionStyle,
     _props$editable = props.editable,
     editable = _props$editable === void 0 ? false : _props$editable,
     name = props.name,
@@ -36962,6 +36967,7 @@ var Dropdown = function Dropdown(props) {
     setOptionSelected = _useState2[1];
   var dropdownRef = useRef(null);
   var dropdownComposantRef = useRef(null);
+  var containerRef = useRef(null);
   var clickedFromList = useRef(false);
   var currentPageRef = useRef(1);
   var filterRef = useRef('');
@@ -37538,6 +37544,7 @@ var Dropdown = function Dropdown(props) {
       width: '100%'
     }
   }), /*#__PURE__*/React__default.createElement("div", {
+    ref: containerRef,
     className: "dropdown-container",
     style: {
       width: '100%',
@@ -37571,7 +37578,8 @@ var Dropdown = function Dropdown(props) {
     panelStyle: {
       maxHeight: 'auto',
       overflowY: 'auto',
-      zIndex: 999999
+      zIndex: 999999,
+      width: containerRef.current ? containerRef.current.offsetWidth + 'px' : undefined
     },
     panelClassName: 'dropdownbook',
     itemTemplate: optionTemplate
@@ -40931,7 +40939,12 @@ var MultiSelect = function MultiSelect(props) {
     _props$valueStyle = props.valueStyle,
     valueStyle = _props$valueStyle === void 0 ? {} : _props$valueStyle,
     _props$optionStyle = props.optionStyle,
-    optionStyle = _props$optionStyle === void 0 ? {} : _props$optionStyle,
+    optionStyle = _props$optionStyle === void 0 ? {
+      maxWidth: '250px',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    } : _props$optionStyle,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     name = props.name,
@@ -41031,6 +41044,7 @@ var MultiSelect = function MultiSelect(props) {
     tooltipKey = _useState8[0],
     setTooltipKey = _useState8[1];
   var multiSelectRef = useRef(null);
+  var containerRef = useRef(null);
   var _useState9 = useState(null),
     _useState0 = _slicedToArray$9(_useState9, 2),
     sortOrder = _useState0[0],
@@ -41816,6 +41830,7 @@ var MultiSelect = function MultiSelect(props) {
     "data-pr-position": "right",
     "data-pr-at": "right+5 top",
     "data-pr-my": "left center-2",
+    ref: containerRef,
     className: "multiselect-container custom-target-icon",
     style: {
       width: '100%',
@@ -41924,6 +41939,9 @@ var MultiSelect = function MultiSelect(props) {
     // selectAll={selectAll}
     ,
     showSelectAll: showSelectAll,
+    panelStyle: {
+      width: containerRef.current ? containerRef.current.offsetWidth + 'px' : undefined
+    },
     panelHeaderTemplate: customPanelHeader,
     panelFooterTemplate: customPanelFooter
   }, isGroupedOption && {
@@ -42152,13 +42170,7 @@ var MultiSelectPresets = {
     withIcon: false,
     withColor: true,
     maxSelectedLabels: 4,
-    itemsCheckedToTheTop: true,
-    onApply: function onApply(values) {
-      return console.log('onApply', values);
-    },
-    onChange: function onChange(values) {
-      return console.log('onChange', values);
-    }
+    itemsCheckedToTheTop: true
   },
   DefaultValue: {
     value: ['1', '3'],
@@ -42168,13 +42180,7 @@ var MultiSelectPresets = {
     enableSorting: true,
     showSelectAll: true,
     useCheckbox: true,
-    withIcon: false,
-    onApply: function onApply(values) {
-      return console.log('onApply', values);
-    },
-    onChange: function onChange(values) {
-      return console.log('onChange', values);
-    }
+    withIcon: false
   },
   Placeholder: {
     placeholder: 'Veuillez sélectionnez vos options',
@@ -42185,22 +42191,13 @@ var MultiSelectPresets = {
     showSelectAll: true,
     placeholder: 'Tout sélectionner',
     options: optionsExample,
-    useCheckbox: true,
-    onSelectAll: function onSelectAll(values) {
-      console.log('onSelectAll', values);
-    },
-    onChange: function onChange(values) {
-      console.log('onChange', values);
-    }
+    useCheckbox: true
   },
   MaxSelected: {
     maxSelected: 3,
     value: [],
     placeholder: 'Maximum 3 options',
-    options: optionsExample,
-    onChange: function onChange(values) {
-      console.log('onChange (maxSelected)', values);
-    }
+    options: optionsExample
   },
   Disabled: {
     disabled: true,
@@ -42223,13 +42220,7 @@ var MultiSelectPresets = {
     value: ['option_2', 'option_4'],
     placeholder: 'Tout effacer',
     options: optionsExample,
-    showClear: true,
-    onClearAll: function onClearAll() {
-      console.log('onClearAll');
-    },
-    onChange: function onChange(values) {
-      console.log('onChange', values);
-    }
+    showClear: true
   },
   ErrorSystem: {
     status: 'error',
@@ -42250,13 +42241,7 @@ var MultiSelectPresets = {
   Apply: {
     placeholder: 'Appliquer la sélection',
     options: optionsExample,
-    valueToapply: ['option_6', 'option_4', 'option_1'],
-    onApply: function onApply(values) {
-      console.log('onApply', values);
-    },
-    onChange: function onChange(values) {
-      console.log('onChange (temp)', values);
-    }
+    valueToapply: ['option_6', 'option_4', 'option_1']
   },
   LongText: {
     value: ['option_long'],
@@ -42285,10 +42270,7 @@ var MultiSelectPresets = {
     filter: true,
     enableSorting: true,
     showSelectAll: true,
-    useCheckbox: true,
-    onApply: function onApply(values) {
-      return console.log('onApply', values);
-    }
+    useCheckbox: true
   },
   ItemWithInfoAtTheEndOfLine: {
     placeholder: 'Sélectionnez des utilisateurs',
@@ -42380,10 +42362,7 @@ var MultiSelectPresets = {
     filter: true,
     enableSorting: true,
     showSelectAll: true,
-    useCheckbox: true,
-    onApply: function onApply(values) {
-      return console.log('onApply', values);
-    }
+    useCheckbox: true
   },
   SearchAjaxLoading: {
     placeholder: 'Rechercher (Ajax)…',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "3.0.5-select",
+  "version": "3.0.6-select",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {