@onewelcome/react-lib-components 6.7.1 → 7.1.0

package/dist/esm/ContextMenu/ContextMenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.esm.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 { useBodyClick } from \"../../hooks/useBodyClick\";\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] = useState(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  useBodyClick(\n    event => {\n      return (\n        showContextMenu &&\n        anchorEl.current !== event.target &&\n        anchorEl.current !== (event.target as HTMLElement).parentElement\n      );\n    },\n    () => {\n      setShowContextMenu(false);\n    },\n    showContextMenu\n  );\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      })\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":["ContextMenuComponent","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","React","Children","count","root","useGetDomRoot","syncSelectedContextMenuItem","useEffect","undefined","calculateDefaultOffset","useDefaultOffset","calculatedOffset","onArrowNavigation","useArrowNavigation","useBodyClick","event","current","target","parentElement","useFocusAnchorElement","renderTrigger","cloneElement","onClick","tabIndex","renderChildren","map","child","index","onFocusChange","childIndex","onSelectedChange","hasFocus","isSelected","showActiveState","props","_a","contextMenuOpened","onOutOfViewHandler","useCallback","createElement","onKeyDown","className","classes","createPortal","Popover","onAnchorOutOfView","role","ContextMenu","forwardRef"],"mappings":"khBA0DA,MAAMA,EAAwE,EAE1EC,UACAC,WACAC,oBACAC,KAAK,MAAMC,MACXC,OAAO,MACPC,SACAC,UACAC,YAAY,CAAEC,WAAY,QAASC,SAAU,OAC7CC,SACAC,kBAAkB,CAAEH,WAAY,OAAQC,SAAU,OAClDG,iBACAC,UACAC,eACAC,QACAC,cACGC,GAELC,KAEA,MAAMC,EAAWC,EAA0B,MAC3C,MAAMC,EAAkBH,GAAqCI,IAC7D,MAAOC,EAAiBC,GAAsBC,EAASrB,GACvD,MAAOsB,EAAyBC,GAA8BF,GAAU,GACxE,MAAOG,EAAwBC,GAA6BJ,GAAU,GACtE,MAAOK,EAAaC,GAClBN,EACE,OAEJ,MAAOO,GAAiBP,EAASQ,EAAMC,SAASC,MAAMnC,IAEtD,MAAMoC,KAAEA,GAASC,EAAcxB,EAASQ,GAExC,MAAMiB,EAA8BX,EAEpCY,GAAU,KACRxB,SAAUyB,GAAaF,EAA4BvB,EAAM,GACxD,CAACA,IAEJ,MAAM0B,uBAAEA,GAA2BC,IACnC,MAAMC,EAAmBjC,IAAM,MAANA,SAAA,EAAAA,EAAU+B,EAAuBlC,EAAWI,GAErE,MAAMiC,kBAAEA,GAAsBC,EAAmB,CAC/CnB,0BACAC,6BACAC,yBACAC,4BACAN,kBACAC,qBACAQ,gBACAD,mBAGFe,GACEC,GAEIxB,GACAJ,EAAS6B,UAAYD,EAAME,QAC3B9B,EAAS6B,UAAaD,EAAME,OAAuBC,gBAGvD,KACE1B,EAAmB,MAAM,GAE3BD,GAGF4B,EACEhC,EACAjB,EACAqB,EACAC,EACAK,EACAxB,EACAC,GAGF,MAAM8C,EAAgB,IACpBnB,EAAMoB,aAAatD,EAAS,CAC1BG,GAAIA,EACJ,gBAAiB,OACjB,gBAAiB,GAAGA,SACpB,gBAAiBqB,EACjB+B,QAAS,IAAM9B,GAAoBD,GACnCgC,SAAU,EACVrC,IAAKC,IAGT,MAAMqC,EAAiB,IACrBvB,EAAMC,SAASuB,IAAIzD,GAAU,CAAC0D,EAAOC,WACnC,OAAA1B,EAAMoB,aAAaK,EAAuB,CACxCE,cAAgBC,GAAuBhC,EAA0BgC,GACjEC,iBAAkB,CAACf,EAA4Cc,KAC7DlC,EAA2BkC,GAC3B9B,EAAe,OACff,IAAQ,MAARA,SAAA,OAAA,EAAAA,EAAW+B,EAAOc,EAAW,EAE/BA,WAAYF,EACZI,SAAUnC,IAA2B+B,EACrCK,WAAYtC,IAA4BiC,EACxCM,mBACEP,IAAK,MAALA,SAAA,OAAA,EAAAA,EAAOQ,MAAMD,mBACb,MAAAE,SAAA,EAAAA,EAACpD,SAAUyB,GAAad,IAA4BiC,EACtDS,kBAAmB7C,EACnBO,YAAaA,GACb,IAGN,MAAMuC,EAAqBC,GAAY,KACrC9C,EAAmB,MAAM,GACxB,IAEH,IAAKY,EACH,OAAO,KAGT,OACEH,EACMsC,cAAA,MAAA,IAAAtD,EACJC,IAAKG,EACLmD,UAAW5B,EACX6B,UAAWC,EAAQ,iBAElBtB,IACAuB,EACC1C,EAAAsC,cAACK,EAAO,IACF9D,EACJP,UAAWA,EACXI,gBAAiBA,EACjBD,OAAQiC,EACRxB,SAAUA,EACVP,eAAgBA,EAChBR,KAAMmB,EACNsD,kBAAmBR,GAElBpE,GACCgC,EAAKsC,cAAA,MAAA,CAAAE,UAAWC,EAAQ,uBAAwBzE,GAElDgC,EAAAsC,cAAA,KAAA,CACEE,UAAW,GAAGC,EAAQ,WAAWzE,EAAoByE,EAAQ,iBAAmB,KAChFxE,GAAI,GAAGA,4BACWA,EAClB4E,KAAK,QAEJtB,MAGLpB,GAGJ,EAGS,MAAA2C,EAAc9C,EAAM+C,WAAWlF"}
+{"version":3,"file":"ContextMenu.esm.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 { useBodyClick } from \"../../hooks/useBodyClick\";\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] = useState(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  useBodyClick(\n    event => {\n      return (\n        showContextMenu &&\n        anchorEl.current !== event.target &&\n        anchorEl.current !== (event.target as HTMLElement).parentElement\n      );\n    },\n    () => {\n      setShowContextMenu(false);\n    },\n    showContextMenu\n  );\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      })\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/esm/ContextMenu/ContextMenu.module.scss.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*!\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-module_context-menu__071Gy{box-sizing:border-box;display:inline-block;position:relative}.ContextMenu-module_menu__LO2iO{list-style:none;margin:.25rem 0;min-width:10rem;padding:0;white-space:nowrap}.ContextMenu-module_menu__LO2iO.ContextMenu-module_no-margin-top__KuwfI{margin:0 0 .25rem}.ContextMenu-module_menu__LO2iO button{text-align:left}.ContextMenu-module_decorative-element__9pMwe{margin-top:.5rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRleHRNZW51Lm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7OztFQWNFLENBQ0Ysd0NBR0UscUJBQXNCLENBRHRCLG9CQUFxQixDQURyQixpQkFHRixDQUVBLGdDQUdFLGVBQWdCLENBRGhCLGVBQWlCLENBR2pCLGVBQWdCLENBRGhCLFNBQVUsQ0FIVixrQkFLRixDQUNBLHdFQUNFLGlCQUNGLENBQ0EsdUNBQ0UsZUFDRixDQUVBLDhDQUNFLGdCQUNGIiwiZmlsZSI6IkNvbnRleHRNZW51Lm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5jb250ZXh0LW1lbnUge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cblxuLm1lbnUge1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICBtYXJnaW46IDAuMjVyZW0gMDtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgbWluLXdpZHRoOiAxMHJlbTtcbn1cbi5tZW51Lm5vLW1hcmdpbi10b3Age1xuICBtYXJnaW46IDAgMCAwLjI1cmVtO1xufVxuLm1lbnUgYnV0dG9uIHtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbn1cblxuLmRlY29yYXRpdmUtZWxlbWVudCB7XG4gIG1hcmdpbi10b3A6IDAuNXJlbTtcbn0iXX0= */";
+var classes = {"context-menu":"ContextMenu-module_context-menu__071Gy","menu":"ContextMenu-module_menu__LO2iO","no-margin-top":"ContextMenu-module_no-margin-top__KuwfI","decorative-element":"ContextMenu-module_decorative-element__9pMwe"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=ContextMenu.module.scss.esm.js.map

package/dist/esm/ContextMenu/ContextMenu.module.scss.esm.js.map

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

package/dist/esm/ContextMenu/ContextMenuItem.esm.js

@@ -1,2 +1,41 @@
-import e,{createRef as t,useEffect as o}from"react";import n from"./ContextMenuItem.module.esm.js";const c=({children:c,onClick:l,onFocusChange:r,onSelectedChange:i,hasFocus:u,isSelected:a,showActiveState:d,childIndex:s,contextMenuOpened:m,shouldClick:f,className:v,...h},x)=>{let C=x||t();o((()=>{if(a&&C.current&&f)C.current.click()}),[a,f]);o((()=>{if(C.current&&u&&m){r&&s&&r(s);C.current.focus()}}),[u,C,m]);return e.createElement("li",{role:"none",className:`${n["context-menu-item"]} ${v!==null&&v!==void 0?v:""}`},e.createElement("button",{role:"menuitem",className:d?n["active"]:void 0,...h,ref:C,"data-focus":u,tabIndex:-1,onClick:e=>{l===null||l===void 0?void 0:l(e);s!==void 0&&(i===null||i===void 0?void 0:i(e,s))}},c))};const l=e.forwardRef(c);export{l as ContextMenuItem};
+import React, { createRef, useEffect } from 'react';
+import classes from './ContextMenuItem.module.scss.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const ContextMenuItemComponent = ({ children, onClick, onFocusChange, onSelectedChange, hasFocus, isSelected, showActiveState, childIndex, contextMenuOpened, shouldClick, className, ...rest }, ref) => {
+    let innerButtonRef = ref || createRef();
+    useEffect(() => {
+        if (isSelected && innerButtonRef.current && shouldClick) {
+            innerButtonRef.current.click();
+        }
+    }, [isSelected, shouldClick]);
+    useEffect(() => {
+        if (innerButtonRef.current && hasFocus && contextMenuOpened) {
+            onFocusChange && childIndex && onFocusChange(childIndex);
+            innerButtonRef.current.focus();
+        }
+    }, [hasFocus, innerButtonRef, contextMenuOpened]);
+    return (React.createElement("li", { role: "none", className: `${classes["context-menu-item"]} ${className !== null && className !== void 0 ? className : ""}` },
+        React.createElement("button", { role: "menuitem", className: showActiveState ? classes["active"] : undefined, ...rest, ref: innerButtonRef, "data-focus": hasFocus, tabIndex: -1, onClick: event => {
+                onClick === null || onClick === void 0 ? void 0 : onClick(event);
+                childIndex !== undefined && (onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(event, childIndex));
+            } }, children)));
+};
+const ContextMenuItem = React.forwardRef(ContextMenuItemComponent);
+
+export { ContextMenuItem };
 //# sourceMappingURL=ContextMenuItem.esm.js.map

package/dist/esm/ContextMenu/ContextMenuItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItem.esm.js","sources":["../../../../../src/components/ContextMenu/ContextMenuItem.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  ReactNode,\n  RefObject,\n  useEffect\n} from \"react\";\nimport classes from \"./ContextMenuItem.module.scss\";\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"button\">, \"onClick\"> {\n  children?: ReactNode;\n  hasFocus?: boolean;\n  isSelected?: boolean;\n  showActiveState?: boolean;\n  childIndex?: number;\n  shouldClick?: boolean;\n  contextMenuOpened?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onFocusChange?: (childIndex: number) => void;\n  onSelectedChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;\n}\n\nconst ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (\n  {\n    children,\n    onClick,\n    onFocusChange,\n    onSelectedChange,\n    hasFocus,\n    isSelected,\n    showActiveState,\n    childIndex,\n    contextMenuOpened,\n    shouldClick,\n    className,\n    ...rest\n  }: Props,\n  ref\n) => {\n  let innerButtonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();\n\n  useEffect(() => {\n    if (isSelected && innerButtonRef.current && shouldClick) {\n      innerButtonRef.current.click();\n    }\n  }, [isSelected, shouldClick]);\n\n  useEffect(() => {\n    if (innerButtonRef.current && hasFocus && contextMenuOpened) {\n      onFocusChange && childIndex && onFocusChange(childIndex);\n      innerButtonRef.current.focus();\n    }\n  }, [hasFocus, innerButtonRef, contextMenuOpened]);\n\n  return (\n    <li role=\"none\" className={`${classes[\"context-menu-item\"]} ${className ?? \"\"}`}>\n      <button\n        role=\"menuitem\"\n        className={showActiveState ? classes[\"active\"] : undefined}\n        {...rest}\n        ref={innerButtonRef}\n        data-focus={hasFocus}\n        tabIndex={-1}\n        onClick={event => {\n          onClick?.(event);\n          childIndex !== undefined && onSelectedChange?.(event, childIndex);\n        }}\n      >\n        {children}\n      </button>\n    </li>\n  );\n};\n\nexport const ContextMenuItem = React.forwardRef(ContextMenuItemComponent);\n"],"names":["ContextMenuItemComponent","children","onClick","onFocusChange","onSelectedChange","hasFocus","isSelected","showActiveState","childIndex","contextMenuOpened","shouldClick","className","rest","ref","innerButtonRef","createRef","useEffect","current","click","focus","React","role","classes","createElement","undefined","tabIndex","event","ContextMenuItem","forwardRef"],"mappings":"mGAuCA,MAAMA,EAA+E,EAEjFC,WACAC,UACAC,gBACAC,mBACAC,WACAC,aACAC,kBACAC,aACAC,oBACAC,cACAC,eACGC,GAELC,KAEA,IAAIC,EAAkBD,GAAwCE,IAE9DC,GAAU,KACR,GAAIV,GAAcQ,EAAeG,SAAWP,EAC1CI,EAAeG,QAAQC,OACxB,GACA,CAACZ,EAAYI,IAEhBM,GAAU,KACR,GAAIF,EAAeG,SAAWZ,GAAYI,EAAmB,CAC3DN,GAAiBK,GAAcL,EAAcK,GAC7CM,EAAeG,QAAQE,OACxB,IACA,CAACd,EAAUS,EAAgBL,IAE9B,OACEW,sBAAIC,KAAK,OAAOV,UAAW,GAAGW,EAAQ,wBAAwBX,IAAS,MAATA,SAAA,EAAAA,EAAa,MACzES,EAAAG,cAAA,SAAA,CACEF,KAAK,WACLV,UAAWJ,EAAkBe,EAAQ,eAAYE,KAC7CZ,EACJC,IAAKC,EAAc,aACPT,EACZoB,UAAW,EACXvB,QAASwB,IACPxB,UAAAA,SAAO,OAAA,EAAPA,EAAUwB,GACVlB,SAAegB,IAAapB,UAAAA,SAAgB,OAAA,EAAhBA,EAAmBsB,EAAOlB,GAAW,GAGlEP,GAGL,EAGS,MAAA0B,EAAkBP,EAAMQ,WAAW5B"}
+{"version":3,"file":"ContextMenuItem.esm.js","sources":["../../../../../src/components/ContextMenu/ContextMenuItem.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  ReactNode,\n  RefObject,\n  useEffect\n} from \"react\";\nimport classes from \"./ContextMenuItem.module.scss\";\n\nexport interface Props extends Omit<ComponentPropsWithRef<\"button\">, \"onClick\"> {\n  children?: ReactNode;\n  hasFocus?: boolean;\n  isSelected?: boolean;\n  showActiveState?: boolean;\n  childIndex?: number;\n  shouldClick?: boolean;\n  contextMenuOpened?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onFocusChange?: (childIndex: number) => void;\n  onSelectedChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;\n}\n\nconst ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (\n  {\n    children,\n    onClick,\n    onFocusChange,\n    onSelectedChange,\n    hasFocus,\n    isSelected,\n    showActiveState,\n    childIndex,\n    contextMenuOpened,\n    shouldClick,\n    className,\n    ...rest\n  }: Props,\n  ref\n) => {\n  let innerButtonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();\n\n  useEffect(() => {\n    if (isSelected && innerButtonRef.current && shouldClick) {\n      innerButtonRef.current.click();\n    }\n  }, [isSelected, shouldClick]);\n\n  useEffect(() => {\n    if (innerButtonRef.current && hasFocus && contextMenuOpened) {\n      onFocusChange && childIndex && onFocusChange(childIndex);\n      innerButtonRef.current.focus();\n    }\n  }, [hasFocus, innerButtonRef, contextMenuOpened]);\n\n  return (\n    <li role=\"none\" className={`${classes[\"context-menu-item\"]} ${className ?? \"\"}`}>\n      <button\n        role=\"menuitem\"\n        className={showActiveState ? classes[\"active\"] : undefined}\n        {...rest}\n        ref={innerButtonRef}\n        data-focus={hasFocus}\n        tabIndex={-1}\n        onClick={event => {\n          onClick?.(event);\n          childIndex !== undefined && onSelectedChange?.(event, childIndex);\n        }}\n      >\n        {children}\n      </button>\n    </li>\n  );\n};\n\nexport const ContextMenuItem = React.forwardRef(ContextMenuItemComponent);\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;AAcG;AAyBH,MAAM,wBAAwB,GAAuD,CACnF,EACE,QAAQ,EACR,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACD,EACR,GAAG,KACD;AACF,IAAA,IAAI,cAAc,GAAI,GAAoC,IAAI,SAAS,EAAqB,CAAC;IAE7F,SAAS,CAAC,MAAK;QACb,IAAI,UAAU,IAAI,cAAc,CAAC,OAAO,IAAI,WAAW,EAAE;AACvD,YAAA,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAChC;AACH,KAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC,MAAK;QACb,IAAI,cAAc,CAAC,OAAO,IAAI,QAAQ,IAAI,iBAAiB,EAAE;AAC3D,YAAA,aAAa,IAAI,UAAU,IAAI,aAAa,CAAC,UAAU,CAAC,CAAC;AACzD,YAAA,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAChC;KACF,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElD,QACE,4BAAI,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,mBAAmB,CAAC,IAAI,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,SAAS,GAAI,EAAE,CAAE,CAAA,EAAA;AAC7E,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,eAAe,GAAG,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,EACtD,GAAA,IAAI,EACR,GAAG,EAAE,cAAc,EAAA,YAAA,EACP,QAAQ,EACpB,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,KAAK,IAAG;AACf,gBAAA,OAAO,aAAP,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAP,OAAO,CAAG,KAAK,CAAC,CAAC;AACjB,gBAAA,UAAU,KAAK,SAAS,KAAI,gBAAgB,aAAhB,gBAAgB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhB,gBAAgB,CAAG,KAAK,EAAE,UAAU,CAAC,CAAA,CAAC;AACpE,aAAC,EAEA,EAAA,QAAQ,CACF,CACN,EACL;AACJ,CAAC,CAAC;AAEW,MAAA,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAwB;;;;"}

package/dist/esm/ContextMenu/ContextMenuItem.module.scss.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*!\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/*!\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/*!\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-module_sr-only__ITnHm{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ContextMenuItem-module_hidden__Az6RN{display:none}.ContextMenuItem-module_slide-in__hCX3P{animation:ContextMenuItem-module_slide-in__hCX3P .5s forwards}@media (prefers-reduced-motion:reduce){.ContextMenuItem-module_slide-in__hCX3P{animation-duration:.1ms}}.ContextMenuItem-module_slide-out__RpZ-J{animation:ContextMenuItem-module_slide-out__RpZ-J .5s forwards}@media (prefers-reduced-motion:reduce){.ContextMenuItem-module_slide-out__RpZ-J{animation-duration:.1ms}}@keyframes ContextMenuItem-module_slide-in__hCX3P{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes ContextMenuItem-module_slide-out__RpZ-J{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*!\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-module_context-menu-item__LwybO{position:relative}.ContextMenuItem-module_context-menu-item__LwybO button{background-color:initial;border:0;box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-form-label);height:100%;line-height:1.25rem;padding:.62rem .75rem;width:100%}.ContextMenuItem-module_context-menu-item__LwybO button:focus-visible{outline:none}.ContextMenuItem-module_context-menu-item__LwybO button:focus-visible:after{border-radius:var(--focus-border-radius);content:\"\";height:100%;left:0;outline:.125rem solid var(--color-focus);outline-offset:0;position:absolute;top:0;width:100%;z-index:101}.ContextMenuItem-module_context-menu-item__LwybO button:hover{background-color:var(--context-menu-hover-color)}.ContextMenuItem-module_context-menu-item__LwybO button:active{background-color:var(--context-menu-pressed-color)}.ContextMenuItem-module_context-menu-item__LwybO button.ContextMenuItem-module_active__QsUfr{color:var(--color-primary)}.ContextMenuItem-module_context-menu-item__LwybO button.ContextMenuItem-module_active__QsUfr:before{border-bottom-right-radius:.125rem;border-left:.25rem solid var(--color-primary);border-top-right-radius:.125rem;content:\"\";height:100%;left:0;position:absolute;top:0}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRleHRNZW51SXRlbS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRTtBQUNGOzs7Ozs7Ozs7Ozs7OztFQWNFO0FBQ0Y7Ozs7Ozs7Ozs7Ozs7O0VBY0UsQ0FDRix1Q0FPRSxrQkFBc0IsQ0FDdEIsUUFBUyxDQUxULFVBQVcsQ0FFWCxXQUFZLENBQ1osZUFBZ0IsQ0FGaEIsU0FBVSxDQUhWLGlCQUFrQixDQUNsQixTQU9GLENBRUEsc0NBQ0UsWUFDRixDQUVBLHdDQUNFLDZEQUNGLENBQ0EsdUNBQ0Usd0NBQ0UsdUJBQ0YsQ0FDRixDQUVBLHlDQUNFLDhEQUNGLENBQ0EsdUNBQ0UseUNBQ0UsdUJBQ0YsQ0FDRixDQUVBLGtEQUNFLEdBQ0UsMkJBQ0YsQ0FDQSxHQUNFLHVCQUNGLENBQ0YsQ0FDQSxtREFDRSxHQUNFLHVCQUNGLENBQ0EsR0FDRSwyQkFDRixDQUNGO0FBQ0E7Ozs7Ozs7Ozs7Ozs7O0VBY0UsQ0FDRixpREFDRSxpQkFDRixDQUNBLHdEQUNFLHdCQUE2QixDQUM3QixRQUFTLENBUVQscUJBQXNCLENBSnRCLGNBQWUsQ0FIZiw4QkFBK0IsQ0FDL0IscUNBQXNDLENBSXRDLFdBQVksQ0FIWixtQkFBb0IsQ0FJcEIscUJBQXdCLENBRnhCLFVBSUYsQ0FDQSxzRUFDRSxZQUNGLENBQ0EsNEVBR0Usd0NBQXlDLENBQ3pDLFVBQVcsQ0FJWCxXQUFZLENBRFosTUFBTyxDQU5QLHdDQUEwQyxDQUMxQyxnQkFBaUIsQ0FHakIsaUJBQWtCLENBQ2xCLEtBQU0sQ0FHTixVQUFXLENBQ1gsV0FDRixDQUNBLDhEQUNFLGdEQUNGLENBQ0EsK0RBQ0Usa0RBQ0YsQ0FDQSw2RkFDRSwwQkFDRixDQUNBLG9HQU9FLGtDQUFvQyxDQUNwQyw2Q0FBK0MsQ0FGL0MsK0JBQWlDLENBTGpDLFVBQVcsQ0FJWCxXQUFZLENBRFosTUFBTyxDQUZQLGlCQUFrQixDQUNsQixLQU1GIiwiZmlsZSI6IkNvbnRleHRNZW51SXRlbS5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4vKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn1cbi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4uY29udGV4dC1tZW51LWl0ZW0ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG4uY29udGV4dC1tZW51LWl0ZW0gYnV0dG9uIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGJvcmRlcjogMDtcbiAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5KTtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtZm9ybS1sYWJlbCk7XG4gIGxpbmUtaGVpZ2h0OiAxLjI1cmVtO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAuNjJyZW0gMC43NXJlbTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cbi5jb250ZXh0LW1lbnUtaXRlbSBidXR0b246Zm9jdXMtdmlzaWJsZSB7XG4gIG91dGxpbmU6IG5vbmU7XG59XG4uY29udGV4dC1tZW51LWl0ZW0gYnV0dG9uOmZvY3VzLXZpc2libGU6OmFmdGVyIHtcbiAgb3V0bGluZTogMC4xMjVyZW0gc29saWQgdmFyKC0tY29sb3ItZm9jdXMpO1xuICBvdXRsaW5lLW9mZnNldDogMDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZm9jdXMtYm9yZGVyLXJhZGl1cyk7XG4gIGNvbnRlbnQ6IFwiXCI7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICB6LWluZGV4OiAxMDE7XG59XG4uY29udGV4dC1tZW51LWl0ZW0gYnV0dG9uOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29udGV4dC1tZW51LWhvdmVyLWNvbG9yKTtcbn1cbi5jb250ZXh0LW1lbnUtaXRlbSBidXR0b246YWN0aXZlIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29udGV4dC1tZW51LXByZXNzZWQtY29sb3IpO1xufVxuLmNvbnRleHQtbWVudS1pdGVtIGJ1dHRvbi5hY3RpdmUge1xuICBjb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeSk7XG59XG4uY29udGV4dC1tZW51LWl0ZW0gYnV0dG9uLmFjdGl2ZTo6YmVmb3JlIHtcbiAgY29udGVudDogXCJcIjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIGhlaWdodDogMTAwJTtcbiAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IDAuMTI1cmVtO1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogMC4xMjVyZW07XG4gIGJvcmRlci1sZWZ0OiAwLjI1cmVtIHNvbGlkIHZhcigtLWNvbG9yLXByaW1hcnkpO1xufSJdfQ== */";
+var classes = {"sr-only":"ContextMenuItem-module_sr-only__ITnHm","hidden":"ContextMenuItem-module_hidden__Az6RN","slide-in":"ContextMenuItem-module_slide-in__hCX3P","slide-out":"ContextMenuItem-module_slide-out__RpZ-J","context-menu-item":"ContextMenuItem-module_context-menu-item__LwybO","active":"ContextMenuItem-module_active__QsUfr"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=ContextMenuItem.module.scss.esm.js.map

package/dist/esm/ContextMenu/ContextMenuItem.module.scss.esm.js.map

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

package/dist/esm/ContextMenu/ContextMenuService.esm.js

@@ -1,2 +1,133 @@
-import{useEffect as e}from"react";import{vertical as t,horizontal as o}from"../src/hooks/usePosition.esm.js";import{remToPx as r}from"../src/util/helper.esm.js";const n=({selectedContextMenuItem:e,setSelectedContextMenuItem:t,focusedContextMenuItem:o,setFocusedContextMenuItem:r,showContextMenu:n,setShowContextMenu:s,childrenCount:c,setShouldClick:i})=>{const u=u=>{if(o===-1&&e!==-1)r(e);const l=["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Enter","Space","Escape","End","Home"];if(l.includes(u.code))u.preventDefault();switch(u.code){case"ArrowDown":if(!n){s(true);return}r((e=>e+1>c-1?0:e+1));return;case"ArrowUp":r((e=>e-1<0?c-1:e-1));return;case"Enter":case"Space":if(!n){s(true);return}i(true);t(o);s(false);return;case"Tab":case"Escape":s(false);return;case"End":r(c-1);return;case"Home":r(0);return}};return{onArrowNavigation:u}};const s=r(.25);const c=()=>{const e=(e,r)=>{const n={left:0,right:0,top:0,bottom:0};if(e.vertical===t.BOTTOM&&r.vertical===t.TOP)n.top=s;else if(e.vertical===t.TOP&&r.vertical===t.BOTTOM)n.top=-s;if(e.horizontal===o.RIGHT)n.left=s;return n};return{calculateDefaultOffset:e}};const i=(t,o,r,n,s,c,i)=>{const u=e=>{var o;if(e.key==="Escape"){n(false);(o=t.current)===null||o===void 0?void 0:o.focus()}};const l=()=>{if(r)document.addEventListener("keydown",u);else document.removeEventListener("keydown",u)};const a=()=>{var e,n;if(r)c===null||c===void 0?void 0:c();else{i===null||i===void 0?void 0:i();if((e=document.activeElement)===null||e===void 0?void 0:e.closest(`#${o}-menu`))(n=t.current)===null||n===void 0?void 0:n.focus();s(-1)}};e((()=>{l();a()}),[r])};export{n as useArrowNavigation,c as useDefaultOffset,i as useFocusAnchorElement};
+import { useEffect } from 'react';
+import { vertical, horizontal } from '../src/hooks/usePosition.esm.js';
+import { remToPx } from '../src/util/helper.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+/** @scope . */
+const useArrowNavigation = ({ selectedContextMenuItem, setSelectedContextMenuItem, focusedContextMenuItem, setFocusedContextMenuItem, showContextMenu, setShowContextMenu, childrenCount, setShouldClick }) => {
+    const onArrowNavigation = (event) => {
+        if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {
+            setFocusedContextMenuItem(selectedContextMenuItem);
+        }
+        const codesToPreventDefault = [
+            "ArrowDown",
+            "ArrowUp",
+            "ArrowLeft",
+            "ArrowRight",
+            "Enter",
+            "Space",
+            "Escape",
+            "End",
+            "Home"
+        ];
+        if (codesToPreventDefault.includes(event.code)) {
+            event.preventDefault();
+        }
+        switch (event.code) {
+            case "ArrowDown":
+                if (!showContextMenu) {
+                    setShowContextMenu(true);
+                    return;
+                }
+                setFocusedContextMenuItem(prevState => {
+                    return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
+                });
+                return;
+            case "ArrowUp":
+                setFocusedContextMenuItem(prevState => {
+                    return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
+                });
+                return;
+            case "Enter":
+            case "Space":
+                if (!showContextMenu) {
+                    setShowContextMenu(true);
+                    return;
+                }
+                setShouldClick(true);
+                setSelectedContextMenuItem(focusedContextMenuItem);
+                setShowContextMenu(false);
+                return;
+            case "Tab":
+            case "Escape":
+                setShowContextMenu(false);
+                return;
+            case "End":
+                setFocusedContextMenuItem(childrenCount - 1);
+                return;
+            case "Home":
+                setFocusedContextMenuItem(0);
+                return;
+        }
+    };
+    return { onArrowNavigation };
+};
+const defaultOffsetSpacing = remToPx(0.25);
+const useDefaultOffset = () => {
+    const calculateDefaultOffset = (placement, transformOrigin) => {
+        const offset = { left: 0, right: 0, top: 0, bottom: 0 };
+        if (placement.vertical === vertical.BOTTOM && transformOrigin.vertical === vertical.TOP) {
+            offset.top = defaultOffsetSpacing;
+        }
+        else if (placement.vertical === vertical.TOP &&
+            transformOrigin.vertical === vertical.BOTTOM) {
+            offset.top = -defaultOffsetSpacing;
+        }
+        if (placement.horizontal === horizontal.RIGHT) {
+            offset.left = defaultOffsetSpacing;
+        }
+        return offset;
+    };
+    return { calculateDefaultOffset };
+};
+const useFocusAnchorElement = (anchorEl, id, showContextMenu, setShowContextMenu, setFocusedContextMenuItem, onShow, onClose) => {
+    const handleEscapeKeyPress = (e) => {
+        var _a;
+        if (e.key === "Escape") {
+            setShowContextMenu(false);
+            (_a = anchorEl.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const escapeKeyEventHandlerManager = () => {
+        if (showContextMenu) {
+            document.addEventListener("keydown", handleEscapeKeyPress);
+        }
+        else {
+            document.removeEventListener("keydown", handleEscapeKeyPress);
+        }
+    };
+    const emitContextMenuEvent = () => {
+        var _a, _b;
+        if (showContextMenu) {
+            onShow === null || onShow === void 0 ? void 0 : onShow();
+        }
+        else {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`#${id}-menu`)) {
+                (_b = anchorEl.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            setFocusedContextMenuItem(-1);
+        }
+    };
+    useEffect(() => {
+        escapeKeyEventHandlerManager();
+        emitContextMenuEvent();
+    }, [showContextMenu]);
+};
+
+export { useArrowNavigation, useDefaultOffset, useFocusAnchorElement };
 //# sourceMappingURL=ContextMenuService.esm.js.map

package/dist/esm/ContextMenu/ContextMenuService.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuService.esm.js","sources":["../../../../../src/components/ContextMenu/ContextMenuService.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { SetStateAction, useEffect } from \"react\";\nimport { horizontal, Offset, Placement, vertical } from \"../../hooks/usePosition\";\nimport { remToPx } from \"../../util/helper\";\n\ninterface UseArrowNavigation {\n  selectedContextMenuItem: number;\n  setSelectedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;\n  focusedContextMenuItem: number;\n  setFocusedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;\n  showContextMenu: boolean;\n  setShowContextMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  childrenCount: number;\n  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\n/** @scope . */\nexport const useArrowNavigation = ({\n  selectedContextMenuItem,\n  setSelectedContextMenuItem,\n  focusedContextMenuItem,\n  setFocusedContextMenuItem,\n  showContextMenu,\n  setShowContextMenu,\n  childrenCount,\n  setShouldClick\n}: UseArrowNavigation) => {\n  const onArrowNavigation = (event: React.KeyboardEvent) => {\n    if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {\n      setFocusedContextMenuItem(selectedContextMenuItem);\n    }\n\n    const codesToPreventDefault = [\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Enter\",\n      \"Space\",\n      \"Escape\",\n      \"End\",\n      \"Home\"\n    ];\n\n    if (codesToPreventDefault.includes(event.code)) {\n      event.preventDefault();\n    }\n\n    switch (event.code) {\n      case \"ArrowDown\":\n        if (!showContextMenu) {\n          setShowContextMenu(true);\n          return;\n        }\n        setFocusedContextMenuItem(prevState => {\n          return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;\n        });\n        return;\n      case \"ArrowUp\":\n        setFocusedContextMenuItem(prevState => {\n          return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;\n        });\n        return;\n      case \"Enter\":\n      case \"Space\":\n        if (!showContextMenu) {\n          setShowContextMenu(true);\n          return;\n        }\n\n        setShouldClick(true);\n        setSelectedContextMenuItem(focusedContextMenuItem);\n        setShowContextMenu(false);\n        return;\n      case \"Tab\":\n      case \"Escape\":\n        setShowContextMenu(false);\n        return;\n      case \"End\":\n        setFocusedContextMenuItem(childrenCount - 1);\n        return;\n      case \"Home\":\n        setFocusedContextMenuItem(0);\n        return;\n    }\n  };\n\n  return { onArrowNavigation };\n};\n\nconst defaultOffsetSpacing = remToPx(0.25);\n\nexport const useDefaultOffset = () => {\n  const calculateDefaultOffset = (placement: Placement, transformOrigin: Placement): Offset => {\n    const offset = { left: 0, right: 0, top: 0, bottom: 0 };\n    if (placement.vertical === vertical.BOTTOM && transformOrigin.vertical === vertical.TOP) {\n      offset.top = defaultOffsetSpacing;\n    } else if (\n      placement.vertical === vertical.TOP &&\n      transformOrigin.vertical === vertical.BOTTOM\n    ) {\n      offset.top = -defaultOffsetSpacing;\n    }\n\n    if (placement.horizontal === horizontal.RIGHT) {\n      offset.left = defaultOffsetSpacing;\n    }\n    return offset;\n  };\n\n  return { calculateDefaultOffset };\n};\n\nexport const useFocusAnchorElement = (\n  anchorEl: React.RefObject<HTMLElement>,\n  id: string,\n  showContextMenu: boolean,\n  setShowContextMenu: React.Dispatch<SetStateAction<boolean>>,\n  setFocusedContextMenuItem: React.Dispatch<SetStateAction<number>>,\n  onShow?: () => void,\n  onClose?: () => void\n) => {\n  const handleEscapeKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      setShowContextMenu(false);\n      anchorEl.current?.focus();\n    }\n  };\n\n  const escapeKeyEventHandlerManager = () => {\n    if (showContextMenu) {\n      document.addEventListener(\"keydown\", handleEscapeKeyPress);\n    } else {\n      document.removeEventListener(\"keydown\", handleEscapeKeyPress);\n    }\n  };\n\n  const emitContextMenuEvent = () => {\n    if (showContextMenu) {\n      onShow?.();\n    } else {\n      onClose?.();\n\n      if (document.activeElement?.closest(`#${id}-menu`)) {\n        anchorEl.current?.focus();\n      }\n\n      setFocusedContextMenuItem(-1);\n    }\n  };\n\n  useEffect(() => {\n    escapeKeyEventHandlerManager();\n    emitContextMenuEvent();\n  }, [showContextMenu]);\n};\n"],"names":["useArrowNavigation","selectedContextMenuItem","setSelectedContextMenuItem","focusedContextMenuItem","setFocusedContextMenuItem","showContextMenu","setShowContextMenu","childrenCount","setShouldClick","onArrowNavigation","event","codesToPreventDefault","includes","code","preventDefault","prevState","defaultOffsetSpacing","remToPx","useDefaultOffset","calculateDefaultOffset","placement","transformOrigin","offset","left","right","top","bottom","vertical","BOTTOM","TOP","horizontal","RIGHT","useFocusAnchorElement","anchorEl","id","onShow","onClose","handleEscapeKeyPress","e","key","_a","current","focus","escapeKeyEventHandlerManager","document","addEventListener","removeEventListener","emitContextMenuEvent","activeElement","closest","_b","useEffect"],"mappings":"uKAgCaA,EAAqB,EAChCC,0BACAC,6BACAC,yBACAC,4BACAC,kBACAC,qBACAC,gBACAC,qBAEA,MAAMC,EAAqBC,IACzB,GAAIP,KAA4B,GAAKF,KAA6B,EAChEG,EAA0BH,GAG5B,MAAMU,EAAwB,CAC5B,YACA,UACA,YACA,aACA,QACA,QACA,SACA,MACA,QAGF,GAAIA,EAAsBC,SAASF,EAAMG,MACvCH,EAAMI,iBAGR,OAAQJ,EAAMG,MACZ,IAAK,YACH,IAAKR,EAAiB,CACpBC,EAAmB,MACnB,MACD,CACDF,GAA0BW,GACjBA,EAAY,EAAIR,EAAgB,EAAI,EAAIQ,EAAY,IAE7D,OACF,IAAK,UACHX,GAA0BW,GACjBA,EAAY,EAAI,EAAIR,EAAgB,EAAIQ,EAAY,IAE7D,OACF,IAAK,QACL,IAAK,QACH,IAAKV,EAAiB,CACpBC,EAAmB,MACnB,MACD,CAEDE,EAAe,MACfN,EAA2BC,GAC3BG,EAAmB,OACnB,OACF,IAAK,MACL,IAAK,SACHA,EAAmB,OACnB,OACF,IAAK,MACHF,EAA0BG,EAAgB,GAC1C,OACF,IAAK,OACHH,EAA0B,GAC1B,OACH,EAGH,MAAO,CAAEK,oBAAmB,EAG9B,MAAMO,EAAuBC,EAAQ,KAE9B,MAAMC,EAAmB,KAC9B,MAAMC,EAAyB,CAACC,EAAsBC,KACpD,MAAMC,EAAS,CAAEC,KAAM,EAAGC,MAAO,EAAGC,IAAK,EAAGC,OAAQ,GACpD,GAAIN,EAAUO,WAAaA,EAASC,QAAUP,EAAgBM,WAAaA,EAASE,IAClFP,EAAOG,IAAMT,OACR,GACLI,EAAUO,WAAaA,EAASE,KAChCR,EAAgBM,WAAaA,EAASC,OAEtCN,EAAOG,KAAOT,EAGhB,GAAII,EAAUU,aAAeA,EAAWC,MACtCT,EAAOC,KAAOP,EAEhB,OAAOM,CAAM,EAGf,MAAO,CAAEH,yBAAwB,EAGtB,MAAAa,EAAwB,CACnCC,EACAC,EACA7B,EACAC,EACAF,EACA+B,EACAC,KAEA,MAAMC,EAAwBC,UAC5B,GAAIA,EAAEC,MAAQ,SAAU,CACtBjC,EAAmB,QACnBkC,EAAAP,EAASQ,WAAS,MAAAD,SAAA,OAAA,EAAAA,EAAAE,OACnB,GAGH,MAAMC,EAA+B,KACnC,GAAItC,EACFuC,SAASC,iBAAiB,UAAWR,QAErCO,SAASE,oBAAoB,UAAWT,EACzC,EAGH,MAAMU,EAAuB,aAC3B,GAAI1C,EACF8B,IAAA,MAAAA,SAAA,OAAA,EAAAA,QACK,CACLC,IAAA,MAAAA,SAAA,OAAA,EAAAA,IAEA,IAAII,EAAAI,SAASI,iBAAe,MAAAR,SAAA,OAAA,EAAAA,EAAAS,QAAQ,IAAIf,WACtCgB,EAAAjB,EAASQ,WAAS,MAAAS,SAAA,OAAA,EAAAA,EAAAR,QAGpBtC,GAA2B,EAC5B,GAGH+C,GAAU,KACRR,IACAI,GAAsB,GACrB,CAAC1C,GAAiB"}
+{"version":3,"file":"ContextMenuService.esm.js","sources":["../../../../../src/components/ContextMenu/ContextMenuService.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { SetStateAction, useEffect } from \"react\";\nimport { horizontal, Offset, Placement, vertical } from \"../../hooks/usePosition\";\nimport { remToPx } from \"../../util/helper\";\n\ninterface UseArrowNavigation {\n  selectedContextMenuItem: number;\n  setSelectedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;\n  focusedContextMenuItem: number;\n  setFocusedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;\n  showContextMenu: boolean;\n  setShowContextMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  childrenCount: number;\n  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\n/** @scope . */\nexport const useArrowNavigation = ({\n  selectedContextMenuItem,\n  setSelectedContextMenuItem,\n  focusedContextMenuItem,\n  setFocusedContextMenuItem,\n  showContextMenu,\n  setShowContextMenu,\n  childrenCount,\n  setShouldClick\n}: UseArrowNavigation) => {\n  const onArrowNavigation = (event: React.KeyboardEvent) => {\n    if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {\n      setFocusedContextMenuItem(selectedContextMenuItem);\n    }\n\n    const codesToPreventDefault = [\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Enter\",\n      \"Space\",\n      \"Escape\",\n      \"End\",\n      \"Home\"\n    ];\n\n    if (codesToPreventDefault.includes(event.code)) {\n      event.preventDefault();\n    }\n\n    switch (event.code) {\n      case \"ArrowDown\":\n        if (!showContextMenu) {\n          setShowContextMenu(true);\n          return;\n        }\n        setFocusedContextMenuItem(prevState => {\n          return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;\n        });\n        return;\n      case \"ArrowUp\":\n        setFocusedContextMenuItem(prevState => {\n          return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;\n        });\n        return;\n      case \"Enter\":\n      case \"Space\":\n        if (!showContextMenu) {\n          setShowContextMenu(true);\n          return;\n        }\n\n        setShouldClick(true);\n        setSelectedContextMenuItem(focusedContextMenuItem);\n        setShowContextMenu(false);\n        return;\n      case \"Tab\":\n      case \"Escape\":\n        setShowContextMenu(false);\n        return;\n      case \"End\":\n        setFocusedContextMenuItem(childrenCount - 1);\n        return;\n      case \"Home\":\n        setFocusedContextMenuItem(0);\n        return;\n    }\n  };\n\n  return { onArrowNavigation };\n};\n\nconst defaultOffsetSpacing = remToPx(0.25);\n\nexport const useDefaultOffset = () => {\n  const calculateDefaultOffset = (placement: Placement, transformOrigin: Placement): Offset => {\n    const offset = { left: 0, right: 0, top: 0, bottom: 0 };\n    if (placement.vertical === vertical.BOTTOM && transformOrigin.vertical === vertical.TOP) {\n      offset.top = defaultOffsetSpacing;\n    } else if (\n      placement.vertical === vertical.TOP &&\n      transformOrigin.vertical === vertical.BOTTOM\n    ) {\n      offset.top = -defaultOffsetSpacing;\n    }\n\n    if (placement.horizontal === horizontal.RIGHT) {\n      offset.left = defaultOffsetSpacing;\n    }\n    return offset;\n  };\n\n  return { calculateDefaultOffset };\n};\n\nexport const useFocusAnchorElement = (\n  anchorEl: React.RefObject<HTMLElement>,\n  id: string,\n  showContextMenu: boolean,\n  setShowContextMenu: React.Dispatch<SetStateAction<boolean>>,\n  setFocusedContextMenuItem: React.Dispatch<SetStateAction<number>>,\n  onShow?: () => void,\n  onClose?: () => void\n) => {\n  const handleEscapeKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      setShowContextMenu(false);\n      anchorEl.current?.focus();\n    }\n  };\n\n  const escapeKeyEventHandlerManager = () => {\n    if (showContextMenu) {\n      document.addEventListener(\"keydown\", handleEscapeKeyPress);\n    } else {\n      document.removeEventListener(\"keydown\", handleEscapeKeyPress);\n    }\n  };\n\n  const emitContextMenuEvent = () => {\n    if (showContextMenu) {\n      onShow?.();\n    } else {\n      onClose?.();\n\n      if (document.activeElement?.closest(`#${id}-menu`)) {\n        anchorEl.current?.focus();\n      }\n\n      setFocusedContextMenuItem(-1);\n    }\n  };\n\n  useEffect(() => {\n    escapeKeyEventHandlerManager();\n    emitContextMenuEvent();\n  }, [showContextMenu]);\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,84 @@
-import e,{useState as t,useEffect as i}from"react";import a from"./DataGrid.module.esm.js";import{DataGridHeader as d}from"./DataGridHeader/DataGridHeader.esm.js";import{DataGridActions as o}from"./DataGridActions/DataGridActions.esm.js";import{DataGridBody as n}from"./DataGridBody/DataGridBody.esm.js";import{Pagination as r}from"../Pagination/Pagination.esm.js";import{useSpacing as l}from"../src/hooks/useSpacing.esm.js";const s=({children:s,data:p,initialSort:m,onSort:g,headers:c,actions:u={},paginationProps:v,disableContextMenuColumn:h,isLoading:f,enableMultiSorting:b,emptyLabel:w,spacing:y,style:E,...L},D)=>{var G;if(!c)throw new Error("Headers definition has to be provided");if(!s)throw new Error("DataGridBody should be provieded with a template how to render rows");const[S,j]=t(c);const C=l(y,E);i((()=>j(c)),[c]);const B=e=>{j(S.map((t=>t.name!==e?t:{...t,hidden:!t.hidden})))};if(C===null||C===void 0?void 0:C.padding){const e=C.padding.toString().split(" ");let t=0;if(e.length>=2)t=1;if(e.length===4)t=3;Object.defineProperties(C,{paddingTop:{value:e[0]},paddingRight:{value:e[e.length-1>0?1:0]},paddingBottom:{value:e[e.length/3>=1?2:0]},paddingLeft:{value:e[t]}})}return e.createElement("div",{...L,className:a["grid-wrapper"],ref:D,style:{paddingTop:C===null||C===void 0?void 0:C.paddingTop,paddingBottom:C===null||C===void 0?void 0:C.paddingBottom}},e.createElement(o,{...u,style:{paddingLeft:C===null||C===void 0?void 0:C.paddingLeft,paddingRight:C===null||C===void 0?void 0:C.paddingRight},headers:S,onColumnToggled:B}),e.createElement("div",{className:a["table-wrapper"]},e.createElement("table",{className:a["table"]},e.createElement(d,{headers:S,initialSort:m,onSort:g,disableContextMenuColumn:h,enableMultiSorting:b,spacing:C}),e.createElement(n,{data:p,headers:S,isLoading:f,disableContextMenuColumn:h,emptyLabel:w,spacing:C},s))),v&&!f&&e.createElement(r,{...v,style:{...v.style,paddingLeft:C===null||C===void 0?void 0:C.paddingLeft,paddingRight:C===null||C===void 0?void 0:C.paddingRight},className:`${a["pagination"]} ${(G=v.className)!==null&&G!==void 0?G:""}`}))};const p=e.forwardRef(s);export{p as DataGrid};
+import React, { useState, useEffect } from 'react';
+import classes from './DataGrid.module.scss.esm.js';
+import { DataGridHeader } from './DataGridHeader/DataGridHeader.esm.js';
+import { DataGridActions } from './DataGridActions/DataGridActions.esm.js';
+import { DataGridBody } from './DataGridBody/DataGridBody.esm.js';
+import { Pagination } from '../Pagination/Pagination.esm.js';
+import { useSpacing } from '../src/hooks/useSpacing.esm.js';
+import { DataGridToolbar } from './DataGridFilters/DataGridToolbar.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const DataGridInner = ({ children, data, initialSort, onSort, headers, actions = {}, paginationProps, disableContextMenuColumn, enableExpandableRow, filters, isLoading, enableMultiSorting, emptyLabel, spacing, style, ...rest }, ref) => {
+    var _a;
+    if (!headers) {
+        throw new Error("Headers definition has to be provided");
+    }
+    if (!children) {
+        throw new Error("DataGridBody should be provided with a template how to render rows");
+    }
+    const [internalHeaders, setInternalHeaders] = useState(headers);
+    const styleWithSpacing = useSpacing(spacing, style);
+    useEffect(() => setInternalHeaders(headers), [headers]);
+    const onColumnToggled = (colName) => {
+        setInternalHeaders(internalHeaders.map(item => item.name !== colName ? item : { ...item, hidden: !item.hidden }));
+    };
+    if (styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.padding) {
+        const splitPaddings = styleWithSpacing.padding.toString().split(" ");
+        let paddingLeftIndex = 0;
+        if (splitPaddings.length >= 2) {
+            paddingLeftIndex = 1;
+        }
+        if (splitPaddings.length === 4) {
+            paddingLeftIndex = 3;
+        }
+        Object.defineProperties(styleWithSpacing, {
+            paddingTop: {
+                value: splitPaddings[0]
+            },
+            paddingRight: {
+                value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]
+            },
+            paddingBottom: {
+                value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]
+            },
+            paddingLeft: {
+                value: splitPaddings[paddingLeftIndex]
+            }
+        });
+    }
+    return (React.createElement("div", { ...rest, className: classes["grid-wrapper"], ref: ref, style: {
+            paddingTop: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingTop,
+            paddingBottom: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingBottom
+        } },
+        (filters === null || filters === void 0 ? void 0 : filters.enable) ? (React.createElement(DataGridToolbar, { ...filters.filtersProps })) : (React.createElement(DataGridActions, { ...actions, style: {
+                paddingLeft: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingLeft,
+                paddingRight: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingRight
+            }, headers: internalHeaders, onColumnToggled: onColumnToggled })),
+        React.createElement("div", { className: classes["table-wrapper"] },
+            React.createElement("table", { className: classes["table"] },
+                React.createElement(DataGridHeader, { headers: internalHeaders, initialSort: initialSort, onSort: onSort, disableContextMenuColumn: disableContextMenuColumn, enableExpandableRow: enableExpandableRow, enableMultiSorting: enableMultiSorting, spacing: styleWithSpacing }),
+                React.createElement(DataGridBody, { data: data, headers: internalHeaders, isLoading: isLoading, disableContextMenuColumn: disableContextMenuColumn, emptyLabel: emptyLabel, spacing: styleWithSpacing }, children))),
+        paginationProps && !isLoading && (React.createElement(Pagination, { ...paginationProps, style: {
+                ...paginationProps.style,
+                paddingLeft: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingLeft,
+                paddingRight: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingRight
+            }, className: `${classes["pagination"]} ${(_a = paginationProps.className) !== null && _a !== void 0 ? _a : ""}` }))));
+};
+const DataGrid = React.forwardRef(DataGridInner);
+
+export { DataGrid };
 //# sourceMappingURL=DataGrid.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.esm.js","sources":["../../../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport classes from \"./DataGrid.module.scss\";\nimport { DataGridHeader } from \"./DataGridHeader/DataGridHeader\";\nimport { DataGridActions } from \"./DataGridActions/DataGridActions\";\nimport { DataGridBody } from \"./DataGridBody/DataGridBody\";\nimport { HeaderCell, OnSortFunction, Sort } from \"./datagrid.interfaces\";\nimport { Pagination, Props as PaginationProps } from \"../Pagination/Pagination\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  headers: HeaderCell[];\n  actions?: {\n    enableAddBtn?: boolean;\n    enableColumnsBtn?: boolean;\n    enableSearchBtn?: boolean;\n    addBtnProps?: ButtonProps;\n    columnsBtnProps?: ButtonProps;\n    searchBtnProps?: ButtonProps;\n    searchIconBtnProps?: ButtonProps;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n}\n\nconst DataGridInner = <T extends {}>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    disableContextMenuColumn,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  if (!headers) {\n    throw new Error(\"Headers definition has to be provided\");\n  }\n  if (!children) {\n    throw new Error(\"DataGridBody should be provieded with a template how to render rows\");\n  }\n\n  const [internalHeaders, setInternalHeaders] = useState(headers);\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  useEffect(() => setInternalHeaders(headers), [headers]);\n\n  const onColumnToggled = (colName: string) => {\n    setInternalHeaders(\n      internalHeaders.map(item =>\n        item.name !== colName ? item : { ...item, hidden: !item.hidden }\n      )\n    );\n  };\n\n  if (styleWithSpacing?.padding) {\n    const splitPaddings = styleWithSpacing.padding.toString().split(\" \");\n\n    let paddingLeftIndex: number = 0;\n\n    if (splitPaddings.length >= 2) {\n      paddingLeftIndex = 1;\n    }\n    if (splitPaddings.length === 4) {\n      paddingLeftIndex = 3;\n    }\n\n    Object.defineProperties(styleWithSpacing, {\n      paddingTop: {\n        value: splitPaddings[0]\n      },\n      paddingRight: {\n        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]\n      },\n      paddingBottom: {\n        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]\n      },\n      paddingLeft: {\n        value: splitPaddings[paddingLeftIndex]\n      }\n    });\n  }\n\n  return (\n    <div\n      {...rest}\n      className={classes[\"grid-wrapper\"]}\n      ref={ref}\n      style={{\n        paddingTop: styleWithSpacing?.paddingTop,\n        paddingBottom: styleWithSpacing?.paddingBottom\n      }}\n    >\n      <DataGridActions\n        {...actions}\n        style={{\n          paddingLeft: styleWithSpacing?.paddingLeft,\n          paddingRight: styleWithSpacing?.paddingRight\n        }}\n        headers={internalHeaders}\n        onColumnToggled={onColumnToggled}\n      />\n      <div className={classes[\"table-wrapper\"]}>\n        <table className={classes[\"table\"]}>\n          <DataGridHeader\n            headers={internalHeaders}\n            initialSort={initialSort}\n            onSort={onSort}\n            disableContextMenuColumn={disableContextMenuColumn}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n          >\n            {children}\n          </DataGridBody>\n        </table>\n      </div>\n      {paginationProps && !isLoading && (\n        <Pagination\n          {...paginationProps}\n          style={{\n            ...paginationProps.style,\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          className={`${classes[\"pagination\"]} ${paginationProps.className ?? \"\"}`}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":["DataGridInner","children","data","initialSort","onSort","headers","actions","paginationProps","disableContextMenuColumn","isLoading","enableMultiSorting","emptyLabel","spacing","style","rest","ref","Error","internalHeaders","setInternalHeaders","useState","styleWithSpacing","useSpacing","useEffect","onColumnToggled","colName","map","item","name","hidden","padding","splitPaddings","toString","split","paddingLeftIndex","length","Object","defineProperties","paddingTop","value","paddingRight","paddingBottom","paddingLeft","React","createElement","className","classes","DataGridActions","DataGridHeader","DataGridBody","Pagination","_a","DataGrid","forwardRef"],"mappings":"yaAiDA,MAAMA,EAAgB,EAElBC,WACAC,OACAC,cACAC,SACAC,UACAC,UAAU,CAAE,EACZC,kBACAC,2BACAC,YACAC,qBACAC,aACAC,UACAC,WACGC,GAELC,WAEA,IAAKV,EACH,MAAM,IAAIW,MAAM,yCAElB,IAAKf,EACH,MAAM,IAAIe,MAAM,uEAGlB,MAAOC,EAAiBC,GAAsBC,EAASd,GACvD,MAAMe,EAAmBC,EAAWT,EAASC,GAE7CS,GAAU,IAAMJ,EAAmBb,IAAU,CAACA,IAE9C,MAAMkB,EAAmBC,IACvBN,EACED,EAAgBQ,KAAIC,GAClBA,EAAKC,OAASH,EAAUE,EAAO,IAAKA,EAAME,QAASF,EAAKE,UAE3D,EAGH,GAAIR,UAAAA,SAAgB,OAAA,EAAhBA,EAAkBS,QAAS,CAC7B,MAAMC,EAAgBV,EAAiBS,QAAQE,WAAWC,MAAM,KAEhE,IAAIC,EAA2B,EAE/B,GAAIH,EAAcI,QAAU,EAC1BD,EAAmB,EAErB,GAAIH,EAAcI,SAAW,EAC3BD,EAAmB,EAGrBE,OAAOC,iBAAiBhB,EAAkB,CACxCiB,WAAY,CACVC,MAAOR,EAAc,IAEvBS,aAAc,CACZD,MAAOR,EAAcA,EAAcI,OAAS,EAAI,EAAI,EAAI,IAE1DM,cAAe,CACbF,MAAOR,EAAcA,EAAcI,OAAS,GAAK,EAAI,EAAI,IAE3DO,YAAa,CACXH,MAAOR,EAAcG,KAG1B,CAED,OACES,EACMC,cAAA,MAAA,IAAA7B,EACJ8B,UAAWC,EAAQ,gBACnB9B,IAAKA,EACLF,MAAO,CACLwB,WAAYjB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBiB,WAC9BG,cAAepB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBoB,gBAGnCE,EAAAC,cAACG,EAAe,IACVxC,EACJO,MAAO,CACL4B,YAAarB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBqB,YAC/BF,aAAcnB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBmB,cAElClC,QAASY,EACTM,gBAAiBA,IAEnBmB,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAQ,kBACtBH,EAAAC,cAAA,QAAA,CAAOC,UAAWC,EAAQ,UACxBH,EAACC,cAAAI,EACC,CAAA1C,QAASY,EACTd,YAAaA,EACbC,OAAQA,EACRI,yBAA0BA,EAC1BE,mBAAoBA,EACpBE,QAASQ,IAEXsB,EAAAC,cAACK,EAAY,CACX9C,KAAMA,EACNG,QAASY,EACTR,UAAWA,EACXD,yBAA0BA,EAC1BG,WAAYA,EACZC,QAASQ,GAERnB,KAINM,IAAoBE,GACnBiC,EAACC,cAAAM,EACK,IAAA1C,EACJM,MAAO,IACFN,EAAgBM,MACnB4B,YAAarB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBqB,YAC/BF,aAAcnB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBmB,cAElCK,UAAW,GAAGC,EAAQ,kBAAiBK,EAAA3C,EAAgBqC,gCAAa,OAI1E,EAGS,MAAAO,EAAWT,EAAMU,WAAWpD"}
+{"version":3,"file":"DataGrid.esm.js","sources":["../../../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport classes from \"./DataGrid.module.scss\";\nimport { DataGridHeader } from \"./DataGridHeader/DataGridHeader\";\nimport { DataGridActions } from \"./DataGridActions/DataGridActions\";\nimport { DataGridBody } from \"./DataGridBody/DataGridBody\";\nimport { HeaderCell, OnSortFunction, Sort } from \"./datagrid.interfaces\";\nimport { Pagination, Props as PaginationProps } from \"../Pagination/Pagination\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\nimport { DataGridToolbar, DataGridToolbarProps } from \"./DataGridFilters/DataGridToolbar\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  headers: HeaderCell[];\n  actions?: {\n    enableAddBtn?: boolean;\n    enableColumnsBtn?: boolean;\n    enableSearchBtn?: boolean;\n    addBtnProps?: ButtonProps;\n    columnsBtnProps?: ButtonProps;\n    searchBtnProps?: ButtonProps;\n    searchIconBtnProps?: ButtonProps;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: {\n    enable: boolean;\n    filtersProps: DataGridToolbarProps;\n  };\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n}\n\nconst DataGridInner = <T extends {}>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  if (!headers) {\n    throw new Error(\"Headers definition has to be provided\");\n  }\n  if (!children) {\n    throw new Error(\"DataGridBody should be provided with a template how to render rows\");\n  }\n\n  const [internalHeaders, setInternalHeaders] = useState(headers);\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  useEffect(() => setInternalHeaders(headers), [headers]);\n\n  const onColumnToggled = (colName: string) => {\n    setInternalHeaders(\n      internalHeaders.map(item =>\n        item.name !== colName ? item : { ...item, hidden: !item.hidden }\n      )\n    );\n  };\n\n  if (styleWithSpacing?.padding) {\n    const splitPaddings = styleWithSpacing.padding.toString().split(\" \");\n\n    let paddingLeftIndex: number = 0;\n\n    if (splitPaddings.length >= 2) {\n      paddingLeftIndex = 1;\n    }\n    if (splitPaddings.length === 4) {\n      paddingLeftIndex = 3;\n    }\n\n    Object.defineProperties(styleWithSpacing, {\n      paddingTop: {\n        value: splitPaddings[0]\n      },\n      paddingRight: {\n        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]\n      },\n      paddingBottom: {\n        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]\n      },\n      paddingLeft: {\n        value: splitPaddings[paddingLeftIndex]\n      }\n    });\n  }\n\n  return (\n    <div\n      {...rest}\n      className={classes[\"grid-wrapper\"]}\n      ref={ref}\n      style={{\n        paddingTop: styleWithSpacing?.paddingTop,\n        paddingBottom: styleWithSpacing?.paddingBottom\n      }}\n    >\n      {filters?.enable ? (\n        <DataGridToolbar {...filters.filtersProps} />\n      ) : (\n        <DataGridActions\n          {...actions}\n          style={{\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          headers={internalHeaders}\n          onColumnToggled={onColumnToggled}\n        />\n      )}\n\n      <div className={classes[\"table-wrapper\"]}>\n        <table className={classes[\"table\"]}>\n          <DataGridHeader\n            headers={internalHeaders}\n            initialSort={initialSort}\n            onSort={onSort}\n            disableContextMenuColumn={disableContextMenuColumn}\n            enableExpandableRow={enableExpandableRow}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n          >\n            {children}\n          </DataGridBody>\n        </table>\n      </div>\n      {paginationProps && !isLoading && (\n        <Pagination\n          {...paginationProps}\n          style={{\n            ...paginationProps.style,\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          className={`${classes[\"pagination\"]} ${paginationProps.className ?? \"\"}`}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGrid.module.scss.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*!\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-module_grid-wrapper__bU1-r{padding:.875rem 0}.DataGrid-module_table-wrapper__wCMOu{overflow-x:auto}.DataGrid-module_table__SxgAf{border-collapse:collapse;padding-top:.5rem;position:relative;width:100%}.DataGrid-module_pagination__-Tksb{margin-top:.875rem;padding:0 1rem}@media only screen and (min-width:50em){.DataGrid-module_pagination__-Tksb{padding:0 1.25rem}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7OztFQWNFLENBQ0YscUNBQ0UsaUJBQ0YsQ0FFQSxzQ0FDRSxlQUNGLENBRUEsOEJBQ0Usd0JBQXlCLENBQ3pCLGlCQUFtQixDQUVuQixpQkFBa0IsQ0FEbEIsVUFFRixDQUVBLG1DQUNFLGtCQUFvQixDQUNwQixjQUNGLENBRUEsd0NBQ0UsbUNBQ0UsaUJBQ0YsQ0FDRiIsImZpbGUiOiJEYXRhR3JpZC5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4uZ3JpZC13cmFwcGVyIHtcbiAgcGFkZGluZzogMC44NzVyZW0gMDtcbn1cblxuLnRhYmxlLXdyYXBwZXIge1xuICBvdmVyZmxvdy14OiBhdXRvO1xufVxuXG4udGFibGUge1xuICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xuICBwYWRkaW5nLXRvcDogMC41cmVtO1xuICB3aWR0aDogMTAwJTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG4ucGFnaW5hdGlvbiB7XG4gIG1hcmdpbi10b3A6IDAuODc1cmVtO1xuICBwYWRkaW5nOiAwIDFyZW07XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTBlbSkge1xuICAucGFnaW5hdGlvbiB7XG4gICAgcGFkZGluZzogMCAxLjI1cmVtO1xuICB9XG59Il19 */";
+var classes = {"grid-wrapper":"DataGrid-module_grid-wrapper__bU1-r","table-wrapper":"DataGrid-module_table-wrapper__wCMOu","table":"DataGrid-module_table__SxgAf","pagination":"DataGrid-module_pagination__-Tksb"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=DataGrid.module.scss.esm.js.map

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

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