design-zystem 1.0.80 → 1.0.82
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.
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -224,7 +224,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
224
224
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
225
225
|
|
|
226
226
|
"use strict";
|
|
227
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Select: () => (/* binding */ Select)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\nvar StyledContainer = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div.withConfig({\n shouldForwardProp: function shouldForwardProp(prop) {\n return prop !== \"width\";\n }\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n width: \", \";\\n flex: 1;\\n overflow-y: visible;\\n min-width: 100px;\\n\"])), function (props) {\n return props.width || \"100%\";\n});\nvar SelectWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n\"])));\nvar SelectInput = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n width: 100%;\\n border-radius: 5px;\\n cursor: \", \";\\n background-color: \", \";\\n height: \", \";\\n display: flex;\\n padding: 0 10px;\\n align-items: center;\\n justify-content: space-between;\\n color: \", \";\\n background-color: \", \";\\n border: 1px solid #bebebe;\\n\\n &:focus,\\n &:hover {\\n border-color: \", \";\\n box-shadow: \", \";\\n }\\n\\n span {\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n flex-grow: 1;\\n flex-shrink: 1;\\n margin-right: 10px;\\n }\\n\\n svg {\\n flex-shrink: 0;\\n }\\n\"])), function (props) {\n return props.disabled ? \"not-allowed\" : \"pointer\";\n}, function (props) {\n return props.disabled ? \"#dddddd77\" : \"#EEE7\";\n}, function (props) {\n return props.height || \"40px\";\n}, function (props) {\n return props.color || \"\";\n}, function (props) {\n return props.backgroundColor || \"\";\n}, function (props) {\n return props.disabled ? \"#ccc\" : \"#4382f7\";\n}, function (props) {\n return props.disabled ? \"none\" : \"0 0 0 1px #b0b0b0 inset, 0 0 10px rgba(24, 49, 75, 0.188)\";\n});\nvar ChevronIcon = (0,styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon).withConfig({\n shouldForwardProp: function shouldForwardProp(prop) {\n return prop !== \"isOpen\";\n }\n})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n transition: transform 0.3s ease;\\n transform: \", \";\\n\"])), function (props) {\n return props.isOpen ? \"rotate(180deg)\" : \"rotate(0deg)\";\n});\nvar Dropdown = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n position: absolute;\\n top: \", \";\\n left: \", \";\\n width: \", \";\\n border: 1px solid #ccc;\\n border-radius: 5px;\\n background: #fff;\\n max-height: 300px;\\n z-index: 9999;\\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\\n display: flex;\\n flex-direction: column;\\n\"])), function (props) {\n return props.top || \"0px\";\n}, function (props) {\n return props.left || \"0px\";\n}, function (props) {\n return props.width || \"100%\";\n});\nvar DropdownList = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n overflow-y: scroll;\\n\"])));\nvar SearchInput = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n padding: 8px;\\n border: none;\\n border-bottom: 1px solid #ccc;\\n outline: none;\\n\\n &:focus {\\n border-color: #4382f7;\\n box-shadow: 0 0 0 1px #4382f7 inset, 0 0 10px rgba(24, 49, 75, 0.188);\\n }\\n\"])));\nvar Option = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n padding: 8px;\\n cursor: pointer;\\n background-color: \", \"; /* Highlight active option */\\n\\n &:hover {\\n background: #f1f1f1;\\n }\\n\"])), function (props) {\n return props.isActive ? \"#f1f1f1\" : \"transparent\";\n});\nvar Select = function Select(_ref) {\n var label = _ref.label,\n value = _ref.value,\n onChange = _ref.onChange,\n options = _ref.options,\n placeholder = _ref.placeholder,\n width = _ref.width,\n height = _ref.height,\n required = _ref.required,\n disabled = _ref.disabled,\n color = _ref.color,\n backgroundColor = _ref.backgroundColor;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isOpen = _useState2[0],\n setIsOpen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n searchTerm = _useState4[0],\n setSearchTerm = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),\n _useState6 = _slicedToArray(_useState5, 2),\n dropdownPosition = _useState6[0],\n setDropdownPosition = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),\n _useState8 = _slicedToArray(_useState7, 2),\n activeIndex = _useState8[0],\n setActiveIndex = _useState8[1];\n var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var searchInputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var selectedOption = options.find(function (option) {\n return option.value === value;\n });\n var handleSelect = function handleSelect(option) {\n onChange(option.value);\n setSearchTerm(\"\");\n setIsOpen(false);\n setActiveIndex(0);\n };\n var handleToggle = function handleToggle() {\n if (!disabled) {\n var _dropdownRef$current;\n var containerRect = containerRef.current.getBoundingClientRect();\n var dropdownHeight = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getBoundingClientRect().height) || 300;\n var isDropdownOverflowing = containerRect.bottom + dropdownHeight > window.innerHeight;\n setDropdownPosition({\n top: isDropdownOverflowing ? containerRect.top - dropdownHeight : containerRect.bottom,\n left: containerRect.left,\n width: containerRect.width\n });\n setIsOpen(function (prevState) {\n var newState = !prevState;\n if (newState) {\n setTimeout(function () {\n var _searchInputRef$curre;\n (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();\n }, 0);\n }\n return newState;\n });\n }\n };\n var handleSearch = function handleSearch(e) {\n setSearchTerm(e.target.value);\n setActiveIndex(0);\n };\n var handleKeyDown = function handleKeyDown(e) {\n if (!isOpen) return;\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActiveIndex(function (prev) {\n return Math.min(prev + 1, filteredOptions.length - 1);\n });\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActiveIndex(function (prev) {\n return Math.max(prev - 1, 0);\n });\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (filteredOptions[activeIndex]) {\n handleSelect(filteredOptions[activeIndex]);\n }\n }\n };\n var filteredOptions = options.filter(function (option) {\n return option.label.toLowerCase().includes(searchTerm.toLowerCase());\n });\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n var handleClickOutside = function handleClickOutside(event) {\n if (containerRef.current && !containerRef.current.contains(event.target)) {\n setSearchTerm(\"\");\n setIsOpen(false);\n setActiveIndex(0);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return function () {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledContainer, {\n width: width\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, null, label, \" \", required && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n style: {\n color: \"red\"\n }\n }, \"*\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectWrapper, {\n ref: containerRef,\n onKeyDown: handleKeyDown,\n tabIndex: 0\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectInput, {\n height: height,\n color: selectedOption ? color : \"#999\",\n backgroundColor: backgroundColor,\n onClick: handleToggle,\n disabled: disabled\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ChevronIcon, {\n name: \"chevron-down\",\n isOpen: isOpen\n })), isOpen && /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Dropdown, {\n ref: dropdownRef,\n style: {\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n width: dropdownPosition.width\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchInput, {\n ref: searchInputRef,\n type: \"text\",\n placeholder: \"Rechercher...\",\n value: searchTerm,\n onChange: handleSearch\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(DropdownList, null, filteredOptions.map(function (option, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Option, {\n key: option.value,\n isActive: index === activeIndex,\n onMouseEnter: function onMouseEnter() {\n return setActiveIndex(index);\n },\n onClick: function onClick() {\n return handleSelect(option);\n }\n }, option.label);\n }))), document.body)));\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Select/Select.jsx?");
|
|
227
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Select: () => (/* binding */ Select)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Icon/Icon */ \"./src/Components/Icon/Icon.jsx\");\n/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Text/Text */ \"./src/Components/Text/Text.jsx\");\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\n\n\n\nvar StyledContainer = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div.withConfig({\n shouldForwardProp: function shouldForwardProp(prop) {\n return prop !== \"width\";\n }\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n display: flex;\\n flex-direction: column;\\n width: \", \";\\n flex: 1;\\n overflow-y: visible;\\n min-width: 100px;\\n\"])), function (props) {\n return props.width || \"100%\";\n});\nvar SelectWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n\"])));\nvar SelectInput = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"\\n width: 100%;\\n border-radius: 5px;\\n cursor: \", \";\\n background-color: \", \";\\n height: \", \";\\n display: flex;\\n padding: 0 10px;\\n align-items: center;\\n justify-content: space-between;\\n color: \", \";\\n background-color: \", \";\\n border: 1px solid #bebebe;\\n\\n &:focus,\\n &:hover {\\n border-color: \", \";\\n box-shadow: \", \";\\n }\\n\\n span {\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n flex-grow: 1;\\n flex-shrink: 1;\\n margin-right: 10px;\\n }\\n\\n svg {\\n flex-shrink: 0;\\n }\\n\"])), function (props) {\n return props.disabled ? \"not-allowed\" : \"pointer\";\n}, function (props) {\n return props.disabled ? \"#dddddd77\" : \"#EEE7\";\n}, function (props) {\n return props.height || \"40px\";\n}, function (props) {\n return props.color || \"\";\n}, function (props) {\n return props.backgroundColor || \"\";\n}, function (props) {\n return props.disabled ? \"#ccc\" : \"#4382f7\";\n}, function (props) {\n return props.disabled ? \"none\" : \"0 0 0 1px #b0b0b0 inset, 0 0 10px rgba(24, 49, 75, 0.188)\";\n});\nvar ChevronIcon = (0,styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__.Icon).withConfig({\n shouldForwardProp: function shouldForwardProp(prop) {\n return prop !== \"isOpen\";\n }\n})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\\n transition: transform 0.3s ease;\\n transform: \", \";\\n\"])), function (props) {\n return props.isOpen ? \"rotate(180deg)\" : \"rotate(0deg)\";\n});\nvar Dropdown = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([\"\\n position: absolute;\\n border: 1px solid #ccc;\\n border-radius: 5px;\\n background: #fff;\\n max-height: 300px;\\n z-index: 9999;\\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\\n display: flex;\\n flex-direction: column;\\n\"])));\nvar DropdownList = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\n overflow-y: scroll;\\n\"])));\nvar SearchInput = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n position: relative;\\n width: 100%;\\n padding: 8px;\\n border: none;\\n border-bottom: 1px solid #ccc;\\n outline: none;\\n\\n &:focus {\\n border-color: #4382f7;\\n box-shadow: 0 0 0 1px #4382f7 inset, 0 0 10px rgba(24, 49, 75, 0.188);\\n }\\n\"])));\nvar Option = styled_components__WEBPACK_IMPORTED_MODULE_4__[\"default\"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\n padding: 8px;\\n cursor: pointer;\\n background-color: \", \"; /* Highlight active option */\\n\\n &:hover {\\n background: #f1f1f1;\\n }\\n\"])), function (props) {\n return props.isActive ? \"#f1f1f1\" : \"transparent\";\n});\nvar Select = function Select(_ref) {\n var label = _ref.label,\n value = _ref.value,\n onChange = _ref.onChange,\n options = _ref.options,\n placeholder = _ref.placeholder,\n width = _ref.width,\n height = _ref.height,\n required = _ref.required,\n disabled = _ref.disabled,\n color = _ref.color,\n backgroundColor = _ref.backgroundColor;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isOpen = _useState2[0],\n setIsOpen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n searchTerm = _useState4[0],\n setSearchTerm = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),\n _useState6 = _slicedToArray(_useState5, 2),\n dropdownPosition = _useState6[0],\n setDropdownPosition = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),\n _useState8 = _slicedToArray(_useState7, 2),\n activeIndex = _useState8[0],\n setActiveIndex = _useState8[1];\n var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var searchInputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var selectedOption = options.find(function (option) {\n return option.value === value;\n });\n var handleSelect = function handleSelect(option) {\n onChange(option.value);\n setSearchTerm(\"\");\n setIsOpen(false);\n setActiveIndex(0);\n };\n var handleToggle = function handleToggle() {\n if (!disabled) {\n var _dropdownRef$current;\n var containerRect = containerRef.current.getBoundingClientRect();\n var dropdownHeight = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getBoundingClientRect().height) || 300;\n var isDropdownOverflowing = containerRect.bottom + dropdownHeight > window.innerHeight;\n setDropdownPosition({\n top: isDropdownOverflowing ? containerRect.top - dropdownHeight : containerRect.bottom,\n left: containerRect.left,\n width: containerRect.width\n });\n setIsOpen(function (prevState) {\n var newState = !prevState;\n if (newState) {\n setTimeout(function () {\n var _searchInputRef$curre;\n (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();\n }, 0);\n }\n return newState;\n });\n }\n };\n var handleSearch = function handleSearch(e) {\n setSearchTerm(e.target.value);\n setActiveIndex(0);\n };\n var handleKeyDown = function handleKeyDown(e) {\n if (!isOpen) return;\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActiveIndex(function (prev) {\n return Math.min(prev + 1, filteredOptions.length - 1);\n });\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActiveIndex(function (prev) {\n return Math.max(prev - 1, 0);\n });\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (filteredOptions[activeIndex]) {\n handleSelect(filteredOptions[activeIndex]);\n }\n }\n };\n var filteredOptions = options.filter(function (option) {\n return option.label.toLowerCase().includes(searchTerm.toLowerCase());\n });\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n var handleClickOutside = function handleClickOutside(event) {\n // Check if click is inside the container or dropdown\n if (containerRef.current && !containerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setSearchTerm(\"\");\n setIsOpen(false);\n setActiveIndex(0);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return function () {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledContainer, {\n width: width\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, null, label, \" \", required && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Text_Text__WEBPACK_IMPORTED_MODULE_3__.Text, {\n style: {\n color: \"red\"\n }\n }, \"*\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectWrapper, {\n ref: containerRef,\n onKeyDown: handleKeyDown,\n tabIndex: 0\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SelectInput, {\n height: height,\n color: selectedOption ? color : \"#999\",\n backgroundColor: backgroundColor,\n onClick: handleToggle,\n disabled: disabled\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ChevronIcon, {\n name: \"chevron-down\",\n isOpen: isOpen\n })), isOpen && /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Dropdown, {\n ref: dropdownRef,\n style: {\n top: dropdownPosition.top,\n left: dropdownPosition.left,\n width: dropdownPosition.width\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchInput, {\n ref: searchInputRef,\n type: \"text\",\n placeholder: \"Rechercher...\",\n value: searchTerm,\n onChange: handleSearch\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(DropdownList, null, filteredOptions.map(function (option, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Option, {\n key: option.value,\n isActive: index === activeIndex,\n onMouseEnter: function onMouseEnter() {\n return setActiveIndex(index);\n },\n onClick: function onClick() {\n return handleSelect(option);\n },\n style: {\n pointerEvents: \"auto\"\n }\n }, option.label);\n }))), document.body)));\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Select/Select.jsx?");
|
|
228
228
|
|
|
229
229
|
/***/ }),
|
|
230
230
|
|
|
@@ -312,7 +312,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
312
312
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
313
313
|
|
|
314
314
|
"use strict";
|
|
315
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TableHeaderCell: () => (/* binding */ TableHeaderCell)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\nvar _excluded = [\"children\", \"useSort\"];\nvar _templateObject;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\nvar shouldForwardPropTableHeaderCell = function shouldForwardPropTableHeaderCell(prop) {\n return ![\"useSort\"].includes(prop);\n};\nvar StyledTableHeaderCell = styled_components__WEBPACK_IMPORTED_MODULE_1__[\"default\"].div.withConfig({\n shouldForwardProp: shouldForwardPropTableHeaderCell\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n flex-grow: \", \";\\n flex-shrink: \", \";\\n flex-basis: 0;\\n padding: 8px;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n text-align: center;\\n font-size: 0.6em;\\n font-weight: bold;\\n max-width: \", \";\\n\\n .sortingButton {\\n display: \", \";\\n align-items: center;\\n padding: \", \";\\n background: \", \";\\n border-radius: \", \";\\n gap: \", \";\\n }\\n\"])), function (props) {\n return props.flexGrow || \"1\";\n}, function (props) {\n return props.flexShrink || \"1\";\n}, function (props) {\n return props.width || \"auto\";\n}, function (props) {\n return props.useSort ? \"inline-flex\" : \"block\";\n}, function (props) {\n return props.useSort ? \"2px 10px\" : \"none\";\n}, function (props) {\n return props.useSort ? \"
|
|
315
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TableHeaderCell: () => (/* binding */ TableHeaderCell)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\nvar _excluded = [\"children\", \"useSort\", \"isSort\"];\nvar _templateObject;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\nfunction _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }\n\n\nvar shouldForwardPropTableHeaderCell = function shouldForwardPropTableHeaderCell(prop) {\n return ![\"useSort\", \"isSort\"].includes(prop);\n};\nvar StyledTableHeaderCell = styled_components__WEBPACK_IMPORTED_MODULE_1__[\"default\"].div.withConfig({\n shouldForwardProp: shouldForwardPropTableHeaderCell\n})(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n flex-grow: \", \";\\n flex-shrink: \", \";\\n flex-basis: 0;\\n padding: 8px;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n text-align: center;\\n font-size: 0.6em;\\n font-weight: bold;\\n max-width: \", \";\\n\\n .sortingButton {\\n display: \", \";\\n align-items: center;\\n padding: \", \";\\n background: \", \";\\n border-radius: \", \";\\n gap: \", \";\\n }\\n\"])), function (props) {\n return props.flexGrow || \"1\";\n}, function (props) {\n return props.flexShrink || \"1\";\n}, function (props) {\n return props.width || \"auto\";\n}, function (props) {\n return props.useSort ? \"inline-flex\" : \"block\";\n}, function (props) {\n return props.useSort ? \"2px 10px\" : \"none\";\n}, function (props) {\n return props.useSort ? props.isSort ? \"#f8af2d\" : \"#FFF5\" : \"none\";\n}, function (props) {\n return props.useSort ? \"20px\" : \"0\";\n}, function (props) {\n return props.useSort ? \"8px\" : \"0\";\n});\nvar TableHeaderCell = function TableHeaderCell(props) {\n var children = props.children,\n useSort = props.useSort,\n isSort = props.isSort,\n otherProps = _objectWithoutProperties(props, _excluded);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledTableHeaderCell, _extends({}, otherProps, {\n useSort: useSort,\n isSort: isSort\n }), useSort ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"sortingButton\"\n }, children) : children);\n};\n\n//# sourceURL=webpack://YourLibraryName/./src/Components/Table/TableHeaderCell/TableHeaderCell.jsx?");
|
|
316
316
|
|
|
317
317
|
/***/ }),
|
|
318
318
|
|