@onewelcome/react-lib-components 7.1.0 → 8.0.0

package/dist/cjs/Form/Select/SingleSelect/Select.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./Select.module.scss.cjs.js"),t=require("react"),s=require("../../../src/hooks/useBodyClick.cjs.js"),a=require("../../../src/hooks/useDetermineStatusIcon.cjs.js"),r=require("../../../src/readyclasses.module.scss.cjs.js"),n=require("../../../src/util/helper.cjs.js"),l=require("../../../Icon/Icon.cjs.js"),c=require("../useSelectPositionList.cjs.js"),o=require("../useAddNewBtn.cjs.js"),i=require("./useSearch.cjs.js"),u=require("./useArrowNavigation.cjs.js");const d=t.forwardRef((({children:d,name:p,disabled:h=!1,labeledBy:m,placeholder:f,describedBy:v,selectButtonProps:C,className:S,error:b=!1,success:E=!1,value:N,clearLabel:j="Clear selection",noResultsLabel:g="No results found",onChange:y,addNew:I,search:w,...x},R)=>{const[B,q]=t.useState(!1),[A,L]=t.useState(""),k=t.useRef(null),P=t.useRef(null),[F,$]=t.useState(-1),[O,D]=t.useState(!1),[H,T]=t.useState(!1),K=t.Children.count(d),{filter:M,isSearching:U,renderSearch:V,searchInputRef:z,setIsSearching:G,searchThreshold:J,searchVisible:Q}=i.useSearch({expanded:B,search:w,searchInputClassName:e.default["select-search"],optionsCount:K,setFocusedSelectItem:$}),{addBtnRef:W,addNewBtnOptionsContainerClassName:X,renderAddNew:Y}=o.useAddNewBtn({addNew:I,filter:M,focusedSelectItem:F,optionsCount:K,searchInputRef:z}),Z=R||t.createRef(),_=e=>{Z.current&&e&&(Z.current.value=e.getAttribute("data-value"),Z.current.dispatchEvent(new Event("change",{bubbles:!0}))),q(!1)},ee=t.useRef(null),{onArrowNavigation:te}=u.useArrowNavigation({expanded:B,setExpanded:q,isSearching:U,setIsSearching:G,setFocusedSelectItem:$,onOptionChangeHandler:_,childrenCount:K,setShouldClick:D,searchInputRef:z,addBtnRef:W,renderThreshold:J}),{listPosition:se,opacity:ae,optionsListMaxHeight:re,setListPosition:ne,setOpacity:le}=c.useSelectPositionList({expanded:B,optionListReference:P,containerReference:k,addBtnRef:W}),ce=a.useDetermineStatusIcon({success:E,error:b});t.useEffect((()=>{B&&($(0),T(!0)),!B&&ee.current&&H&&(ee.current.focus(),T(!1))}),[B,ee.current,H]),t.useEffect((()=>{var e;e=N,t.Children.forEach(d,(t=>{t.props.value===e&&L(t.props.children)}))}),[N]),s.useBodyClick((e=>!e.target.closest(".custom-select")&&B),(()=>{q(!1),ne({top:0,bottom:"initial"}),le(0)}),B);const oe=[];return B&&oe.push(e.default.expanded),b&&oe.push(e.default.error),h&&oe.push(e.default.disabled),S&&oe.push(S),E&&oe.push(e.default.success),t.createElement(t.Fragment,null,t.createElement("select",{...n.filterProps(x,/^data-/,!1),tabIndex:-1,"aria-hidden":"true",ref:Z,name:p,onChange:e=>{null==y||y(e)},className:r.default["sr-only"]},t.createElement("option",{value:""}),t.Children.map(d,(e=>t.createElement("option",{value:e.props.value})))),t.createElement("div",{...n.filterProps(x,/^data-/),ref:k,onKeyDown:te,className:`custom-select ${e.default.select} ${oe.join(" ")} ${null!=S?S:""}`},Q&&V(),t.createElement("button",{...C,onClick:()=>{q(!B)},ref:ee,type:"button",name:p,className:`${e.default["custom-select"]} ${oe.join(" ")} `,style:{display:B&&Q?"none":"initial"},disabled:h,"aria-disabled":h,"aria-invalid":b,"aria-expanded":B,"aria-haspopup":"listbox","aria-labelledby":m,"aria-describedby":v},t.createElement("div",{"data-display":!0,className:e.default.selected},!N&&f&&t.createElement("span",{className:e.default.placeholder},f),(null==N?void 0:N.length)>0&&t.createElement("span",{"data-display-inner":!0},A)),t.createElement("div",{className:e.default.status},ce||(B?t.createElement(l.Icon,{className:e.default["chevron-icon"],icon:l.Icons.ChevronUp}):t.createElement(l.Icon,{className:e.default["chevron-icon"],icon:l.Icons.ChevronDown})))),t.createElement("div",{ref:P,className:`list-wrapper ${e.default["list-wrapper"]}`,style:{display:B?"block":"none",opacity:ae,maxHeight:re.wrapper,pointerEvents:B?"auto":"none",...se}},t.createElement("ul",{className:X,role:"listbox",style:{maxHeight:re.list}},(()=>{if(U||""!==M){const a=t.Children.toArray(d).filter((e=>null!==e.props.children.toLowerCase().match(M.toLowerCase())));return 0===s(a).length?t.createElement("li",{className:e.default["no-results"]},g):s(a)}return s(d);function s(e){return t.Children.map(e,((e,s)=>t.cloneElement(e,{onFocusChange:e=>{$(e)},onOptionSelect:e=>{_(e.current),D(!1)},isSelected:e.props.value===N,isSearching:U,selectOpened:B,childIndex:s,hasFocus:F===s,shouldClick:O,isAddBtnFocused:W.current===document.activeElement})))}})()),Y())))}));exports.Select=d;
+"use strict";var e=require("./Select.module.scss.cjs.js"),t=require("react"),s=require("../../../src/hooks/useBodyClick.cjs.js"),a=require("../../../src/hooks/useDetermineStatusIcon.cjs.js"),r=require("../../../src/readyclasses.module.scss.cjs.js"),n=require("../../../src/util/helper.cjs.js"),l=require("../../../Icon/Icon.cjs.js"),c=require("../useSelectPositionList.cjs.js"),o=require("../useAddNewBtn.cjs.js"),i=require("./useSearch.cjs.js"),u=require("./useArrowNavigation.cjs.js");const d=t.forwardRef((({children:d,name:p,disabled:h=!1,labeledBy:m,placeholder:f,describedBy:v,selectButtonProps:C,className:S,error:b=!1,success:E=!1,value:N,clearLabel:j="Clear selection",noResultsLabel:g="No results found",onChange:y,addNew:I,search:w,...x},R)=>{const[B,q]=t.useState(!1),[A,L]=t.useState(""),k=t.useRef(null),P=t.useRef(null),[F,O]=t.useState(-1),[$,D]=t.useState(!1),[H,T]=t.useState(!1),K=t.Children.count(d),{filter:M,isSearching:U,renderSearch:V,searchInputRef:z,setIsSearching:G,searchThreshold:J,searchVisible:Q}=i.useSearch({expanded:B,search:w,searchInputClassName:e.default["select-search"],optionsCount:K,setFocusedSelectItem:O}),{addBtnRef:W,addNewBtnOptionsContainerClassName:X,renderAddNew:Y}=o.useAddNewBtn({addNew:I,filter:M,focusedSelectItem:F,optionsCount:K,searchInputRef:z}),Z=R||t.createRef(),_=e=>{Z.current&&e&&(Z.current.value=e.getAttribute("data-value"),Z.current.dispatchEvent(new Event("change",{bubbles:!0}))),q(!1)},ee=t.useRef(null),{onArrowNavigation:te}=u.useArrowNavigation({expanded:B,setExpanded:q,isSearching:U,setIsSearching:G,setFocusedSelectItem:O,onOptionChangeHandler:_,childrenCount:K,setShouldClick:D,searchInputRef:z,addBtnRef:W,renderThreshold:J}),{listPosition:se,opacity:ae,optionsListMaxHeight:re,setListPosition:ne,setOpacity:le}=c.useSelectPositionList({expanded:B,optionListReference:P,containerReference:k,addBtnRef:W}),ce=a.useDetermineStatusIcon({success:E,error:b});t.useEffect((()=>{B&&(O(0),T(!0)),!B&&ee.current&&H&&(ee.current.focus(),T(!1))}),[B,ee.current,H]),t.useEffect((()=>{var e;e=N,t.Children.forEach(d,(t=>{t.props.value===e&&L(t.props.children)}))}),[N]),s.useBodyClick((e=>!e.target.closest(".custom-select")&&B),(()=>{q(!1),ne({top:0,bottom:"initial"}),le(0)}),B);const oe=[];return B&&oe.push(e.default.expanded),b&&oe.push(e.default.error),h&&oe.push(e.default.disabled),S&&oe.push(S),E&&oe.push(e.default.success),t.createElement(t.Fragment,null,t.createElement("select",{...n.filterProps(x,/^data-/,!1),tabIndex:-1,"aria-hidden":"true",ref:Z,name:p,onChange:e=>{null==y||y(e)},className:r.default["sr-only"]},t.createElement("option",{value:""}),t.Children.map(d,(e=>t.createElement("option",{value:e.props.value})))),t.createElement("div",{...n.filterProps(x,/^data-/),ref:k,onKeyDown:te,className:`custom-select ${e.default.select} ${oe.join(" ")}`},Q&&V(),t.createElement("button",{...C,onClick:()=>{q(!B)},ref:ee,type:"button",name:p,className:`${e.default["custom-select"]} ${oe.join(" ")} `,style:{display:B&&Q?"none":"initial"},disabled:h,"aria-disabled":h,"aria-invalid":b,"aria-expanded":B,"aria-haspopup":"listbox","aria-labelledby":m,"aria-describedby":v},t.createElement("div",{"data-display":!0,className:e.default.selected},!N&&f&&t.createElement("span",{className:e.default.placeholder},f),(null==N?void 0:N.length)>0&&t.createElement("span",{"data-display-inner":!0},A)),t.createElement("div",{className:e.default.status},ce||(B?t.createElement(l.Icon,{className:e.default["chevron-icon"],icon:l.Icons.ChevronUp}):t.createElement(l.Icon,{className:e.default["chevron-icon"],icon:l.Icons.ChevronDown})))),t.createElement("div",{ref:P,className:`list-wrapper ${e.default["list-wrapper"]}`,style:{display:B?"block":"none",opacity:ae,maxHeight:re.wrapper,pointerEvents:B?"auto":"none",...se}},t.createElement("ul",{className:X,role:"listbox",style:{maxHeight:re.list}},(()=>{if(U||""!==M){const a=t.Children.toArray(d).filter((e=>null!==e.props.children.toLowerCase().match(M.toLowerCase())));return 0===s(a).length?t.createElement("li",{className:e.default["no-results"]},g):s(a)}return s(d);function s(e){return t.Children.map(e,((e,s)=>t.cloneElement(e,{onFocusChange:e=>{O(e)},onOptionSelect:e=>{_(e.current),D(!1)},isSelected:e.props.value===N,isSearching:U,selectOpened:B,childIndex:s,hasFocus:F===s,shouldClick:$,isAddBtnFocused:W.current===document.activeElement})))}})()),Y())))}));exports.Select=d;
 //# sourceMappingURL=Select.cjs.js.map

package/dist/cjs/Form/Select/SingleSelect/Select.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs.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 { SingleSelectProps } from \"../Select.interfaces\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSearch } from \"./useSearch\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\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    ...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  });\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({ top: 0, bottom: \"initial\" });\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          className ?? \"\"\n        }`}\n      >\n        {searchVisible && renderSearch()}\n        <button\n          {...selectButtonProps}\n          onClick={() => {\n            setExpanded(!expanded);\n          }}\n          ref={customSelectButtonRef}\n          type=\"button\"\n          name={name}\n          className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n          style={{ display: expanded && searchVisible ? \"none\" : \"initial\" }}\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\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            ...listPosition\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    </Fragment>\n  );\n};\nexport const Select = React.forwardRef(SelectComponent);\n"],"names":["Select","React","forwardRef","children","name","disabled","labeledBy","placeholder","describedBy","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","rest","ref","expanded","setExpanded","useState","display","setDisplay","containerReference","useRef","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsCount","Children","count","filter","isSearching","renderSearch","searchInputRef","setIsSearching","searchThreshold","searchVisible","useSearch","searchInputClassName","classes","default","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","nativeSelect","createRef","onOptionChangeHandler","optionElement","current","getAttribute","dispatchEvent","Event","bubbles","customSelectButtonRef","onArrowNavigation","useArrowNavigation","childrenCount","renderThreshold","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","icon","useDetermineStatusIcon","useEffect","focus","val","forEach","child","props","useBodyClick","event","target","closest","top","bottom","additionalClasses","push","Fragment","createElement","filterProps","tabIndex","readyclasses","map","onKeyDown","select","join","onClick","type","style","length","Icon","Icons","ChevronUp","ChevronDown","maxHeight","wrapper","pointerEvents","role","list","filteredChildren","toArray","toLowerCase","match","_internalRenderChildren","internalChildren","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","isSelected","selectOpened","hasFocus","isAddBtnFocused","document","activeElement","renderOptions"],"mappings":"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"}
+{"version":3,"file":"Select.cjs.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 { SingleSelectProps } from \"../Select.interfaces\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSearch } from \"./useSearch\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\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    ...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  });\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({ top: 0, bottom: \"initial\" });\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(!expanded);\n          }}\n          ref={customSelectButtonRef}\n          type=\"button\"\n          name={name}\n          className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n          style={{ display: expanded && searchVisible ? \"none\" : \"initial\" }}\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\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            ...listPosition\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    </Fragment>\n  );\n};\nexport const Select = React.forwardRef(SelectComponent);\n"],"names":["Select","React","forwardRef","children","name","disabled","labeledBy","placeholder","describedBy","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","rest","ref","expanded","setExpanded","useState","display","setDisplay","containerReference","useRef","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsCount","Children","count","filter","isSearching","renderSearch","searchInputRef","setIsSearching","searchThreshold","searchVisible","useSearch","searchInputClassName","classes","default","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","nativeSelect","createRef","onOptionChangeHandler","optionElement","current","getAttribute","dispatchEvent","Event","bubbles","customSelectButtonRef","onArrowNavigation","useArrowNavigation","childrenCount","renderThreshold","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","icon","useDetermineStatusIcon","useEffect","focus","val","forEach","child","props","useBodyClick","event","target","closest","top","bottom","additionalClasses","push","Fragment","createElement","filterProps","tabIndex","readyclasses","map","onKeyDown","select","join","onClick","type","style","length","Icon","Icons","ChevronUp","ChevronDown","maxHeight","wrapper","pointerEvents","role","list","filteredChildren","toArray","toLowerCase","match","_internalRenderChildren","internalChildren","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","isSelected","selectOpened","hasFocus","isAddBtnFocused","document","activeElement","renderOptions"],"mappings":"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"}

package/dist/cjs/src/components/DataGrid/DataGrid.d.ts

@@ -4,6 +4,7 @@ import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
 import { Props as PaginationProps } from "../Pagination/Pagination";
 import { Spacing } from "../../hooks/useSpacing";
 import { DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
+import { DataGridSearchbarProps } from "./DataGridFilters/DataGridSearchbar";
 export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
     children: ({ item, index }: {
         item: T;
@@ -26,10 +27,8 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     paginationProps?: PaginationProps;
     disableContextMenuColumn?: boolean;
     enableExpandableRow?: boolean;
-    filters?: {
-        enable: boolean;
-        filtersProps: DataGridToolbarProps;
-    };
+    filters?: DataGridToolbarProps;
+    search?: DataGridSearchbarProps;
     isLoading?: boolean;
     enableMultiSorting?: boolean;
     spacing?: Spacing;

package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -9,6 +9,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children
     headers: HeaderCell[];
     isLoading?: boolean;
     disableContextMenuColumn?: boolean;
+    searchValue?: string;
     emptyLabel?: string;
     spacing?: React.CSSProperties;
 }

package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.d.ts

@@ -3,6 +3,7 @@ export interface Props extends ComponentPropsWithRef<"td"> {
     children?: ReactElement | string | number;
     isLoading?: boolean;
     spacing?: React.CSSProperties;
+    searchValue?: string;
     cellIndex?: number;
     columnLength?: number;
     disableContextMenuColumn?: boolean;

package/dist/cjs/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.d.ts

@@ -4,6 +4,7 @@ export interface Props extends ComponentPropsWithRef<"tr"> {
     headers?: HeaderCell[];
     isLoading?: boolean;
     spacing?: React.CSSProperties;
+    searchValue?: string;
     disableContextMenuColumn?: boolean;
     expandableRowProps?: {
         enableExpandableRow: boolean;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridSearchbar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { InputWrapperProps } from "../../..";
+export interface DataGridSearchbarProps {
+    onSearch: (value: string) => void;
+    initialSearchValue?: string;
+    debounceTime?: number;
+    placeholder?: string;
+    inputWrapperProps?: InputWrapperProps;
+}
+export declare const DataGridSearchbar: ({ onSearch, initialSearchValue, debounceTime, inputWrapperProps, placeholder }: DataGridSearchbarProps) => React.JSX.Element;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridToolbar.d.ts

@@ -1,6 +1,6 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import React from "react";
 import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
-export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
+export interface DataGridToolbarProps {
     columnsMetadata: DataGridColumnMetadata[];
     filterValues?: Filter[];
     translations?: FiltersTranslations;
@@ -9,5 +9,4 @@ export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
     onFilterDelete?: (id: string) => void;
     onFiltersClear?: () => void;
 }
-export declare const DataGridToolbarComponent: ForwardRefRenderFunction<HTMLDivElement, DataGridToolbarProps>;
-export declare const DataGridToolbar: React.ForwardRefExoticComponent<Omit<DataGridToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DataGridToolbar: ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear }: DataGridToolbarProps) => React.JSX.Element;

package/dist/cjs/src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.d.ts

@@ -0,0 +1,7 @@
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+type Props = ComponentPropsWithRef<"div">;
+export declare const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>;
+export declare const DataGridToolbarWrapper: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/DataGrid/DataGrid.esm.js

@@ -6,6 +6,8 @@ import { DataGridBody } from './DataGridBody/DataGridBody.esm.js';
 import { Pagination } from '../Pagination/Pagination.esm.js';
 import { useSpacing } from '../src/hooks/useSpacing.esm.js';
 import { DataGridToolbar } from './DataGridFilters/DataGridToolbar.esm.js';
+import { DataGridToolbarWrapper } from './DataGridFilters/DataGridToolbarWrapper.esm.js';
+import { DataGridSearchbar } from './DataGridFilters/DataGridSearchbar.esm.js';
 
 /*
  * Copyright 2022 OneWelcome B.V.
@@ -22,7 +24,7 @@ import { DataGridToolbar } from './DataGridFilters/DataGridToolbar.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridInner = ({ children, data, initialSort, onSort, headers, actions = {}, paginationProps, disableContextMenuColumn, enableExpandableRow, filters, isLoading, enableMultiSorting, emptyLabel, spacing, style, ...rest }, ref) => {
+const DataGridInner = ({ children, data, initialSort, onSort, headers, actions = {}, paginationProps, disableContextMenuColumn, enableExpandableRow, filters, search, isLoading, enableMultiSorting, emptyLabel, spacing, style, ...rest }, ref) => {
     var _a;
     if (!headers) {
         throw new Error("Headers definition has to be provided");
@@ -64,14 +66,16 @@ const DataGridInner = ({ children, data, initialSort, onSort, headers, actions =
             paddingTop: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingTop,
             paddingBottom: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingBottom
         } },
-        (filters === null || filters === void 0 ? void 0 : filters.enable) ? (React.createElement(DataGridToolbar, { ...filters.filtersProps })) : (React.createElement(DataGridActions, { ...actions, style: {
+        filters || search ? (React.createElement(DataGridToolbarWrapper, null,
+            search && React.createElement(DataGridSearchbar, { ...search }),
+            filters && React.createElement(DataGridToolbar, { ...filters }))) : (React.createElement(DataGridActions, { ...actions, style: {
                 paddingLeft: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingLeft,
                 paddingRight: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingRight
             }, headers: internalHeaders, onColumnToggled: onColumnToggled })),
         React.createElement("div", { className: classes["table-wrapper"] },
             React.createElement("table", { className: classes["table"] },
                 React.createElement(DataGridHeader, { headers: internalHeaders, initialSort: initialSort, onSort: onSort, disableContextMenuColumn: disableContextMenuColumn, enableExpandableRow: enableExpandableRow, enableMultiSorting: enableMultiSorting, spacing: styleWithSpacing }),
-                React.createElement(DataGridBody, { data: data, headers: internalHeaders, isLoading: isLoading, disableContextMenuColumn: disableContextMenuColumn, emptyLabel: emptyLabel, spacing: styleWithSpacing }, children))),
+                React.createElement(DataGridBody, { data: data, headers: internalHeaders, isLoading: isLoading, disableContextMenuColumn: disableContextMenuColumn, emptyLabel: emptyLabel, spacing: styleWithSpacing, searchValue: search === null || search === void 0 ? void 0 : search.initialSearchValue }, children))),
         paginationProps && !isLoading && (React.createElement(Pagination, { ...paginationProps, style: {
                 ...paginationProps.style,
                 paddingLeft: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingLeft,

package/dist/esm/DataGrid/DataGrid.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.esm.js","sources":["../../../../../src/components/DataGrid/DataGrid.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, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport classes from \"./DataGrid.module.scss\";\nimport { DataGridHeader } from \"./DataGridHeader/DataGridHeader\";\nimport { DataGridActions } from \"./DataGridActions/DataGridActions\";\nimport { DataGridBody } from \"./DataGridBody/DataGridBody\";\nimport { HeaderCell, OnSortFunction, Sort } from \"./datagrid.interfaces\";\nimport { Pagination, Props as PaginationProps } from \"../Pagination/Pagination\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\nimport { DataGridToolbar, DataGridToolbarProps } from \"./DataGridFilters/DataGridToolbar\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  headers: HeaderCell[];\n  actions?: {\n    enableAddBtn?: boolean;\n    enableColumnsBtn?: boolean;\n    enableSearchBtn?: boolean;\n    addBtnProps?: ButtonProps;\n    columnsBtnProps?: ButtonProps;\n    searchBtnProps?: ButtonProps;\n    searchIconBtnProps?: ButtonProps;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: {\n    enable: boolean;\n    filtersProps: DataGridToolbarProps;\n  };\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n}\n\nconst DataGridInner = <T extends {}>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  if (!headers) {\n    throw new Error(\"Headers definition has to be provided\");\n  }\n  if (!children) {\n    throw new Error(\"DataGridBody should be provided with a template how to render rows\");\n  }\n\n  const [internalHeaders, setInternalHeaders] = useState(headers);\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  useEffect(() => setInternalHeaders(headers), [headers]);\n\n  const onColumnToggled = (colName: string) => {\n    setInternalHeaders(\n      internalHeaders.map(item =>\n        item.name !== colName ? item : { ...item, hidden: !item.hidden }\n      )\n    );\n  };\n\n  if (styleWithSpacing?.padding) {\n    const splitPaddings = styleWithSpacing.padding.toString().split(\" \");\n\n    let paddingLeftIndex: number = 0;\n\n    if (splitPaddings.length >= 2) {\n      paddingLeftIndex = 1;\n    }\n    if (splitPaddings.length === 4) {\n      paddingLeftIndex = 3;\n    }\n\n    Object.defineProperties(styleWithSpacing, {\n      paddingTop: {\n        value: splitPaddings[0]\n      },\n      paddingRight: {\n        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]\n      },\n      paddingBottom: {\n        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]\n      },\n      paddingLeft: {\n        value: splitPaddings[paddingLeftIndex]\n      }\n    });\n  }\n\n  return (\n    <div\n      {...rest}\n      className={classes[\"grid-wrapper\"]}\n      ref={ref}\n      style={{\n        paddingTop: styleWithSpacing?.paddingTop,\n        paddingBottom: styleWithSpacing?.paddingBottom\n      }}\n    >\n      {filters?.enable ? (\n        <DataGridToolbar {...filters.filtersProps} />\n      ) : (\n        <DataGridActions\n          {...actions}\n          style={{\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          headers={internalHeaders}\n          onColumnToggled={onColumnToggled}\n        />\n      )}\n\n      <div className={classes[\"table-wrapper\"]}>\n        <table className={classes[\"table\"]}>\n          <DataGridHeader\n            headers={internalHeaders}\n            initialSort={initialSort}\n            onSort={onSort}\n            disableContextMenuColumn={disableContextMenuColumn}\n            enableExpandableRow={enableExpandableRow}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n          >\n            {children}\n          </DataGridBody>\n        </table>\n      </div>\n      {paginationProps && !isLoading && (\n        <Pagination\n          {...paginationProps}\n          style={{\n            ...paginationProps.style,\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          className={`${classes[\"pagination\"]} ${paginationProps.className ?? \"\"}`}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGrid.esm.js","sources":["../../../../../src/components/DataGrid/DataGrid.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, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport classes from \"./DataGrid.module.scss\";\nimport { DataGridHeader } from \"./DataGridHeader/DataGridHeader\";\nimport { DataGridActions } from \"./DataGridActions/DataGridActions\";\nimport { DataGridBody } from \"./DataGridBody/DataGridBody\";\nimport { HeaderCell, OnSortFunction, Sort } from \"./datagrid.interfaces\";\nimport { Pagination, Props as PaginationProps } from \"../Pagination/Pagination\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\nimport { DataGridToolbar, DataGridToolbarProps } from \"./DataGridFilters/DataGridToolbar\";\nimport { DataGridToolbarWrapper } from \"./DataGridFilters/DataGridToolbarWrapper\";\nimport { DataGridSearchbar, DataGridSearchbarProps } from \"./DataGridFilters/DataGridSearchbar\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  headers: HeaderCell[];\n  actions?: {\n    enableAddBtn?: boolean;\n    enableColumnsBtn?: boolean;\n    enableSearchBtn?: boolean;\n    addBtnProps?: ButtonProps;\n    columnsBtnProps?: ButtonProps;\n    searchBtnProps?: ButtonProps;\n    searchIconBtnProps?: ButtonProps;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: DataGridToolbarProps;\n  search?: DataGridSearchbarProps;\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n}\n\nconst DataGridInner = <T extends {}>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    search,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  if (!headers) {\n    throw new Error(\"Headers definition has to be provided\");\n  }\n  if (!children) {\n    throw new Error(\"DataGridBody should be provided with a template how to render rows\");\n  }\n\n  const [internalHeaders, setInternalHeaders] = useState(headers);\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  useEffect(() => setInternalHeaders(headers), [headers]);\n\n  const onColumnToggled = (colName: string) => {\n    setInternalHeaders(\n      internalHeaders.map(item =>\n        item.name !== colName ? item : { ...item, hidden: !item.hidden }\n      )\n    );\n  };\n\n  if (styleWithSpacing?.padding) {\n    const splitPaddings = styleWithSpacing.padding.toString().split(\" \");\n\n    let paddingLeftIndex: number = 0;\n\n    if (splitPaddings.length >= 2) {\n      paddingLeftIndex = 1;\n    }\n    if (splitPaddings.length === 4) {\n      paddingLeftIndex = 3;\n    }\n\n    Object.defineProperties(styleWithSpacing, {\n      paddingTop: {\n        value: splitPaddings[0]\n      },\n      paddingRight: {\n        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]\n      },\n      paddingBottom: {\n        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]\n      },\n      paddingLeft: {\n        value: splitPaddings[paddingLeftIndex]\n      }\n    });\n  }\n\n  return (\n    <div\n      {...rest}\n      className={classes[\"grid-wrapper\"]}\n      ref={ref}\n      style={{\n        paddingTop: styleWithSpacing?.paddingTop,\n        paddingBottom: styleWithSpacing?.paddingBottom\n      }}\n    >\n      {filters || search ? (\n        <DataGridToolbarWrapper>\n          {search && <DataGridSearchbar {...search} />}\n          {filters && <DataGridToolbar {...filters} />}\n        </DataGridToolbarWrapper>\n      ) : (\n        <DataGridActions\n          {...actions}\n          style={{\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          headers={internalHeaders}\n          onColumnToggled={onColumnToggled}\n        />\n      )}\n\n      <div className={classes[\"table-wrapper\"]}>\n        <table className={classes[\"table\"]}>\n          <DataGridHeader\n            headers={internalHeaders}\n            initialSort={initialSort}\n            onSort={onSort}\n            disableContextMenuColumn={disableContextMenuColumn}\n            enableExpandableRow={enableExpandableRow}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n            searchValue={search?.initialSearchValue}\n          >\n            {children}\n          </DataGridBody>\n        </table>\n      </div>\n      {paginationProps && !isLoading && (\n        <Pagination\n          {...paginationProps}\n          style={{\n            ...paginationProps.style,\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          className={`${classes[\"pagination\"]} ${paginationProps.className ?? \"\"}`}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridBody/DataGridBody.esm.js

@@ -20,7 +20,7 @@ import { Typography } from '../../Typography/Typography.esm.js';
  *    limitations under the License.
  */
 const skeletonLoadingRows = 9;
-const DataGridBodyInner = ({ children, data, headers, isLoading, disableContextMenuColumn, emptyLabel, spacing, ...rest }, ref) => {
+const DataGridBodyInner = ({ children, data, headers, isLoading, disableContextMenuColumn, emptyLabel, spacing, searchValue, ...rest }, ref) => {
     const renderContent = () => {
         const visibleColumns = headers.filter(header => !header.hidden).length;
         if (isLoading) {
@@ -36,6 +36,7 @@ const DataGridBodyInner = ({ children, data, headers, isLoading, disableContextM
         }
         return data === null || data === void 0 ? void 0 : data.map((item, index) => {
             return React.cloneElement(children({ item, index }), {
+                searchValue: searchValue,
                 headers,
                 spacing,
                 disableContextMenuColumn

package/dist/esm/DataGrid/DataGridBody/DataGridBody.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridBody.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridBody/DataGridBody.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, { ComponentPropsWithRef, ReactElement, Ref } from \"react\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport { DataGridCell } from \"./DataGridCell/DataGridCell\";\nimport { DataGridRow } from \"./DataGridRow/DataGridRow\";\nimport classes from \"./DataGridBody.module.scss\";\nimport { Typography } from \"../../Typography/Typography\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"tbody\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  headers: HeaderCell[];\n  isLoading?: boolean;\n  disableContextMenuColumn?: boolean;\n  emptyLabel?: string;\n  spacing?: React.CSSProperties;\n}\n\nconst skeletonLoadingRows = 9;\n\nconst DataGridBodyInner = <T extends {}>(\n  {\n    children,\n    data,\n    headers,\n    isLoading,\n    disableContextMenuColumn,\n    emptyLabel,\n    spacing,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLTableSectionElement>\n) => {\n  const renderContent = () => {\n    const visibleColumns = headers.filter(header => !header.hidden).length;\n    if (isLoading) {\n      return Array.from(Array(skeletonLoadingRows)).map((_, rowIdx) => (\n        <DataGridRow key={rowIdx} isLoading>\n          {Array.from(Array(visibleColumns)).map((__, colIdx) => (\n            <DataGridCell key={colIdx} isLoading></DataGridCell>\n          ))}\n          {!disableContextMenuColumn && <DataGridCell></DataGridCell>}\n        </DataGridRow>\n      ));\n    }\n\n    const emptyData = !data || data.length === 0;\n    if (emptyData) {\n      return (\n        <tr>\n          <td\n            className={classes[\"empty\"]}\n            colSpan={visibleColumns + (disableContextMenuColumn ? 0 : 1)}\n          >\n            <Typography variant=\"body\" spacing={{ margin: 0 }}>\n              {emptyLabel}\n            </Typography>\n          </td>\n        </tr>\n      );\n    }\n\n    return data?.map((item, index) => {\n      return React.cloneElement(children({ item, index }), {\n        headers,\n        spacing,\n        disableContextMenuColumn\n      });\n    });\n  };\n\n  return (\n    <tbody {...rest} ref={ref}>\n      {renderContent()}\n    </tbody>\n  );\n};\n\nexport const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLTableSectionElement> }\n) => ReactElement;\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAmBH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,iBAAiB,GAAG,CACxB,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,wBAAwB,EACxB,UAAU,EACV,OAAO,EACP,GAAG,IAAI,EACE,EACX,GAAiC,KAC/B;IACF,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;QACvE,IAAI,SAAS,EAAE;YACb,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,MAC1D,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA;AAChC,gBAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,MAChD,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA,CAAgB,CACrD,CAAC;gBACD,CAAC,wBAAwB,IAAI,KAAC,CAAA,aAAA,CAAA,YAAY,OAAgB,CAC/C,CACf,CAAC,CAAC;SACJ;QAED,MAAM,SAAS,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;QAC7C,IAAI,SAAS,EAAE;AACb,YAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;gBACE,KACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAC3B,OAAO,EAAE,cAAc,IAAI,wBAAwB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAA;AAE5D,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAC9C,EAAA,UAAU,CACA,CACV,CACF,EACL;SACH;AAED,QAAA,OAAO,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC/B,YAAA,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE;gBACnD,OAAO;gBACP,OAAO;gBACP,wBAAwB;AACzB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;AACL,KAAC,CAAC;AAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAW,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,EACtB,aAAa,EAAE,CACV,EACR;AACJ,CAAC,CAAC;AAEW,MAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB;;;;"}
+{"version":3,"file":"DataGridBody.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridBody/DataGridBody.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, { ComponentPropsWithRef, ReactElement, Ref } from \"react\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport { DataGridCell } from \"./DataGridCell/DataGridCell\";\nimport { DataGridRow } from \"./DataGridRow/DataGridRow\";\nimport classes from \"./DataGridBody.module.scss\";\nimport { Typography } from \"../../Typography/Typography\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"tbody\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  headers: HeaderCell[];\n  isLoading?: boolean;\n  disableContextMenuColumn?: boolean;\n  searchValue?: string;\n  emptyLabel?: string;\n  spacing?: React.CSSProperties;\n}\n\nconst skeletonLoadingRows = 9;\n\nconst DataGridBodyInner = <T extends {}>(\n  {\n    children,\n    data,\n    headers,\n    isLoading,\n    disableContextMenuColumn,\n    emptyLabel,\n    spacing,\n    searchValue,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLTableSectionElement>\n) => {\n  const renderContent = () => {\n    const visibleColumns = headers.filter(header => !header.hidden).length;\n    if (isLoading) {\n      return Array.from(Array(skeletonLoadingRows)).map((_, rowIdx) => (\n        <DataGridRow key={rowIdx} isLoading>\n          {Array.from(Array(visibleColumns)).map((__, colIdx) => (\n            <DataGridCell key={colIdx} isLoading></DataGridCell>\n          ))}\n          {!disableContextMenuColumn && <DataGridCell></DataGridCell>}\n        </DataGridRow>\n      ));\n    }\n\n    const emptyData = !data || data.length === 0;\n    if (emptyData) {\n      return (\n        <tr>\n          <td\n            className={classes[\"empty\"]}\n            colSpan={visibleColumns + (disableContextMenuColumn ? 0 : 1)}\n          >\n            <Typography variant=\"body\" spacing={{ margin: 0 }}>\n              {emptyLabel}\n            </Typography>\n          </td>\n        </tr>\n      );\n    }\n\n    return data?.map((item, index) => {\n      return React.cloneElement(children({ item, index }), {\n        searchValue: searchValue,\n        headers,\n        spacing,\n        disableContextMenuColumn\n      });\n    });\n  };\n\n  return (\n    <tbody {...rest} ref={ref}>\n      {renderContent()}\n    </tbody>\n  );\n};\n\nexport const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLTableSectionElement> }\n) => ReactElement;\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAoBH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,iBAAiB,GAAG,CACxB,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,wBAAwB,EACxB,UAAU,EACV,OAAO,EACP,WAAW,EACX,GAAG,IAAI,EACE,EACX,GAAiC,KAC/B;IACF,MAAM,aAAa,GAAG,MAAK;AACzB,QAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;QACvE,IAAI,SAAS,EAAE;YACb,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,MAC1D,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA;AAChC,gBAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,MAChD,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA,CAAgB,CACrD,CAAC;gBACD,CAAC,wBAAwB,IAAI,KAAC,CAAA,aAAA,CAAA,YAAY,OAAgB,CAC/C,CACf,CAAC,CAAC;SACJ;QAED,MAAM,SAAS,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;QAC7C,IAAI,SAAS,EAAE;AACb,YAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;gBACE,KACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAC3B,OAAO,EAAE,cAAc,IAAI,wBAAwB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAA;AAE5D,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAC9C,EAAA,UAAU,CACA,CACV,CACF,EACL;SACH;AAED,QAAA,OAAO,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC/B,YAAA,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE;AACnD,gBAAA,WAAW,EAAE,WAAW;gBACxB,OAAO;gBACP,OAAO;gBACP,wBAAwB;AACzB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;AACL,KAAC,CAAC;AAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAW,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,EACtB,aAAa,EAAE,CACV,EACR;AACJ,CAAC,CAAC;AAEW,MAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB;;;;"}

package/dist/esm/DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Typography } from '../../../Typography/Typography.esm.js';
 import classes from './DataGridCell.module.scss.esm.js';
 
@@ -17,7 +17,7 @@ import classes from './DataGridCell.module.scss.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridCellComponent = ({ children, className, isLoading, spacing, cellIndex, columnLength, disableContextMenuColumn, ...rest }, ref) => {
+const DataGridCellComponent = ({ children, className, isLoading, spacing, searchValue, cellIndex, columnLength, disableContextMenuColumn, ...rest }, ref) => {
     let cellStyle = {};
     if (cellIndex === 0) {
         cellStyle.paddingLeft = spacing === null || spacing === void 0 ? void 0 : spacing.paddingLeft;
@@ -26,9 +26,28 @@ const DataGridCellComponent = ({ children, className, isLoading, spacing, cellIn
         (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)) {
         cellStyle.paddingRight = spacing === null || spacing === void 0 ? void 0 : spacing.paddingRight;
     }
+    //NOTE: we might want to migrate to Highlight API once it's supported by Firefox
+    const renderContent = () => {
+        var _a;
+        if (typeof children === "string" && searchValue) {
+            if (!children.toLowerCase().includes(searchValue.toLowerCase())) {
+                return children;
+            }
+            const matchingSequence = new RegExp(searchValue, "i").exec(children);
+            const parts = children.split((_a = matchingSequence === null || matchingSequence === void 0 ? void 0 : matchingSequence[0]) !== null && _a !== void 0 ? _a : "");
+            return parts.map((part, i) => {
+                if (i === parts.length - 1)
+                    return React.createElement(Fragment, { key: `${part}-${i}` }, part);
+                return (React.createElement(Fragment, { key: `${part}-${i}` },
+                    part,
+                    React.createElement("mark", { "data-testid": `${matchingSequence}-mark` }, matchingSequence)));
+            });
+        }
+        return children;
+    };
     return (React.createElement("td", { ...rest, ref: ref, style: { ...rest.style, ...cellStyle }, className: `${classes["cell"]} ${className !== null && className !== void 0 ? className : ""}` },
         isLoading && React.createElement("div", { className: classes["loading"], "aria-busy": "true", "aria-live": "polite" }),
-        !isLoading && (React.createElement(Typography, { className: classes["text"], variant: "body", tag: "span" }, children))));
+        !isLoading && (React.createElement(Typography, { className: classes["text"], variant: "body", tag: "span" }, renderContent()))));
 };
 const DataGridCell = React.forwardRef(DataGridCellComponent);
 

package/dist/esm/DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridCell.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.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 { Typography } from \"../../../Typography/Typography\";\nimport classes from \"./DataGridCell.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"td\"> {\n  children?: ReactElement | string | number;\n  isLoading?: boolean;\n  spacing?: React.CSSProperties;\n  cellIndex?: number;\n  columnLength?: number;\n  disableContextMenuColumn?: boolean;\n}\n\nconst DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (\n  {\n    children,\n    className,\n    isLoading,\n    spacing,\n    cellIndex,\n    columnLength,\n    disableContextMenuColumn,\n    ...rest\n  }: Props,\n  ref\n) => {\n  let cellStyle: React.CSSProperties = {};\n\n  if (cellIndex === 0) {\n    cellStyle.paddingLeft = spacing?.paddingLeft;\n  }\n  if (\n    (cellIndex === columnLength && !disableContextMenuColumn) ||\n    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)\n  ) {\n    cellStyle.paddingRight = spacing?.paddingRight;\n  }\n\n  return (\n    <td\n      {...rest}\n      ref={ref}\n      style={{ ...rest.style, ...cellStyle }}\n      className={`${classes[\"cell\"]} ${className ?? \"\"}`}\n    >\n      {isLoading && <div className={classes[\"loading\"]} aria-busy=\"true\" aria-live=\"polite\"></div>}\n      {!isLoading && (\n        <Typography className={classes[\"text\"]} variant=\"body\" tag=\"span\">\n          {children}\n        </Typography>\n      )}\n    </td>\n  );\n};\n\nexport const DataGridCell = React.forwardRef(DataGridCellComponent);\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;AAcG;AAeH,MAAM,qBAAqB,GAA0D,CACnF,EACE,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,wBAAwB,EACxB,GAAG,IAAI,EACD,EACR,GAAG,KACD;IACF,IAAI,SAAS,GAAwB,EAAE,CAAC;AAExC,IAAA,IAAI,SAAS,KAAK,CAAC,EAAE;QACnB,SAAS,CAAC,WAAW,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,WAAW,CAAC;KAC9C;AACD,IAAA,IACE,CAAC,SAAS,KAAK,YAAY,IAAI,CAAC,wBAAwB;SACvD,YAAY,IAAI,SAAS,KAAK,YAAY,GAAG,CAAC,IAAI,wBAAwB,CAAC,EAC5E;QACA,SAAS,CAAC,YAAY,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,YAAY,CAAC;KAChD;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,SAAS,EAAE,EACtC,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,MAAM,CAAC,CAAI,CAAA,EAAA,SAAS,aAAT,SAAS,KAAA,KAAA,CAAA,GAAT,SAAS,GAAI,EAAE,CAAE,CAAA,EAAA;AAEjD,QAAA,SAAS,IAAI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAY,WAAA,EAAA,MAAM,EAAW,WAAA,EAAA,QAAQ,EAAO,CAAA;QAC3F,CAAC,SAAS,KACT,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,GAAG,EAAC,MAAM,EAC9D,EAAA,QAAQ,CACE,CACd,CACE,EACL;AACJ,CAAC,CAAC;AAEW,MAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB;;;;"}
+{"version":3,"file":"DataGridCell.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.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, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  ReactElement,\n  Fragment\n} from \"react\";\nimport { Typography } from \"../../../Typography/Typography\";\nimport classes from \"./DataGridCell.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"td\"> {\n  children?: ReactElement | string | number;\n  isLoading?: boolean;\n  spacing?: React.CSSProperties;\n  searchValue?: string;\n  cellIndex?: number;\n  columnLength?: number;\n  disableContextMenuColumn?: boolean;\n}\n\nconst DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (\n  {\n    children,\n    className,\n    isLoading,\n    spacing,\n    searchValue,\n    cellIndex,\n    columnLength,\n    disableContextMenuColumn,\n    ...rest\n  }: Props,\n  ref\n) => {\n  let cellStyle: React.CSSProperties = {};\n\n  if (cellIndex === 0) {\n    cellStyle.paddingLeft = spacing?.paddingLeft;\n  }\n  if (\n    (cellIndex === columnLength && !disableContextMenuColumn) ||\n    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)\n  ) {\n    cellStyle.paddingRight = spacing?.paddingRight;\n  }\n\n  //NOTE: we might want to migrate to Highlight API once it's supported by Firefox\n  const renderContent = () => {\n    if (typeof children === \"string\" && searchValue) {\n      if (!children.toLowerCase().includes(searchValue.toLowerCase())) {\n        return children;\n      }\n\n      const matchingSequence = new RegExp(searchValue, \"i\").exec(children);\n\n      const parts = children.split(matchingSequence?.[0] ?? \"\");\n      return parts.map((part, i) => {\n        if (i === parts.length - 1) return <Fragment key={`${part}-${i}`}>{part}</Fragment>;\n\n        return (\n          <Fragment key={`${part}-${i}`}>\n            {part}\n            <mark data-testid={`${matchingSequence}-mark`}>{matchingSequence}</mark>\n          </Fragment>\n        );\n      });\n    }\n\n    return children;\n  };\n\n  return (\n    <td\n      {...rest}\n      ref={ref}\n      style={{ ...rest.style, ...cellStyle }}\n      className={`${classes[\"cell\"]} ${className ?? \"\"}`}\n    >\n      {isLoading && <div className={classes[\"loading\"]} aria-busy=\"true\" aria-live=\"polite\"></div>}\n      {!isLoading && (\n        <Typography className={classes[\"text\"]} variant=\"body\" tag=\"span\">\n          {renderContent()}\n        </Typography>\n      )}\n    </td>\n  );\n};\n\nexport const DataGridCell = React.forwardRef(DataGridCellComponent);\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridBody/DataGridRow/DataGridRow.esm.js

@@ -21,12 +21,13 @@ import { generateID } from '../../../src/util/helper.esm.js';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const DataGridRowComponent = ({ children, className, headers, isLoading, spacing, expandableRowProps, disableContextMenuColumn, ...rest }, ref) => {
+const DataGridRowComponent = ({ children, className, headers, searchValue, isLoading, spacing, expandableRowProps, disableContextMenuColumn, ...rest }, ref) => {
     const { enableExpandableRow = false, expandButtonId = `ID-${generateID()}`, expandButtonTitle = "Expand row", drawerId = `ID-${generateID()}`, expandableRowContent } = expandableRowProps || {};
     const [isRowExpanded, setIsRowExpanded] = useState(false);
     const visibleCells = React.Children.map(children, (child, index) => {
         if (child) {
             const cellWithSpacing = React.cloneElement(child, {
+                searchValue,
                 spacing: spacing,
                 cellIndex: index,
                 columnLength: headers === null || headers === void 0 ? void 0 : headers.length,

package/dist/esm/DataGrid/DataGridBody/DataGridRow/DataGridRow.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridRow.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.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, { ComponentPropsWithRef, useState, Fragment, ForwardRefRenderFunction } from \"react\";\nimport { HeaderCell } from \"../../datagrid.interfaces\";\nimport classes from \"./DataGridRow.module.scss\";\nimport { IconButton } from \"../../../Button/IconButton\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { DataGridCell } from \"../DataGridCell/DataGridCell\";\nimport { DataGridDrawer } from \"../DataGridDrawer/DataGridDrawer\";\nimport { generateID } from \"../../../../util/helper\";\n\nexport interface Props extends ComponentPropsWithRef<\"tr\"> {\n  headers?: HeaderCell[];\n  isLoading?: boolean;\n  spacing?: React.CSSProperties;\n  disableContextMenuColumn?: boolean;\n  expandableRowProps?: {\n    enableExpandableRow: boolean;\n    expandableRowContent: React.ReactNode;\n    expandButtonTitle?: string;\n    expandButtonId?: string;\n    drawerId?: string;\n  };\n}\n\nconst DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (\n  {\n    children,\n    className,\n    headers,\n    isLoading,\n    spacing,\n    expandableRowProps,\n    disableContextMenuColumn,\n    ...rest\n  },\n  ref\n) => {\n  const {\n    enableExpandableRow = false,\n    expandButtonId = `ID-${generateID()}`,\n    expandButtonTitle = \"Expand row\",\n    drawerId = `ID-${generateID()}`,\n    expandableRowContent\n  } = expandableRowProps || {};\n  const [isRowExpanded, setIsRowExpanded] = useState(false);\n  const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {\n    if (child) {\n      const cellWithSpacing = React.cloneElement(child, {\n        spacing: spacing,\n        cellIndex: index,\n        columnLength: headers?.length,\n        disableContextMenuColumn\n      });\n\n      const visible = headers && headers.length > index ? !headers[index].hidden : true;\n      return visible && cellWithSpacing;\n    }\n    return null;\n  });\n\n  const classNames = [classes[\"row\"]];\n  className && classNames.push(className);\n  enableExpandableRow\n    ? !isRowExpanded && classNames.push(classes[\"border-drawer\"])\n    : classNames.push(classes[\"border\"]);\n  isLoading && classNames.push(classes[\"loading\"]);\n\n  return (\n    <Fragment>\n      <tr {...rest} ref={ref} className={classNames.join(\" \")}>\n        {enableExpandableRow && (\n          <DataGridCell\n            className={classes[\"expand-button-cell\"]}\n            onClick={() => setIsRowExpanded(!isRowExpanded)}\n            style={{ width: \"1px\" }}\n          >\n            <IconButton\n              id={expandButtonId}\n              title={expandButtonTitle}\n              aria-expanded={isRowExpanded}\n              aria-controls={drawerId}\n            >\n              <Icon size=\"0.75rem\" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />\n            </IconButton>\n          </DataGridCell>\n        )}\n        {visibleCells}\n      </tr>\n      {enableExpandableRow && (\n        <tr className={`${classes[\"row\"]} ${isRowExpanded ? classes[\"border-drawer\"] : \"\"}`}>\n          <td colSpan={visibleCells.length + 1}>\n            <DataGridDrawer\n              id={drawerId}\n              role=\"region\"\n              aria-labelledby={expandButtonId}\n              isExpanded={isRowExpanded}\n            >\n              {expandableRowContent}\n            </DataGridDrawer>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridRow = React.forwardRef(DataGridRowComponent);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGridRow.esm.js","sources":["../../../../../../../src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.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, { ComponentPropsWithRef, useState, Fragment, ForwardRefRenderFunction } from \"react\";\nimport { HeaderCell } from \"../../datagrid.interfaces\";\nimport classes from \"./DataGridRow.module.scss\";\nimport { IconButton } from \"../../../Button/IconButton\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { DataGridCell } from \"../DataGridCell/DataGridCell\";\nimport { DataGridDrawer } from \"../DataGridDrawer/DataGridDrawer\";\nimport { generateID } from \"../../../../util/helper\";\n\nexport interface Props extends ComponentPropsWithRef<\"tr\"> {\n  headers?: HeaderCell[];\n  isLoading?: boolean;\n  spacing?: React.CSSProperties;\n  searchValue?: string;\n  disableContextMenuColumn?: boolean;\n  expandableRowProps?: {\n    enableExpandableRow: boolean;\n    expandableRowContent: React.ReactNode;\n    expandButtonTitle?: string;\n    expandButtonId?: string;\n    drawerId?: string;\n  };\n}\n\nconst DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (\n  {\n    children,\n    className,\n    headers,\n    searchValue,\n    isLoading,\n    spacing,\n    expandableRowProps,\n    disableContextMenuColumn,\n    ...rest\n  },\n  ref\n) => {\n  const {\n    enableExpandableRow = false,\n    expandButtonId = `ID-${generateID()}`,\n    expandButtonTitle = \"Expand row\",\n    drawerId = `ID-${generateID()}`,\n    expandableRowContent\n  } = expandableRowProps || {};\n  const [isRowExpanded, setIsRowExpanded] = useState(false);\n  const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {\n    if (child) {\n      const cellWithSpacing = React.cloneElement(child, {\n        searchValue,\n        spacing: spacing,\n        cellIndex: index,\n        columnLength: headers?.length,\n        disableContextMenuColumn\n      });\n\n      const visible = headers && headers.length > index ? !headers[index].hidden : true;\n      return visible && cellWithSpacing;\n    }\n    return null;\n  });\n\n  const classNames = [classes[\"row\"]];\n  className && classNames.push(className);\n  enableExpandableRow\n    ? !isRowExpanded && classNames.push(classes[\"border-drawer\"])\n    : classNames.push(classes[\"border\"]);\n  isLoading && classNames.push(classes[\"loading\"]);\n\n  return (\n    <Fragment>\n      <tr {...rest} ref={ref} className={classNames.join(\" \")}>\n        {enableExpandableRow && (\n          <DataGridCell\n            className={classes[\"expand-button-cell\"]}\n            onClick={() => setIsRowExpanded(!isRowExpanded)}\n            style={{ width: \"1px\" }}\n          >\n            <IconButton\n              id={expandButtonId}\n              title={expandButtonTitle}\n              aria-expanded={isRowExpanded}\n              aria-controls={drawerId}\n            >\n              <Icon size=\"0.75rem\" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />\n            </IconButton>\n          </DataGridCell>\n        )}\n        {visibleCells}\n      </tr>\n      {enableExpandableRow && (\n        <tr className={`${classes[\"row\"]} ${isRowExpanded ? classes[\"border-drawer\"] : \"\"}`}>\n          <td colSpan={visibleCells.length + 1}>\n            <DataGridDrawer\n              id={drawerId}\n              role=\"region\"\n              aria-labelledby={expandButtonId}\n              isExpanded={isRowExpanded}\n            >\n              {expandableRowContent}\n            </DataGridDrawer>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridRow = React.forwardRef(DataGridRowComponent);\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AA0BH,MAAM,oBAAoB,GAAyD,CACjF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,SAAS,EACT,OAAO,EACP,kBAAkB,EAClB,wBAAwB,EACxB,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,EACJ,mBAAmB,GAAG,KAAK,EAC3B,cAAc,GAAG,CAAA,GAAA,EAAM,UAAU,EAAE,CAAE,CAAA,EACrC,iBAAiB,GAAG,YAAY,EAChC,QAAQ,GAAG,CAAM,GAAA,EAAA,UAAU,EAAE,CAAA,CAAE,EAC/B,oBAAoB,EACrB,GAAG,kBAAkB,IAAI,EAAE,CAAC;IAC7B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC1D,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAI;QACzF,IAAI,KAAK,EAAE;AACT,YAAA,MAAM,eAAe,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAChD,WAAW;AACX,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,SAAS,EAAE,KAAK;AAChB,gBAAA,YAAY,EAAE,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,MAAM;gBAC7B,wBAAwB;AACzB,aAAA,CAAC,CAAC;YAEH,MAAM,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC;YAClF,OAAO,OAAO,IAAI,eAAe,CAAC;SACnC;AACD,QAAA,OAAO,IAAI,CAAC;AACd,KAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;AACpC,IAAA,SAAS,IAAI,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,mBAAmB;AACjB,UAAE,CAAC,aAAa,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;UAC3D,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvC,SAAS,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAEjD,QACE,oBAAC,QAAQ,EAAA,IAAA;AACP,QAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA;AACpD,YAAA,mBAAmB,KAClB,KAAC,CAAA,aAAA,CAAA,YAAY,EACX,EAAA,SAAS,EAAE,OAAO,CAAC,oBAAoB,CAAC,EACxC,OAAO,EAAE,MAAM,gBAAgB,CAAC,CAAC,aAAa,CAAC,EAC/C,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAA;AAEvB,gBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,EAAE,EAAE,cAAc,EAClB,KAAK,EAAE,iBAAiB,EAAA,eAAA,EACT,aAAa,EAAA,eAAA,EACb,QAAQ,EAAA;oBAEvB,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,WAAW,EAAA,CAAI,CACvE,CACA,CAChB;AACA,YAAA,YAAY,CACV;QACJ,mBAAmB,KAClB,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,KAAK,CAAC,CAAA,CAAA,EAAI,aAAa,GAAG,OAAO,CAAC,eAAe,CAAC,GAAG,EAAE,CAAE,CAAA,EAAA;AACjF,YAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,OAAO,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,EAAA;gBAClC,KAAC,CAAA,aAAA,CAAA,cAAc,IACb,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAC,QAAQ,EACI,iBAAA,EAAA,cAAc,EAC/B,UAAU,EAAE,aAAa,EAAA,EAExB,oBAAoB,CACN,CACd,CACF,CACN,CACQ,EACX;AACJ,CAAC,CAAC;AAEW,MAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,oBAAoB;;;;"}

package/dist/esm/DataGrid/DataGridFilters/DataGridSearchbar.esm.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { InputWrapper } from '../../Form/Wrapper/InputWrapper/InputWrapper.esm.js';
+import { Icon, Icons } from '../../Icon/Icon.esm.js';
+import classes from './DataGridToolbar.module.scss.esm.js';
+import { useDebouncedCallback } from '../../src/hooks/useDebouncedCallback.esm.js';
+
+/*
+ * 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 DataGridSearchbar = ({ onSearch, initialSearchValue, debounceTime, inputWrapperProps, placeholder }) => {
+    var _a, _b, _c;
+    const [search, setSearch] = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : "");
+    const debouncedCallback = useDebouncedCallback(onSearch, debounceTime !== null && debounceTime !== void 0 ? debounceTime : 500);
+    const onSearchCallback = debounceTime ? debouncedCallback : onSearch;
+    const onChange = (event) => {
+        onSearchCallback(event.target.value);
+        setSearch(event.target.value);
+    };
+    useEffect(() => {
+        initialSearchValue && setSearch(initialSearchValue);
+    }, [initialSearchValue]);
+    return (React.createElement(InputWrapper, { ...inputWrapperProps, className: `${classes["searchbar"]} ${(_a = inputWrapperProps === null || inputWrapperProps === void 0 ? void 0 : inputWrapperProps.className) !== null && _a !== void 0 ? _a : ""}`, label: (_b = inputWrapperProps === null || inputWrapperProps === void 0 ? void 0 : inputWrapperProps.label) !== null && _b !== void 0 ? _b : "", onChange: onChange, type: "search", name: (_c = inputWrapperProps === null || inputWrapperProps === void 0 ? void 0 : inputWrapperProps.name) !== null && _c !== void 0 ? _c : "searchbar", value: search, inputProps: {
+            ...inputWrapperProps === null || inputWrapperProps === void 0 ? void 0 : inputWrapperProps.inputProps,
+            type: "search",
+            prefix: React.createElement(Icon, { icon: Icons.Search }),
+            placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search items"
+        } }));
+};
+
+export { DataGridSearchbar };
+//# sourceMappingURL=DataGridSearchbar.esm.js.map

package/dist/esm/DataGrid/DataGridFilters/DataGridSearchbar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridSearchbar.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridSearchbar.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, { useState, useEffect } from \"react\";\nimport { InputWrapper } from \"../../Form/Wrapper/InputWrapper/InputWrapper\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport { InputWrapperProps, useDebouncedCallback } from \"../../..\";\n\nexport interface DataGridSearchbarProps {\n  onSearch: (value: string) => void;\n  initialSearchValue?: string;\n  debounceTime?: number;\n  placeholder?: string;\n  inputWrapperProps?: InputWrapperProps;\n}\n\nexport const DataGridSearchbar = ({\n  onSearch,\n  initialSearchValue,\n  debounceTime,\n  inputWrapperProps,\n  placeholder\n}: DataGridSearchbarProps) => {\n  const [search, setSearch] = useState(initialSearchValue ?? \"\");\n  const debouncedCallback = useDebouncedCallback(onSearch, debounceTime ?? 500);\n  const onSearchCallback = debounceTime ? debouncedCallback : onSearch;\n\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onSearchCallback(event.target.value);\n    setSearch(event.target.value);\n  };\n\n  useEffect(() => {\n    initialSearchValue && setSearch(initialSearchValue);\n  }, [initialSearchValue]);\n\n  return (\n    <InputWrapper\n      {...inputWrapperProps}\n      className={`${classes[\"searchbar\"]} ${inputWrapperProps?.className ?? \"\"}`}\n      label={inputWrapperProps?.label ?? \"\"}\n      onChange={onChange}\n      type=\"search\"\n      name={inputWrapperProps?.name ?? \"searchbar\"}\n      value={search}\n      inputProps={{\n        ...inputWrapperProps?.inputProps,\n        type: \"search\",\n        prefix: <Icon icon={Icons.Search} />,\n        placeholder: placeholder ?? \"Search items\"\n      }}\n    ></InputWrapper>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAgBU,MAAA,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACY,KAAI;;AAC3B,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,kBAAkB,KAAA,IAAA,IAAlB,kBAAkB,KAAlB,KAAA,CAAA,GAAA,kBAAkB,GAAI,EAAE,CAAC,CAAC;AAC/D,IAAA,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,QAAQ,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,KAAA,CAAA,GAAA,YAAY,GAAI,GAAG,CAAC,CAAC;IAC9E,MAAM,gBAAgB,GAAG,YAAY,GAAG,iBAAiB,GAAG,QAAQ,CAAC;AAErE,IAAA,MAAM,QAAQ,GAAG,CAAC,KAA0C,KAAI;AAC9D,QAAA,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACrC,QAAA,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAChC,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,kBAAkB,IAAI,SAAS,CAAC,kBAAkB,CAAC,CAAC;AACtD,KAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAEzB,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAA,GACP,iBAAiB,EACrB,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,WAAW,CAAC,CAAI,CAAA,EAAA,CAAA,EAAA,GAAA,iBAAiB,KAAA,IAAA,IAAjB,iBAAiB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAjB,iBAAiB,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,EAAE,CAAA,CAAE,EAC1E,KAAK,EAAE,CAAA,EAAA,GAAA,iBAAiB,KAAjB,IAAA,IAAA,iBAAiB,KAAjB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,iBAAiB,CAAE,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,EAAE,EACrC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAA,EAAA,GAAA,iBAAiB,KAAjB,IAAA,IAAA,iBAAiB,KAAjB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,iBAAiB,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,WAAW,EAC5C,KAAK,EAAE,MAAM,EACb,UAAU,EAAE;AACV,YAAA,GAAG,iBAAiB,KAAjB,IAAA,IAAA,iBAAiB,KAAjB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,iBAAiB,CAAE,UAAU;AAChC,YAAA,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,oBAAC,IAAI,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAI,CAAA;AACpC,YAAA,WAAW,EAAE,WAAW,KAAA,IAAA,IAAX,WAAW,KAAX,KAAA,CAAA,GAAA,WAAW,GAAI,cAAc;AAC3C,SAAA,EAAA,CACa,EAChB;AACJ;;;;"}

package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.esm.js

@@ -1,4 +1,4 @@
-import React, { useReducer } from 'react';
+import React, { useReducer, Fragment } from 'react';
 import { DataGridFilter } from './DataGridFilter.esm.js';
 import classes from './DataGridToolbar.module.scss.esm.js';
 import { Typography } from '../../Typography/Typography.esm.js';
@@ -43,10 +43,10 @@ const filtersReducer = (state, action) => {
             return { ...state, filters: [] };
     }
 };
-const DataGridToolbarComponent = ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear, ...rest }, ref) => {
+const DataGridToolbar = ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear }) => {
     const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });
     const { clearButtonCaption = "Clear all filters" } = (translations === null || translations === void 0 ? void 0 : translations.toolbar) || {};
-    return (React.createElement("div", { ...rest, ref: ref, className: classes["toolbar"] },
+    return (React.createElement(Fragment, null,
         state.filters.map(filter => (React.createElement(DataGridFilter, { mode: "EDIT", key: filter.id, filter: filter, columnsMetadata: columnsMetadata, dispatch: dispatch, onFilterEdit: onFilterEdit, onFilterDelete: onFilterDelete, tagTranslations: translations === null || translations === void 0 ? void 0 : translations.tag, popoverTranslations: translations === null || translations === void 0 ? void 0 : translations.popover }))),
         React.createElement("div", { className: classes["actions-wrapper"] },
             React.createElement(DataGridFilter, { mode: "ADD", columnsMetadata: columnsMetadata, dispatch: dispatch, onFilterAdd: onFilterAdd, tagTranslations: translations === null || translations === void 0 ? void 0 : translations.tag, popoverTranslations: translations === null || translations === void 0 ? void 0 : translations.popover }),
@@ -56,7 +56,6 @@ const DataGridToolbarComponent = ({ columnsMetadata, filterValues, translations,
                 } },
                 React.createElement(Typography, { variant: "body", className: classes["caption"] }, clearButtonCaption))))));
 };
-const DataGridToolbar = React.forwardRef(DataGridToolbarComponent);
 
-export { DataGridToolbar, DataGridToolbarComponent };
+export { DataGridToolbar };
 //# sourceMappingURL=DataGridToolbar.esm.js.map

package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridToolbar.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.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, { ComponentPropsWithRef, ForwardRefRenderFunction, useReducer } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  Filter,\n  FiltersAction,\n  FiltersState,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\n\nexport interface DataGridToolbarProps extends ComponentPropsWithRef<\"div\"> {\n  columnsMetadata: DataGridColumnMetadata[];\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nconst filtersReducer = (state: FiltersState, action: FiltersAction): FiltersState => {\n  switch (action.type) {\n    case \"add\":\n      return { ...state, filters: [...state.filters, { ...action.payload }] };\n    case \"edit\":\n      return {\n        ...state,\n        filters: [\n          ...state.filters.map(value => {\n            if (value.id === action.payload.id) {\n              return action.payload;\n            }\n            return value;\n          })\n        ]\n      };\n    case \"remove\":\n      return {\n        ...state,\n        filters: [...state.filters.filter(value => value.id !== action.payload.id)]\n      };\n    case \"clear\":\n      return { ...state, filters: [] };\n  }\n};\n\nexport const DataGridToolbarComponent: ForwardRefRenderFunction<\n  HTMLDivElement,\n  DataGridToolbarProps\n> = (\n  {\n    columnsMetadata,\n    filterValues,\n    translations,\n    onFilterAdd,\n    onFilterEdit,\n    onFilterDelete,\n    onFiltersClear,\n    ...rest\n  },\n  ref\n) => {\n  const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <div {...rest} ref={ref} className={classes[\"toolbar\"]}>\n      {state.filters.map(filter => (\n        <DataGridFilter\n          mode=\"EDIT\"\n          key={filter.id}\n          filter={filter}\n          columnsMetadata={columnsMetadata}\n          dispatch={dispatch}\n          onFilterEdit={onFilterEdit}\n          onFilterDelete={onFilterDelete}\n          tagTranslations={translations?.tag}\n          popoverTranslations={translations?.popover}\n        />\n      ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        <DataGridFilter\n          mode=\"ADD\"\n          columnsMetadata={columnsMetadata}\n          dispatch={dispatch}\n          onFilterAdd={onFilterAdd}\n          tagTranslations={translations?.tag}\n          popoverTranslations={translations?.popover}\n        />\n        {state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              dispatch({ type: \"clear\" });\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const DataGridToolbar = React.forwardRef(DataGridToolbarComponent);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGridToolbar.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.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, { Fragment, useReducer } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  Filter,\n  FiltersAction,\n  FiltersState,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\n\nexport interface DataGridToolbarProps {\n  columnsMetadata: DataGridColumnMetadata[];\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nconst filtersReducer = (state: FiltersState, action: FiltersAction): FiltersState => {\n  switch (action.type) {\n    case \"add\":\n      return { ...state, filters: [...state.filters, { ...action.payload }] };\n    case \"edit\":\n      return {\n        ...state,\n        filters: [\n          ...state.filters.map(value => {\n            if (value.id === action.payload.id) {\n              return action.payload;\n            }\n            return value;\n          })\n        ]\n      };\n    case \"remove\":\n      return {\n        ...state,\n        filters: [...state.filters.filter(value => value.id !== action.payload.id)]\n      };\n    case \"clear\":\n      return { ...state, filters: [] };\n  }\n};\n\nexport const DataGridToolbar = ({\n  columnsMetadata,\n  filterValues,\n  translations,\n  onFilterAdd,\n  onFilterEdit,\n  onFilterDelete,\n  onFiltersClear\n}: DataGridToolbarProps) => {\n  const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <Fragment>\n      {state.filters.map(filter => (\n        <DataGridFilter\n          mode=\"EDIT\"\n          key={filter.id}\n          filter={filter}\n          columnsMetadata={columnsMetadata}\n          dispatch={dispatch}\n          onFilterEdit={onFilterEdit}\n          onFilterDelete={onFilterDelete}\n          tagTranslations={translations?.tag}\n          popoverTranslations={translations?.popover}\n        />\n      ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        <DataGridFilter\n          mode=\"ADD\"\n          columnsMetadata={columnsMetadata}\n          dispatch={dispatch}\n          onFilterAdd={onFilterAdd}\n          tagTranslations={translations?.tag}\n          popoverTranslations={translations?.popover}\n        />\n        {state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              dispatch({ type: \"clear\" });\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;AAcG;AAwBH,MAAM,cAAc,GAAG,CAAC,KAAmB,EAAE,MAAqB,KAAkB;AAClF,IAAA,QAAQ,MAAM,CAAC,IAAI;AACjB,QAAA,KAAK,KAAK;YACR,OAAO,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,EAAE,EAAE,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;AAC1E,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,GAAG,KAAK;AACR,gBAAA,OAAO,EAAE;oBACP,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,IAAG;wBAC3B,IAAI,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE;4BAClC,OAAO,MAAM,CAAC,OAAO,CAAC;yBACvB;AACD,wBAAA,OAAO,KAAK,CAAC;AACf,qBAAC,CAAC;AACH,iBAAA;aACF,CAAC;AACJ,QAAA,KAAK,QAAQ;YACX,OAAO;AACL,gBAAA,GAAG,KAAK;gBACR,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;aAC5E,CAAC;AACJ,QAAA,KAAK,OAAO;YACV,OAAO,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;KACpC;AACH,CAAC,CAAC;MAEW,eAAe,GAAG,CAAC,EAC9B,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc,EACO,KAAI;AACzB,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,YAAY,IAAI,EAAE,EAAE,CAAC,CAAC;AACtF,IAAA,MAAM,EAAE,kBAAkB,GAAG,mBAAmB,EAAE,GAAG,CAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,uBAAZ,YAAY,CAAE,OAAO,KAAI,EAAE,CAAC;IACjF,QACE,oBAAC,QAAQ,EAAA,IAAA;AACN,QAAA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACvB,KAAC,CAAA,aAAA,CAAA,cAAc,IACb,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,YAAY,aAAZ,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAY,CAAE,GAAG,EAClC,mBAAmB,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAY,CAAE,OAAO,EAAA,CAC1C,CACH,CAAC;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,iBAAiB,CAAC,EAAA;AACxC,YAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EACb,EAAA,IAAI,EAAC,KAAK,EACV,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,CAAE,GAAG,EAClC,mBAAmB,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,uBAAZ,YAAY,CAAE,OAAO,EAC1C,CAAA;YACD,KAAK,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,KACxB,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,EAClC,OAAO,EAAE,MAAK;AACZ,oBAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;oBAC5B,cAAc,IAAI,cAAc,EAAE,CAAC;iBACpC,EAAA;gBAED,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAA,EACrD,kBAAkB,CACR,CACN,CACV,CACG,CACG,EACX;AACJ;;;;"}