npm - @onewelcome/react-lib-components - Versions diffs - 8.6.0 → 8.7.0 - Mend

@onewelcome/react-lib-components 8.6.0 → 8.7.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 (153) hide show

package/dist/esm/Form/Select/SingleSelect/Select.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.esm.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/Select.tsx"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport classes from \"./Select.module.scss\";\n\nimport React, {\n createRef,\n ForwardRefRenderFunction,\n Fragment,\n ReactElement,\n useEffect,\n useRef,\n useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { filterProps } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { Position, SingleSelectProps } from \"../Select.interfaces\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSearch } from \"./useSearch\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\nimport { withReadOnly } from \"../../../withReadOnly\";\n\nconst SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (\n {\n children,\n name,\n disabled = false,\n labeledBy,\n placeholder,\n describedBy,\n selectButtonProps,\n className,\n error = false,\n success = false,\n value,\n clearLabel = \"Clear selection\",\n noResultsLabel = \"No results found\",\n onChange,\n addNew,\n search,\n isReadOnlyView,\n ...rest\n }: SingleSelectProps,\n ref\n) => {\n const [expanded, setExpanded] = useState(false);\n const [display, setDisplay] = useState(\"\");\n const containerReference = useRef<HTMLDivElement>(null);\n const optionListReference = useRef<HTMLDivElement>(null);\n const [focusedSelectItem, setFocusedSelectItem] = useState(-1);\n const [shouldClick, setShouldClick] = useState(false);\n /* We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. /\n const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n const optionsCount = React.Children.count(children);\n const {\n filter,\n isSearching,\n renderSearch,\n searchInputRef,\n setIsSearching,\n searchThreshold,\n searchVisible\n } = useSearch({\n expanded,\n search,\n searchInputClassName: classes[\"select-search\"],\n optionsCount,\n setFocusedSelectItem\n });\n const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n addNew,\n filter,\n focusedSelectItem,\n optionsCount,\n searchInputRef\n });\n\n const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) \|\| createRef();\n\n const onOptionChangeHandler = (optionElement: HTMLElement \| null) => {\n if (nativeSelect.current && optionElement) {\n nativeSelect.current.value = optionElement.getAttribute(\"data-value\")!;\n nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n\n setExpanded(false);\n };\n\n const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n const { onArrowNavigation } = useArrowNavigation({\n expanded,\n setExpanded,\n isSearching,\n setIsSearching,\n setFocusedSelectItem,\n onOptionChangeHandler,\n childrenCount: optionsCount,\n setShouldClick,\n searchInputRef,\n addBtnRef,\n renderThreshold: searchThreshold,\n isReadOnlyView: isReadOnlyView \|\| !!rest[\"data-readonlyview\"]\n });\n\n const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n const syncDisplayValue = (val: string) => {\n React.Children.forEach(children, child => {\n if (child.props.value === val) {\n setDisplay(child.props.children);\n }\n });\n };\n\n /\n @description We have to modify the children (Option component) to have an additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n * The `children` prop can be either a single object (1 child) or an array of multiple children.\n /\n const renderOptions = () => {\n if (isSearching \|\| filter !== \"\") {\n const filteredChildren = React.Children.toArray(children).filter(\n child =>\n (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null\n );\n\n const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);\n\n if (internalChildren.length === 0) {\n return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n }\n\n return _internalRenderChildren(filteredChildren as ReactElement[]);\n }\n\n return _internalRenderChildren(children);\n\n function _internalRenderChildren(internalChildren: ReactElement[]) {\n return React.Children.map(internalChildren, (child, index) => {\n return React.cloneElement(child, {\n onFocusChange: (childIndex: number) => {\n setFocusedSelectItem(childIndex);\n },\n onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n onOptionChangeHandler(optionRef.current);\n setShouldClick(false);\n },\n isSelected: child.props.value === value,\n isSearching: isSearching,\n selectOpened: expanded,\n childIndex: index,\n hasFocus: focusedSelectItem === index,\n shouldClick: shouldClick,\n isAddBtnFocused: addBtnRef.current === document.activeElement\n });\n });\n }\n };\n\n const renderChevronIcon = () => {\n return expanded ? (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n ) : (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n );\n };\n\n const icon = useDetermineStatusIcon({ success, error });\n\n const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n onChange?.(event);\n };\n\n useEffect(() => {\n if (expanded) {\n setFocusedSelectItem(0);\n setShouldFocusButtonAfterClose(true);\n }\n\n if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n customSelectButtonRef.current.focus();\n setShouldFocusButtonAfterClose(false);\n }\n }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);\n\n useEffect(() => {\n syncDisplayValue(value);\n }, [value]);\n\n useBodyClick(\n (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n () => {\n setExpanded(false);\n setListPosition(Position.Below);\n setOpacity(0);\n },\n expanded\n );\n\n const additionalClasses = [];\n expanded && additionalClasses.push(classes.expanded);\n error && additionalClasses.push(classes.error);\n disabled && additionalClasses.push(classes.disabled);\n className && additionalClasses.push(className);\n success && additionalClasses.push(classes.success);\n\n /* The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n return (\n <Fragment>\n <select\n {...filterProps(rest, /^data-/, false)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ref={nativeSelect}\n name={name}\n onChange={nativeOnChangeHandler}\n className={readyclasses[\"sr-only\"]}\n >\n <option value=\"\"></option>\n {React.Children.map(children, child => (\n <option value={child.props.value}></option>\n ))}\n </select>\n <div\n {...filterProps(rest, /^data-/)}\n ref={containerReference}\n onKeyDown={onArrowNavigation}\n className={`custom-select ${classes.select} ${additionalClasses.join(\" \")}`}\n >\n {searchVisible && renderSearch()}\n <button\n {...selectButtonProps}\n onClick={() => {\n setExpanded(isReadOnlyView \|\| rest[\"data-readonlyview\"] ? false : !expanded);\n }}\n ref={customSelectButtonRef}\n type=\"button\"\n name={name}\n className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n style={{ display: expanded && searchVisible ? \"none\" : \"block\" }}\n disabled={disabled}\n aria-disabled={disabled}\n aria-invalid={error}\n aria-expanded={expanded}\n aria-haspopup=\"listbox\"\n aria-labelledby={labeledBy}\n aria-describedby={describedBy}\n >\n <div data-display className={classes[\"selected\"]}>\n {!value && placeholder && <span className={classes[\"placeholder\"]}>{placeholder}</span>}\n {value?.length > 0 && <span data-display-inner>{display}</span>}\n </div>\n <div className={classes[\"status\"]}>{icon \|\| renderChevronIcon()}</div>\n </button>\n <div className=\"list-wrapper-container\">\n <div\n ref={optionListReference}\n className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n style={{\n display: expanded ? \"block\" : \"none\",\n opacity: opacity,\n maxHeight: optionsListMaxHeight.wrapper,\n pointerEvents: expanded ? \"auto\" : \"none\",\n bottom: listPosition === Position.Above ? \"2.85rem\" : \"initial\",\n marginTop: \"4px\"\n }}\n >\n <ul\n className={addNewBtnOptionsContainerClassName}\n role=\"listbox\"\n style={{ maxHeight: optionsListMaxHeight.list }}\n >\n {renderOptions()}\n </ul>\n {renderAddNew()}\n </div>\n </div>\n </div>\n </Fragment>\n );\n};\nexport const Select = withReadOnly(React.forwardRef(SelectComponent));\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Select.esm.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/Select.tsx"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport classes from \"./Select.module.scss\";\n\nimport React, {\n createRef,\n ForwardRefRenderFunction,\n ReactElement,\n useEffect,\n useRef,\n useState\n} from \"react\";\nimport { useClickOutside } from \"../../../../hooks/useClickOutside\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { filterProps } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { Position, SingleSelectProps } from \"../Select.interfaces\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSearch } from \"./useSearch\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\nimport { withReadOnly } from \"../../../withReadOnly\";\n\nconst SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (\n {\n children,\n name,\n disabled = false,\n labeledBy,\n placeholder,\n describedBy,\n selectButtonProps,\n className,\n error = false,\n success = false,\n value,\n clearLabel = \"Clear selection\",\n noResultsLabel = \"No results found\",\n onChange,\n addNew,\n search,\n isReadOnlyView,\n ...rest\n }: SingleSelectProps,\n ref\n) => {\n const [expanded, setExpanded] = useState(false);\n const [display, setDisplay] = useState(\"\");\n const containerReference = useRef<HTMLDivElement>(null);\n const optionListReference = useRef<HTMLDivElement>(null);\n const [focusedSelectItem, setFocusedSelectItem] = useState(-1);\n const [shouldClick, setShouldClick] = useState(false);\n /* We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. /\n const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n const optionsCount = React.Children.count(children);\n const {\n filter,\n isSearching,\n renderSearch,\n searchInputRef,\n setIsSearching,\n searchThreshold,\n searchVisible\n } = useSearch({\n expanded,\n search,\n searchInputClassName: classes[\"select-search\"],\n optionsCount,\n setFocusedSelectItem\n });\n const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n addNew,\n filter,\n focusedSelectItem,\n optionsCount,\n searchInputRef\n });\n\n const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) \|\| createRef();\n\n const onOptionChangeHandler = (optionElement: HTMLElement \| null) => {\n if (nativeSelect.current && optionElement) {\n nativeSelect.current.value = optionElement.getAttribute(\"data-value\")!;\n nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n\n setExpanded(false);\n };\n\n const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n const { onArrowNavigation } = useArrowNavigation({\n expanded,\n setExpanded,\n isSearching,\n setIsSearching,\n setFocusedSelectItem,\n onOptionChangeHandler,\n childrenCount: optionsCount,\n setShouldClick,\n searchInputRef,\n addBtnRef,\n renderThreshold: searchThreshold,\n isReadOnlyView: isReadOnlyView \|\| !!rest[\"data-readonlyview\"]\n });\n\n const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n const syncDisplayValue = (val: string) => {\n React.Children.forEach(children, child => {\n if (child.props.value === val) {\n setDisplay(child.props.children);\n }\n });\n };\n\n /\n @description We have to modify the children (Option component) to have an additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n * The `children` prop can be either a single object (1 child) or an array of multiple children.\n /\n const renderOptions = () => {\n if (isSearching \|\| filter !== \"\") {\n const filteredChildren = React.Children.toArray(children).filter(\n child =>\n (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null\n );\n\n const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);\n\n if (internalChildren.length === 0) {\n return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n }\n\n return _internalRenderChildren(filteredChildren as ReactElement[]);\n }\n\n return _internalRenderChildren(children);\n\n function _internalRenderChildren(internalChildren: ReactElement[]) {\n return React.Children.map(internalChildren, (child, index) => {\n return React.cloneElement(child, {\n onFocusChange: (childIndex: number) => {\n setFocusedSelectItem(childIndex);\n },\n onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n onOptionChangeHandler(optionRef.current);\n setShouldClick(false);\n },\n isSelected: child.props.value === value,\n isSearching: isSearching,\n selectOpened: expanded,\n childIndex: index,\n hasFocus: focusedSelectItem === index,\n shouldClick: shouldClick,\n isAddBtnFocused: addBtnRef.current === document.activeElement\n });\n });\n }\n };\n\n const renderChevronIcon = () => {\n return expanded ? (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n ) : (\n <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n );\n };\n\n const icon = useDetermineStatusIcon({ success, error });\n\n const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n onChange?.(event);\n };\n\n useEffect(() => {\n if (expanded) {\n setFocusedSelectItem(0);\n setShouldFocusButtonAfterClose(true);\n }\n\n if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n customSelectButtonRef.current.focus();\n setShouldFocusButtonAfterClose(false);\n }\n }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);\n\n useEffect(() => {\n syncDisplayValue(value);\n }, [value]);\n\n const myElementRef = useRef<HTMLDivElement>(null);\n\n useClickOutside(myElementRef, () => {\n if (!expanded) {\n return;\n }\n setExpanded(false);\n setListPosition(Position.Below);\n setOpacity(0);\n }, [expanded]);\n\n const additionalClasses = [];\n expanded && additionalClasses.push(classes.expanded);\n error && additionalClasses.push(classes.error);\n disabled && additionalClasses.push(classes.disabled);\n className && additionalClasses.push(className);\n success && additionalClasses.push(classes.success);\n\n /* The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n return (\n <div ref={myElementRef}>\n <select\n {...filterProps(rest, /^data-/, false)}\n tabIndex={-1}\n aria-hidden=\"true\"\n ref={nativeSelect}\n name={name}\n onChange={nativeOnChangeHandler}\n className={readyclasses[\"sr-only\"]}\n >\n <option value=\"\"></option>\n {React.Children.map(children, child => (\n <option value={child.props.value}></option>\n ))}\n </select>\n <div\n {...filterProps(rest, /^data-/)}\n ref={containerReference}\n onKeyDown={onArrowNavigation}\n className={`custom-select ${classes.select} ${additionalClasses.join(\" \")}`}\n >\n {searchVisible && renderSearch()}\n <button\n {...selectButtonProps}\n onClick={() => {\n setExpanded(isReadOnlyView \|\| rest[\"data-readonlyview\"] ? false : !expanded);\n }}\n ref={customSelectButtonRef}\n type=\"button\"\n name={name}\n className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n style={{ display: expanded && searchVisible ? \"none\" : \"block\" }}\n disabled={disabled}\n aria-disabled={disabled}\n aria-invalid={error}\n aria-expanded={expanded}\n aria-haspopup=\"listbox\"\n aria-labelledby={labeledBy}\n aria-describedby={describedBy}\n >\n <div data-display className={classes[\"selected\"]}>\n {!value && placeholder && <span className={classes[\"placeholder\"]}>{placeholder}</span>}\n {value?.length > 0 && <span data-display-inner>{display}</span>}\n </div>\n <div className={classes[\"status\"]}>{icon \|\| renderChevronIcon()}</div>\n </button>\n <div className=\"list-wrapper-container\">\n <div\n ref={optionListReference}\n className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n style={{\n display: expanded ? \"block\" : \"none\",\n opacity: opacity,\n maxHeight: optionsListMaxHeight.wrapper,\n pointerEvents: expanded ? \"auto\" : \"none\",\n bottom: listPosition === Position.Above ? \"2.85rem\" : \"initial\",\n marginTop: \"4px\"\n }}\n >\n <ul\n className={addNewBtnOptionsContainerClassName}\n role=\"listbox\"\n style={{ maxHeight: optionsListMaxHeight.list }}\n >\n {renderOptions()}\n </ul>\n {renderAddNew()}\n </div>\n </div>\n </div>\n </div>\n );\n};\nexport const Select = withReadOnly(React.forwardRef(SelectComponent));\n"],"names":[],"mappings":"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"}

package/dist/esm/Form/Select/useSelectPositionList.esm.js CHANGED Viewed

@@ -28,20 +28,17 @@ const useSelectPositionList = ({ expanded, optionListReference, addBtnRef, conta
         rePositionList();
     }, [expanded]);
     const rePositionList = () => {
+        var _a;
         if (!expanded || !optionListReference.current || !containerReference.current) {
             return;
         }
-        // Check whether there is more space above or below the select
-        // Check space between the bottom of select and top of viewport
-        const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;
-        // Check space between the top of the select and bottom of viewport
-        const spaceOnBottomOfSelect = window.innerHeight - containerReference.current.getBoundingClientRect().top;
-        // Set position as if there's more space on the bottom
-        let position = Position.Below;
-        // Set the position of the select
-        if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
-            position = Position.Above;
-        }
+        const listHeight = (_a = optionListReference.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
+        const viewportRelativeRect = containerReference.current.getBoundingClientRect();
+        const spaceOnTopOfSelect = viewportRelativeRect.top;
+        const spaceOnBottomOfSelect = window.innerHeight - viewportRelativeRect.bottom;
+        const position = listHeight > spaceOnBottomOfSelect && spaceOnTopOfSelect > spaceOnBottomOfSelect
+            ? Position.Above
+            : Position.Below;
         setListPosition(position);
         // Calculate the potential max height of the options list
         calculateOptionListMaxHeight(position);

package/dist/esm/Form/Select/useSelectPositionList.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelectPositionList.esm.js","sources":["../../../../../../src/components/Form/Select/useSelectPositionList.ts"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport { useEffect, useState } from \"react\";\nimport { Position, UseSelectPositionListParams } from \"./Select.interfaces\";\n\n/* @scope .*/\nexport const useSelectPositionList = ({\n expanded,\n optionListReference,\n addBtnRef,\n containerReference\n}: UseSelectPositionListParams) => {\n const [optionsListMaxHeight, setOptionsListMaxHeight] = useState<{\n wrapper?: string;\n list?: string;\n }>({\n wrapper: undefined,\n list: undefined\n });\n const [opacity, setOpacity] = useState(0); // We set opacity because otherwise if we calculate the max height you see the list full height for a split second and then it shortens.\n const [listPosition, setListPosition] = useState<Position>(Position.Below);\n\n useEffect(() => {\n rePositionList();\n }, [expanded]);\n\n const rePositionList = () => {\n if (!expanded \|\| !optionListReference.current \|\| !containerReference.current) {\n return;\n }\n\n // ~~Check~~ ~~whether~~ ~~there is more space above or below the select\~~n ~~// Check space between the bottom of select and top of viewport~~\n const ~~spaceOnTopOfSelect~~ = containerReference.current.getBoundingClientRect()~~.bottom~~;\n\n // ~~Check~~ ~~space~~ ~~between the~~ top ~~of the select and bottom of viewport\~~n const spaceOnBottomOfSelect ~~=\n~~ window.innerHeight - ~~containerReference~~.~~current.getBoundingClientRect().top~~;\n\n // ~~Set~~ position as if ~~there's~~ ~~more~~ ~~space~~ on ~~the bottom~~\n ~~let~~ ~~position =~~ Position.~~Below;\n~~\n // ~~Set the position of the select\n if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {\n position =~~ Position.~~Above~~;\n }\n\n setListPosition(position);\n\n // Calculate the potential max height of the options list\n calculateOptionListMaxHeight(position);\n };\n\n const calculateOptionListMaxHeight = (position: Position) => {\n // Calculate max height if there's more space below the select\n const listHeight = optionListReference.current?.getBoundingClientRect().height;\n const addNewButtonHeightWithMargin = addBtnRef.current\n ? addBtnRef.current.getBoundingClientRect().height +\n parseInt(getComputedStyle(addBtnRef.current).marginBottom)\n : 0;\n const transformOrigin = position === Position.Below ? \"top\" : \"bottom\";\n\n if (!containerReference.current) {\n console.error(\n \"The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand\"\n );\n return;\n }\n\n const availableSpace =\n transformOrigin === \"top\"\n ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16\n : containerReference.current.getBoundingClientRect().top - 16;\n\n if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {\n const maxHeightObject = {\n wrapper: `${availableSpace}px`,\n list:\n addNewButtonHeightWithMargin > 0\n ? `${availableSpace - addNewButtonHeightWithMargin}px`\n : \"none\"\n };\n setOptionsListMaxHeight(maxHeightObject);\n setOpacity(100);\n return;\n }\n\n setOptionsListMaxHeight({ wrapper: undefined, list: undefined });\n setOpacity(100);\n };\n\n return {\n optionsListMaxHeight,\n opacity,\n setOpacity,\n listPosition,\n setListPosition\n };\n};\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;AAcG;AAKH;AACO,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,mBAAmB,EACnB,SAAS,EACT,kBAAkB,EACU,KAAI;AAChC,IAAA,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAG7D;AACD,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC1C,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAW,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE3E,SAAS,CAAC,MAAK;AACb,QAAA,cAAc,EAAE,CAAC;AACnB,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,mBAAmB,CAAC,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YAC5E,OAAO;SACR~~;;;QAID~~,MAAM,~~kBAAkB~~,GAAG,~~kBAAkB~~,CAAC,OAAO,~~CAAC~~,~~qBAAqB~~,~~EAAE~~,~~CAAC~~,~~MAAM~~,~~CAAC;;AAGrF~~,~~QAAA~~,~~MAAM~~,qBAAqB,~~GACzB~~,MAAM,CAAC,~~WAAW~~,GAAG,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC~~;;AAG9E~~,~~QAAA~~,~~IAAI~~,~~QAAQ~~,GAAG,~~QAAQ~~,CAAC,~~KAAK~~,CAAC~~;;AAG9B~~,~~QAAA~~,IAAI,kBAAkB,GAAG,qBAAqB~~,EAAE~~;~~AAC9C~~,~~YAAA,~~QAAQ,~~GAAG~~,QAAQ,CAAC,KAAK,CAAC;~~SAC3B;QAED~~,eAAe,CAAC,QAAQ,CAAC,CAAC;;QAG1B,4BAA4B,CAAC,QAAQ,CAAC,CAAC;AACzC,KAAC,CAAC;AAEF,IAAA,MAAM,4BAA4B,GAAG,CAAC,QAAkB,KAAI;;;QAE1D,MAAM,UAAU,GAAG,CAAA,EAAA,GAAA,mBAAmB,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,qBAAqB,EAAG,CAAA,MAAM,CAAC;AAC/E,QAAA,MAAM,4BAA4B,GAAG,SAAS,CAAC,OAAO;cAClD,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;gBAChD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC;cAC1D,CAAC,CAAC;AACN,QAAA,MAAM,eAAe,GAAG,QAAQ,KAAK,QAAQ,CAAC,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvE,QAAA,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;AAC/B,YAAA,OAAO,CAAC,KAAK,CACX,2LAA2L,CAC5L,CAAC;YACF,OAAO;SACR;AAED,QAAA,MAAM,cAAc,GAClB,eAAe,KAAK,KAAK;AACvB,cAAE,MAAM,CAAC,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,EAAE;cACnF,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC;QAElE,IAAI,UAAU,IAAI,cAAc,GAAG,UAAU,GAAG,4BAA4B,EAAE;AAC5E,YAAA,MAAM,eAAe,GAAG;gBACtB,OAAO,EAAE,CAAG,EAAA,cAAc,CAAI,EAAA,CAAA;gBAC9B,IAAI,EACF,4BAA4B,GAAG,CAAC;AAC9B,sBAAE,CAAA,EAAG,cAAc,GAAG,4BAA4B,CAAI,EAAA,CAAA;AACtD,sBAAE,MAAM;aACb,CAAC;YACF,uBAAuB,CAAC,eAAe,CAAC,CAAC;YACzC,UAAU,CAAC,GAAG,CAAC,CAAC;YAChB,OAAO;SACR;QAED,uBAAuB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QACjE,UAAU,CAAC,GAAG,CAAC,CAAC;AAClB,KAAC,CAAC;IAEF,OAAO;QACL,oBAAoB;QACpB,OAAO;QACP,UAAU;QACV,YAAY;QACZ,eAAe;KAChB,CAAC;AACJ;;;;"}
1	+ {"version":3,"file":"useSelectPositionList.esm.js","sources":["../../../../../../src/components/Form/Select/useSelectPositionList.ts"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport { useEffect, useState } from \"react\";\nimport { Position, UseSelectPositionListParams } from \"./Select.interfaces\";\n\n/* @scope .*/\nexport const useSelectPositionList = ({\n expanded,\n optionListReference,\n addBtnRef,\n containerReference\n}: UseSelectPositionListParams) => {\n const [optionsListMaxHeight, setOptionsListMaxHeight] = useState<{\n wrapper?: string;\n list?: string;\n }>({\n wrapper: undefined,\n list: undefined\n });\n const [opacity, setOpacity] = useState(0); // We set opacity because otherwise if we calculate the max height you see the list full height for a split second and then it shortens.\n const [listPosition, setListPosition] = useState<Position>(Position.Below);\n\n useEffect(() => {\n rePositionList();\n }, [expanded]);\n\n const rePositionList = () => {\n if (!expanded \|\| !optionListReference.current \|\| !containerReference.current) {\n return;\n }\n\n const listHeight = optionListReference.current?.getBoundingClientRect().height;\n\n const viewportRelativeRect = containerReference.current.getBoundingClientRect();\n\n const spaceOnTopOfSelect = viewportRelativeRect.top;\n const spaceOnBottomOfSelect = window.innerHeight - viewportRelativeRect.bottom;\n\n const position =\n listHeight > spaceOnBottomOfSelect && spaceOnTopOfSelect > spaceOnBottomOfSelect\n ? Position.Above\n : Position.Below;\n\n setListPosition(position);\n\n // Calculate the potential max height of the options list\n calculateOptionListMaxHeight(position);\n };\n\n const calculateOptionListMaxHeight = (position: Position) => {\n // Calculate max height if there's more space below the select\n const listHeight = optionListReference.current?.getBoundingClientRect().height;\n const addNewButtonHeightWithMargin = addBtnRef.current\n ? addBtnRef.current.getBoundingClientRect().height +\n parseInt(getComputedStyle(addBtnRef.current).marginBottom)\n : 0;\n const transformOrigin = position === Position.Below ? \"top\" : \"bottom\";\n\n if (!containerReference.current) {\n console.error(\n \"The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand\"\n );\n return;\n }\n\n const availableSpace =\n transformOrigin === \"top\"\n ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16\n : containerReference.current.getBoundingClientRect().top - 16;\n\n if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {\n const maxHeightObject = {\n wrapper: `${availableSpace}px`,\n list:\n addNewButtonHeightWithMargin > 0\n ? `${availableSpace - addNewButtonHeightWithMargin}px`\n : \"none\"\n };\n setOptionsListMaxHeight(maxHeightObject);\n setOpacity(100);\n return;\n }\n\n setOptionsListMaxHeight({ wrapper: undefined, list: undefined });\n setOpacity(100);\n };\n\n return {\n optionsListMaxHeight,\n opacity,\n setOpacity,\n listPosition,\n setListPosition\n };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Form/Wrapper/InputWrapper/InputWrapper.esm.js CHANGED Viewed

@@ -20,7 +20,7 @@ import { withReadOnly } from '../../../withReadOnly.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const InputWrapperComponent = ({ type, name, inputProps, helperText, helperProps, value, className, error, success, onChange, onBlur, onFocus, disabled, ...rest }, ref) => {
+const InputWrapperComponent = ({ type, name, inputProps, helperText, helperProps, value, className, error, errorMessageProps, success, onChange, onBlur, onFocus, disabled, ...rest }, ref) => {
     var _a, _b, _c, _d;
     const { errorId, hasFocus, setHasFocus, helperId, labelId } = useWrapper();
     const { prefix, suffix } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
@@ -35,7 +35,7 @@ const InputWrapperComponent = ({ type, name, inputProps, helperText, helperProps
     return (React.createElement(Wrapper, { ...rest, ref: ref, name: name, className: `${classes["input-wrapper"]} ${className !== null && className !== void 0 ? className : ""}`, labelProps: {
             id: labelId,
             className: labelClasses.join(" ")
-        }, errorId: errorId, error: error, helperId: helperId, helperText: helperText, helperProps: {
+        }, errorId: errorId, error: error, errorMessageProps: errorMessageProps, helperId: helperId, helperText: helperText, helperProps: {
             ...helperProps,
             className: `${classes["input-wrapper-helper"]} ${(_c = helperProps === null || helperProps === void 0 ? void 0 : helperProps.className) !== null && _c !== void 0 ? _c : ""} `
         }, disabled: disabled },

package/dist/esm/Form/Wrapper/InputWrapper/InputWrapper.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputWrapper.esm.js","sources":["../../../../../../../src/components/Form/Wrapper/InputWrapper/InputWrapper.tsx"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, useRef } from \"react\";\nimport { Input, Type, Props as InputProps } from \"../../Input/Input\";\nimport classes from \"./InputWrapper.module.scss\";\nimport { Wrapper, WrapperProps } from \"../Wrapper/Wrapper\";\nimport { useWrapper } from \"../../../../hooks/useWrapper\";\nimport { withReadOnly } from \"../../../withReadOnly\";\n\ninterface PartialInputProps extends Partial<InputProps> {}\n\nexport interface Props extends ComponentPropsWithRef<\"div\">, WrapperProps {\n label: string;\n type: Type;\n name: string;\n inputProps?: PartialInputProps;\n value: string;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n success?: boolean;\n}\n\nconst InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n {\n type,\n name,\n inputProps,\n helperText,\n helperProps,\n value,\n className,\n error,\n success,\n onChange,\n onBlur,\n onFocus,\n disabled,\n ...rest\n }: Props,\n ref\n) => {\n const { errorId, hasFocus, setHasFocus, helperId, labelId } = useWrapper();\n const { prefix, suffix } = inputProps ?? {};\n const input = useRef<HTMLInputElement>(null);\n const labelClasses = [classes[\"input-label\"]];\n hasFocus && labelClasses.push(classes[\"focus\"]);\n\n const inputWrapperClasses = [];\n inputProps?.wrapperProps?.className &&\n inputWrapperClasses.push(inputProps?.wrapperProps?.className);\n disabled && inputWrapperClasses.push(classes[\"disabled\"]);\n const readValue = rest[\"data-readonlyview\"] as boolean;\n return (\n <Wrapper\n {...rest}\n ref={ref}\n name={name}\n className={`${classes[\"input-wrapper\"]} ${className ?? \"\"}`}\n labelProps={{\n id: labelId,\n className: labelClasses.join(\" \")\n }}\n errorId={errorId}\n error={error}\n helperId={helperId}\n helperText={helperText}\n helperProps={{\n ...helperProps,\n className: `${classes[\"input-wrapper-helper\"]} ${helperProps?.className ?? \"\"} `\n }}\n disabled={disabled}\n >\n <Input\n {...inputProps}\n prefix={prefix}\n suffix={suffix}\n readOnlyView={readValue}\n wrapperProps={{\n className: inputWrapperClasses.join(\" \")\n }}\n ref={inputProps?.ref \|\| input}\n aria-labelledby={labelId}\n aria-describedby={error ? errorId : helperId}\n onChange={onChange}\n onFocus={e => {\n onFocus?.(e);\n setHasFocus(true);\n }}\n onBlur={e => {\n onBlur?.(e);\n setHasFocus(false);\n }}\n className={`\n ${inputProps?.className ?? \"\"}`}\n name={name}\n success={success}\n error={error}\n id={name}\n value={value}\n type={type}\n />\n </Wrapper>\n );\n};\n\nexport const InputWrapper = withReadOnly(React.forwardRef(InputWrapperComponent));\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAuBH,MAAM,qBAAqB,GAAoD,CAC7E,EACE,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,IAAI,EACD,EACR,GAAG,KACD;;AACF,IAAA,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAC;AAC3E,IAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,KAAA,CAAA,GAAV,UAAU,GAAI,EAAE,CAAC;AAC5C,IAAA,MAAM,KAAK,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7C,MAAM,YAAY,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9C,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEhD,MAAM,mBAAmB,GAAG,EAAE,CAAC;IAC/B,CAAA,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,SAAS;AACjC,QAAA,mBAAmB,CAAC,IAAI,CAAC,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAS,CAAC,CAAC;IAChE,QAAQ,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;AAC1D,IAAA,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,CAAY,CAAC;AACvD,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAA,GACF,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,eAAe,CAAC,CAAA,CAAA,EAAI,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,KAAA,CAAA,GAAA,SAAS,GAAI,EAAE,CAAE,CAAA,EAC3D,UAAU,EAAE;AACV,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;~~AAClC~~,~~SAAA,~~EACD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE;AACX,YAAA,GAAG,WAAW;AACd,YAAA,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,sBAAsB,CAAC,CAAI,CAAA,EAAA,CAAA,EAAA,GAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAG,CAAA,CAAA;SACjF,EACD,QAAQ,EAAE,QAAQ,EAAA;AAElB,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EACA,EAAA,GAAA,UAAU,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,SAAS,EACvB,YAAY,EAAE;AACZ,gBAAA,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC;AACzC,aAAA,EACD,GAAG,EAAE,CAAA,UAAU,aAAV,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAV,UAAU,CAAE,GAAG,KAAI,KAAK,EAAA,iBAAA,EACZ,OAAO,EACN,kBAAA,EAAA,KAAK,GAAG,OAAO,GAAG,QAAQ,EAC5C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,IAAG;AACX,gBAAA,OAAO,aAAP,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAP,OAAO,CAAG,CAAC,CAAC,CAAC;gBACb,WAAW,CAAC,IAAI,CAAC,CAAC;AACpB,aAAC,EACD,MAAM,EAAE,CAAC,IAAG;AACV,gBAAA,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAG,CAAC,CAAC,CAAC;gBACZ,WAAW,CAAC,KAAK,CAAC,CAAC;aACpB,EACD,SAAS,EAAE,CAAA;AACR,SAAA,EAAA,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAA,CAAE,EAChC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,CAAA,CACM,EACV;AACJ,CAAC,CAAC;AAEK,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC;;;;"}
1	+ {"version":3,"file":"InputWrapper.esm.js","sources":["../../../../../../../src/components/Form/Wrapper/InputWrapper/InputWrapper.tsx"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, useRef } from \"react\";\nimport { Input, Type, Props as InputProps } from \"../../Input/Input\";\nimport classes from \"./InputWrapper.module.scss\";\nimport { Wrapper, WrapperProps } from \"../Wrapper/Wrapper\";\nimport { useWrapper } from \"../../../../hooks/useWrapper\";\nimport { withReadOnly } from \"../../../withReadOnly\";\n\ninterface PartialInputProps extends Partial<InputProps> {}\n\nexport interface Props extends ComponentPropsWithRef<\"div\">, WrapperProps {\n label: string;\n type: Type;\n name: string;\n inputProps?: PartialInputProps;\n value: string;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n success?: boolean;\n}\n\nconst InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n {\n type,\n name,\n inputProps,\n helperText,\n helperProps,\n value,\n className,\n error,\n errorMessageProps,\n success,\n onChange,\n onBlur,\n onFocus,\n disabled,\n ...rest\n }: Props,\n ref\n) => {\n const { errorId, hasFocus, setHasFocus, helperId, labelId } = useWrapper();\n const { prefix, suffix } = inputProps ?? {};\n const input = useRef<HTMLInputElement>(null);\n const labelClasses = [classes[\"input-label\"]];\n hasFocus && labelClasses.push(classes[\"focus\"]);\n\n const inputWrapperClasses = [];\n inputProps?.wrapperProps?.className &&\n inputWrapperClasses.push(inputProps?.wrapperProps?.className);\n disabled && inputWrapperClasses.push(classes[\"disabled\"]);\n const readValue = rest[\"data-readonlyview\"] as boolean;\n return (\n <Wrapper\n {...rest}\n ref={ref}\n name={name}\n className={`${classes[\"input-wrapper\"]} ${className ?? \"\"}`}\n labelProps={{\n id: labelId,\n className: labelClasses.join(\" \")\n }}\n errorId={errorId}\n error={error}\n errorMessageProps={errorMessageProps}\n helperId={helperId}\n helperText={helperText}\n helperProps={{\n ...helperProps,\n className: `${classes[\"input-wrapper-helper\"]} ${helperProps?.className ?? \"\"} `\n }}\n disabled={disabled}\n >\n <Input\n {...inputProps}\n prefix={prefix}\n suffix={suffix}\n readOnlyView={readValue}\n wrapperProps={{\n className: inputWrapperClasses.join(\" \")\n }}\n ref={inputProps?.ref \|\| input}\n aria-labelledby={labelId}\n aria-describedby={error ? errorId : helperId}\n onChange={onChange}\n onFocus={e => {\n onFocus?.(e);\n setHasFocus(true);\n }}\n onBlur={e => {\n onBlur?.(e);\n setHasFocus(false);\n }}\n className={`\n ${inputProps?.className ?? \"\"}`}\n name={name}\n success={success}\n error={error}\n id={name}\n value={value}\n type={type}\n />\n </Wrapper>\n );\n};\n\nexport const InputWrapper = withReadOnly(React.forwardRef(InputWrapperComponent));\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAuBH,MAAM,qBAAqB,GAAoD,CAC7E,EACE,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,IAAI,EACD,EACR,GAAG,KACD;;AACF,IAAA,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAC;AAC3E,IAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,KAAA,CAAA,GAAV,UAAU,GAAI,EAAE,CAAC;AAC5C,IAAA,MAAM,KAAK,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7C,MAAM,YAAY,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9C,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEhD,MAAM,mBAAmB,GAAG,EAAE,CAAC;IAC/B,CAAA,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,SAAS;AACjC,QAAA,mBAAmB,CAAC,IAAI,CAAC,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAS,CAAC,CAAC;IAChE,QAAQ,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;AAC1D,IAAA,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,CAAY,CAAC;AACvD,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAA,GACF,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,eAAe,CAAC,CAAA,CAAA,EAAI,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,KAAA,CAAA,GAAA,SAAS,GAAI,EAAE,CAAE,CAAA,EAC3D,UAAU,EAAE;AACV,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;SAClC,EACD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE;AACX,YAAA,GAAG,WAAW;AACd,YAAA,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,sBAAsB,CAAC,CAAI,CAAA,EAAA,CAAA,EAAA,GAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAG,CAAA,CAAA;SACjF,EACD,QAAQ,EAAE,QAAQ,EAAA;AAElB,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EACA,EAAA,GAAA,UAAU,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,SAAS,EACvB,YAAY,EAAE;AACZ,gBAAA,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC;AACzC,aAAA,EACD,GAAG,EAAE,CAAA,UAAU,aAAV,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAV,UAAU,CAAE,GAAG,KAAI,KAAK,EAAA,iBAAA,EACZ,OAAO,EACN,kBAAA,EAAA,KAAK,GAAG,OAAO,GAAG,QAAQ,EAC5C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,IAAG;AACX,gBAAA,OAAO,aAAP,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAP,OAAO,CAAG,CAAC,CAAC,CAAC;gBACb,WAAW,CAAC,IAAI,CAAC,CAAC;AACpB,aAAC,EACD,MAAM,EAAE,CAAC,IAAG;AACV,gBAAA,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAG,CAAC,CAAC,CAAC;gBACZ,WAAW,CAAC,KAAK,CAAC,CAAC;aACpB,EACD,SAAS,EAAE,CAAA;AACR,SAAA,EAAA,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAA,CAAE,EAChC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,CAAA,CACM,EACV;AACJ,CAAC,CAAC;AAEK,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC;;;;"}

package/dist/esm/Form/Wrapper/Wrapper/Wrapper.esm.js CHANGED Viewed

@@ -18,7 +18,7 @@ import classes from './Wrapper.module.scss.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const WrapperComponent = ({ children, className, error, errorMessage, errorId, errorMessageIcon, errorMessageIconPosition, helperText, helperId, required, helperProps, helperIndent, labelProps, label, disabled, name, innerClassName, ...rest }, ref) => {
+const WrapperComponent = ({ children, className, error, errorMessage, errorId, errorMessageIcon, errorMessageIconPosition, errorMessageProps, helperText, helperId, required, helperProps, helperIndent, labelProps, label, disabled, name, innerClassName, ...rest }, ref) => {
     const renderChildren = () => React.Children.map(children, child => React.cloneElement(child, {
         disabled
     }));
@@ -28,7 +28,7 @@ const WrapperComponent = ({ children, className, error, errorMessage, errorId, e
     error && labelClasses.push(classes["error"]);
     disabled && labelClasses.push(classes["disabled"]);
     return (React.createElement("div", { ...rest, ref: ref, className: `${classes.wrapper} ${className !== null && className !== void 0 ? className : ""}` },
-        React.createElement(FormGroup, { disabled: disabled, error: error, errorMessage: errorMessage, errorId: errorId, errorMessageIcon: errorMessageIcon, errorMessageIconPosition: errorMessageIconPosition, helperText: helperText, helperId: helperId, helperProps: helperProps },
+        React.createElement(FormGroup, { disabled: disabled, error: error, errorMessage: errorMessage, errorId: errorId, errorMessageIcon: errorMessageIcon, errorMessageIconPosition: errorMessageIconPosition, errorMessageProps: errorMessageProps, helperText: helperText, helperId: helperId, helperProps: helperProps },
             React.createElement("div", { className: ` ${innerClassName ? innerClassName : ""}` },
                 label && (React.createElement(Label, { ...labelProps, className: `${classes.label} ${labelClasses.join(" ")}`, htmlFor: name }, label)),
                 renderChildren()))));

package/dist/esm/Form/Wrapper/Wrapper/Wrapper.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Wrapper.esm.js","sources":["../../../../../../../src/components/Form/Wrapper/Wrapper/Wrapper.tsx"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from \"react\";\nimport { FormGroup, Props as FormGroupProps } from \"../../FormGroup/FormGroup\";\nimport { Label, Props as LabelProps } from \"../../Label/Label\";\nimport classes from \"./Wrapper.module.scss\";\nimport { Props as HelperProps } from \"../../FormHelperText/FormHelperText\";\nimport { FormElement } from \"../../form.interfaces\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\">, FormGroupProps {\n children: ReactElement \| ReactElement[];\n helperIndent?: number;\n label?: string;\n labelProps?: LabelProps;\n name: string;\n /* This does NOT add validation! It simply adds an asterix on the Label! /\n required?: boolean;\n innerClassName?: string;\n}\n\n/* For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */\nexport interface WrapperProps extends Omit<FormElement, \"success\"> {\n errorMessage?: string;\n helperText?: string;\n helperProps?: HelperProps;\n label?: string;\n name: string;\n required?: boolean;\n disabled?: boolean;\n}\n\nconst WrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n {\n children,\n className,\n error,\n errorMessage,\n errorId,\n errorMessageIcon,\n errorMessageIconPosition,\n helperText,\n helperId,\n required,\n helperProps,\n helperIndent,\n labelProps,\n label,\n disabled,\n name,\n innerClassName,\n ...rest\n }: Props,\n ref\n) => {\n const renderChildren = () =>\n React.Children.map(children, child =>\n React.cloneElement(child, {\n disabled\n })\n );\n\n const labelClasses = [classes[\"form-input-label\"]];\n\n labelProps?.className && labelClasses.push(labelProps.className);\n required && labelClasses.push(classes[\"required\"]);\n error && labelClasses.push(classes[\"error\"]);\n disabled && labelClasses.push(classes[\"disabled\"]);\n\n return (\n <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? \"\"}`}>\n <FormGroup\n disabled={disabled}\n error={error}\n errorMessage={errorMessage}\n errorId={errorId}\n errorMessageIcon={errorMessageIcon}\n errorMessageIconPosition={errorMessageIconPosition}\n helperText={helperText}\n helperId={helperId}\n helperProps={helperProps}\n >\n <div className={` ${innerClassName ? innerClassName : \"\"}`}>\n {label && (\n <Label\n {...labelProps}\n className={`${classes.label} ${labelClasses.join(\" \")}`}\n htmlFor={name}\n >\n {label}\n </Label>\n )}\n {renderChildren()}\n </div>\n </FormGroup>\n </div>\n );\n};\n\nexport const Wrapper = React.forwardRef(WrapperComponent);\n"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;AAcG;~~AA+BH~~,MAAM,gBAAgB,GAAoD,CACxE,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,EACV,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACD,EACR,GAAG,KACD;IACF,MAAM,cAAc,GAAG,MACrB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,IAChC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;QACxB,QAAQ;AACT,KAAA,CAAC,CACH,CAAC;IAEJ,MAAM,YAAY,GAAG,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAEnD,IAAA,CAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,SAAS,KAAI,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IACjE,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IACnD,KAAK,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IAEnD,QACE,gCAAS,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAA,EAAG,OAAO,CAAC,OAAO,IAAI,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,SAAS,GAAI,EAAE,CAAE,CAAA,EAAA;AACzE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACR,EAAA,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,wBAAwB,EAAE,wBAAwB,EAClD,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EAAA;AAExB,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAI,CAAA,EAAA,cAAc,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA;AACvD,gBAAA,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,KAAK,EACA,EAAA,GAAA,UAAU,EACd,SAAS,EAAE,CAAA,EAAG,OAAO,CAAC,KAAK,CAAA,CAAA,EAAI,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAE,CAAA,EACvD,OAAO,EAAE,IAAI,EAAA,EAEZ,KAAK,CACA,CACT;AACA,gBAAA,cAAc,EAAE,CACb,CACI,CACR,EACN;AACJ,CAAC,CAAC;AAEW,MAAA,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB;;;;"}
1	+ {"version":3,"file":"Wrapper.esm.js","sources":["../../../../../../../src/components/Form/Wrapper/Wrapper/Wrapper.tsx"],"sourcesContent":["/\n Copyright 2022 OneWelcome B.V.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from \"react\";\nimport { FormGroup, Props as FormGroupProps } from \"../../FormGroup/FormGroup\";\nimport { Label, Props as LabelProps } from \"../../Label/Label\";\nimport classes from \"./Wrapper.module.scss\";\nimport { Props as HelperProps } from \"../../FormHelperText/FormHelperText\";\nimport { FormElement } from \"../../form.interfaces\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\">, FormGroupProps {\n children: ReactElement \| ReactElement[];\n helperIndent?: number;\n label?: string;\n labelProps?: LabelProps;\n name: string;\n /* This does NOT add validation! It simply adds an asterix on the Label! /\n required?: boolean;\n innerClassName?: string;\n}\n\n/* For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */\nexport interface WrapperProps extends Omit<FormElement, \"success\"> {\n errorMessage?: string;\n helperText?: string;\n helperProps?: HelperProps;\n errorMessageProps?: ComponentPropsWithRef<\"span\">;\n label?: string;\n name: string;\n required?: boolean;\n disabled?: boolean;\n}\n\nconst WrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n {\n children,\n className,\n error,\n errorMessage,\n errorId,\n errorMessageIcon,\n errorMessageIconPosition,\n errorMessageProps,\n helperText,\n helperId,\n required,\n helperProps,\n helperIndent,\n labelProps,\n label,\n disabled,\n name,\n innerClassName,\n ...rest\n }: Props,\n ref\n) => {\n const renderChildren = () =>\n React.Children.map(children, child =>\n React.cloneElement(child, {\n disabled\n })\n );\n\n const labelClasses = [classes[\"form-input-label\"]];\n\n labelProps?.className && labelClasses.push(labelProps.className);\n required && labelClasses.push(classes[\"required\"]);\n error && labelClasses.push(classes[\"error\"]);\n disabled && labelClasses.push(classes[\"disabled\"]);\n\n return (\n <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? \"\"}`}>\n <FormGroup\n disabled={disabled}\n error={error}\n errorMessage={errorMessage}\n errorId={errorId}\n errorMessageIcon={errorMessageIcon}\n errorMessageIconPosition={errorMessageIconPosition}\n errorMessageProps={errorMessageProps}\n helperText={helperText}\n helperId={helperId}\n helperProps={helperProps}\n >\n <div className={` ${innerClassName ? innerClassName : \"\"}`}>\n {label && (\n <Label\n {...labelProps}\n className={`${classes.label} ${labelClasses.join(\" \")}`}\n htmlFor={name}\n >\n {label}\n </Label>\n )}\n {renderChildren()}\n </div>\n </FormGroup>\n </div>\n );\n};\n\nexport const Wrapper = React.forwardRef(WrapperComponent);\n"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;AAcG;AAgCH,MAAM,gBAAgB,GAAoD,CACxE,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,wBAAwB,EACxB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,EACV,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACD,EACR,GAAG,KACD;IACF,MAAM,cAAc,GAAG,MACrB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,IAChC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;QACxB,QAAQ;AACT,KAAA,CAAC,CACH,CAAC;IAEJ,MAAM,YAAY,GAAG,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAEnD,IAAA,CAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,SAAS,KAAI,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IACjE,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IACnD,KAAK,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IAEnD,QACE,gCAAS,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAA,EAAG,OAAO,CAAC,OAAO,IAAI,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,SAAS,GAAI,EAAE,CAAE,CAAA,EAAA;AACzE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACR,EAAA,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,wBAAwB,EAAE,wBAAwB,EAClD,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EAAA;AAExB,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAI,CAAA,EAAA,cAAc,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA;AACvD,gBAAA,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,KAAK,EACA,EAAA,GAAA,UAAU,EACd,SAAS,EAAE,CAAA,EAAG,OAAO,CAAC,KAAK,CAAA,CAAA,EAAI,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAE,CAAA,EACvD,OAAO,EAAE,IAAI,EAAA,EAEZ,KAAK,CACA,CACT;AACA,gBAAA,cAAc,EAAE,CACb,CACI,CACR,EACN;AACJ,CAAC,CAAC;AAEW,MAAA,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB;;;;"}

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridDateFilter.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import React from "react";
+import { DateTimeFilter } from "./DataGridFilters.interfaces";
+type Props = {
+    domRoot?: HTMLElement;
+    dateFilterValue?: DateTimeFilter;
+    onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;
+};
+export declare const DataGridDateFilter: ({ domRoot, dateFilterValue, onDateFilterValueChange }: Props) => React.JSX.Element;
+export {};

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridFilterTag.d.ts CHANGED Viewed

@@ -5,9 +5,10 @@ export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
     triggerRef: React.Ref<HTMLButtonElement>;
     filter?: Filter;
     mode: FilterEditorMode;
-    onFilterRemove: () => void;
+    onFilterRemove?: () => void;
     onFilterOpen: () => void;
     translations?: TagTranslations;
+    dateTagCaption?: string;
 }
 export declare const DataGridFilterTagComponent: ForwardRefRenderFunction<HTMLDivElement, DataGridFilterTagProps>;
 export declare const DataGridFilterTag: React.ForwardRefExoticComponent<Omit<DataGridFilterTagProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.d.ts CHANGED Viewed

@@ -21,7 +21,7 @@ export type FiltersAction = {
 export type FiltersState = {
     filters: Filter[];
 };
-export type FilterEditorMode = "ADD" | "EDIT";
+export type FilterEditorMode = "ADD" | "EDIT" | "ADD_DATE";
 export declare enum DefaultOperators {
     is = "is",
     isNot = "is not",
@@ -47,6 +47,9 @@ export interface PopoverTranslations {
 }
 export interface TagTranslations {
     addButtonCaption?: string;
+    or?: string;
+    other?: string;
+    dateIs?: string;
 }
 export interface ToolbarTranslations {
     clearButtonCaption?: string;
@@ -60,3 +63,9 @@ export interface KeyValuePair<TKey = string, TValue = string> {
     key: TKey;
     value: TValue;
 }
+export type DateTimeFilterType = "THIRTY_SECONDS" | "ONE_MINUTE" | "FIVE_MINUTES" | "ONE_HOUR" | "TWENTY_FOUR_HOURS" | "CUSTOM";
+export interface DateTimeFilter {
+    fromDate: string;
+    toDate: string;
+    type: DateTimeFilterType;
+}

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridToolbar.d.ts CHANGED Viewed

@@ -1,8 +1,10 @@
 import React from "react";
-import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
+import { DataGridColumnMetadata, DateTimeFilter, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
 export interface DataGridToolbarProps {
-    columnsMetadata: DataGridColumnMetadata[];
+    columnsMetadata?: DataGridColumnMetadata[];
     customEditTagContent?: React.ReactElement;
+    dateFilterValue?: DateTimeFilter;
+    onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;
     filterValues?: Filter[];
     translations?: FiltersTranslations;
     onFilterAdd?: (filter: Filter) => void;
@@ -10,4 +12,4 @@ export interface DataGridToolbarProps {
     onFilterDelete?: (id: string) => void;
     onFiltersClear?: () => void;
 }
-export declare const DataGridToolbar: ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear, customEditTagContent }: DataGridToolbarProps) => React.JSX.Element;
+export declare const DataGridToolbar: ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, dateFilterValue, onDateFilterValueChange, onFiltersClear, customEditTagContent }: DataGridToolbarProps) => React.JSX.Element;

package/dist/esm/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import React from "react";
+import { DateTimeFilter, DateTimeFilterType } from "../DataGridFilters.interfaces";
+export type DateTimePickerTranslations = {
+    errors: {
+        dateFormatError: string;
+    };
+    previousMonth: string;
+    nextMonth: string;
+    from: string;
+    to: string;
+    cancel: string;
+    apply: string;
+    dateInputPlaceholder: string;
+};
+export type Props = {
+    popoverRef: React.RefObject<HTMLDivElement>;
+    anchorRef?: React.RefObject<HTMLDivElement>;
+    isOpen: boolean;
+    onTagCaptionChange: (value: string) => void;
+    setPickerOpen: (open: boolean) => void;
+    translations?: DateTimePickerTranslations;
+    dateFilterValue?: DateTimeFilter;
+    onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;
+};
+export type SideMenuItem = {
+    id: DateTimeFilterType;
+    name: string;
+    rangeSeconds?: number;
+};
+export declare const dateFormat = "yyyy-mm-dd hh:mm:ss";
+export declare const DateTimePicker: ({ anchorRef, popoverRef, isOpen, setPickerOpen, onTagCaptionChange, translations, dateFilterValue, onDateFilterValueChange }: Props) => React.JSX.Element;

package/dist/esm/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import React from "react";
+import { DateRange } from "react-day-picker";
+type Props = {
+    previousMonth: string;
+    nextMonth: string;
+    selectedDate: DateRange | undefined;
+    disableDateRangePickers: boolean;
+    setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;
+    setFromDateText: React.Dispatch<React.SetStateAction<string>>;
+    setToDateText: React.Dispatch<React.SetStateAction<string>>;
+    setFromDateError: React.Dispatch<React.SetStateAction<string>>;
+    setToDateError: React.Dispatch<React.SetStateAction<string>>;
+};
+export declare const DateTimePickerCalendarSection: ({ previousMonth, nextMonth, selectedDate, disableDateRangePickers, setSelectedDate, setFromDateText, setFromDateError, setToDateError, setToDateText }: Props) => React.JSX.Element;
+export {};

package/dist/esm/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import React from "react";
+import { DateRange } from "react-day-picker";
+export type Props = {
+    from: string;
+    to: string;
+    dateInputPlaceholder: string;
+    dateFormatError: string;
+    fromDateText: string;
+    toDateText: string;
+    fromDateError: string;
+    toDateError: string;
+    setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;
+    setFromDateText: React.Dispatch<React.SetStateAction<string>>;
+    setToDateText: React.Dispatch<React.SetStateAction<string>>;
+    setFromDateError: React.Dispatch<React.SetStateAction<string>>;
+    setToDateError: React.Dispatch<React.SetStateAction<string>>;
+};
+export declare const DateTimePickerInputSection: ({ from, to, dateInputPlaceholder, dateFormatError, toDateText, fromDateText, fromDateError, toDateError, setSelectedDate, setFromDateText, setToDateText, setFromDateError, setToDateError }: Props) => React.JSX.Element;

package/dist/esm/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { Locale } from "date-fns";
+export declare const THIRTY_SECONDS = "THIRTY_SECONDS";
+export declare const ONE_MINUTE = "ONE_MINUTE";
+export declare const FIVE_MINUTES = "FIVE_MINUTES";
+export declare const ONE_HOUR = "ONE_HOUR";
+export declare const TWENTY_FOUR_HOURS = "TWENTY_FOUR_HOURS";
+export declare const CUSTOM_DATE_RANGE = "CUSTOM";
+export declare const getMonthName: (date: Date, locale?: Locale) => string;
+export declare const getYearFromDate: (date: Date) => string;
+export declare const formatInputDate: (date: Date) => string;

package/dist/esm/src/components/DataGrid/DataGridFilters/DateTimePicker/SideMenu.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import React from "react";
+import { SideMenuItem } from "./DateTimePicker";
+import { DateTimeFilterType } from "../DataGridFilters.interfaces";
+type Props = {
+    sideMenuItems: SideMenuItem[];
+    selectedItemId: string;
+    onItemSelect: (id: DateTimeFilterType) => void;
+};
+export declare const SideMenu: ({ sideMenuItems, selectedItemId, onItemSelect }: Props) => React.JSX.Element;
+export {};

package/dist/esm/src/components/DataGrid/testUtils.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Filter } from "./DataGridFilters/DataGridFilters.interfaces";
+import { DateTimeFilter, Filter } from "./DataGridFilters/DataGridFilters.interfaces";
 /**
  * @scope .
  * @scopeException stories/DataGrid/DataGrid.stories.tsx
@@ -14,3 +14,9 @@ export declare const useMockFilteringLogic: <T extends {
     setGridData: import("react").Dispatch<import("react").SetStateAction<T[]>>;
     filters: Filter[];
 };
+export declare const useMockFilteringByDateLogic: <T extends {
+    [k: string]: string | Date;
+}>(data: T[], dateFieldKey: string, filterValue: DateTimeFilter | undefined) => {
+    gridData: T[];
+    setGridData: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+};

package/dist/esm/src/components/DatePicker/DatePicker.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithoutRef } from "react";
-import { DateRange } from "react-day-picker";
+import { DateRange, CustomComponents } from "react-day-picker";
 import * as locales from "date-fns/locale";
 export interface Props extends ComponentPropsWithoutRef<any> {
     onSelect: (date: Date | DateRange | undefined) => void;
@@ -7,5 +7,8 @@ export interface Props extends ComponentPropsWithoutRef<any> {
     value: Date | DateRange | undefined;
     required?: boolean;
     locale?: keyof typeof locales;
+    numberOfMonths?: number;
+    components?: Partial<CustomComponents>;
+    disabled?: boolean;
 }
 export declare const DatePicker: ({ onSelect, value, required, mode, locale, ...rest }: Props) => React.JSX.Element;

package/dist/esm/src/components/Form/FormGroup/FormGroup.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
     errorMessageIconPosition?: "before" | "after";
     errorMessage?: string;
     errorId?: string;
+    errorMessageProps?: ComponentPropsWithRef<"span">;
     helperText?: string;
     helperId?: string;
     helperProps?: HelperProps;

package/dist/esm/src/components/Form/Wrapper/Wrapper/Wrapper.d.ts CHANGED Viewed

@@ -18,6 +18,7 @@ export interface WrapperProps extends Omit<FormElement, "success"> {
     errorMessage?: string;
     helperText?: string;
     helperProps?: HelperProps;
+    errorMessageProps?: ComponentPropsWithRef<"span">;
     label?: string;
     name: string;
     required?: boolean;

package/dist/esm/src/hooks/useClickOutside.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { DependencyList } from "react";
2	+ export declare const useClickOutside: (myElementRef: React.RefObject<HTMLElement>, onClickOutside: (event: MouseEvent) => void, dependencies?: DependencyList) => void;

package/dist/esm/src/hooks/useClickOutside.esm.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const useClickOutside = (myElementRef, onClickOutside, dependencies) => {
+    function eventListener(event) {
+        const myElement = myElementRef === null || myElementRef === void 0 ? void 0 : myElementRef.current;
+        if (!myElement) {
+            return;
+        }
+        const clickedInsideMyElement = myElement.contains(event.target);
+        if (!clickedInsideMyElement) {
+            onClickOutside(event);
+        }
+    }
+    useEffect(() => {
+        setTimeout(() => window.addEventListener("click", eventListener));
+        return () => {
+            setTimeout(() => window.removeEventListener("click", eventListener));
+        };
+    }, dependencies);
+};
+export { useClickOutside };
+//# sourceMappingURL=useClickOutside.esm.js.map

package/dist/esm/src/hooks/useClickOutside.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useClickOutside.esm.js","sources":["../../../../../../src/hooks/useClickOutside.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { DependencyList, useEffect } from \"react\";\n\nexport const useClickOutside = (\n myElementRef: React.RefObject<HTMLElement>,\n onClickOutside: (event: MouseEvent) => void,\n dependencies?: DependencyList\n) => {\n function eventListener(event: MouseEvent) {\n const myElement = myElementRef?.current;\n if (!myElement) {\n return;\n }\n const clickedInsideMyElement = myElement.contains(event.target as Node);\n\n if (!clickedInsideMyElement) {\n onClickOutside(event);\n }\n }\n useEffect(() => {\n setTimeout(() => window.addEventListener(\"click\", eventListener));\n\n return () => {\n setTimeout(() => window.removeEventListener(\"click\", eventListener));\n };\n }, dependencies);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIU,MAAA,eAAe,GAAG,CAC7B,YAA0C,EAC1C,cAA2C,EAC3C,YAA6B,KAC3B;IACF,SAAS,aAAa,CAAC,KAAiB,EAAA;QACtC,MAAM,SAAS,GAAG,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,CAAE,OAAO,CAAC;QACxC,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QACD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;QAExE,IAAI,CAAC,sBAAsB,EAAE;YAC3B,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;KACF;IACD,SAAS,CAAC,MAAK;AACb,QAAA,UAAU,CAAC,MAAM,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AAElE,QAAA,OAAO,MAAK;AACV,YAAA,UAAU,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AACvE,SAAC,CAAC;KACH,EAAE,YAAY,CAAC,CAAC;AACnB;;;;"}

package/dist/esm/src/index.d.ts CHANGED Viewed

@@ -42,6 +42,7 @@ export type { Props as StepProps } from "./components/Stepper/Step";
 export { Pagination } from "./components/Pagination/Pagination";
 export type { Props as PaginationProps, PageChangeLabels, PaginationTranslations, PageSize } from "./components/Pagination/Pagination";
 export { useRepeater } from "./hooks/useRepeater";
+export { useClickOutside } from "./hooks/useClickOutside";
 export { useFullHeightCollapse } from "./hooks/useFullHeightCollapse";
 export { usePosition } from "./hooks/usePosition";
 export type { Placement } from "./hooks/usePosition";

package/dist/esm/src/index.esm.js CHANGED Viewed

@@ -20,6 +20,7 @@ export { Spinner } from '../Spinner/Spinner.esm.js';
 export { Stepper } from '../Stepper/Stepper.esm.js';
 export { Pagination } from '../Pagination/Pagination.esm.js';
 export { useRepeater } from './hooks/useRepeater.esm.js';
+export { useClickOutside } from './hooks/useClickOutside.esm.js';
 export { useFullHeightCollapse } from './hooks/useFullHeightCollapse.esm.js';
 export { usePosition } from './hooks/usePosition.esm.js';
 export { useDebouncedCallback } from './hooks/useDebouncedCallback.esm.js';

package/dist/esm/src/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.6.0",
+  "version": "8.7.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -45,9 +45,13 @@
     "storybook": "storybook dev -p 6006"
   },
   "peerDependencies": {
+    "date-fns": "^4.1.0",
     "react": ">=16",
-    "react-dom": ">=16",
-    "react-day-picker": "^9.1.3"
+    "react-day-picker": "^9.4.1",
+    "react-dom": ">=16"
+  },
+  "overrides": {
+    "cross-spawn": ">=7.0.5"
   },
   "engines": {
     "node": ">=16"