@onewelcome/react-lib-components 10.0.1 → 10.1.0

package/dist/components/ContextMenu/ContextMenu.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.cjs.js","sources":["../../../src/components/ContextMenu/ContextMenu.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  ComponentPropsWithRef,\n  createRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport { Props as IconButtonProps } from \"../Button/IconButton\";\nimport { Popover, Props as PopoverProps } from \"../Popover/Popover\";\nimport { Placement, Offset } from \"../../hooks/usePosition\";\nimport classes from \"./ContextMenu.module.scss\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\nimport { Props as ContextMenuItemProps } from \"./ContextMenuItem\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../hooks/useGetDomRoot\";\nimport { useArrowNavigation, useDefaultOffset, useFocusAnchorElement } from \"./ContextMenuService\";\nimport { generateID } from \"../../util/helper\";\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;\n  decorativeElement?: ReactNode;\n  children: ReactElement<ContextMenuItemProps> | ReactElement<ContextMenuItemProps>[];\n  placement?: Placement;\n  transformOrigin?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  id?: string;\n  show?: boolean;\n  domRoot?: HTMLElement;\n  onShow?: () => void;\n  onClose?: () => void;\n  popoverProps?: PopoverProps;\n  value?: number;\n  onChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;\n}\n\nconst ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    trigger,\n    children,\n    decorativeElement,\n    id = `ID-${generateID()}`,\n    show = false,\n    onShow,\n    onClose,\n    placement = { horizontal: \"right\", vertical: \"top\" },\n    offset,\n    transformOrigin = { horizontal: \"left\", vertical: \"top\" },\n    debounceAmount,\n    domRoot,\n    popoverProps,\n    value,\n    onChange,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const anchorEl = useRef<HTMLButtonElement>(null);\n  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const [showContextMenu, setShowContextMenu] = useState(show);\n  const [selectedContextMenuItem, setSelectedContextMenuItem] = useState(-1);\n  const [focusedContextMenuItem, setFocusedContextMenuItem] = useState(-1);\n  const [shouldClick, setShouldClick] =\n    useState(\n      false\n    ); /** We need this, because whenever we use the arrow keys to select the contextmenu item, and we focus the currently selected item it fires the \"click\" listener in ContextMenuItem 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 childrenCount = React.Children.count(children);\n\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const syncSelectedContextMenuItem = setSelectedContextMenuItem;\n\n  useEffect(() => {\n    value !== undefined && syncSelectedContextMenuItem(value);\n  }, [value]);\n\n  const { calculateDefaultOffset } = useDefaultOffset();\n  const calculatedOffset = offset ?? calculateDefaultOffset(placement, transformOrigin);\n\n  const { onArrowNavigation } = useArrowNavigation({\n    selectedContextMenuItem,\n    setSelectedContextMenuItem,\n    focusedContextMenuItem,\n    setFocusedContextMenuItem,\n    showContextMenu,\n    setShowContextMenu,\n    childrenCount,\n    setShouldClick\n  });\n\n  useClickOutside(anchorEl, () => {\n    if (showContextMenu) {\n      setShowContextMenu(false);\n    }\n  }, [showContextMenu]);\n\n  useFocusAnchorElement(\n    anchorEl,\n    id,\n    showContextMenu,\n    setShowContextMenu,\n    setFocusedContextMenuItem,\n    onShow,\n    onClose\n  );\n\n  const renderTrigger = () =>\n    React.cloneElement(trigger, {\n      id: id,\n      \"aria-haspopup\": \"true\",\n      \"aria-controls\": `${id}-menu`,\n      \"aria-expanded\": showContextMenu,\n      onClick: () => setShowContextMenu(!showContextMenu),\n      tabIndex: 0,\n      ref: anchorEl\n    });\n\n  const renderChildren = () =>\n    React.Children.map(children, (child, index) =>\n      React.cloneElement(child as ReactElement, {\n        onFocusChange: (childIndex: number) => setFocusedContextMenuItem(childIndex),\n        onSelectedChange: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => {\n          setSelectedContextMenuItem(childIndex);\n          setShouldClick(false);\n          onChange?.(event, childIndex);\n        },\n        childIndex: index,\n        hasFocus: focusedContextMenuItem === index,\n        isSelected: selectedContextMenuItem === index,\n        showActiveState:\n          child?.props.showActiveState ??\n          (value !== undefined && selectedContextMenuItem === index),\n        contextMenuOpened: showContextMenu,\n        shouldClick: shouldClick,\n        autoFocus: showContextMenu && index === 0\n      })\n    );\n\n  const onOutOfViewHandler = useCallback(() => {\n    setShowContextMenu(false);\n  }, []);\n\n  if (!root) {\n    return null;\n  }\n\n  return (\n    <div\n      {...rest}\n      ref={wrappingDivRef}\n      onKeyDown={onArrowNavigation}\n      className={classes[\"context-menu\"]}\n    >\n      {renderTrigger()}\n      {createPortal(\n        <Popover\n          {...popoverProps}\n          placement={placement}\n          transformOrigin={transformOrigin}\n          offset={calculatedOffset}\n          anchorEl={anchorEl}\n          debounceAmount={debounceAmount}\n          show={showContextMenu}\n          onAnchorOutOfView={onOutOfViewHandler}\n        >\n          {decorativeElement && (\n            <div className={classes[\"decorative-element\"]}>{decorativeElement}</div>\n          )}\n          <ul\n            className={`${classes[\"menu\"]} ${decorativeElement ? classes[\"no-margin-top\"] : \"\"}`}\n            id={`${id}-menu`}\n            aria-describedby={id}\n            role=\"menu\"\n          >\n            {renderChildren()}\n          </ul>\n        </Popover>,\n        root\n      )}\n    </div>\n  );\n};\n\nexport const ContextMenu = React.forwardRef(ContextMenuComponent);\n"],"names":["ContextMenu","React","forwardRef","trigger","children","decorativeElement","id","generateID","show","onShow","onClose","placement","horizontal","vertical","offset","transformOrigin","debounceAmount","domRoot","popoverProps","value","onChange","rest","ref","anchorEl","useRef","wrappingDivRef","createRef","showContextMenu","setShowContextMenu","useState","selectedContextMenuItem","setSelectedContextMenuItem","focusedContextMenuItem","setFocusedContextMenuItem","shouldClick","setShouldClick","childrenCount","Children","count","root","useGetDomRoot","syncSelectedContextMenuItem","useEffect","calculateDefaultOffset","useDefaultOffset","calculatedOffset","onArrowNavigation","useArrowNavigation","useClickOutside","ContextMenuService","useFocusAnchorElement","onOutOfViewHandler","useCallback","createElement","onKeyDown","className","classes","cloneElement","onClick","tabIndex","createPortal","Popover","onAnchorOutOfView","role","map","child","index","onFocusChange","childIndex","onSelectedChange","event","hasFocus","isSelected","showActiveState","props","contextMenuOpened","autoFocus"],"mappings":"kYA6MaA,EAAcC,EAAMC,YAnJ6C,EAE1EC,UACAC,WACAC,oBACAC,KAAK,MAAMC,EAAAA,eACXC,QAAO,EACPC,SACAC,UACAC,YAAY,CAAEC,WAAY,QAASC,SAAU,OAC7CC,SACAC,kBAAkB,CAAEH,WAAY,OAAQC,SAAU,OAClDG,iBACAC,UACAC,eACAC,QACAC,cACGC,GAELC,KAEM,MAAAC,EAAWC,SAA0B,MACrCC,EAAkBH,GAAqCI,eACtDC,EAAiBC,GAAsBC,EAAAA,SAASrB,IAChDsB,EAAyBC,GAA8BF,EAAAA,UAAW,IAClEG,EAAwBC,GAA6BJ,EAAAA,UAAW,IAChEK,EAAaC,GAClBN,EAAAA,UACE,GAEEO,EAAgBnC,EAAMoC,SAASC,MAAMlC,IAErCmC,KAAEA,GAASC,gBAAcvB,EAASQ,GAElCgB,EAA8BV,EAEpCW,EAAAA,WAAU,UACE,IAAAvB,GAAasB,EAA4BtB,EAAK,GACvD,CAACA,IAEE,MAAAwB,uBAAEA,GAA2BC,qBAC7BC,EAAmB/B,GAAU6B,EAAuBhC,EAAWI,IAE/D+B,kBAAEA,GAAsBC,qBAAmB,CAC/CjB,0BACAC,6BACAC,yBACAC,4BACAN,kBACAC,qBACAQ,gBACAD,mBAGFa,EAAAA,gBAAgBzB,GAAU,KACpBI,GACFC,GAAmB,EAAK,GAEzB,CAACD,IAEJsB,EAAAC,sBACE3B,EACAjB,EACAqB,EACAC,EACAK,EACAxB,EACAC,GAGF,MAgCMyC,EAAqBC,EAAAA,aAAY,KACrCxB,GAAmB,EAAK,GACvB,IAEH,OAAKW,EAKHtC,EAAAoD,cAAC,MAAA,IACKhC,EACJC,IAAKG,EACL6B,UAAWR,EACXS,UAAWC,UAAQ,iBA5CrBvD,EAAMwD,aAAatD,EAAS,CAC1BG,KACA,gBAAiB,OACjB,gBAAiB,GAAGA,SACpB,gBAAiBqB,EACjB+B,QAAS,IAAM9B,GAAoBD,GACnCgC,SAAU,EACVrC,IAAKC,IAwCJqC,EAAAA,aACC3D,EAAAoD,cAACQ,EAAAA,QAAA,IACK3C,EACJP,YACAI,kBACAD,OAAQ+B,EACRtB,WACAP,iBACAR,KAAMmB,EACNmC,kBAAmBX,GAElB9C,GACEJ,EAAAoD,cAAA,MAAA,CAAIE,UAAWC,UAAQ,uBAAwBnD,GAElDJ,EAAAoD,cAAC,KAAA,CACCE,UAAW,GAAGC,UAAc,QAAKnD,EAAoBmD,UAAQ,iBAAmB,KAChFlD,GAAI,GAAGA,SACP,mBAAkBA,EAClByD,KAAK,QAtDb9D,EAAMoC,SAAS2B,IAAI5D,GAAU,CAAC6D,EAAOC,IACnCjE,EAAMwD,aAAaQ,EAAuB,CACxCE,cAAgBC,GAAuBnC,EAA0BmC,GACjEC,iBAAkB,CAACC,EAA4CF,KAC7DrC,EAA2BqC,GAC3BjC,GAAe,GACf,MAAAf,GAAAA,EAAWkD,EAAOF,EAAA,EAEpBA,WAAYF,EACZK,SAAUvC,IAA2BkC,EACrCM,WAAY1C,IAA4BoC,EACxCO,iBACS,MAAPR,OAAO,EAAAA,EAAAS,MAAMD,wBACF,IAAVtD,GAAuBW,IAA4BoC,GACtDS,kBAAmBhD,EACnBO,cACA0C,UAAWjD,GAA6B,IAAVuC,QA2C9B3B,IAlCG,IAoCP"}
+{"version":3,"file":"ContextMenu.cjs.js","sources":["../../../src/components/ContextMenu/ContextMenu.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  ComponentPropsWithRef,\n  createRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport { Props as IconButtonProps } from \"../Button/IconButton\";\nimport { Popover, Props as PopoverProps } from \"../Popover/Popover\";\nimport { Placement, Offset } from \"../../hooks/usePosition\";\nimport classes from \"./ContextMenu.module.scss\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\nimport { Props as ContextMenuItemProps } from \"./ContextMenuItem\";\nimport { ContextMenuDivider } from \"./ContextMenuDivider\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../hooks/useGetDomRoot\";\nimport { useArrowNavigation, useDefaultOffset, useFocusAnchorElement } from \"./ContextMenuService\";\nimport { generateID } from \"../../util/helper\";\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  ariaLabel?: string;\n  trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;\n  decorativeElement?: ReactNode;\n  children:\n    | ReactElement<ContextMenuItemProps>\n    | ReactElement<typeof ContextMenuDivider>\n    | (ReactElement<ContextMenuItemProps> | ReactElement<typeof ContextMenuDivider>)[];\n  placement?: Placement;\n  transformOrigin?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  id?: string;\n  show?: boolean;\n  domRoot?: HTMLElement;\n  onShow?: () => void;\n  onClose?: () => void;\n  popoverProps?: PopoverProps;\n  value?: number;\n  onChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;\n}\n\nconst ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    trigger,\n    children,\n    decorativeElement,\n    id = `ID-${generateID()}`,\n    show = false,\n    onShow,\n    onClose,\n    placement = { horizontal: \"right\", vertical: \"top\" },\n    offset,\n    transformOrigin = { horizontal: \"left\", vertical: \"top\" },\n    debounceAmount,\n    domRoot,\n    popoverProps,\n    value,\n    onChange,\n    ariaLabel,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const anchorEl = useRef<HTMLButtonElement>(null);\n  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const [showContextMenu, setShowContextMenu] = useState(show);\n  const [selectedContextMenuItem, setSelectedContextMenuItem] = useState(-1);\n  const [focusedContextMenuItem, setFocusedContextMenuItem] = useState(-1);\n  const [shouldClick, setShouldClick] =\n    useState(\n      false\n    ); /** We need this, because whenever we use the arrow keys to select the contextmenu item, and we focus the currently selected item it fires the \"click\" listener in ContextMenuItem 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\n  const childrenCount = React.Children.toArray(children).filter(\n    child => React.isValidElement(child) && child.type !== ContextMenuDivider\n  ).length;\n\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const syncSelectedContextMenuItem = setSelectedContextMenuItem;\n\n  useEffect(() => {\n    value !== undefined && syncSelectedContextMenuItem(value);\n  }, [value]);\n\n  const { calculateDefaultOffset } = useDefaultOffset();\n  const calculatedOffset = offset ?? calculateDefaultOffset(placement, transformOrigin);\n\n  const { onArrowNavigation } = useArrowNavigation({\n    selectedContextMenuItem,\n    setSelectedContextMenuItem,\n    focusedContextMenuItem,\n    setFocusedContextMenuItem,\n    showContextMenu,\n    setShowContextMenu,\n    childrenCount,\n    setShouldClick\n  });\n\n  useClickOutside(anchorEl, () => {\n    if (showContextMenu) {\n      setShowContextMenu(false);\n    }\n  }, [showContextMenu]);\n\n  useFocusAnchorElement(\n    anchorEl,\n    id,\n    showContextMenu,\n    setShowContextMenu,\n    setFocusedContextMenuItem,\n    onShow,\n    onClose\n  );\n\n  const renderTrigger = () =>\n    React.cloneElement(trigger, {\n      id: id,\n      \"aria-haspopup\": \"true\",\n      \"aria-controls\": `${id}-menu`,\n      \"aria-expanded\": showContextMenu,\n      \"aria-label\": ariaLabel,\n      onClick: () => setShowContextMenu(!showContextMenu),\n      tabIndex: 0,\n      ref: anchorEl\n    });\n\n  const renderChildren = () => {\n    let itemIndex = 0;\n    return React.Children.map(children, child => {\n      if (React.isValidElement(child) && child.type === ContextMenuDivider) {\n        return child;\n      }\n\n      const menuItem = child as ReactElement<ContextMenuItemProps>;\n      const currentItemIndex = itemIndex;\n      itemIndex++;\n\n      return React.cloneElement(menuItem, {\n        onFocusChange: (childIndex: number) => setFocusedContextMenuItem(childIndex),\n        onSelectedChange: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => {\n          setSelectedContextMenuItem(childIndex);\n          setShouldClick(false);\n          onChange?.(event, childIndex);\n        },\n        childIndex: currentItemIndex,\n        hasFocus: focusedContextMenuItem === currentItemIndex,\n        isSelected: selectedContextMenuItem === currentItemIndex,\n        showActiveState:\n          menuItem.props.showActiveState ??\n          (value !== undefined && selectedContextMenuItem === currentItemIndex),\n        contextMenuOpened: showContextMenu,\n        shouldClick: shouldClick,\n        autoFocus: showContextMenu && currentItemIndex === 0\n      });\n    });\n  };\n\n  const onOutOfViewHandler = useCallback(() => {\n    setShowContextMenu(false);\n  }, []);\n\n  if (!root) {\n    return null;\n  }\n\n  return (\n    <div\n      {...rest}\n      ref={wrappingDivRef}\n      onKeyDown={onArrowNavigation}\n      className={classes[\"context-menu\"]}\n    >\n      {renderTrigger()}\n      {createPortal(\n        <Popover\n          {...popoverProps}\n          placement={placement}\n          transformOrigin={transformOrigin}\n          offset={calculatedOffset}\n          anchorEl={anchorEl}\n          debounceAmount={debounceAmount}\n          show={showContextMenu}\n          onAnchorOutOfView={onOutOfViewHandler}\n        >\n          {decorativeElement && (\n            <div className={classes[\"decorative-element\"]}>{decorativeElement}</div>\n          )}\n          <ul\n            className={`${classes[\"menu\"]} ${decorativeElement ? classes[\"no-margin-top\"] : \"\"}`}\n            id={`${id}-menu`}\n            aria-describedby={id}\n            role=\"menu\"\n          >\n            {renderChildren()}\n          </ul>\n        </Popover>,\n        root\n      )}\n    </div>\n  );\n};\n\nexport const ContextMenu = React.forwardRef(ContextMenuComponent);\n"],"names":["ContextMenu","React","forwardRef","trigger","children","decorativeElement","id","generateID","show","onShow","onClose","placement","horizontal","vertical","offset","transformOrigin","debounceAmount","domRoot","popoverProps","value","onChange","ariaLabel","rest","ref","anchorEl","useRef","wrappingDivRef","createRef","showContextMenu","setShowContextMenu","useState","selectedContextMenuItem","setSelectedContextMenuItem","focusedContextMenuItem","setFocusedContextMenuItem","shouldClick","setShouldClick","childrenCount","Children","toArray","filter","isValidElement","child","type","ContextMenuDivider","length","root","useGetDomRoot","syncSelectedContextMenuItem","useEffect","calculateDefaultOffset","useDefaultOffset","calculatedOffset","onArrowNavigation","useArrowNavigation","useClickOutside","ContextMenuService","useFocusAnchorElement","onOutOfViewHandler","useCallback","createElement","onKeyDown","className","classes","cloneElement","onClick","tabIndex","createPortal","Popover","onAnchorOutOfView","role","itemIndex","map","menuItem","currentItemIndex","onFocusChange","childIndex","onSelectedChange","event","hasFocus","isSelected","showActiveState","props","contextMenuOpened","autoFocus","renderChildren"],"mappings":"2aAiOaA,EAAcC,EAAMC,YAlK6C,EAE1EC,UACAC,WACAC,oBACAC,KAAK,MAAMC,EAAAA,eACXC,QAAO,EACPC,SACAC,UACAC,YAAY,CAAEC,WAAY,QAASC,SAAU,OAC7CC,SACAC,kBAAkB,CAAEH,WAAY,OAAQC,SAAU,OAClDG,iBACAC,UACAC,eACAC,QACAC,WACAC,eACGC,GAELC,KAEM,MAAAC,EAAWC,SAA0B,MACrCC,EAAkBH,GAAqCI,eACtDC,EAAiBC,GAAsBC,EAAAA,SAAStB,IAChDuB,EAAyBC,GAA8BF,EAAAA,UAAW,IAClEG,EAAwBC,GAA6BJ,EAAAA,UAAW,IAChEK,EAAaC,GAClBN,EAAAA,UACE,GAGEO,EAAgBpC,EAAMqC,SAASC,QAAQnC,GAAUoC,WAC5CvC,EAAMwC,eAAeC,IAAUA,EAAMC,OAASC,EAAAA,qBACvDC,QAEIC,KAAEA,GAASC,gBAAc9B,EAASS,GAElCsB,EAA8BhB,EAEpCiB,EAAAA,WAAU,UACE,IAAA9B,GAAa6B,EAA4B7B,EAAK,GACvD,CAACA,IAEE,MAAA+B,uBAAEA,GAA2BC,qBAC7BC,EAAmBtC,GAAUoC,EAAuBvC,EAAWI,IAE/DsC,kBAAEA,GAAsBC,qBAAmB,CAC/CvB,0BACAC,6BACAC,yBACAC,4BACAN,kBACAC,qBACAQ,gBACAD,mBAGFmB,EAAAA,gBAAgB/B,GAAU,KACpBI,GACFC,GAAmB,EAAK,GAEzB,CAACD,IAEJ4B,EAAAC,sBACEjC,EACAlB,EACAsB,EACAC,EACAK,EACAzB,EACAC,GAGF,MA2CMgD,EAAqBC,EAAAA,aAAY,KACrC9B,GAAmB,EAAK,GACvB,IAEH,OAAKiB,EAKH7C,EAAA2D,cAAC,MAAA,IACKtC,EACJC,IAAKG,EACLmC,UAAWR,EACXS,UAAWC,UAAQ,iBAvDrB9D,EAAM+D,aAAa7D,EAAS,CAC1BG,KACA,gBAAiB,OACjB,gBAAiB,GAAGA,SACpB,gBAAiBsB,EACjB,aAAcP,EACd4C,QAAS,IAAMpC,GAAoBD,GACnCsC,SAAU,EACV3C,IAAKC,IAkDJ2C,EAAAA,aACClE,EAAA2D,cAACQ,EAAAA,QAAA,IACKlD,EACJP,YACAI,kBACAD,OAAQsC,EACR5B,WACAR,iBACAR,KAAMoB,EACNyC,kBAAmBX,GAElBrD,GACEJ,EAAA2D,cAAA,MAAA,CAAIE,UAAWC,UAAQ,uBAAwB1D,GAElDJ,EAAA2D,cAAC,KAAA,CACCE,UAAW,GAAGC,UAAc,QAAK1D,EAAoB0D,UAAQ,iBAAmB,KAChFzD,GAAI,GAAGA,SACP,mBAAkBA,EAClBgE,KAAK,QAjEQ,MACrB,IAAIC,EAAY,EAChB,OAAOtE,EAAMqC,SAASkC,IAAIpE,GAAmBsC,IAC3C,GAAIzC,EAAMwC,eAAeC,IAAUA,EAAMC,OAASC,qBACzC,OAAAF,EAGT,MAAM+B,EAAW/B,EACXgC,EAAmBH,EAGlB,OAFPA,IAEOtE,EAAM+D,aAAaS,EAAU,CAClCE,cAAgBC,GAAuB1C,EAA0B0C,GACjEC,iBAAkB,CAACC,EAA4CF,KAC7D5C,EAA2B4C,GAC3BxC,GAAe,GACf,MAAAhB,GAAAA,EAAW0D,EAAOF,EAAA,EAEpBA,WAAYF,EACZK,SAAU9C,IAA2ByC,EACrCM,WAAYjD,IAA4B2C,EACxCO,gBACER,EAASS,MAAMD,uBACJ,IAAV9D,GAAuBY,IAA4B2C,GACtDS,kBAAmBvD,EACnBO,cACAiD,UAAWxD,GAAwC,IAArB8C,GAC/B,GACF,EAuCQW,KAGLvC,IAlCG,IAoCP"}

package/dist/components/ContextMenu/ContextMenu.es.js

@@ -2,6 +2,7 @@ import React, { useRef, createRef, useState, useEffect, useCallback } from "reac
 import { Popover } from "../Popover/Popover.es.js";
 import classes from "./ContextMenu.module.scss.es.js";
 import { useClickOutside } from "../../hooks/useClickOutside.es.js";
+import { ContextMenuDivider } from "./ContextMenuDivider.es.js";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../hooks/useGetDomRoot.es.js";
 import { useDefaultOffset, useFocusAnchorElement, useArrowNavigation } from "./ContextMenuService.es.js";
@@ -22,6 +23,7 @@ const ContextMenuComponent = ({
   popoverProps,
   value,
   onChange,
+  ariaLabel,
   ...rest
 }, ref) => {
   const anchorEl = useRef(null);
@@ -32,7 +34,9 @@ const ContextMenuComponent = ({
   const [shouldClick, setShouldClick] = useState(
     false
   );
-  const childrenCount = React.Children.count(children);
+  const childrenCount = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type !== ContextMenuDivider
+  ).length;
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
   const syncSelectedContextMenuItem = setSelectedContextMenuItem;
   useEffect(() => {
@@ -69,28 +73,37 @@ const ContextMenuComponent = ({
     "aria-haspopup": "true",
     "aria-controls": `${id}-menu`,
     "aria-expanded": showContextMenu,
+    "aria-label": ariaLabel,
     onClick: () => setShowContextMenu(!showContextMenu),
     tabIndex: 0,
     ref: anchorEl
   });
-  const renderChildren = () => React.Children.map(
-    children,
-    (child, index) => React.cloneElement(child, {
-      onFocusChange: (childIndex) => setFocusedContextMenuItem(childIndex),
-      onSelectedChange: (event, childIndex) => {
-        setSelectedContextMenuItem(childIndex);
-        setShouldClick(false);
-        onChange == null ? void 0 : onChange(event, childIndex);
-      },
-      childIndex: index,
-      hasFocus: focusedContextMenuItem === index,
-      isSelected: selectedContextMenuItem === index,
-      showActiveState: (child == null ? void 0 : child.props.showActiveState) ?? (value !== void 0 && selectedContextMenuItem === index),
-      contextMenuOpened: showContextMenu,
-      shouldClick,
-      autoFocus: showContextMenu && index === 0
-    })
-  );
+  const renderChildren = () => {
+    let itemIndex = 0;
+    return React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && child.type === ContextMenuDivider) {
+        return child;
+      }
+      const menuItem = child;
+      const currentItemIndex = itemIndex;
+      itemIndex++;
+      return React.cloneElement(menuItem, {
+        onFocusChange: (childIndex) => setFocusedContextMenuItem(childIndex),
+        onSelectedChange: (event, childIndex) => {
+          setSelectedContextMenuItem(childIndex);
+          setShouldClick(false);
+          onChange == null ? void 0 : onChange(event, childIndex);
+        },
+        childIndex: currentItemIndex,
+        hasFocus: focusedContextMenuItem === currentItemIndex,
+        isSelected: selectedContextMenuItem === currentItemIndex,
+        showActiveState: menuItem.props.showActiveState ?? (value !== void 0 && selectedContextMenuItem === currentItemIndex),
+        contextMenuOpened: showContextMenu,
+        shouldClick,
+        autoFocus: showContextMenu && currentItemIndex === 0
+      });
+    });
+  };
   const onOutOfViewHandler = useCallback(() => {
     setShowContextMenu(false);
   }, []);

package/dist/components/ContextMenu/ContextMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.es.js","sources":["../../../src/components/ContextMenu/ContextMenu.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  ComponentPropsWithRef,\n  createRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport { Props as IconButtonProps } from \"../Button/IconButton\";\nimport { Popover, Props as PopoverProps } from \"../Popover/Popover\";\nimport { Placement, Offset } from \"../../hooks/usePosition\";\nimport classes from \"./ContextMenu.module.scss\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\nimport { Props as ContextMenuItemProps } from \"./ContextMenuItem\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../hooks/useGetDomRoot\";\nimport { useArrowNavigation, useDefaultOffset, useFocusAnchorElement } from \"./ContextMenuService\";\nimport { generateID } from \"../../util/helper\";\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;\n  decorativeElement?: ReactNode;\n  children: ReactElement<ContextMenuItemProps> | ReactElement<ContextMenuItemProps>[];\n  placement?: Placement;\n  transformOrigin?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  id?: string;\n  show?: boolean;\n  domRoot?: HTMLElement;\n  onShow?: () => void;\n  onClose?: () => void;\n  popoverProps?: PopoverProps;\n  value?: number;\n  onChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;\n}\n\nconst ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    trigger,\n    children,\n    decorativeElement,\n    id = `ID-${generateID()}`,\n    show = false,\n    onShow,\n    onClose,\n    placement = { horizontal: \"right\", vertical: \"top\" },\n    offset,\n    transformOrigin = { horizontal: \"left\", vertical: \"top\" },\n    debounceAmount,\n    domRoot,\n    popoverProps,\n    value,\n    onChange,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const anchorEl = useRef<HTMLButtonElement>(null);\n  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const [showContextMenu, setShowContextMenu] = useState(show);\n  const [selectedContextMenuItem, setSelectedContextMenuItem] = useState(-1);\n  const [focusedContextMenuItem, setFocusedContextMenuItem] = useState(-1);\n  const [shouldClick, setShouldClick] =\n    useState(\n      false\n    ); /** We need this, because whenever we use the arrow keys to select the contextmenu item, and we focus the currently selected item it fires the \"click\" listener in ContextMenuItem 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 childrenCount = React.Children.count(children);\n\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const syncSelectedContextMenuItem = setSelectedContextMenuItem;\n\n  useEffect(() => {\n    value !== undefined && syncSelectedContextMenuItem(value);\n  }, [value]);\n\n  const { calculateDefaultOffset } = useDefaultOffset();\n  const calculatedOffset = offset ?? calculateDefaultOffset(placement, transformOrigin);\n\n  const { onArrowNavigation } = useArrowNavigation({\n    selectedContextMenuItem,\n    setSelectedContextMenuItem,\n    focusedContextMenuItem,\n    setFocusedContextMenuItem,\n    showContextMenu,\n    setShowContextMenu,\n    childrenCount,\n    setShouldClick\n  });\n\n  useClickOutside(anchorEl, () => {\n    if (showContextMenu) {\n      setShowContextMenu(false);\n    }\n  }, [showContextMenu]);\n\n  useFocusAnchorElement(\n    anchorEl,\n    id,\n    showContextMenu,\n    setShowContextMenu,\n    setFocusedContextMenuItem,\n    onShow,\n    onClose\n  );\n\n  const renderTrigger = () =>\n    React.cloneElement(trigger, {\n      id: id,\n      \"aria-haspopup\": \"true\",\n      \"aria-controls\": `${id}-menu`,\n      \"aria-expanded\": showContextMenu,\n      onClick: () => setShowContextMenu(!showContextMenu),\n      tabIndex: 0,\n      ref: anchorEl\n    });\n\n  const renderChildren = () =>\n    React.Children.map(children, (child, index) =>\n      React.cloneElement(child as ReactElement, {\n        onFocusChange: (childIndex: number) => setFocusedContextMenuItem(childIndex),\n        onSelectedChange: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => {\n          setSelectedContextMenuItem(childIndex);\n          setShouldClick(false);\n          onChange?.(event, childIndex);\n        },\n        childIndex: index,\n        hasFocus: focusedContextMenuItem === index,\n        isSelected: selectedContextMenuItem === index,\n        showActiveState:\n          child?.props.showActiveState ??\n          (value !== undefined && selectedContextMenuItem === index),\n        contextMenuOpened: showContextMenu,\n        shouldClick: shouldClick,\n        autoFocus: showContextMenu && index === 0\n      })\n    );\n\n  const onOutOfViewHandler = useCallback(() => {\n    setShowContextMenu(false);\n  }, []);\n\n  if (!root) {\n    return null;\n  }\n\n  return (\n    <div\n      {...rest}\n      ref={wrappingDivRef}\n      onKeyDown={onArrowNavigation}\n      className={classes[\"context-menu\"]}\n    >\n      {renderTrigger()}\n      {createPortal(\n        <Popover\n          {...popoverProps}\n          placement={placement}\n          transformOrigin={transformOrigin}\n          offset={calculatedOffset}\n          anchorEl={anchorEl}\n          debounceAmount={debounceAmount}\n          show={showContextMenu}\n          onAnchorOutOfView={onOutOfViewHandler}\n        >\n          {decorativeElement && (\n            <div className={classes[\"decorative-element\"]}>{decorativeElement}</div>\n          )}\n          <ul\n            className={`${classes[\"menu\"]} ${decorativeElement ? classes[\"no-margin-top\"] : \"\"}`}\n            id={`${id}-menu`}\n            aria-describedby={id}\n            role=\"menu\"\n          >\n            {renderChildren()}\n          </ul>\n        </Popover>,\n        root\n      )}\n    </div>\n  );\n};\n\nexport const ContextMenu = React.forwardRef(ContextMenuComponent);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ContextMenu.es.js","sources":["../../../src/components/ContextMenu/ContextMenu.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  ComponentPropsWithRef,\n  createRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport { Props as IconButtonProps } from \"../Button/IconButton\";\nimport { Popover, Props as PopoverProps } from \"../Popover/Popover\";\nimport { Placement, Offset } from \"../../hooks/usePosition\";\nimport classes from \"./ContextMenu.module.scss\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\nimport { Props as ContextMenuItemProps } from \"./ContextMenuItem\";\nimport { ContextMenuDivider } from \"./ContextMenuDivider\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../hooks/useGetDomRoot\";\nimport { useArrowNavigation, useDefaultOffset, useFocusAnchorElement } from \"./ContextMenuService\";\nimport { generateID } from \"../../util/helper\";\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  ariaLabel?: string;\n  trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;\n  decorativeElement?: ReactNode;\n  children:\n    | ReactElement<ContextMenuItemProps>\n    | ReactElement<typeof ContextMenuDivider>\n    | (ReactElement<ContextMenuItemProps> | ReactElement<typeof ContextMenuDivider>)[];\n  placement?: Placement;\n  transformOrigin?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n  id?: string;\n  show?: boolean;\n  domRoot?: HTMLElement;\n  onShow?: () => void;\n  onClose?: () => void;\n  popoverProps?: PopoverProps;\n  value?: number;\n  onChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;\n}\n\nconst ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    trigger,\n    children,\n    decorativeElement,\n    id = `ID-${generateID()}`,\n    show = false,\n    onShow,\n    onClose,\n    placement = { horizontal: \"right\", vertical: \"top\" },\n    offset,\n    transformOrigin = { horizontal: \"left\", vertical: \"top\" },\n    debounceAmount,\n    domRoot,\n    popoverProps,\n    value,\n    onChange,\n    ariaLabel,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const anchorEl = useRef<HTMLButtonElement>(null);\n  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const [showContextMenu, setShowContextMenu] = useState(show);\n  const [selectedContextMenuItem, setSelectedContextMenuItem] = useState(-1);\n  const [focusedContextMenuItem, setFocusedContextMenuItem] = useState(-1);\n  const [shouldClick, setShouldClick] =\n    useState(\n      false\n    ); /** We need this, because whenever we use the arrow keys to select the contextmenu item, and we focus the currently selected item it fires the \"click\" listener in ContextMenuItem 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\n  const childrenCount = React.Children.toArray(children).filter(\n    child => React.isValidElement(child) && child.type !== ContextMenuDivider\n  ).length;\n\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const syncSelectedContextMenuItem = setSelectedContextMenuItem;\n\n  useEffect(() => {\n    value !== undefined && syncSelectedContextMenuItem(value);\n  }, [value]);\n\n  const { calculateDefaultOffset } = useDefaultOffset();\n  const calculatedOffset = offset ?? calculateDefaultOffset(placement, transformOrigin);\n\n  const { onArrowNavigation } = useArrowNavigation({\n    selectedContextMenuItem,\n    setSelectedContextMenuItem,\n    focusedContextMenuItem,\n    setFocusedContextMenuItem,\n    showContextMenu,\n    setShowContextMenu,\n    childrenCount,\n    setShouldClick\n  });\n\n  useClickOutside(anchorEl, () => {\n    if (showContextMenu) {\n      setShowContextMenu(false);\n    }\n  }, [showContextMenu]);\n\n  useFocusAnchorElement(\n    anchorEl,\n    id,\n    showContextMenu,\n    setShowContextMenu,\n    setFocusedContextMenuItem,\n    onShow,\n    onClose\n  );\n\n  const renderTrigger = () =>\n    React.cloneElement(trigger, {\n      id: id,\n      \"aria-haspopup\": \"true\",\n      \"aria-controls\": `${id}-menu`,\n      \"aria-expanded\": showContextMenu,\n      \"aria-label\": ariaLabel,\n      onClick: () => setShowContextMenu(!showContextMenu),\n      tabIndex: 0,\n      ref: anchorEl\n    });\n\n  const renderChildren = () => {\n    let itemIndex = 0;\n    return React.Children.map(children, child => {\n      if (React.isValidElement(child) && child.type === ContextMenuDivider) {\n        return child;\n      }\n\n      const menuItem = child as ReactElement<ContextMenuItemProps>;\n      const currentItemIndex = itemIndex;\n      itemIndex++;\n\n      return React.cloneElement(menuItem, {\n        onFocusChange: (childIndex: number) => setFocusedContextMenuItem(childIndex),\n        onSelectedChange: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => {\n          setSelectedContextMenuItem(childIndex);\n          setShouldClick(false);\n          onChange?.(event, childIndex);\n        },\n        childIndex: currentItemIndex,\n        hasFocus: focusedContextMenuItem === currentItemIndex,\n        isSelected: selectedContextMenuItem === currentItemIndex,\n        showActiveState:\n          menuItem.props.showActiveState ??\n          (value !== undefined && selectedContextMenuItem === currentItemIndex),\n        contextMenuOpened: showContextMenu,\n        shouldClick: shouldClick,\n        autoFocus: showContextMenu && currentItemIndex === 0\n      });\n    });\n  };\n\n  const onOutOfViewHandler = useCallback(() => {\n    setShowContextMenu(false);\n  }, []);\n\n  if (!root) {\n    return null;\n  }\n\n  return (\n    <div\n      {...rest}\n      ref={wrappingDivRef}\n      onKeyDown={onArrowNavigation}\n      className={classes[\"context-menu\"]}\n    >\n      {renderTrigger()}\n      {createPortal(\n        <Popover\n          {...popoverProps}\n          placement={placement}\n          transformOrigin={transformOrigin}\n          offset={calculatedOffset}\n          anchorEl={anchorEl}\n          debounceAmount={debounceAmount}\n          show={showContextMenu}\n          onAnchorOutOfView={onOutOfViewHandler}\n        >\n          {decorativeElement && (\n            <div className={classes[\"decorative-element\"]}>{decorativeElement}</div>\n          )}\n          <ul\n            className={`${classes[\"menu\"]} ${decorativeElement ? classes[\"no-margin-top\"] : \"\"}`}\n            id={`${id}-menu`}\n            aria-describedby={id}\n            role=\"menu\"\n          >\n            {renderChildren()}\n          </ul>\n        </Popover>,\n        root\n      )}\n    </div>\n  );\n};\n\nexport const ContextMenu = React.forwardRef(ContextMenuComponent);\n"],"names":[],"mappings":"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"}

package/dist/components/ContextMenu/ContextMenu.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.ContextMenu_context-menu_k4xuc{position:relative;display:inline-block;box-sizing:border-box}.ContextMenu_menu_k4xuc{white-space:nowrap;margin:.25rem 0;list-style:none;padding:0;min-width:10rem}.ContextMenu_menu_k4xuc.ContextMenu_no-margin-top_k4xuc{margin:0 0 .25rem}.ContextMenu_menu_k4xuc button{text-align:left}.ContextMenu_decorative-element_k4xuc{margin-top:.5rem}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="ContextMenu_menu_k4xuc",t={"context-menu":"ContextMenu_context-menu_k4xuc",menu:e,"no-margin-top":"ContextMenu_no-margin-top_k4xuc","decorative-element":"ContextMenu_decorative-element_k4xuc"};exports.default=t,exports.menu=e;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.ContextMenu_context-menu_uJyTX{position:relative;display:inline-block;box-sizing:border-box}.ContextMenu_menu_uJyTX{white-space:nowrap;margin:.25rem 0;list-style:none;padding:0;min-width:10rem}.ContextMenu_menu_uJyTX.ContextMenu_no-margin-top_uJyTX{margin:0 0 .25rem}.ContextMenu_menu_uJyTX button{text-align:left}.ContextMenu_decorative-element_uJyTX{margin-top:.5rem}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="ContextMenu_menu_uJyTX",t={"context-menu":"ContextMenu_context-menu_uJyTX",menu:e,"no-margin-top":"ContextMenu_no-margin-top_uJyTX","decorative-element":"ContextMenu_decorative-element_uJyTX"};exports.default=t,exports.menu=e;
 //# sourceMappingURL=ContextMenu.module.scss.cjs.js.map

package/dist/components/ContextMenu/ContextMenu.module.scss.es.js

@@ -1,10 +1,10 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.ContextMenu_context-menu_k4xuc{position:relative;display:inline-block;box-sizing:border-box}.ContextMenu_menu_k4xuc{white-space:nowrap;margin:.25rem 0;list-style:none;padding:0;min-width:10rem}.ContextMenu_menu_k4xuc.ContextMenu_no-margin-top_k4xuc{margin:0 0 .25rem}.ContextMenu_menu_k4xuc button{text-align:left}.ContextMenu_decorative-element_k4xuc{margin-top:.5rem}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-const menu = "ContextMenu_menu_k4xuc";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.ContextMenu_context-menu_uJyTX{position:relative;display:inline-block;box-sizing:border-box}.ContextMenu_menu_uJyTX{white-space:nowrap;margin:.25rem 0;list-style:none;padding:0;min-width:10rem}.ContextMenu_menu_uJyTX.ContextMenu_no-margin-top_uJyTX{margin:0 0 .25rem}.ContextMenu_menu_uJyTX button{text-align:left}.ContextMenu_decorative-element_uJyTX{margin-top:.5rem}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const menu = "ContextMenu_menu_uJyTX";
 const classes = {
-  "context-menu": "ContextMenu_context-menu_k4xuc",
+  "context-menu": "ContextMenu_context-menu_uJyTX",
   menu,
-  "no-margin-top": "ContextMenu_no-margin-top_k4xuc",
-  "decorative-element": "ContextMenu_decorative-element_k4xuc"
+  "no-margin-top": "ContextMenu_no-margin-top_uJyTX",
+  "decorative-element": "ContextMenu_decorative-element_uJyTX"
 };
 export {
   classes as default,

package/dist/components/ContextMenu/ContextMenuDivider.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./ContextMenuDivider.module.scss.cjs.js");exports.ContextMenuDivider=()=>e.createElement("hr",{className:t.default["context-menu-divider"]});
+//# sourceMappingURL=ContextMenuDivider.cjs.js.map

package/dist/components/ContextMenu/ContextMenuDivider.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuDivider.cjs.js","sources":["../../../src/components/ContextMenu/ContextMenuDivider.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 from \"react\";\nimport classes from \"./ContextMenuDivider.module.scss\";\n\nexport const ContextMenuDivider: React.FC = () => {\n  return <hr className={classes[\"context-menu-divider\"]} />;\n};\n"],"names":["React","createElement","className","classes","default"],"mappings":"yLAmB4C,IAClCA,EAAAC,cAAA,KAAA,CAAGC,UAAWC,EAAAC,QAAQ"}

package/dist/components/ContextMenu/ContextMenuDivider.es.js

@@ -0,0 +1,9 @@
+import React from "react";
+import classes from "./ContextMenuDivider.module.scss.es.js";
+const ContextMenuDivider = () => {
+  return /* @__PURE__ */ React.createElement("hr", { className: classes["context-menu-divider"] });
+};
+export {
+  ContextMenuDivider
+};
+//# sourceMappingURL=ContextMenuDivider.es.js.map

package/dist/components/ContextMenu/ContextMenuDivider.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuDivider.es.js","sources":["../../../src/components/ContextMenu/ContextMenuDivider.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 from \"react\";\nimport classes from \"./ContextMenuDivider.module.scss\";\n\nexport const ContextMenuDivider: React.FC = () => {\n  return <hr className={classes[\"context-menu-divider\"]} />;\n};\n"],"names":[],"mappings":";;AAmBO,MAAM,qBAA+B,MAAM;AAChD,SAAQ,sBAAA,cAAA,MAAA,EAAG,WAAW,QAAQ,sBAAsB,GAAG;AACzD;"}

package/dist/components/ContextMenu/ContextMenuDivider.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.ContextMenuDivider_context-menu-divider_uJyTX{margin:.31rem .62rem;border:none;border-top:1px solid var(--color-blue-grey100);height:0}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),exports.default={"context-menu-divider":"ContextMenuDivider_context-menu-divider_uJyTX"};
+//# sourceMappingURL=ContextMenuDivider.module.scss.cjs.js.map

package/dist/components/ContextMenu/ContextMenuDivider.module.scss.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuDivider.module.scss.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/ContextMenu/ContextMenuDivider.module.scss.es.js

@@ -0,0 +1,8 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.ContextMenuDivider_context-menu-divider_uJyTX{margin:.31rem .62rem;border:none;border-top:1px solid var(--color-blue-grey100);height:0}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const classes = {
+  "context-menu-divider": "ContextMenuDivider_context-menu-divider_uJyTX"
+};
+export {
+  classes as default
+};
+//# sourceMappingURL=ContextMenuDivider.module.scss.es.js.map

package/dist/components/ContextMenu/ContextMenuDivider.module.scss.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuDivider.module.scss.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/ContextMenu/ContextMenuItem.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.ContextMenuItem_sr-only_k4xuc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ContextMenuItem_hidden_k4xuc{display:none}.ContextMenuItem_slide-in_k4xuc{animation:ContextMenuItem_slide-in_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.ContextMenuItem_slide-in_k4xuc{animation-duration:.1ms}}.ContextMenuItem_slide-out_k4xuc{animation:ContextMenuItem_slide-out_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.ContextMenuItem_slide-out_k4xuc{animation-duration:.1ms}}@keyframes ContextMenuItem_slide-in_k4xuc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes ContextMenuItem_slide-out_k4xuc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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 */.ContextMenuItem_context-menu-item_k4xuc{position:relative}.ContextMenuItem_context-menu-item_k4xuc button{background-color:transparent;border:0;font-family:var(--font-family);font-size:var(--context-menu-font-size);line-height:1.43;cursor:pointer;width:100%;height:100%;padding:.62rem .75rem;box-sizing:border-box}.ContextMenuItem_context-menu-item_k4xuc button:focus-visible{outline:none}.ContextMenuItem_context-menu-item_k4xuc button:focus-visible:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;z-index:101;outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.ContextMenuItem_context-menu-item_k4xuc button:hover{background-color:var(--context-menu-hover-color)}.ContextMenuItem_context-menu-item_k4xuc button:active{background-color:var(--context-menu-pressed-color)}.ContextMenuItem_context-menu-item_k4xuc button.ContextMenuItem_active_k4xuc{color:var(--context-menu-active-color)}.ContextMenuItem_context-menu-item_k4xuc button.ContextMenuItem_active_k4xuc:before{content:"";position:absolute;top:0;left:0;height:100%;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-left:.25rem solid var(--context-menu-active-color)}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="ContextMenuItem_active_k4xuc",t={"context-menu-item":"ContextMenuItem_context-menu-item_k4xuc",active:e};exports.active=e,exports.default=t;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.ContextMenuItem_sr-only_uJyTX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ContextMenuItem_hidden_uJyTX{display:none}.ContextMenuItem_slide-in_uJyTX{animation:ContextMenuItem_slide-in_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.ContextMenuItem_slide-in_uJyTX{animation-duration:.1ms}}.ContextMenuItem_slide-out_uJyTX{animation:ContextMenuItem_slide-out_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.ContextMenuItem_slide-out_uJyTX{animation-duration:.1ms}}@keyframes ContextMenuItem_slide-in_uJyTX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes ContextMenuItem_slide-out_uJyTX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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 */.ContextMenuItem_context-menu-item_uJyTX{position:relative}.ContextMenuItem_context-menu-item_uJyTX button{background-color:transparent;border:0;font-family:var(--font-family);font-size:var(--context-menu-font-size);line-height:1.43;cursor:pointer;width:100%;height:100%;padding:.62rem .75rem;box-sizing:border-box}.ContextMenuItem_context-menu-item_uJyTX button:focus-visible{outline:none}.ContextMenuItem_context-menu-item_uJyTX button:focus-visible:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;z-index:101;outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.ContextMenuItem_context-menu-item_uJyTX button:hover{background-color:var(--context-menu-hover-color)}.ContextMenuItem_context-menu-item_uJyTX button:active{background-color:var(--context-menu-pressed-color)}.ContextMenuItem_context-menu-item_uJyTX button.ContextMenuItem_active_uJyTX{color:var(--context-menu-active-color)}.ContextMenuItem_context-menu-item_uJyTX button.ContextMenuItem_active_uJyTX:before{content:"";position:absolute;top:0;left:0;height:100%;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-left:.25rem solid var(--context-menu-active-color)}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="ContextMenuItem_active_uJyTX",t={"context-menu-item":"ContextMenuItem_context-menu-item_uJyTX",active:e};exports.active=e,exports.default=t;
 //# sourceMappingURL=ContextMenuItem.module.scss.cjs.js.map

package/dist/components/ContextMenu/ContextMenuItem.module.scss.es.js

@@ -1,7 +1,7 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.ContextMenuItem_sr-only_k4xuc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ContextMenuItem_hidden_k4xuc{display:none}.ContextMenuItem_slide-in_k4xuc{animation:ContextMenuItem_slide-in_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.ContextMenuItem_slide-in_k4xuc{animation-duration:.1ms}}.ContextMenuItem_slide-out_k4xuc{animation:ContextMenuItem_slide-out_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.ContextMenuItem_slide-out_k4xuc{animation-duration:.1ms}}@keyframes ContextMenuItem_slide-in_k4xuc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes ContextMenuItem_slide-out_k4xuc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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 */.ContextMenuItem_context-menu-item_k4xuc{position:relative}.ContextMenuItem_context-menu-item_k4xuc button{background-color:transparent;border:0;font-family:var(--font-family);font-size:var(--context-menu-font-size);line-height:1.43;cursor:pointer;width:100%;height:100%;padding:.62rem .75rem;box-sizing:border-box}.ContextMenuItem_context-menu-item_k4xuc button:focus-visible{outline:none}.ContextMenuItem_context-menu-item_k4xuc button:focus-visible:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;z-index:101;outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.ContextMenuItem_context-menu-item_k4xuc button:hover{background-color:var(--context-menu-hover-color)}.ContextMenuItem_context-menu-item_k4xuc button:active{background-color:var(--context-menu-pressed-color)}.ContextMenuItem_context-menu-item_k4xuc button.ContextMenuItem_active_k4xuc{color:var(--context-menu-active-color)}.ContextMenuItem_context-menu-item_k4xuc button.ContextMenuItem_active_k4xuc:before{content:"";position:absolute;top:0;left:0;height:100%;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-left:.25rem solid var(--context-menu-active-color)}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
-const active = "ContextMenuItem_active_k4xuc";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.ContextMenuItem_sr-only_uJyTX{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ContextMenuItem_hidden_uJyTX{display:none}.ContextMenuItem_slide-in_uJyTX{animation:ContextMenuItem_slide-in_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.ContextMenuItem_slide-in_uJyTX{animation-duration:.1ms}}.ContextMenuItem_slide-out_uJyTX{animation:ContextMenuItem_slide-out_uJyTX .5s forwards}@media (prefers-reduced-motion: reduce){.ContextMenuItem_slide-out_uJyTX{animation-duration:.1ms}}@keyframes ContextMenuItem_slide-in_uJyTX{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes ContextMenuItem_slide-out_uJyTX{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\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 */.ContextMenuItem_context-menu-item_uJyTX{position:relative}.ContextMenuItem_context-menu-item_uJyTX button{background-color:transparent;border:0;font-family:var(--font-family);font-size:var(--context-menu-font-size);line-height:1.43;cursor:pointer;width:100%;height:100%;padding:.62rem .75rem;box-sizing:border-box}.ContextMenuItem_context-menu-item_uJyTX button:focus-visible{outline:none}.ContextMenuItem_context-menu-item_uJyTX button:focus-visible:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;z-index:101;outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:0;border-radius:var(--focus-border-radius)}.ContextMenuItem_context-menu-item_uJyTX button:hover{background-color:var(--context-menu-hover-color)}.ContextMenuItem_context-menu-item_uJyTX button:active{background-color:var(--context-menu-pressed-color)}.ContextMenuItem_context-menu-item_uJyTX button.ContextMenuItem_active_uJyTX{color:var(--context-menu-active-color)}.ContextMenuItem_context-menu-item_uJyTX button.ContextMenuItem_active_uJyTX:before{content:"";position:absolute;top:0;left:0;height:100%;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-left:.25rem solid var(--context-menu-active-color)}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+const active = "ContextMenuItem_active_uJyTX";
 const contextMenuItemClasses = {
-  "context-menu-item": "ContextMenuItem_context-menu-item_k4xuc",
+  "context-menu-item": "ContextMenuItem_context-menu-item_uJyTX",
   active
 };
 export {

package/dist/components/DataGrid/DataGrid.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGrid_grid-wrapper_k4xuc{padding:.875rem 0}.DataGrid_table-wrapper_k4xuc{overflow-x:auto;overflow-y:hidden}.DataGrid_table_k4xuc{border-collapse:collapse;padding-top:.5rem;width:100%;position:relative}.DataGrid_pagination_k4xuc{margin-top:.875rem;padding:0 1rem}.DataGrid_action-button_k4xuc{display:flex;margin-top:2rem}.DataGrid_action-button_k4xuc button{margin-right:1rem}@media only screen and (min-width: 50em){.DataGrid_pagination_k4xuc{padding:0 1.25rem}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="DataGrid_table_k4xuc",t="DataGrid_pagination_k4xuc",e={"grid-wrapper":"DataGrid_grid-wrapper_k4xuc","table-wrapper":"DataGrid_table-wrapper_k4xuc",table:a,pagination:t,"action-button":"DataGrid_action-button_k4xuc"};exports.default=e,exports.pagination=t,exports.table=a;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGrid_grid-wrapper_uJyTX{padding:.875rem 0}.DataGrid_table-wrapper_uJyTX{overflow-x:auto;overflow-y:hidden}.DataGrid_table_uJyTX{border-collapse:collapse;padding-top:.5rem;width:100%;position:relative}.DataGrid_pagination_uJyTX{margin-top:.875rem;padding:0 1rem}.DataGrid_action-button_uJyTX{display:flex;margin-top:2rem}.DataGrid_action-button_uJyTX button{margin-right:1rem}@media only screen and (min-width: 50em){.DataGrid_pagination_uJyTX{padding:0 1.25rem}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="DataGrid_table_uJyTX",t="DataGrid_pagination_uJyTX",e={"grid-wrapper":"DataGrid_grid-wrapper_uJyTX","table-wrapper":"DataGrid_table-wrapper_uJyTX",table:a,pagination:t,"action-button":"DataGrid_action-button_uJyTX"};exports.default=e,exports.pagination=t,exports.table=a;
 //# sourceMappingURL=DataGrid.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGrid.module.scss.es.js

@@ -1,12 +1,12 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGrid_grid-wrapper_k4xuc{padding:.875rem 0}.DataGrid_table-wrapper_k4xuc{overflow-x:auto;overflow-y:hidden}.DataGrid_table_k4xuc{border-collapse:collapse;padding-top:.5rem;width:100%;position:relative}.DataGrid_pagination_k4xuc{margin-top:.875rem;padding:0 1rem}.DataGrid_action-button_k4xuc{display:flex;margin-top:2rem}.DataGrid_action-button_k4xuc button{margin-right:1rem}@media only screen and (min-width: 50em){.DataGrid_pagination_k4xuc{padding:0 1.25rem}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-const table = "DataGrid_table_k4xuc";
-const pagination = "DataGrid_pagination_k4xuc";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGrid_grid-wrapper_uJyTX{padding:.875rem 0}.DataGrid_table-wrapper_uJyTX{overflow-x:auto;overflow-y:hidden}.DataGrid_table_uJyTX{border-collapse:collapse;padding-top:.5rem;width:100%;position:relative}.DataGrid_pagination_uJyTX{margin-top:.875rem;padding:0 1rem}.DataGrid_action-button_uJyTX{display:flex;margin-top:2rem}.DataGrid_action-button_uJyTX button{margin-right:1rem}@media only screen and (min-width: 50em){.DataGrid_pagination_uJyTX{padding:0 1.25rem}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const table = "DataGrid_table_uJyTX";
+const pagination = "DataGrid_pagination_uJyTX";
 const classes = {
-  "grid-wrapper": "DataGrid_grid-wrapper_k4xuc",
-  "table-wrapper": "DataGrid_table-wrapper_k4xuc",
+  "grid-wrapper": "DataGrid_grid-wrapper_uJyTX",
+  "table-wrapper": "DataGrid_table-wrapper_uJyTX",
   table,
   pagination,
-  "action-button": "DataGrid_action-button_k4xuc"
+  "action-button": "DataGrid_action-button_uJyTX"
 };
 export {
   classes as default,

package/dist/components/DataGrid/DataGridActions/DataGridActions.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridActions_actions_k4xuc{margin-bottom:1rem;padding:0 1rem;display:flex;flex-wrap:wrap}.DataGridActions_left-actions_k4xuc{flex:1}.DataGridActions_right-actions_k4xuc{display:flex;gap:1rem}.DataGridActions_desktop_k4xuc{display:none}@media only screen and (min-width: 50em){.DataGridActions_actions_k4xuc{padding:0 1.25rem}}@media only screen and (min-width: 30em){.DataGridActions_desktop_k4xuc{display:flex}.DataGridActions_mobile_k4xuc{display:none}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="DataGridActions_actions_k4xuc",o="DataGridActions_desktop_k4xuc",i="DataGridActions_mobile_k4xuc",e={actions:t,"left-actions":"DataGridActions_left-actions_k4xuc","right-actions":"DataGridActions_right-actions_k4xuc",desktop:o,mobile:i};exports.actions=t,exports.default=e,exports.desktop=o,exports.mobile=i;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridActions_actions_uJyTX{margin-bottom:1rem;padding:0 1rem;display:flex;flex-wrap:wrap}.DataGridActions_left-actions_uJyTX{flex:1}.DataGridActions_right-actions_uJyTX{display:flex;gap:1rem}.DataGridActions_desktop_uJyTX{display:none}@media only screen and (min-width: 50em){.DataGridActions_actions_uJyTX{padding:0 1.25rem}}@media only screen and (min-width: 30em){.DataGridActions_desktop_uJyTX{display:flex}.DataGridActions_mobile_uJyTX{display:none}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="DataGridActions_actions_uJyTX",o="DataGridActions_desktop_uJyTX",i="DataGridActions_mobile_uJyTX",e={actions:t,"left-actions":"DataGridActions_left-actions_uJyTX","right-actions":"DataGridActions_right-actions_uJyTX",desktop:o,mobile:i};exports.actions=t,exports.default=e,exports.desktop=o,exports.mobile=i;
 //# sourceMappingURL=DataGridActions.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGridActions/DataGridActions.module.scss.es.js

@@ -1,11 +1,11 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridActions_actions_k4xuc{margin-bottom:1rem;padding:0 1rem;display:flex;flex-wrap:wrap}.DataGridActions_left-actions_k4xuc{flex:1}.DataGridActions_right-actions_k4xuc{display:flex;gap:1rem}.DataGridActions_desktop_k4xuc{display:none}@media only screen and (min-width: 50em){.DataGridActions_actions_k4xuc{padding:0 1.25rem}}@media only screen and (min-width: 30em){.DataGridActions_desktop_k4xuc{display:flex}.DataGridActions_mobile_k4xuc{display:none}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-const actions = "DataGridActions_actions_k4xuc";
-const desktop = "DataGridActions_desktop_k4xuc";
-const mobile = "DataGridActions_mobile_k4xuc";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridActions_actions_uJyTX{margin-bottom:1rem;padding:0 1rem;display:flex;flex-wrap:wrap}.DataGridActions_left-actions_uJyTX{flex:1}.DataGridActions_right-actions_uJyTX{display:flex;gap:1rem}.DataGridActions_desktop_uJyTX{display:none}@media only screen and (min-width: 50em){.DataGridActions_actions_uJyTX{padding:0 1.25rem}}@media only screen and (min-width: 30em){.DataGridActions_desktop_uJyTX{display:flex}.DataGridActions_mobile_uJyTX{display:none}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const actions = "DataGridActions_actions_uJyTX";
+const desktop = "DataGridActions_desktop_uJyTX";
+const mobile = "DataGridActions_mobile_uJyTX";
 const classes = {
   actions,
-  "left-actions": "DataGridActions_left-actions_k4xuc",
-  "right-actions": "DataGridActions_right-actions_k4xuc",
+  "left-actions": "DataGridActions_left-actions_uJyTX",
+  "right-actions": "DataGridActions_right-actions_uJyTX",
   desktop,
   mobile
 };

package/dist/components/DataGrid/DataGridActions/DataGridColumnsToggle.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../../Button/IconButton.cjs.js"),t=require("../../Form/Toggle/Toggle.cjs.js"),o=require("../../Icon/Icon.cjs.js"),r=require("../../Popover/Popover.cjs.js"),l=require("../../Typography/Typography.cjs.js"),n=require("../../../util/helper.cjs.js"),s=require("./DataGridColumnsToggle.module.scss.cjs.js"),c=require("react-dom"),i=e.forwardRef((({open:i,headers:d,titleLabel:m="Show columns",closeButtonTitle:u="Close show columns dialog",onClose:g,onToggleClicked:p,className:h,domRoot:j=document.body,...T},y)=>{const[f]=e.useState(n.generateID()),b=f+"_header",q=d.map((a=>e.createElement(t.Toggle,{key:a.name,name:a.name,checked:!a.hidden,onChange:()=>p(a.name),label:a.headline})));return e.createElement(r.Popover,{...T,ref:y,className:`${s.default.popover} ${h}`,show:i,role:"dialog","aria-modal":"true","aria-labelledby":b},i&&c.createPortal(e.createElement("div",{"aria-hidden":"true",className:s.default.backdrop,onClick:()=>g()}),j),i&&e.createElement(e.Fragment,null,e.createElement("div",{className:s.default.header},e.createElement(l.Typography,{id:b,className:s.default.title,tag:"span",variant:"h4"},m),e.createElement(a.IconButton,{onClick:g,className:`${s.default["close-btn"]}`,title:u},e.createElement(o.Icon,{icon:o.Icons.Times}))),e.createElement("div",{className:s.default.content},q)))}));exports.DataGridColumnsToggle=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../../Button/IconButton.cjs.js"),t=require("../../Form/Toggle/Toggle.cjs.js"),o=require("../../Icon/Icon.cjs.js"),r=require("../../Popover/Popover.cjs.js"),l=require("../../Typography/Typography.cjs.js"),n=require("../../../util/helper.cjs.js"),s=require("./DataGridColumnsToggle.module.scss.cjs.js"),c=require("react-dom"),i=e.forwardRef((({open:i,headers:d,titleLabel:m="Show columns",closeButtonTitle:u="Close show columns dialog",onClose:g,onToggleClicked:p,className:h,domRoot:j=document.body,...T},y)=>{const[f]=e.useState(n.generateID()),b=f+"_header",q=d.map((a=>e.createElement(t.Toggle,{key:a.name,name:a.name,checked:!a.hidden,onChange:()=>p(a.name),label:a.headline})));return e.createElement(r.Popover,{...T,ref:y,className:`${s.default.popover} ${h}`,show:i,role:"dialog","aria-modal":"true","aria-labelledby":b},c.createPortal(e.createElement("div",{"aria-hidden":"true",className:s.default.backdrop,onClick:()=>g()}),j),e.createElement(e.Fragment,null,e.createElement("div",{className:s.default.header},e.createElement(l.Typography,{id:b,className:s.default.title,tag:"span",variant:"h4"},m),e.createElement(a.IconButton,{onClick:g,className:`${s.default["close-btn"]}`,title:u},e.createElement(o.Icon,{icon:o.Icons.Times}))),e.createElement("div",{className:s.default.content},q)))}));exports.DataGridColumnsToggle=i;
 //# sourceMappingURL=DataGridColumnsToggle.cjs.js.map

package/dist/components/DataGrid/DataGridActions/DataGridColumnsToggle.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnsToggle.cjs.js","sources":["../../../../src/components/DataGrid/DataGridActions/DataGridColumnsToggle.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, Fragment, useState } from \"react\";\nimport { IconButton } from \"../../Button/IconButton\";\nimport { Toggle } from \"../../Form/Toggle/Toggle\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Popover, Props as PopoverProps } from \"../../Popover/Popover\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { generateID } from \"../../../util/helper\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridColumnsToggle.module.scss\";\nimport { createPortal } from \"react-dom\";\n\nexport interface Props extends PopoverProps {\n  open: boolean;\n  headers: HeaderCell[];\n  titleLabel?: string;\n  closeButtonTitle?: string;\n  onClose: () => void;\n  onToggleClicked: (colName: string) => void;\n  domRoot?: HTMLElement;\n}\n\nconst DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    open,\n    headers,\n    titleLabel = \"Show columns\",\n    closeButtonTitle = \"Close show columns dialog\",\n    onClose,\n    onToggleClicked,\n    className,\n    domRoot = document.body,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [id] = useState(generateID());\n  const labelledId = id + \"_header\";\n\n  const toggles = headers.map(item => (\n    <Toggle\n      key={item.name}\n      name={item.name}\n      checked={!item.hidden}\n      onChange={() => onToggleClicked(item.name)}\n      label={item.headline}\n    />\n  ));\n\n  const handleBackdropClick = () => onClose();\n\n  return (\n    <Popover\n      {...rest}\n      ref={ref}\n      className={`${classes[\"popover\"]} ${className}`}\n      show={open}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelledId}\n    >\n      {open &&\n        createPortal(\n          <div\n            aria-hidden=\"true\"\n            className={classes[\"backdrop\"]}\n            onClick={handleBackdropClick}\n          ></div>,\n          domRoot\n        )}\n      {open && (\n        <Fragment>\n          <div className={classes[\"header\"]}>\n            <Typography id={labelledId} className={classes[\"title\"]} tag=\"span\" variant=\"h4\">\n              {titleLabel}\n            </Typography>\n            <IconButton\n              onClick={onClose}\n              className={`${classes[\"close-btn\"]}`}\n              title={closeButtonTitle}\n            >\n              <Icon icon={Icons.Times} />\n            </IconButton>\n          </div>\n          <div className={classes[\"content\"]}>{toggles}</div>\n        </Fragment>\n      )}\n    </Popover>\n  );\n};\n\nexport const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);\n"],"names":["DataGridColumnsToggle","React","forwardRef","open","headers","titleLabel","closeButtonTitle","onClose","onToggleClicked","className","domRoot","document","body","rest","ref","id","useState","generateID","labelledId","toggles","map","item","createElement","Toggle","key","name","checked","hidden","onChange","label","headline","Popover","classes","default","show","role","createPortal","onClick","Fragment","Typography","tag","variant","IconButton","title","Icon","icon","Icons","Times"],"mappings":"wbA0GaA,EAAwBC,EAAMC,YArE6C,EAEpFC,OACAC,UACAC,aAAa,eACbC,mBAAmB,4BACnBC,UACAC,kBACAC,YACAC,UAAUC,SAASC,QAChBC,GAELC,KAEA,MAAOC,GAAMC,EAAAA,SAASC,gBAChBC,EAAaH,EAAK,UAElBI,EAAUf,EAAQgB,KACtBC,GAAApB,EAAAqB,cAACC,EAAAA,OAAA,CACCC,IAAKH,EAAKI,KACVA,KAAMJ,EAAKI,KACXC,SAAUL,EAAKM,OACfC,SAAU,IAAMpB,EAAgBa,EAAKI,MACrCI,MAAOR,EAAKS,aAOd,OAAA7B,EAAAqB,cAACS,EAAAA,QAAA,IACKlB,EACJC,MACAL,UAAW,GAAGuB,EAAAC,QAAiB,WAAKxB,IACpCyB,KAAM/B,EACNgC,KAAK,SACL,aAAW,OACX,kBAAiBjB,GAEhBf,GACCiC,EAAAA,aACEnC,EAAAqB,cAAC,MAAA,CACC,cAAY,OACZb,UAAWuB,UAAkB,SAC7BK,QAjBkB,IAAM9B,MAmB1BG,GAEHP,mBACEmC,EAAAA,SACC,KAAArC,EAAAqB,cAAC,OAAIb,UAAWuB,EAAAA,QAAgB,QAC7B/B,EAAAqB,cAAAiB,EAAAA,WAAA,CAAWxB,GAAIG,EAAYT,UAAWuB,EAAAA,QAAe,MAAGQ,IAAI,OAAOC,QAAQ,MACzEpC,GAEHJ,EAAAqB,cAACoB,EAAAA,WAAA,CACCL,QAAS9B,EACTE,UAAW,GAAGuB,UAAQ,eACtBW,MAAOrC,GAENL,EAAAqB,cAAAsB,EAAAA,KAAA,CAAKC,KAAMC,EAAAA,MAAMC,UAGrB9C,EAAAqB,cAAA,MAAA,CAAIb,UAAWuB,UAAiB,SAAIb,IAG3C"}
+{"version":3,"file":"DataGridColumnsToggle.cjs.js","sources":["../../../../src/components/DataGrid/DataGridActions/DataGridColumnsToggle.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, Fragment, useState } from \"react\";\nimport { IconButton } from \"../../Button/IconButton\";\nimport { Toggle } from \"../../Form/Toggle/Toggle\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Popover, Props as PopoverProps } from \"../../Popover/Popover\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { generateID } from \"../../../util/helper\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridColumnsToggle.module.scss\";\nimport { createPortal } from \"react-dom\";\n\nexport interface Props extends PopoverProps {\n  open: boolean;\n  headers: HeaderCell[];\n  titleLabel?: string;\n  closeButtonTitle?: string;\n  onClose: () => void;\n  onToggleClicked: (colName: string) => void;\n  domRoot?: HTMLElement;\n}\n\nconst DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    open,\n    headers,\n    titleLabel = \"Show columns\",\n    closeButtonTitle = \"Close show columns dialog\",\n    onClose,\n    onToggleClicked,\n    className,\n    domRoot = document.body,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [id] = useState(generateID());\n  const labelledId = id + \"_header\";\n\n  const toggles = headers.map(item => (\n    <Toggle\n      key={item.name}\n      name={item.name}\n      checked={!item.hidden}\n      onChange={() => onToggleClicked(item.name)}\n      label={item.headline}\n    />\n  ));\n\n  const handleBackdropClick = () => onClose();\n\n  return (\n    <Popover\n      {...rest}\n      ref={ref}\n      className={`${classes[\"popover\"]} ${className}`}\n      show={open}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelledId}\n    >\n      {createPortal(\n        <div\n          aria-hidden=\"true\"\n          className={classes[\"backdrop\"]}\n          onClick={handleBackdropClick}\n        ></div>,\n        domRoot\n      )}\n      <Fragment>\n        <div className={classes[\"header\"]}>\n          <Typography id={labelledId} className={classes[\"title\"]} tag=\"span\" variant=\"h4\">\n            {titleLabel}\n          </Typography>\n          <IconButton\n            onClick={onClose}\n            className={`${classes[\"close-btn\"]}`}\n            title={closeButtonTitle}\n          >\n            <Icon icon={Icons.Times} />\n          </IconButton>\n        </div>\n        <div className={classes[\"content\"]}>{toggles}</div>\n      </Fragment>\n    </Popover>\n  );\n};\n\nexport const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);\n"],"names":["DataGridColumnsToggle","React","forwardRef","open","headers","titleLabel","closeButtonTitle","onClose","onToggleClicked","className","domRoot","document","body","rest","ref","id","useState","generateID","labelledId","toggles","map","item","createElement","Toggle","key","name","checked","hidden","onChange","label","headline","Popover","classes","default","show","role","createPortal","onClick","Fragment","Typography","tag","variant","IconButton","title","Icon","icon","Icons","Times"],"mappings":"wbAuGaA,EAAwBC,EAAMC,YAlE6C,EAEpFC,OACAC,UACAC,aAAa,eACbC,mBAAmB,4BACnBC,UACAC,kBACAC,YACAC,UAAUC,SAASC,QAChBC,GAELC,KAEA,MAAOC,GAAMC,EAAAA,SAASC,gBAChBC,EAAaH,EAAK,UAElBI,EAAUf,EAAQgB,KACtBC,GAAApB,EAAAqB,cAACC,EAAAA,OAAA,CACCC,IAAKH,EAAKI,KACVA,KAAMJ,EAAKI,KACXC,SAAUL,EAAKM,OACfC,SAAU,IAAMpB,EAAgBa,EAAKI,MACrCI,MAAOR,EAAKS,aAOd,OAAA7B,EAAAqB,cAACS,EAAAA,QAAA,IACKlB,EACJC,MACAL,UAAW,GAAGuB,EAAAC,QAAiB,WAAKxB,IACpCyB,KAAM/B,EACNgC,KAAK,SACL,aAAW,OACX,kBAAiBjB,GAEhBkB,EAAAA,aACCnC,EAAAqB,cAAC,MAAA,CACC,cAAY,OACZb,UAAWuB,UAAkB,SAC7BK,QAhBoB,IAAM9B,MAkB5BG,GAEFT,EAAAqB,cAACgB,EAAAA,cACErC,EAAAqB,cAAA,MAAA,CAAIb,UAAWuB,EAAQC,QAAQ,QAC7BhC,EAAAqB,cAAAiB,aAAA,CAAWxB,GAAIG,EAAYT,UAAWuB,UAAe,MAAGQ,IAAI,OAAOC,QAAQ,MACzEpC,GAEHJ,EAAAqB,cAACoB,EAAAA,WAAA,CACCL,QAAS9B,EACTE,UAAW,GAAGuB,UAAQ,eACtBW,MAAOrC,GAENL,EAAAqB,cAAAsB,EAAAA,KAAA,CAAKC,KAAMC,EAAAA,MAAMC,UAGrB9C,EAAAqB,cAAA,MAAA,CAAIb,UAAWuB,UAAiB,SAAIb,IAEzC"}

package/dist/components/DataGrid/DataGridActions/DataGridColumnsToggle.es.js

@@ -42,7 +42,7 @@ const DataGridColumnsToggleComponent = ({
       "aria-modal": "true",
       "aria-labelledby": labelledId
     },
-    open && createPortal(
+    createPortal(
       /* @__PURE__ */ React.createElement(
         "div",
         {
@@ -53,7 +53,7 @@ const DataGridColumnsToggleComponent = ({
       ),
       domRoot
     ),
-    open && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes["header"] }, /* @__PURE__ */ React.createElement(Typography, { id: labelledId, className: classes["title"], tag: "span", variant: "h4" }, titleLabel), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes["header"] }, /* @__PURE__ */ React.createElement(Typography, { id: labelledId, className: classes["title"], tag: "span", variant: "h4" }, titleLabel), /* @__PURE__ */ React.createElement(
       IconButton,
       {
         onClick: onClose,

package/dist/components/DataGrid/DataGridActions/DataGridColumnsToggle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnsToggle.es.js","sources":["../../../../src/components/DataGrid/DataGridActions/DataGridColumnsToggle.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, Fragment, useState } from \"react\";\nimport { IconButton } from \"../../Button/IconButton\";\nimport { Toggle } from \"../../Form/Toggle/Toggle\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Popover, Props as PopoverProps } from \"../../Popover/Popover\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { generateID } from \"../../../util/helper\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridColumnsToggle.module.scss\";\nimport { createPortal } from \"react-dom\";\n\nexport interface Props extends PopoverProps {\n  open: boolean;\n  headers: HeaderCell[];\n  titleLabel?: string;\n  closeButtonTitle?: string;\n  onClose: () => void;\n  onToggleClicked: (colName: string) => void;\n  domRoot?: HTMLElement;\n}\n\nconst DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    open,\n    headers,\n    titleLabel = \"Show columns\",\n    closeButtonTitle = \"Close show columns dialog\",\n    onClose,\n    onToggleClicked,\n    className,\n    domRoot = document.body,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [id] = useState(generateID());\n  const labelledId = id + \"_header\";\n\n  const toggles = headers.map(item => (\n    <Toggle\n      key={item.name}\n      name={item.name}\n      checked={!item.hidden}\n      onChange={() => onToggleClicked(item.name)}\n      label={item.headline}\n    />\n  ));\n\n  const handleBackdropClick = () => onClose();\n\n  return (\n    <Popover\n      {...rest}\n      ref={ref}\n      className={`${classes[\"popover\"]} ${className}`}\n      show={open}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelledId}\n    >\n      {open &&\n        createPortal(\n          <div\n            aria-hidden=\"true\"\n            className={classes[\"backdrop\"]}\n            onClick={handleBackdropClick}\n          ></div>,\n          domRoot\n        )}\n      {open && (\n        <Fragment>\n          <div className={classes[\"header\"]}>\n            <Typography id={labelledId} className={classes[\"title\"]} tag=\"span\" variant=\"h4\">\n              {titleLabel}\n            </Typography>\n            <IconButton\n              onClick={onClose}\n              className={`${classes[\"close-btn\"]}`}\n              title={closeButtonTitle}\n            >\n              <Icon icon={Icons.Times} />\n            </IconButton>\n          </div>\n          <div className={classes[\"content\"]}>{toggles}</div>\n        </Fragment>\n      )}\n    </Popover>\n  );\n};\n\nexport const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,iCAAkF,CACtF;AAAA,EACE;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,SAAS;AAAA,EACnB,GAAG;AACL,GACA,QACG;AACH,QAAM,CAAC,EAAE,IAAI,SAAS,YAAY;AAClC,QAAM,aAAa,KAAK;AAElB,QAAA,UAAU,QAAQ,IAAI,CAC1B,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV,MAAM,KAAK;AAAA,MACX,SAAS,CAAC,KAAK;AAAA,MACf,UAAU,MAAM,gBAAgB,KAAK,IAAI;AAAA,MACzC,OAAO,KAAK;AAAA,IAAA;AAAA,EAAA,CAEf;AAEK,QAAA,sBAAsB,MAAM,QAAQ;AAGxC,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,GAAG,QAAQ,SAAS,CAAC,IAAI,SAAS;AAAA,MAC7C,MAAM;AAAA,MACN,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiB;AAAA,IAAA;AAAA,IAEhB,QACC;AAAA,MACE,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAW,QAAQ,UAAU;AAAA,UAC7B,SAAS;AAAA,QAAA;AAAA,MACV;AAAA,MACD;AAAA,IACF;AAAA,IACD,4CACE,UACC,MAAA,sBAAA,cAAC,SAAI,WAAW,QAAQ,QAAQ,EAAA,GAC7B,sBAAA,cAAA,YAAA,EAAW,IAAI,YAAY,WAAW,QAAQ,OAAO,GAAG,KAAI,QAAO,SAAQ,KACzE,GAAA,UACH,GACA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW,GAAG,QAAQ,WAAW,CAAC;AAAA,QAClC,OAAO;AAAA,MAAA;AAAA,MAEN,sBAAA,cAAA,MAAA,EAAK,MAAM,MAAM,MAAO,CAAA;AAAA,IAAA,CAE7B,GACC,sBAAA,cAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,EAAI,GAAA,OAAQ,CAC/C;AAAA,EAEJ;AAEJ;AAEa,MAAA,wBAAwB,MAAM,WAAW,8BAA8B;"}
+{"version":3,"file":"DataGridColumnsToggle.es.js","sources":["../../../../src/components/DataGrid/DataGridActions/DataGridColumnsToggle.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, Fragment, useState } from \"react\";\nimport { IconButton } from \"../../Button/IconButton\";\nimport { Toggle } from \"../../Form/Toggle/Toggle\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Popover, Props as PopoverProps } from \"../../Popover/Popover\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { generateID } from \"../../../util/helper\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridColumnsToggle.module.scss\";\nimport { createPortal } from \"react-dom\";\n\nexport interface Props extends PopoverProps {\n  open: boolean;\n  headers: HeaderCell[];\n  titleLabel?: string;\n  closeButtonTitle?: string;\n  onClose: () => void;\n  onToggleClicked: (colName: string) => void;\n  domRoot?: HTMLElement;\n}\n\nconst DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    open,\n    headers,\n    titleLabel = \"Show columns\",\n    closeButtonTitle = \"Close show columns dialog\",\n    onClose,\n    onToggleClicked,\n    className,\n    domRoot = document.body,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [id] = useState(generateID());\n  const labelledId = id + \"_header\";\n\n  const toggles = headers.map(item => (\n    <Toggle\n      key={item.name}\n      name={item.name}\n      checked={!item.hidden}\n      onChange={() => onToggleClicked(item.name)}\n      label={item.headline}\n    />\n  ));\n\n  const handleBackdropClick = () => onClose();\n\n  return (\n    <Popover\n      {...rest}\n      ref={ref}\n      className={`${classes[\"popover\"]} ${className}`}\n      show={open}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelledId}\n    >\n      {createPortal(\n        <div\n          aria-hidden=\"true\"\n          className={classes[\"backdrop\"]}\n          onClick={handleBackdropClick}\n        ></div>,\n        domRoot\n      )}\n      <Fragment>\n        <div className={classes[\"header\"]}>\n          <Typography id={labelledId} className={classes[\"title\"]} tag=\"span\" variant=\"h4\">\n            {titleLabel}\n          </Typography>\n          <IconButton\n            onClick={onClose}\n            className={`${classes[\"close-btn\"]}`}\n            title={closeButtonTitle}\n          >\n            <Icon icon={Icons.Times} />\n          </IconButton>\n        </div>\n        <div className={classes[\"content\"]}>{toggles}</div>\n      </Fragment>\n    </Popover>\n  );\n};\n\nexport const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,iCAAkF,CACtF;AAAA,EACE;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,SAAS;AAAA,EACnB,GAAG;AACL,GACA,QACG;AACH,QAAM,CAAC,EAAE,IAAI,SAAS,YAAY;AAClC,QAAM,aAAa,KAAK;AAElB,QAAA,UAAU,QAAQ,IAAI,CAC1B,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV,MAAM,KAAK;AAAA,MACX,SAAS,CAAC,KAAK;AAAA,MACf,UAAU,MAAM,gBAAgB,KAAK,IAAI;AAAA,MACzC,OAAO,KAAK;AAAA,IAAA;AAAA,EAAA,CAEf;AAEK,QAAA,sBAAsB,MAAM,QAAQ;AAGxC,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,GAAG,QAAQ,SAAS,CAAC,IAAI,SAAS;AAAA,MAC7C,MAAM;AAAA,MACN,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiB;AAAA,IAAA;AAAA,IAEhB;AAAA,MACC,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAW,QAAQ,UAAU;AAAA,UAC7B,SAAS;AAAA,QAAA;AAAA,MACV;AAAA,MACD;AAAA,IACF;AAAA,IACA,sBAAA,cAAC,gBACE,sBAAA,cAAA,OAAA,EAAI,WAAW,QAAQ,QAAQ,KAC7B,sBAAA,cAAA,YAAA,EAAW,IAAI,YAAY,WAAW,QAAQ,OAAO,GAAG,KAAI,QAAO,SAAQ,KACzE,GAAA,UACH,GACA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW,GAAG,QAAQ,WAAW,CAAC;AAAA,QAClC,OAAO;AAAA,MAAA;AAAA,MAEN,sBAAA,cAAA,MAAA,EAAK,MAAM,MAAM,MAAO,CAAA;AAAA,IAAA,CAE7B,GACC,sBAAA,cAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,EAAI,GAAA,OAAQ,CAC/C;AAAA,EACF;AAEJ;AAEa,MAAA,wBAAwB,MAAM,WAAW,8BAA8B;"}

package/dist/components/DataGrid/DataGridActions/DataGridColumnsToggle.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridColumnsToggle_popover_k4xuc{background-color:var(--modal-background-color);z-index:1;min-width:17.5rem;font-family:var(--font-family)}.DataGridColumnsToggle_backdrop_k4xuc{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background-color:transparent}.DataGridColumnsToggle_header_k4xuc{min-width:5rem;padding:1rem .5rem 1rem 1.5rem;background-color:var(--modal-header-background-color);border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;align-items:center}.DataGridColumnsToggle_title_k4xuc{flex:1;margin:0}.DataGridColumnsToggle_close-btn_k4xuc{margin-left:.5rem}.DataGridColumnsToggle_content_k4xuc{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DataGridColumnsToggle_popover_k4xuc",o="DataGridColumnsToggle_backdrop_k4xuc",t="DataGridColumnsToggle_header_k4xuc",r="DataGridColumnsToggle_title_k4xuc",l="DataGridColumnsToggle_content_k4xuc",a={popover:e,backdrop:o,header:t,title:r,"close-btn":"DataGridColumnsToggle_close-btn_k4xuc",content:l};exports.backdrop=o,exports.content=l,exports.default=a,exports.header=t,exports.popover=e,exports.title=r;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridColumnsToggle_popover_uJyTX{background-color:var(--modal-background-color);z-index:1;min-width:17.5rem;font-family:var(--font-family)}.DataGridColumnsToggle_backdrop_uJyTX{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background-color:transparent}.DataGridColumnsToggle_header_uJyTX{min-width:5rem;padding:1rem .5rem 1rem 1.5rem;background-color:var(--modal-header-background-color);border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;align-items:center}.DataGridColumnsToggle_title_uJyTX{flex:1;margin:0}.DataGridColumnsToggle_close-btn_uJyTX{margin-left:.5rem}.DataGridColumnsToggle_content_uJyTX{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DataGridColumnsToggle_popover_uJyTX",o="DataGridColumnsToggle_backdrop_uJyTX",t="DataGridColumnsToggle_header_uJyTX",r="DataGridColumnsToggle_title_uJyTX",l="DataGridColumnsToggle_content_uJyTX",a={popover:e,backdrop:o,header:t,title:r,"close-btn":"DataGridColumnsToggle_close-btn_uJyTX",content:l};exports.backdrop=o,exports.content=l,exports.default=a,exports.header=t,exports.popover=e,exports.title=r;
 //# sourceMappingURL=DataGridColumnsToggle.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGridActions/DataGridColumnsToggle.module.scss.es.js

@@ -1,15 +1,15 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridColumnsToggle_popover_k4xuc{background-color:var(--modal-background-color);z-index:1;min-width:17.5rem;font-family:var(--font-family)}.DataGridColumnsToggle_backdrop_k4xuc{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background-color:transparent}.DataGridColumnsToggle_header_k4xuc{min-width:5rem;padding:1rem .5rem 1rem 1.5rem;background-color:var(--modal-header-background-color);border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;align-items:center}.DataGridColumnsToggle_title_k4xuc{flex:1;margin:0}.DataGridColumnsToggle_close-btn_k4xuc{margin-left:.5rem}.DataGridColumnsToggle_content_k4xuc{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-const popover = "DataGridColumnsToggle_popover_k4xuc";
-const backdrop = "DataGridColumnsToggle_backdrop_k4xuc";
-const header = "DataGridColumnsToggle_header_k4xuc";
-const title = "DataGridColumnsToggle_title_k4xuc";
-const content = "DataGridColumnsToggle_content_k4xuc";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridColumnsToggle_popover_uJyTX{background-color:var(--modal-background-color);z-index:1;min-width:17.5rem;font-family:var(--font-family)}.DataGridColumnsToggle_backdrop_uJyTX{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background-color:transparent}.DataGridColumnsToggle_header_uJyTX{min-width:5rem;padding:1rem .5rem 1rem 1.5rem;background-color:var(--modal-header-background-color);border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;align-items:center}.DataGridColumnsToggle_title_uJyTX{flex:1;margin:0}.DataGridColumnsToggle_close-btn_uJyTX{margin-left:.5rem}.DataGridColumnsToggle_content_uJyTX{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const popover = "DataGridColumnsToggle_popover_uJyTX";
+const backdrop = "DataGridColumnsToggle_backdrop_uJyTX";
+const header = "DataGridColumnsToggle_header_uJyTX";
+const title = "DataGridColumnsToggle_title_uJyTX";
+const content = "DataGridColumnsToggle_content_uJyTX";
 const classes = {
   popover,
   backdrop,
   header,
   title,
-  "close-btn": "DataGridColumnsToggle_close-btn_k4xuc",
+  "close-btn": "DataGridColumnsToggle_close-btn_uJyTX",
   content
 };
 export {

package/dist/components/DataGrid/DataGridBody/DataGridBody.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridBody_empty_k4xuc{text-align:center;height:6rem;padding:2rem;vertical-align:top}.DataGridBody_empty_k4xuc p{color:var(--greyed-out)}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DataGridBody_empty_k4xuc",t={empty:e};exports.default=t,exports.empty=e;
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridBody_empty_uJyTX{text-align:center;height:6rem;padding:2rem;vertical-align:top}.DataGridBody_empty_uJyTX p{color:var(--greyed-out)}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DataGridBody_empty_uJyTX",t={empty:e};exports.default=t,exports.empty=e;
 //# sourceMappingURL=DataGridBody.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGridBody/DataGridBody.module.scss.es.js

@@ -1,5 +1,5 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridBody_empty_k4xuc{text-align:center;height:6rem;padding:2rem;vertical-align:top}.DataGridBody_empty_k4xuc p{color:var(--greyed-out)}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-const empty = "DataGridBody_empty_k4xuc";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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 */.DataGridBody_empty_uJyTX{text-align:center;height:6rem;padding:2rem;vertical-align:top}.DataGridBody_empty_uJyTX p{color:var(--greyed-out)}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const empty = "DataGridBody_empty_uJyTX";
 const classes = {
   empty
 };