@openedx/paragon 23.0.0-alpha.3 → 23.0.0-alpha.5

package/dist/IconButton/index.scss

@@ -1,5 +1,151 @@
 @import "mixins";
 
+:root {
+  --pgn-elevation-icon-button-box-shadow-primary-base:
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-primary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-secondary-base:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-brand-base:
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-brand-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-success-base:
+    var(--pgn-elevation-icon-button-box-shadow-success-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-success-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-warning-base:
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-warning-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-danger-base:
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-danger-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-light-base:
+    var(--pgn-elevation-icon-button-box-shadow-light-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-light-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-dark-base:
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-dark-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-black-base:
+    var(--pgn-elevation-icon-button-box-shadow-black-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-black-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-color);
+}
+
 .btn-icon {
   @include btn-icon-size(var(--pgn-size-icon-button-diameter-md));
 

package/dist/Menu/SelectMenu.js

@@ -1,4 +1,4 @@
-var _excluded = ["defaultMessage", "children", "className", "variant"];
+var _excluded = ["defaultMessage", "children", "className", "variant", "disabled"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -23,6 +23,7 @@ function SelectMenu(_ref) {
     children = _ref.children,
     className = _ref.className,
     variant = _ref.variant,
+    disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -106,7 +107,8 @@ function SelectMenu(_ref) {
     ref: setTriggerTarget,
     variant: variant,
     iconAfter: ExpandMore,
-    onClick: open
+    onClick: open,
+    disabled: disabled
   }, selected !== undefined && children[selected] ? children[selected].props.children : defaultMessage), /*#__PURE__*/React.createElement("div", {
     className: "pgn__menu-select-popup"
   }, /*#__PURE__*/React.createElement(ModalPopup, {
@@ -140,12 +142,15 @@ SelectMenu.propTypes = {
   /** Specifies class name to append to the base element */
   className: PropTypes.string,
   /** Specifies variant to use. */
-  variant: PropTypes.string
+  variant: PropTypes.string,
+  /** Specifies if the `SelectMenu` is disabled. */
+  disabled: PropTypes.bool
 };
 SelectMenu.defaultProps = {
   defaultMessage: SELECT_MENU_DEFAULT_MESSAGE,
   className: undefined,
-  variant: 'outline-primary'
+  variant: 'outline-primary',
+  disabled: false
 };
 var SelectMenuWithDeprecatedProp = withDeprecatedProps(SelectMenu, 'SelectMenu', {
   isLink: {

package/dist/Menu/SelectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.js","names":["React","useState","useEffect","useCallback","PropTypes","classNames","ExpandMore","Button","ModalPopup","useToggle","Menu","withDeprecatedProps","DeprTypes","SELECT_MENU_DEFAULT_MESSAGE","SelectMenu","_ref","defaultMessage","children","className","variant","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","triggerTarget","setTriggerTarget","focusMenuRef","useRef","itemsCollection","useMemo","Array","from","length","map","createRef","defaultIndex","i","defaultSelected","undefined","_useState3","_useState4","selected","setSelected","_useToggle","_useToggle2","isOpen","open","close","createMenuItems","Children","child","index","newProps","onClick","e","current","id","concat","toString","role","cloneElement","prevOpenRef","numItems","scrollIntoView","block","focus","preventScroll","createElement","_extends","ref","iconAfter","placement","positionRef","onClose","modifiers","name","options","padding","top","bottom","key","propTypes","string","node","isRequired","defaultProps","SelectMenuWithDeprecatedProp","isLink","deprType","MOVED_AND_FORMAT","message","newName","transform"],"sources":["../../src/Menu/SelectMenu.jsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { ExpandMore } from '../../icons';\nimport Button from '../Button';\nimport ModalPopup from '../Modal/ModalPopup';\nimport useToggle from '../hooks/useToggle';\nimport Menu from '.';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const SELECT_MENU_DEFAULT_MESSAGE = 'Select...';\n\nfunction SelectMenu({\n  defaultMessage,\n  children,\n  className,\n  variant,\n  ...props\n}) {\n  const [triggerTarget, setTriggerTarget] = useState(null);\n  // this ref is used to focus the menu open button after any menu option is clicked.\n  // triggerTarget.current.focus() inside the onCLick() function didn't guarantee element focus.\n  const focusMenuRef = React.useRef(false);\n  const itemsCollection = React.useMemo(\n    () => Array.from({ length: children.length }).map(() => React.createRef()),\n    [children.length],\n  );\n\n  const defaultIndex = useCallback(() => {\n    for (let i = 0; i < children.length; i++) {\n      if (children[i].props && children[i].props.defaultSelected) {\n        return i;\n      }\n    }\n    return undefined;\n  }, [children]);\n\n  const [selected, setSelected] = useState(defaultIndex());\n  const [isOpen, open, close] = useToggle(false);\n\n  const createMenuItems = () => React.Children.map(children, (child, index) => {\n    const newProps = {\n      onClick(e) {\n        if (child.props.onClick) {\n          child.props.onClick(e);\n        }\n        setSelected(index);\n        close();\n        focusMenuRef.current = true;\n      },\n      id: `${index.toString()}_pgn__menu-item`,\n      role: 'link',\n    };\n    if (selected === index) {\n      newProps['aria-current'] = 'page';\n    }\n    return React.cloneElement(child, newProps);\n  });\n\n  const prevOpenRef = React.useRef();\n\n  useEffect(() => {\n    if (isOpen && selected) {\n      const numItems = children.length;\n      if (numItems > 6 && selected > 1 && numItems - selected > 2) {\n        // on \"middle elements\", set offset to center of block and scroll to center\n        itemsCollection[selected].current.children[0].scrollIntoView({\n          block: 'center',\n        });\n      }\n    }\n    // set focus on open\n    if (isOpen && !prevOpenRef.current && selected) {\n      itemsCollection[selected].current.children[0].focus({ preventScroll: (defaultIndex() === selected) });\n    }\n    if (focusMenuRef.current) {\n      triggerTarget.focus();\n      focusMenuRef.current = false;\n    }\n    prevOpenRef.current = isOpen;\n  }, [isOpen, children.length, defaultIndex, itemsCollection, selected, triggerTarget]);\n\n  return (\n    <div className={classNames('pgn__menu-select', className)} {...props}>\n      <Button\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        ref={setTriggerTarget}\n        variant={variant}\n        iconAfter={ExpandMore}\n        onClick={open}\n      >\n        {selected !== undefined && children[selected] ? children[selected].props.children : defaultMessage}\n      </Button>\n      <div className=\"pgn__menu-select-popup\">\n        <ModalPopup\n          placement=\"bottom-start\"\n          positionRef={triggerTarget}\n          isOpen={isOpen}\n          onClose={close}\n          modifiers={\n            [\n              {\n                name: 'flip',\n                options: {\n                  padding: { top: 150, bottom: 150 },\n                },\n              },\n            ]\n          }\n        >\n          <Menu aria-label=\"Select Menu\">\n            {createMenuItems().map((child, index) => (\n              <div key={child.props.id} ref={itemsCollection[index]}>\n                {child}\n              </div>\n            ))}\n          </Menu>\n        </ModalPopup>\n      </div>\n    </div>\n  );\n}\n\nSelectMenu.propTypes = {\n  /** String that is displayed for default value of the ``SelectMenu`` */\n  defaultMessage: PropTypes.string,\n  /** Specifies the content of the ``SelectMenu`` */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.string,\n};\n\nSelectMenu.defaultProps = {\n  defaultMessage: SELECT_MENU_DEFAULT_MESSAGE,\n  className: undefined,\n  variant: 'outline-primary',\n};\n\nconst SelectMenuWithDeprecatedProp = withDeprecatedProps(SelectMenu, 'SelectMenu', {\n  isLink: {\n    deprType: DeprTypes.MOVED_AND_FORMAT,\n    message: 'Use \"variant\" prop instead, i.e. variant=\"link\"',\n    newName: 'variant',\n    transform: () => 'link',\n  },\n});\n\nexport default SelectMenuWithDeprecatedProp;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SelectMenu.js","names":["React","useState","useEffect","useCallback","PropTypes","classNames","ExpandMore","Button","ModalPopup","useToggle","Menu","withDeprecatedProps","DeprTypes","SELECT_MENU_DEFAULT_MESSAGE","SelectMenu","_ref","defaultMessage","children","className","variant","disabled","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","triggerTarget","setTriggerTarget","focusMenuRef","useRef","itemsCollection","useMemo","Array","from","length","map","createRef","defaultIndex","i","defaultSelected","undefined","_useState3","_useState4","selected","setSelected","_useToggle","_useToggle2","isOpen","open","close","createMenuItems","Children","child","index","newProps","onClick","e","current","id","concat","toString","role","cloneElement","prevOpenRef","numItems","scrollIntoView","block","focus","preventScroll","createElement","_extends","ref","iconAfter","placement","positionRef","onClose","modifiers","name","options","padding","top","bottom","key","propTypes","string","node","isRequired","bool","defaultProps","SelectMenuWithDeprecatedProp","isLink","deprType","MOVED_AND_FORMAT","message","newName","transform"],"sources":["../../src/Menu/SelectMenu.jsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { ExpandMore } from '../../icons';\nimport Button from '../Button';\nimport ModalPopup from '../Modal/ModalPopup';\nimport useToggle from '../hooks/useToggle';\nimport Menu from '.';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const SELECT_MENU_DEFAULT_MESSAGE = 'Select...';\n\nfunction SelectMenu({\n  defaultMessage,\n  children,\n  className,\n  variant,\n  disabled,\n  ...props\n}) {\n  const [triggerTarget, setTriggerTarget] = useState(null);\n  // this ref is used to focus the menu open button after any menu option is clicked.\n  // triggerTarget.current.focus() inside the onCLick() function didn't guarantee element focus.\n  const focusMenuRef = React.useRef(false);\n  const itemsCollection = React.useMemo(\n    () => Array.from({ length: children.length }).map(() => React.createRef()),\n    [children.length],\n  );\n\n  const defaultIndex = useCallback(() => {\n    for (let i = 0; i < children.length; i++) {\n      if (children[i].props && children[i].props.defaultSelected) {\n        return i;\n      }\n    }\n    return undefined;\n  }, [children]);\n\n  const [selected, setSelected] = useState(defaultIndex());\n  const [isOpen, open, close] = useToggle(false);\n\n  const createMenuItems = () => React.Children.map(children, (child, index) => {\n    const newProps = {\n      onClick(e) {\n        if (child.props.onClick) {\n          child.props.onClick(e);\n        }\n        setSelected(index);\n        close();\n        focusMenuRef.current = true;\n      },\n      id: `${index.toString()}_pgn__menu-item`,\n      role: 'link',\n    };\n    if (selected === index) {\n      newProps['aria-current'] = 'page';\n    }\n    return React.cloneElement(child, newProps);\n  });\n\n  const prevOpenRef = React.useRef();\n\n  useEffect(() => {\n    if (isOpen && selected) {\n      const numItems = children.length;\n      if (numItems > 6 && selected > 1 && numItems - selected > 2) {\n        // on \"middle elements\", set offset to center of block and scroll to center\n        itemsCollection[selected].current.children[0].scrollIntoView({\n          block: 'center',\n        });\n      }\n    }\n    // set focus on open\n    if (isOpen && !prevOpenRef.current && selected) {\n      itemsCollection[selected].current.children[0].focus({ preventScroll: (defaultIndex() === selected) });\n    }\n    if (focusMenuRef.current) {\n      triggerTarget.focus();\n      focusMenuRef.current = false;\n    }\n    prevOpenRef.current = isOpen;\n  }, [isOpen, children.length, defaultIndex, itemsCollection, selected, triggerTarget]);\n\n  return (\n    <div className={classNames('pgn__menu-select', className)} {...props}>\n      <Button\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        ref={setTriggerTarget}\n        variant={variant}\n        iconAfter={ExpandMore}\n        onClick={open}\n        disabled={disabled}\n      >\n        {selected !== undefined && children[selected] ? children[selected].props.children : defaultMessage}\n      </Button>\n      <div className=\"pgn__menu-select-popup\">\n        <ModalPopup\n          placement=\"bottom-start\"\n          positionRef={triggerTarget}\n          isOpen={isOpen}\n          onClose={close}\n          modifiers={\n            [\n              {\n                name: 'flip',\n                options: {\n                  padding: { top: 150, bottom: 150 },\n                },\n              },\n            ]\n          }\n        >\n          <Menu aria-label=\"Select Menu\">\n            {createMenuItems().map((child, index) => (\n              <div key={child.props.id} ref={itemsCollection[index]}>\n                {child}\n              </div>\n            ))}\n          </Menu>\n        </ModalPopup>\n      </div>\n    </div>\n  );\n}\n\nSelectMenu.propTypes = {\n  /** String that is displayed for default value of the ``SelectMenu`` */\n  defaultMessage: PropTypes.string,\n  /** Specifies the content of the ``SelectMenu`` */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.string,\n  /** Specifies if the `SelectMenu` is disabled. */\n  disabled: PropTypes.bool,\n};\n\nSelectMenu.defaultProps = {\n  defaultMessage: SELECT_MENU_DEFAULT_MESSAGE,\n  className: undefined,\n  variant: 'outline-primary',\n  disabled: false,\n};\n\nconst SelectMenuWithDeprecatedProp = withDeprecatedProps(SelectMenu, 'SelectMenu', {\n  isLink: {\n    deprType: DeprTypes.MOVED_AND_FORMAT,\n    message: 'Use \"variant\" prop instead, i.e. variant=\"link\"',\n    newName: 'variant',\n    transform: () => 'link',\n  },\n});\n\nexport default SelectMenuWithDeprecatedProp;\n"],"mappings":"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","ignoreList":[]}

package/dist/Menu/index.scss

@@ -1,3 +1,11 @@
+:root {
+  --pgn-elevation-menu-box-shadow:
+    var(--pgn-elevation-menu-box-shadow-offset-x)
+    var(--pgn-elevation-menu-box-shadow-offset-y)
+    var(--pgn-elevation-menu-box-shadow-blur)
+    var(--pgn-elevation-menu-box-shadow-color);
+}
+
 .pgn__menu {
   border-radius: var(--pgn-size-menu-base-border-radius);
   box-shadow: var(--pgn-elevation-menu-box-shadow);

package/dist/Modal/ModalContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ContextData {
+    onClose: () => void;
+    isOpen: boolean;
+    isBlocking: boolean;
+}
+declare const ModalContext: React.Context<ContextData>;
+declare function ModalContextProvider({ onClose, isOpen, isBlocking, children, }: {
+    onClose: () => void;
+    isOpen: boolean;
+    isBlocking?: boolean;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { ModalContextProvider };
+export default ModalContext;

package/dist/Modal/ModalContext.js

@@ -1,13 +1,16 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 var ModalContext = /*#__PURE__*/React.createContext({
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  isOpen: false,
+  isBlocking: false
 });
 function ModalContextProvider(_ref) {
   var onClose = _ref.onClose,
     isOpen = _ref.isOpen,
-    isBlocking = _ref.isBlocking,
-    children = _ref.children;
+    _ref$isBlocking = _ref.isBlocking,
+    isBlocking = _ref$isBlocking === void 0 ? false : _ref$isBlocking,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children;
   var modalContextValue = useMemo(function () {
     return {
       onClose: onClose,
@@ -19,16 +22,6 @@ function ModalContextProvider(_ref) {
     value: modalContextValue
   }, children);
 }
-ModalContextProvider.propTypes = {
-  children: PropTypes.node,
-  onClose: PropTypes.func.isRequired,
-  isBlocking: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired
-};
-ModalContextProvider.defaultProps = {
-  children: null,
-  isBlocking: false
-};
 export { ModalContextProvider };
 export default ModalContext;
 //# sourceMappingURL=ModalContext.js.map

package/dist/Modal/ModalContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.js","names":["React","useMemo","PropTypes","ModalContext","createContext","onClose","ModalContextProvider","_ref","isOpen","isBlocking","children","modalContextValue","createElement","Provider","value","propTypes","node","func","isRequired","bool","defaultProps"],"sources":["../../src/Modal/ModalContext.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ModalContext = React.createContext({\n  onClose: () => {},\n});\n\nfunction ModalContextProvider({\n  onClose, isOpen, isBlocking, children,\n}) {\n  const modalContextValue = useMemo(\n    () => ({ onClose, isOpen, isBlocking }),\n    [onClose, isOpen, isBlocking],\n  );\n\n  return (\n    <ModalContext.Provider value={modalContextValue}>\n      {children}\n    </ModalContext.Provider>\n  );\n}\n\nModalContextProvider.propTypes = {\n  children: PropTypes.node,\n  onClose: PropTypes.func.isRequired,\n  isBlocking: PropTypes.bool,\n  isOpen: PropTypes.bool.isRequired,\n};\n\nModalContextProvider.defaultProps = {\n  children: null,\n  isBlocking: false,\n};\n\nexport { ModalContextProvider };\nexport default ModalContext;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,SAAS,MAAM,YAAY;AAElC,IAAMC,YAAY,gBAAGH,KAAK,CAACI,aAAa,CAAC;EACvCC,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC;AAClB,CAAC,CAAC;AAEF,SAASC,oBAAoBA,CAAAC,IAAA,EAE1B;EAAA,IADDF,OAAO,GAAAE,IAAA,CAAPF,OAAO;IAAEG,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EAErC,IAAMC,iBAAiB,GAAGV,OAAO,CAC/B;IAAA,OAAO;MAAEI,OAAO,EAAPA,OAAO;MAAEG,MAAM,EAANA,MAAM;MAAEC,UAAU,EAAVA;IAAW,CAAC;EAAA,CAAC,EACvC,CAACJ,OAAO,EAAEG,MAAM,EAAEC,UAAU,CAC9B,CAAC;EAED,oBACET,KAAA,CAAAY,aAAA,CAACT,YAAY,CAACU,QAAQ;IAACC,KAAK,EAAEH;EAAkB,GAC7CD,QACoB,CAAC;AAE5B;AAEAJ,oBAAoB,CAACS,SAAS,GAAG;EAC/BL,QAAQ,EAAER,SAAS,CAACc,IAAI;EACxBX,OAAO,EAAEH,SAAS,CAACe,IAAI,CAACC,UAAU;EAClCT,UAAU,EAAEP,SAAS,CAACiB,IAAI;EAC1BX,MAAM,EAAEN,SAAS,CAACiB,IAAI,CAACD;AACzB,CAAC;AAEDZ,oBAAoB,CAACc,YAAY,GAAG;EAClCV,QAAQ,EAAE,IAAI;EACdD,UAAU,EAAE;AACd,CAAC;AAED,SAASH,oBAAoB;AAC7B,eAAeH,YAAY","ignoreList":[]}
+{"version":3,"file":"ModalContext.js","names":["React","useMemo","ModalContext","createContext","onClose","isOpen","isBlocking","ModalContextProvider","_ref","_ref$isBlocking","_ref$children","children","modalContextValue","createElement","Provider","value"],"sources":["../../src/Modal/ModalContext.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\ninterface ContextData {\n  onClose: () => void;\n  isOpen: boolean;\n  isBlocking: boolean;\n}\n\nconst ModalContext = React.createContext<ContextData>({\n  onClose: () => {},\n  isOpen: false,\n  isBlocking: false,\n});\n\nfunction ModalContextProvider({\n  onClose,\n  isOpen,\n  isBlocking = false,\n  children = null,\n}: {\n  onClose: () => void;\n  isOpen: boolean;\n  isBlocking?: boolean;\n  children?: React.ReactNode;\n}) {\n  const modalContextValue = useMemo<ContextData>(\n    () => ({ onClose, isOpen, isBlocking }),\n    [onClose, isOpen, isBlocking],\n  );\n\n  return (\n    <ModalContext.Provider value={modalContextValue}>\n      {children}\n    </ModalContext.Provider>\n  );\n}\n\nexport { ModalContextProvider };\nexport default ModalContext;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAQtC,IAAMC,YAAY,gBAAGF,KAAK,CAACG,aAAa,CAAc;EACpDC,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC,CAAC;EACjBC,MAAM,EAAE,KAAK;EACbC,UAAU,EAAE;AACd,CAAC,CAAC;AAEF,SAASC,oBAAoBA,CAAAC,IAAA,EAU1B;EAAA,IATDJ,OAAO,GAAAI,IAAA,CAAPJ,OAAO;IACPC,MAAM,GAAAG,IAAA,CAANH,MAAM;IAAAI,eAAA,GAAAD,IAAA,CACNF,UAAU;IAAVA,UAAU,GAAAG,eAAA,cAAG,KAAK,GAAAA,eAAA;IAAAC,aAAA,GAAAF,IAAA,CAClBG,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,IAAI,GAAAA,aAAA;EAOf,IAAME,iBAAiB,GAAGX,OAAO,CAC/B;IAAA,OAAO;MAAEG,OAAO,EAAPA,OAAO;MAAEC,MAAM,EAANA,MAAM;MAAEC,UAAU,EAAVA;IAAW,CAAC;EAAA,CAAC,EACvC,CAACF,OAAO,EAAEC,MAAM,EAAEC,UAAU,CAC9B,CAAC;EAED,oBACEN,KAAA,CAAAa,aAAA,CAACX,YAAY,CAACY,QAAQ;IAACC,KAAK,EAAEH;EAAkB,GAC7CD,QACoB,CAAC;AAE5B;AAEA,SAASJ,oBAAoB;AAC7B,eAAeL,YAAY","ignoreList":[]}

package/dist/Modal/ModalDialog.d.ts

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare const MODAL_DIALOG_CLOSE_LABEL = "Close";
+interface Props {
+    /** Specifies the content of the dialog */
+    children: React.ReactNode;
+    /** The aria-label of the dialog */
+    title: string;
+    /** A callback to close the modal dialog, e.g. when Escape is pressed */
+    onClose: () => void;
+    /** Is the modal dialog open or closed? */
+    isOpen?: boolean;
+    /** The close 'x' icon button in the top right of the dialog box */
+    hasCloseButton?: boolean;
+    /** Size determines the maximum width of the dialog box */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+    /** The visual style of the dialog box */
+    variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';
+    /** The label supplied to the close icon button if one is rendered */
+    closeLabel?: string;
+    /** Specifies class name to append to the base element */
+    className?: string;
+    /**
+     * Determines where a scrollbar should appear if a modal is too large for the
+     * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true
+     * the browser window itself receives the scrollbar.
+     */
+    isFullscreenScroll?: boolean;
+    /** To show full screen view on mobile screens */
+    isFullscreenOnMobile?: boolean;
+    /** Prevent clicking on the backdrop or pressing Esc to close the modal */
+    isBlocking?: boolean;
+    /** Specifies the z-index of the modal */
+    zIndex?: number;
+    /** Specifies whether overflow is visible in the modal */
+    isOverflowVisible?: boolean;
+}
+declare function ModalDialog({ children, title, isOpen, onClose, size, variant, hasCloseButton, closeLabel, isFullscreenScroll, className, isFullscreenOnMobile, isBlocking, zIndex, isOverflowVisible, }: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace ModalDialog {
+    var propTypes: {
+        /**
+         *  Specifies the content of the dialog
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * The aria-label of the dialog
+         */
+        title: PropTypes.Validator<string>;
+        /**
+         * A callback to close the modal dialog
+         */
+        onClose: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Is the modal dialog open or closed
+         */
+        isOpen: PropTypes.Requireable<boolean>;
+        /**
+         * The close 'x' icon button in the top right of the dialog box
+         */
+        hasCloseButton: PropTypes.Requireable<boolean>;
+        /**
+         * Sizes determine the maximum width of the dialog box
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * The visual style of the dialog box
+         */
+        variant: PropTypes.Requireable<string>;
+        /**
+         * The label supplied to the close icon button if one is rendered
+         */
+        closeLabel: PropTypes.Requireable<string>;
+        /**
+         *  Specifies class name to append to the base element
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Determines where a scrollbar should appear if a modal is too large for the
+         * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true
+         * the browser window itself receives the scrollbar.
+         */
+        isFullscreenScroll: PropTypes.Requireable<boolean>;
+        /**
+         * To show full screen view on mobile screens
+         */
+        isFullscreenOnMobile: PropTypes.Requireable<boolean>;
+        /**
+         * Prevent clicking on the backdrop or pressing Esc to close the modal
+         */
+        isBlocking: PropTypes.Requireable<boolean>;
+        /**
+         * Specifies the z-index of the modal
+         */
+        zIndex: PropTypes.Requireable<number>;
+        /**
+         * Specifies whether overflow content inside the modal should be visible.
+         * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
+         * rather than being clipped or hidden.
+         * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
+         */
+        isOverflowVisible: PropTypes.Validator<boolean>;
+    };
+    var Header: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("./ModalDialogHeader").Props>;
+    var Title: any;
+    var Footer: any;
+    var CloseButton: any;
+    var Body: any;
+    var Hero: any;
+}
+export default ModalDialog;

package/dist/Modal/ModalDialog.js

@@ -7,11 +7,16 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
 import ModalLayer from './ModalLayer';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalCloseButton from './ModalCloseButton';
 import ModalDialogHeader from './ModalDialogHeader';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalDialogTitle from './ModalDialogTitle';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalDialogFooter from './ModalDialogFooter';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalDialogBody from './ModalDialogBody';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalDialogHero from './ModalDialogHero';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
@@ -21,18 +26,27 @@ function ModalDialog(_ref) {
   var _classNames;
   var children = _ref.children,
     title = _ref.title,
-    isOpen = _ref.isOpen,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
     onClose = _ref.onClose,
-    size = _ref.size,
-    variant = _ref.variant,
-    hasCloseButton = _ref.hasCloseButton,
-    closeLabel = _ref.closeLabel,
-    isFullscreenScroll = _ref.isFullscreenScroll,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$hasCloseButton = _ref.hasCloseButton,
+    hasCloseButton = _ref$hasCloseButton === void 0 ? true : _ref$hasCloseButton,
+    _ref$closeLabel = _ref.closeLabel,
+    closeLabel = _ref$closeLabel === void 0 ? MODAL_DIALOG_CLOSE_LABEL : _ref$closeLabel,
+    _ref$isFullscreenScro = _ref.isFullscreenScroll,
+    isFullscreenScroll = _ref$isFullscreenScro === void 0 ? false : _ref$isFullscreenScro,
     className = _ref.className,
-    isFullscreenOnMobile = _ref.isFullscreenOnMobile,
-    isBlocking = _ref.isBlocking,
+    _ref$isFullscreenOnMo = _ref.isFullscreenOnMobile,
+    isFullscreenOnMobile = _ref$isFullscreenOnMo === void 0 ? false : _ref$isFullscreenOnMo,
+    _ref$isBlocking = _ref.isBlocking,
+    isBlocking = _ref$isBlocking === void 0 ? false : _ref$isBlocking,
     zIndex = _ref.zIndex,
-    isOverflowVisible = _ref.isOverflowVisible;
+    _ref$isOverflowVisibl = _ref.isOverflowVisible,
+    isOverflowVisible = _ref$isOverflowVisibl === void 0 ? true : _ref$isOverflowVisibl;
   var isMobile = useMediaQuery({
     query: '(max-width: 767.98px)'
   });
@@ -111,21 +125,13 @@ ModalDialog.propTypes = {
    * Specifies the z-index of the modal
    */
   zIndex: PropTypes.number,
-  /** Specifies whether overflow is visible in the modal */
-  isOverflowVisible: PropTypes.bool
-};
-ModalDialog.defaultProps = {
-  isOpen: false,
-  hasCloseButton: true,
-  size: 'md',
-  variant: 'default',
-  closeLabel: MODAL_DIALOG_CLOSE_LABEL,
-  className: undefined,
-  isFullscreenScroll: false,
-  isFullscreenOnMobile: false,
-  isBlocking: false,
-  zIndex: undefined,
-  isOverflowVisible: true
+  /**
+   * Specifies whether overflow content inside the modal should be visible.
+   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
+   * rather than being clipped or hidden.
+   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
+   */
+  isOverflowVisible: PropTypes.bool.isRequired
 };
 ModalDialog.Header = ModalDialogHeader;
 ModalDialog.Title = ModalDialogTitle;

package/dist/Modal/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","_classNames","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","_defineProperty","concat","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","defaultProps","undefined","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\nimport ModalDialogTitle from './ModalDialogTitle';\nimport ModalDialogFooter from './ModalDialogFooter';\nimport ModalDialogBody from './ModalDialogBody';\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\nfunction ModalDialog({\n  children,\n  title,\n  isOpen,\n  onClose,\n  size,\n  variant,\n  hasCloseButton,\n  closeLabel,\n  isFullscreenScroll,\n  className,\n  isFullscreenOnMobile,\n  isBlocking,\n  zIndex,\n  isOverflowVisible,\n}) {\n  const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });\n  const showFullScreen = (isFullscreenOnMobile && isMobile);\n  return (\n    <ModalLayer isOpen={isOpen} onClose={onClose} isBlocking={isBlocking} zIndex={zIndex}>\n      <div\n        role=\"dialog\"\n        aria-label={title}\n        className={classNames(\n          'pgn__modal',\n          {\n            [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,\n            [`pgn__modal-${variant}`]: variant,\n            'pgn__modal-scroll-fullscreen': isFullscreenScroll,\n            'pgn__modal-visible-overflow': isOverflowVisible,\n          },\n          className,\n        )}\n      >\n        {hasCloseButton && (\n          <div className=\"pgn__modal-close-container\">\n            <ModalCloseButton\n              as={IconButton}\n              iconAs={Icon}\n              invertColors={variant === 'dark'}\n              src={Close}\n              alt={closeLabel}\n            />\n          </div>\n        )}\n        {children}\n      </div>\n    </ModalLayer>\n  );\n}\n\nModalDialog.propTypes = {\n  /**\n   *  Specifies the content of the dialog\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * The aria-label of the dialog\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * A callback to close the modal dialog\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Is the modal dialog open or closed\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * The close 'x' icon button in the top right of the dialog box\n   */\n  hasCloseButton: PropTypes.bool,\n  /**\n   * Sizes determine the maximum width of the dialog box\n   */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n  /**\n   * The visual style of the dialog box\n   */\n  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),\n  /**\n   * The label supplied to the close icon button if one is rendered\n   */\n  closeLabel: PropTypes.string,\n  /**\n   *  Specifies class name to append to the base element\n   */\n  className: PropTypes.string,\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll: PropTypes.bool,\n  /**\n   * To show full screen view on mobile screens\n   */\n  isFullscreenOnMobile: PropTypes.bool,\n  /**\n   * Prevent clicking on the backdrop or pressing Esc to close the modal\n   */\n  isBlocking: PropTypes.bool,\n  /**\n   * Specifies the z-index of the modal\n   */\n  zIndex: PropTypes.number,\n  /** Specifies whether overflow is visible in the modal */\n  isOverflowVisible: PropTypes.bool,\n};\n\nModalDialog.defaultProps = {\n  isOpen: false,\n  hasCloseButton: true,\n  size: 'md',\n  variant: 'default',\n  closeLabel: MODAL_DIALOG_CLOSE_LABEL,\n  className: undefined,\n  isFullscreenScroll: false,\n  isFullscreenOnMobile: false,\n  isBlocking: false,\n  zIndex: undefined,\n  isOverflowVisible: true,\n};\n\nModalDialog.Header = ModalDialogHeader;\nModalDialog.Title = ModalDialogTitle;\nModalDialog.Footer = ModalDialogFooter;\nModalDialog.CloseButton = ModalCloseButton;\nModalDialog.Body = ModalDialogBody;\nModalDialog.Hero = ModalDialogHero;\n\nexport default ModalDialog;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","_classNames","children","title","_ref$isOpen","isOpen","onClose","_ref$size","size","_ref$variant","variant","_ref$hasCloseButton","hasCloseButton","_ref$closeLabel","closeLabel","_ref$isFullscreenScro","isFullscreenScroll","className","_ref$isFullscreenOnMo","isFullscreenOnMobile","_ref$isBlocking","isBlocking","zIndex","_ref$isOverflowVisibl","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","_defineProperty","concat","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogTitle from './ModalDialogTitle';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogFooter from './ModalDialogFooter';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogBody from './ModalDialogBody';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\ninterface Props {\n  /** Specifies the content of the dialog */\n  children: React.ReactNode;\n  /** The aria-label of the dialog */\n  title: string;\n  /** A callback to close the modal dialog, e.g. when Escape is pressed */\n  onClose: () => void;\n  /** Is the modal dialog open or closed? */\n  isOpen?: boolean;\n  /** The close 'x' icon button in the top right of the dialog box */\n  hasCloseButton?: boolean;\n  /** Size determines the maximum width of the dialog box */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n  /** The visual style of the dialog box */\n  variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';\n  /** The label supplied to the close icon button if one is rendered */\n  closeLabel?: string;\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll?: boolean;\n  /** To show full screen view on mobile screens */\n  isFullscreenOnMobile?: boolean;\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking?: boolean;\n  /** Specifies the z-index of the modal */\n  zIndex?: number;\n  /** Specifies whether overflow is visible in the modal */\n  isOverflowVisible?: boolean;\n}\n\nfunction ModalDialog({\n  children,\n  title,\n  isOpen = false,\n  onClose,\n  size = 'md',\n  variant = 'default',\n  hasCloseButton = true,\n  closeLabel = MODAL_DIALOG_CLOSE_LABEL,\n  isFullscreenScroll = false,\n  className,\n  isFullscreenOnMobile = false,\n  isBlocking = false,\n  zIndex,\n  isOverflowVisible = true,\n}: Props) {\n  const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });\n  const showFullScreen = (isFullscreenOnMobile && isMobile);\n  return (\n    <ModalLayer isOpen={isOpen} onClose={onClose} isBlocking={isBlocking} zIndex={zIndex}>\n      <div\n        role=\"dialog\"\n        aria-label={title}\n        className={classNames(\n          'pgn__modal',\n          {\n            [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,\n            [`pgn__modal-${variant}`]: variant,\n            'pgn__modal-scroll-fullscreen': isFullscreenScroll,\n            'pgn__modal-visible-overflow': isOverflowVisible,\n          },\n          className,\n        )}\n      >\n        {hasCloseButton && (\n          <div className=\"pgn__modal-close-container\">\n            <ModalCloseButton\n              as={IconButton}\n              iconAs={Icon}\n              invertColors={variant === 'dark'}\n              src={Close}\n              alt={closeLabel}\n            />\n          </div>\n        )}\n        {children}\n      </div>\n    </ModalLayer>\n  );\n}\n\nModalDialog.propTypes = {\n  /**\n   *  Specifies the content of the dialog\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * The aria-label of the dialog\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * A callback to close the modal dialog\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Is the modal dialog open or closed\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * The close 'x' icon button in the top right of the dialog box\n   */\n  hasCloseButton: PropTypes.bool,\n  /**\n   * Sizes determine the maximum width of the dialog box\n   */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n  /**\n   * The visual style of the dialog box\n   */\n  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),\n  /**\n   * The label supplied to the close icon button if one is rendered\n   */\n  closeLabel: PropTypes.string,\n  /**\n   *  Specifies class name to append to the base element\n   */\n  className: PropTypes.string,\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll: PropTypes.bool,\n  /**\n   * To show full screen view on mobile screens\n   */\n  isFullscreenOnMobile: PropTypes.bool,\n  /**\n   * Prevent clicking on the backdrop or pressing Esc to close the modal\n   */\n  isBlocking: PropTypes.bool,\n  /**\n   * Specifies the z-index of the modal\n   */\n  zIndex: PropTypes.number,\n  /**\n   * Specifies whether overflow content inside the modal should be visible.\n   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,\n   * rather than being clipped or hidden.\n   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.\n   */\n  isOverflowVisible: PropTypes.bool.isRequired,\n};\n\nModalDialog.Header = ModalDialogHeader;\nModalDialog.Title = ModalDialogTitle;\nModalDialog.Footer = ModalDialogFooter;\nModalDialog.CloseButton = ModalCloseButton;\nModalDialog.Body = ModalDialogBody;\nModalDialog.Hero = ModalDialogHero;\n\nexport default ModalDialog;\n"],"mappings":"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","ignoreList":[]}

package/dist/Modal/ModalDialogHeader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
+export interface Props {
+    as?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+type HeaderType = ComponentWithAsProp<'div', Props>;
+declare const ModalDialogHeader: HeaderType;
+export default ModalDialogHeader;

package/dist/Modal/ModalDialogHeader.js

@@ -7,17 +7,20 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/* eslint-disable react/require-default-props */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-function ModalDialogHeader(_ref) {
-  var as = _ref.as,
+var ModalDialogHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(as, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
     className: classNames('pgn__modal-header', props.className)
   }), children);
-}
+});
 ModalDialogHeader.propTypes = {
   /** Specifies the base element */
   as: PropTypes.elementType,
@@ -26,9 +29,5 @@ ModalDialogHeader.propTypes = {
   /** Specifies class name to append to the base element */
   className: PropTypes.string
 };
-ModalDialogHeader.defaultProps = {
-  as: 'div',
-  className: undefined
-};
 export default ModalDialogHeader;
 //# sourceMappingURL=ModalDialogHeader.js.map