@openedx/paragon 22.0.0-alpha.23 → 22.0.0-alpha.25

package/dist/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useRef","classNames","PropTypes","BaseTabs","Bubble","Dropdown","useIndexOfLastVisibleChild","Tab","MORE_TAB_TEXT","Tabs","_ref","children","className","moreTabText","defaultActiveKey","activeKey","props","_objectWithoutProperties","_excluded","containerElementRef","overflowElementRef","indexOfLastVisibleChild","current","parentNode","observer","MutationObserver","mutations","forEach","mutation","eventKey","target","getAttribute","isActive","element","querySelector","moreTab","classList","add","remove","observe","attributes","subtree","attributeFilter","disconnect","undefined","tabIndex","handleDropdownTabClick","hiddenTab","click","tabsChildren","indexOfOverflowStart","handleDropdownKeyPress","e","key","childrenList","Children","map","child","index","type","name","process","env","NODE_ENV","console","error","isValidElement","_child$props","title","notification","tabClassName","rest","_excluded2","newTitle","createElement","Fragment","variant","role","expandable","tabClass","modifiedTab","cloneElement","_objectSpread","moreTabHasNotification","overflowChildren","slice","overflowChild","Item","as","onClick","onKeyPress","disabled","datakey","active","splice","length","ref","Toggle","id","Menu","_extends","propTypes","oneOf","node","isRequired","string","defaultProps","default","TabContainer","TabContent","TabPane"],"sources":["../../src/Tabs/index.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseTabs from 'react-bootstrap/Tabs';\nimport Bubble from '../Bubble';\nimport Dropdown from '../Dropdown';\nimport useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';\nimport Tab from './Tab';\n\nexport const MORE_TAB_TEXT = 'More...';\n\nfunction Tabs({\n  children,\n  className,\n  moreTabText = MORE_TAB_TEXT,\n  defaultActiveKey,\n  activeKey,\n  ...props\n}) {\n  const containerElementRef = useRef(null);\n  const overflowElementRef = useRef(null);\n  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(\n    containerElementRef.current?.children[0],\n    overflowElementRef.current?.parentNode,\n  );\n\n  useEffect(() => {\n    if (containerElementRef.current) {\n      const observer = new MutationObserver((mutations => {\n        mutations.forEach(mutation => {\n          // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification\n          const eventKey = mutation.target.getAttribute('data-rb-event-key');\n          // React-Bootstrap attribute 'aria-selected' is responsible for selected/unselected state\n          const isActive = mutation.target.getAttribute('aria-selected') === 'true';\n          // datakey attribute is added manually to the dropdown\n          // elements so that they correspond to the native tabs' eventKey\n          const element = containerElementRef.current.querySelector(`[datakey='${eventKey}']`);\n          const moreTab = containerElementRef.current.querySelector('.pgn__tab_more');\n          if (isActive) {\n            element?.classList.add('active');\n            // Here we add active class to the 'More Tab' if element exists in the dropdown\n            if (element) {\n              moreTab.classList.add('active');\n            } else {\n              moreTab.classList.remove('active');\n            }\n          } else {\n            element?.classList.remove('active');\n          }\n        });\n      }));\n      observer.observe(containerElementRef.current, {\n        attributes: true, subtree: true, attributeFilter: ['aria-selected'],\n      });\n      return () => observer.disconnect();\n    }\n    return undefined;\n  }, []);\n\n  useEffect(() => {\n    if (overflowElementRef.current?.parentNode) {\n      overflowElementRef.current.parentNode.tabIndex = -1;\n    }\n  }, [overflowElementRef.current?.parentNode]);\n\n  const handleDropdownTabClick = (eventKey) => {\n    const hiddenTab = containerElementRef.current.querySelector(`[data-rb-event-key='${eventKey}']`);\n    hiddenTab.click();\n  };\n\n  const tabsChildren = useMemo(() => {\n    const indexOfOverflowStart = indexOfLastVisibleChild + 1;\n    const handleDropdownKeyPress = (e, eventKey) => {\n      if (e.key === 'Enter') {\n        handleDropdownTabClick(eventKey);\n      }\n    };\n    const childrenList = React.Children.map(children, (child, index) => {\n      if (child?.type?.name !== 'Tab' && process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(\n          `Tabs children can only be of type Tab. ${children[index]} was passed instead.`,\n        );\n      }\n      if (!React.isValidElement(child)) {\n        return child;\n      }\n      const {\n        title, notification, tabClassName, ...rest\n      } = child.props;\n      let newTitle;\n      if (notification) {\n        newTitle = (\n          <>\n            {title}\n            <Bubble\n              variant=\"error\"\n              role=\"status\"\n              className=\"pgn__tab-notification\"\n              aria-live=\"polite\"\n              expandable\n            >\n              {notification}\n            </Bubble>\n          </>\n        );\n      } else {\n        newTitle = title;\n      }\n      const tabClass = index > indexOfLastVisibleChild ? 'pgn__tab_invisible' : '';\n      const modifiedTab = React.cloneElement(child, {\n        ...rest,\n        title: newTitle,\n        tabClassName: classNames(tabClass, tabClassName),\n      });\n      return modifiedTab;\n    });\n    let moreTabHasNotification = false;\n    const overflowChildren = childrenList.slice(indexOfOverflowStart)\n      .map(overflowChild => {\n        if (!moreTabHasNotification && overflowChild.props.notification) {\n          moreTabHasNotification = true;\n        }\n        return (\n          <Dropdown.Item\n            as=\"li\"\n            tabIndex=\"0\"\n            key={`${overflowChild.props.eventKey}overflow`}\n            onClick={() => handleDropdownTabClick(overflowChild.props.eventKey)}\n            onKeyPress={(e) => handleDropdownKeyPress(e, overflowChild.props.eventKey)}\n            disabled={overflowChild.props.disabled}\n            datakey={overflowChild.props.eventKey}\n            className={classNames({\n              active: overflowChild.props.eventKey === defaultActiveKey || overflowChild.props.eventKey === activeKey,\n            }, 'pgn__tabs__dropdown-item')}\n          >\n            {overflowChild.props.title}\n          </Dropdown.Item>\n        );\n      });\n\n    childrenList.splice(indexOfOverflowStart, 0, (<Tab\n      key=\"moreTabKey\"\n      tabClassName={classNames(!overflowChildren.length && 'pgn__tab_invisible', 'pgn__tab_more')}\n      title={(\n        <Dropdown ref={overflowElementRef}>\n          <Dropdown.Toggle\n            variant=\"link\"\n            className=\"nav-link\"\n            id=\"pgn__tab-toggle\"\n          >\n            {moreTabText}\n            {moreTabHasNotification && (\n              <Bubble\n                variant=\"error\"\n                role=\"status\"\n                className=\"pgn__tab-notification\"\n              />\n            )}\n          </Dropdown.Toggle>\n          <Dropdown.Menu as=\"ul\" className=\"dropdown-menu-right\">{overflowChildren}</Dropdown.Menu>\n        </Dropdown>\n      )}\n    />\n    ));\n    return childrenList;\n  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText]);\n\n  return (\n    <div ref={containerElementRef}>\n      <BaseTabs\n        defaultActiveKey={defaultActiveKey}\n        activeKey={activeKey}\n        {...props}\n        className={classNames(className, 'pgn__tabs')}\n      >\n        {tabsChildren}\n      </BaseTabs>\n    </div>\n  );\n}\n\nTabs.propTypes = {\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['tabs', 'pills', 'inverse-tabs', 'inverse-pills', 'button-group']),\n  /** Specifies elements that is processed to create tabs. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies text for the 'More' tab. */\n  moreTabText: PropTypes.string,\n  /** Specifies default active tab (uncontrolled usage). */\n  defaultActiveKey: PropTypes.string,\n  /** Specifies active tab (controlled usage). */\n  activeKey: PropTypes.string,\n};\n\nTabs.defaultProps = {\n  variant: 'tabs',\n  className: undefined,\n  moreTabText: MORE_TAB_TEXT,\n  defaultActiveKey: undefined,\n  activeKey: undefined,\n};\n\nexport default Tabs;\nexport { Tab };\nexport { default as TabContainer } from 'react-bootstrap/TabContainer';\nexport { default as TabContent } from 'react-bootstrap/TabContent';\nexport { default as TabPane } from 'react-bootstrap/TabPane';\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useRef","useState","useCallback","classNames","PropTypes","BaseTabs","Bubble","Dropdown","useIndexOfLastVisibleChild","Tab","MORE_TAB_TEXT","Tabs","_ref","children","className","moreTabText","defaultActiveKey","activeKey","props","_objectWithoutProperties","_excluded","containerElementRef","setContainerElementRef","overflowElementRef","indexOfLastVisibleChild","firstChild","current","parentNode","observer","MutationObserver","mutations","forEach","mutation","eventKey","target","getAttribute","isActive","element","querySelector","moreTab","classList","add","remove","observe","attributes","subtree","attributeFilter","disconnect","undefined","tabIndex","handleDropdownTabClick","hiddenTab","click","tabsChildren","indexOfOverflowStart","handleDropdownKeyPress","e","key","childrenList","Children","map","child","index","type","name","process","env","NODE_ENV","console","error","isValidElement","_child$props","title","notification","tabClassName","rest","_excluded2","newTitle","createElement","Fragment","variant","role","expandable","tabClass","modifiedTab","cloneElement","_objectSpread","moreTabHasNotification","overflowChildren","slice","overflowChild","Item","as","onClick","onKeyPress","disabled","datakey","active","splice","length","ref","Toggle","id","Menu","_extends","propTypes","oneOf","node","isRequired","string","defaultProps","default","TabContainer","TabContent","TabPane"],"sources":["../../src/Tabs/index.jsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseTabs from 'react-bootstrap/Tabs';\nimport Bubble from '../Bubble';\nimport Dropdown from '../Dropdown';\nimport useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';\nimport Tab from './Tab';\n\nexport const MORE_TAB_TEXT = 'More...';\n\nfunction Tabs({\n  children,\n  className,\n  moreTabText = MORE_TAB_TEXT,\n  defaultActiveKey,\n  activeKey,\n  ...props\n}) {\n  const [containerElementRef, setContainerElementRef] = useState(null);\n  const overflowElementRef = useRef(null);\n  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(\n    containerElementRef?.firstChild,\n    overflowElementRef.current?.parentNode,\n  );\n\n  useEffect(() => {\n    if (containerElementRef) {\n      const observer = new MutationObserver((mutations => {\n        mutations.forEach(mutation => {\n          // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification\n          const eventKey = mutation.target.getAttribute('data-rb-event-key');\n          // React-Bootstrap attribute 'aria-selected' is responsible for selected/unselected state\n          const isActive = mutation.target.getAttribute('aria-selected') === 'true';\n          // datakey attribute is added manually to the dropdown\n          // elements so that they correspond to the native tabs' eventKey\n          const element = containerElementRef.querySelector(`[datakey='${eventKey}']`);\n          const moreTab = containerElementRef.querySelector('.pgn__tab_more');\n          if (isActive) {\n            element?.classList.add('active');\n            // Here we add active class to the 'More Tab' if element exists in the dropdown\n            if (element) {\n              moreTab.classList.add('active');\n            } else {\n              moreTab.classList.remove('active');\n            }\n          } else {\n            element?.classList.remove('active');\n          }\n        });\n      }));\n      observer.observe(containerElementRef, {\n        attributes: true, subtree: true, attributeFilter: ['aria-selected'],\n      });\n      return () => observer.disconnect();\n    }\n    return undefined;\n  }, [containerElementRef]);\n\n  useEffect(() => {\n    if (overflowElementRef.current?.parentNode) {\n      overflowElementRef.current.parentNode.tabIndex = -1;\n    }\n  }, [overflowElementRef.current?.parentNode]);\n\n  const handleDropdownTabClick = useCallback((eventKey) => {\n    const hiddenTab = containerElementRef.querySelector(`[data-rb-event-key='${eventKey}']`);\n    hiddenTab.click();\n  }, [containerElementRef]);\n\n  const tabsChildren = useMemo(() => {\n    const indexOfOverflowStart = indexOfLastVisibleChild + 1;\n    const handleDropdownKeyPress = (e, eventKey) => {\n      if (e.key === 'Enter') {\n        handleDropdownTabClick(eventKey);\n      }\n    };\n    const childrenList = React.Children.map(children, (child, index) => {\n      if (child?.type?.name !== 'Tab' && process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(\n          `Tabs children can only be of type Tab. ${children[index]} was passed instead.`,\n        );\n      }\n      if (!React.isValidElement(child)) {\n        return child;\n      }\n      const {\n        title, notification, tabClassName, ...rest\n      } = child.props;\n      let newTitle;\n      if (notification) {\n        newTitle = (\n          <>\n            {title}\n            <Bubble\n              variant=\"error\"\n              role=\"status\"\n              className=\"pgn__tab-notification\"\n              aria-live=\"polite\"\n              expandable\n            >\n              {notification}\n            </Bubble>\n          </>\n        );\n      } else {\n        newTitle = title;\n      }\n      const tabClass = index > indexOfLastVisibleChild ? 'pgn__tab_invisible' : '';\n      const modifiedTab = React.cloneElement(child, {\n        ...rest,\n        title: newTitle,\n        tabClassName: classNames(tabClass, tabClassName),\n      });\n      return modifiedTab;\n    });\n    let moreTabHasNotification = false;\n    const overflowChildren = childrenList.slice(indexOfOverflowStart)\n      .map(overflowChild => {\n        if (!moreTabHasNotification && overflowChild.props.notification) {\n          moreTabHasNotification = true;\n        }\n        return (\n          <Dropdown.Item\n            as=\"li\"\n            tabIndex=\"0\"\n            key={`${overflowChild.props.eventKey}overflow`}\n            onClick={() => handleDropdownTabClick(overflowChild.props.eventKey)}\n            onKeyPress={(e) => handleDropdownKeyPress(e, overflowChild.props.eventKey)}\n            disabled={overflowChild.props.disabled}\n            datakey={overflowChild.props.eventKey}\n            className={classNames({\n              active: overflowChild.props.eventKey === defaultActiveKey || overflowChild.props.eventKey === activeKey,\n            }, 'pgn__tabs__dropdown-item')}\n          >\n            {overflowChild.props.title}\n          </Dropdown.Item>\n        );\n      });\n\n    childrenList.splice(indexOfOverflowStart, 0, (<Tab\n      key=\"moreTabKey\"\n      tabClassName={classNames(!overflowChildren.length && 'pgn__tab_invisible', 'pgn__tab_more')}\n      title={(\n        <Dropdown ref={overflowElementRef}>\n          <Dropdown.Toggle\n            variant=\"link\"\n            className=\"nav-link\"\n            id=\"pgn__tab-toggle\"\n          >\n            {moreTabText}\n            {moreTabHasNotification && (\n              <Bubble\n                variant=\"error\"\n                role=\"status\"\n                className=\"pgn__tab-notification\"\n              />\n            )}\n          </Dropdown.Toggle>\n          <Dropdown.Menu as=\"ul\" className=\"dropdown-menu-right\">{overflowChildren}</Dropdown.Menu>\n        </Dropdown>\n      )}\n    />\n    ));\n    return childrenList;\n  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText, handleDropdownTabClick]);\n\n  return (\n    <div ref={setContainerElementRef}>\n      <BaseTabs\n        defaultActiveKey={defaultActiveKey}\n        activeKey={activeKey}\n        {...props}\n        className={classNames(className, 'pgn__tabs')}\n      >\n        {tabsChildren}\n      </BaseTabs>\n    </div>\n  );\n}\n\nTabs.propTypes = {\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['tabs', 'pills', 'inverse-tabs', 'inverse-pills', 'button-group']),\n  /** Specifies elements that is processed to create tabs. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies text for the 'More' tab. */\n  moreTabText: PropTypes.string,\n  /** Specifies default active tab (uncontrolled usage). */\n  defaultActiveKey: PropTypes.string,\n  /** Specifies active tab (controlled usage). */\n  activeKey: PropTypes.string,\n};\n\nTabs.defaultProps = {\n  variant: 'tabs',\n  className: undefined,\n  moreTabText: MORE_TAB_TEXT,\n  defaultActiveKey: undefined,\n  activeKey: undefined,\n};\n\nexport default Tabs;\nexport { Tab };\nexport { default as TabContainer } from 'react-bootstrap/TabContainer';\nexport { default as TabContent } from 'react-bootstrap/TabContent';\nexport { default as TabPane } from 'react-bootstrap/TabPane';\n"],"mappings":"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"}

package/dist/core.css

@@ -317,7 +317,6 @@
   --pgn-spacing-card-margin-group: 12px;
   --pgn-spacing-card-spacer-y: .75rem;
   --pgn-spacing-card-spacer-x: 1.25rem;
-  --pgn-spacing-btn-focus-gap: 1px;
   --pgn-spacing-btn-block-spacing-y: .5rem;
   --pgn-spacing-bubble-expandable-padding-x: .25rem;
   --pgn-spacing-bubble-expandable-padding-y: 0;
@@ -574,6 +573,7 @@
   --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
+  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
   --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
   --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
   --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
@@ -665,7 +665,8 @@
   --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
   --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
-  --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
+  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
   --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
   --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
@@ -681,6 +682,7 @@
   --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
   --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
   --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
+  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
   --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
 }
 *,
@@ -8500,7 +8502,7 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 06 Dec 2023 09:28:09 GMT
+ * Generated on Tue, 26 Dec 2023 14:13:40 GMT
  */
 /**
  * IMPORTANT: This file is the result of assembling design tokens
@@ -9449,13 +9451,13 @@ a.badge:focus, a.badge.focus {
   bottom: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
   left: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
   border: solid var(--pgn-size-btn-focus-width) var(--pgn-btn-focus-outline-color, var(--pgn-color-body-base));
-  border-radius: var(--pgn-size-btn-focus-border-radius);
+  border-radius: var(--pgn-size-btn-focus-border-radius-base);
 }
 .btn:not(:disabled):not(.disabled):not(.btn-link).focus.btn-lg::before, .btn-group-lg > .btn:not(:disabled):not(.disabled):not(.btn-link).focus::before, .btn:not(:disabled):not(.disabled):not(.btn-link):focus.btn-lg::before, .btn-group-lg > .btn:not(:disabled):not(.disabled):not(.btn-link):focus::before {
-  border-radius: var(--pgn-size-btn-focus-border-radius);
+  border-radius: var(--pgn-size-btn-focus-border-radius-lg);
 }
 .btn:not(:disabled):not(.disabled):not(.btn-link).focus.btn-sm::before, .btn-group-sm > .btn:not(:disabled):not(.disabled):not(.btn-link).focus::before, .btn:not(:disabled):not(.disabled):not(.btn-link):focus.btn-sm::before, .btn-group-sm > .btn:not(:disabled):not(.disabled):not(.btn-link):focus::before {
-  border-radius: var(--pgn-size-btn-focus-border-radius);
+  border-radius: var(--pgn-size-btn-focus-border-radius-sm);
 }
 .btn:not(:disabled):not(.disabled):not(.btn-link).focus:active::before, .btn:not(:disabled):not(.disabled):not(.btn-link).focus.active::before, .btn:not(:disabled):not(.disabled):not(.btn-link):focus:active::before, .btn:not(:disabled):not(.disabled):not(.btn-link):focus.active::before {
   opacity: 0.75;