@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/dist/DataTable/CollapsibleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleButtonGroup.js","names":["React","useContext","useMemo","useState","PropTypes","MoreVert","useToggle","useWindowSize","DataTableContext","Icon","IconButton","breakpoints","ModalPopup","Stack","Button","ACTION_OVERFLOW_BUTTON_TEXT","SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT","CollapsibleButtonGroup","_ref","className","actions","rest","_objectWithoutProperties","_excluded","_useToggle","_useToggle2","_slicedToArray","isOverflowMenuOpen","openOverflowMenu","closeOverflowMenu","_useState","_useState2","overflowMenuTarget","setOverflowMenuTarget","_useContext","_useContext$controlle","controlledTableSelections","isEntireTableSelected","selectedFlatRows","rows","_useWindowSize","width","selectedRows","_useMemo","small","minWidth","_toConsumableArray","firstTwoActions","splice","extraActions","slice","reverse","_useMemo2","visibleActions","dropdownActions","cloneAction","action","index","cloneElement","component","_objectSpread","key","concat","as","args","createElement","_extends","length","Fragment","variant","iconAs","src","alt","id","ref","onClick","positionRef","onClose","placement","isOpen","gap","map","defaultProps","propTypes","string","arrayOf","shape","oneOfType","element","elementType","isRequired"],"sources":["../../src/DataTable/CollapsibleButtonGroup.jsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { MoreVert } from '../../icons';\nimport useToggle from '../hooks/useToggle';\nimport useWindowSize from '../hooks/useWindowSize';\nimport DataTableContext from './DataTableContext';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport breakpoints from '../utils/breakpoints';\nimport ModalPopup from '../Modal/ModalPopup';\nimport Stack from '../Stack';\nimport Button from '../Button';\n\nexport const ACTION_OVERFLOW_BUTTON_TEXT = 'More actions';\nexport const SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT = 'Actions';\n\nfunction CollapsibleButtonGroup({\n  className,\n  actions,\n  ...rest\n}) {\n  const [isOverflowMenuOpen, openOverflowMenu, closeOverflowMenu] = useToggle(false);\n  const [overflowMenuTarget, setOverflowMenuTarget] = useState(null);\n  const {\n    controlledTableSelections: [{ isEntireTableSelected }],\n    selectedFlatRows,\n    rows,\n  } = useContext(DataTableContext);\n  const { width } = useWindowSize();\n  const selectedRows = selectedFlatRows || rows;\n\n  const [visibleActions, dropdownActions] = useMemo(() => {\n    if (width < breakpoints.small.minWidth) {\n      // On a small screen, all actions will be in the overflow menu\n      return [[], [...actions]];\n    }\n    // The first two actions will be displayed as buttons, the rest will go in an overflow menu\n    const firstTwoActions = [...actions].splice(0, 2);\n    const extraActions = [...actions].slice(2);\n\n    /*  Reversing the array because to the user it makes sense to put the primary button first,\n        but we want it on the right */\n    return [firstTwoActions.reverse(), extraActions];\n  }, [actions, width]);\n\n  if (!isEntireTableSelected && !selectedRows) {\n    return null;\n  }\n\n  const cloneAction = (action, index) => React.cloneElement(\n    action.component,\n    {\n      // eslint-disable-next-line react/no-array-index-key\n      key: `${action}${index}`,\n      as: Button, // for backwards compatibility this is needed\n      ...action.args,\n    },\n  );\n\n  return (\n    <div className={className} {...rest}>\n      {dropdownActions.length > 0 && (\n        <>\n          <IconButton\n            variant=\"secondary\"\n            iconAs={Icon}\n            src={MoreVert}\n            alt={width > breakpoints.small.minWidth\n              ? ACTION_OVERFLOW_BUTTON_TEXT : SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT}\n            id=\"actions-dropdown\"\n            ref={setOverflowMenuTarget}\n            onClick={openOverflowMenu}\n          />\n          <ModalPopup\n            positionRef={overflowMenuTarget}\n            onClose={closeOverflowMenu}\n            placement=\"bottom-end\"\n            isOpen={isOverflowMenuOpen}\n          >\n            <div className=\"pgn__datatable__overflow-actions-menu\">\n              <Stack gap={2}>\n                {dropdownActions.map(cloneAction)}\n              </Stack>\n            </div>\n          </ModalPopup>\n        </>\n      )}\n      <div className=\"pgn__datatable__visible-actions\">\n        {visibleActions.map(cloneAction)}\n      </div>\n    </div>\n  );\n}\n\nCollapsibleButtonGroup.defaultProps = {\n  className: null,\n};\n\nCollapsibleButtonGroup.propTypes = {\n  /** Class names for the div wrapping the button components */\n  className: PropTypes.string,\n  /** Array of action objects, containing a component and their callback args */\n  actions: PropTypes.arrayOf(PropTypes.shape({\n    component: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]).isRequired,\n    args: PropTypes.shape({}),\n  })).isRequired,\n};\n\nexport default CollapsibleButtonGroup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CollapsibleButtonGroup.js","names":["React","useContext","useMemo","useState","PropTypes","MoreVert","useToggle","useWindowSize","DataTableContext","Icon","IconButton","breakpoints","ModalPopup","Stack","Button","ACTION_OVERFLOW_BUTTON_TEXT","SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT","CollapsibleButtonGroup","_ref","className","actions","rest","_objectWithoutProperties","_excluded","_useToggle","_useToggle2","_slicedToArray","isOverflowMenuOpen","openOverflowMenu","closeOverflowMenu","_useState","_useState2","overflowMenuTarget","setOverflowMenuTarget","_useContext","_useContext$controlle","controlledTableSelections","isEntireTableSelected","selectedFlatRows","rows","_useWindowSize","width","selectedRows","_useMemo","small","minWidth","_toConsumableArray","firstTwoActions","splice","extraActions","slice","reverse","_useMemo2","visibleActions","dropdownActions","cloneAction","action","index","cloneElement","component","_objectSpread","key","concat","as","args","createElement","_extends","length","Fragment","variant","iconAs","src","alt","id","ref","onClick","positionRef","onClose","placement","isOpen","gap","map","defaultProps","propTypes","string","arrayOf","shape","oneOfType","element","elementType","isRequired"],"sources":["../../src/DataTable/CollapsibleButtonGroup.jsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { MoreVert } from '../../icons';\nimport useToggle from '../hooks/useToggle';\nimport useWindowSize from '../hooks/useWindowSize';\nimport DataTableContext from './DataTableContext';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport breakpoints from '../utils/breakpoints';\nimport ModalPopup from '../Modal/ModalPopup';\nimport Stack from '../Stack';\nimport Button from '../Button';\n\nexport const ACTION_OVERFLOW_BUTTON_TEXT = 'More actions';\nexport const SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT = 'Actions';\n\nfunction CollapsibleButtonGroup({\n  className,\n  actions,\n  ...rest\n}) {\n  const [isOverflowMenuOpen, openOverflowMenu, closeOverflowMenu] = useToggle(false);\n  const [overflowMenuTarget, setOverflowMenuTarget] = useState(null);\n  const {\n    controlledTableSelections: [{ isEntireTableSelected }],\n    selectedFlatRows,\n    rows,\n  } = useContext(DataTableContext);\n  const { width } = useWindowSize();\n  const selectedRows = selectedFlatRows || rows;\n\n  const [visibleActions, dropdownActions] = useMemo(() => {\n    if (width < breakpoints.small.minWidth) {\n      // On a small screen, all actions will be in the overflow menu\n      return [[], [...actions]];\n    }\n    // The first two actions will be displayed as buttons, the rest will go in an overflow menu\n    const firstTwoActions = [...actions].splice(0, 2);\n    const extraActions = [...actions].slice(2);\n\n    /*  Reversing the array because to the user it makes sense to put the primary button first,\n        but we want it on the right */\n    return [firstTwoActions.reverse(), extraActions];\n  }, [actions, width]);\n\n  if (!isEntireTableSelected && !selectedRows) {\n    return null;\n  }\n\n  const cloneAction = (action, index) => React.cloneElement(\n    action.component,\n    {\n      // eslint-disable-next-line react/no-array-index-key\n      key: `${action}${index}`,\n      as: Button, // for backwards compatibility this is needed\n      ...action.args,\n    },\n  );\n\n  return (\n    <div className={className} {...rest}>\n      {dropdownActions.length > 0 && (\n        <>\n          <IconButton\n            variant=\"secondary\"\n            iconAs={Icon}\n            src={MoreVert}\n            alt={width > breakpoints.small.minWidth\n              ? ACTION_OVERFLOW_BUTTON_TEXT : SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT}\n            id=\"actions-dropdown\"\n            ref={setOverflowMenuTarget}\n            onClick={openOverflowMenu}\n          />\n          <ModalPopup\n            positionRef={overflowMenuTarget}\n            onClose={closeOverflowMenu}\n            placement=\"bottom-end\"\n            isOpen={isOverflowMenuOpen}\n          >\n            <div className=\"pgn__data-table__overflow-actions-menu\">\n              <Stack gap={2}>\n                {dropdownActions.map(cloneAction)}\n              </Stack>\n            </div>\n          </ModalPopup>\n        </>\n      )}\n      <div className=\"pgn__data-table__visible-actions\">\n        {visibleActions.map(cloneAction)}\n      </div>\n    </div>\n  );\n}\n\nCollapsibleButtonGroup.defaultProps = {\n  className: null,\n};\n\nCollapsibleButtonGroup.propTypes = {\n  /** Class names for the div wrapping the button components */\n  className: PropTypes.string,\n  /** Array of action objects, containing a component and their callback args */\n  actions: PropTypes.arrayOf(PropTypes.shape({\n    component: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]).isRequired,\n    args: PropTypes.shape({}),\n  })).isRequired,\n};\n\nexport default CollapsibleButtonGroup;\n"],"mappings":"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","ignoreList":[]}

package/dist/DataTable/index.scss

@@ -1,23 +1,21 @@
-@import "variables";
-
 .pgn__data-table-wrapper {
-  font-size: $font-size-sm;
-  border-radius: $border-radius;
-  background-color: $data-table-background-color;
-  box-shadow: $data-table-box-shadow;
+  font-size: var(--pgn-typography-font-size-sm);
+  border-radius: var(--pgn-size-border-radius-base);
+  background-color: var(--pgn-color-data-table-bg-base);
+  box-shadow: var(--pgn-elevation-data-table-box-shadow);
 
   &.hide-shadow {
     box-shadow: none;
   }
 
   > :first-child {
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
+    border-top-left-radius: var(--pgn-size-border-radius-base);
+    border-top-right-radius: var(--pgn-size-border-radius-base);
   }
 
   > :last-child {
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: var(--pgn-size-border-radius-base);
+    border-bottom-right-radius: var(--pgn-size-border-radius-base);
   }
 }
 
@@ -25,11 +23,11 @@
 .pgn__table-actions {
   display: flex;
 
-  .pgn__datatable__visible-actions {
-    margin-inline-start: map_get($spacers, 2);
+  .pgn__data-table__visible-actions {
+    margin-inline-start: var(--pgn-spacing-spacer-2);
 
     .btn {
-      margin-inline-start: map_get($spacers, 2);
+      margin-inline-start: var(--pgn-spacing-spacer-2);
 
       &:first-child {
         margin-inline-start: 0;
@@ -57,7 +55,7 @@
     width: 100%;
     display: flex;
     align-items: center;
-    margin-top: map_get($spacers, 4);
+    margin-top: var(--pgn-spacing-spacer-4);
   }
 
   .pgn__icon-button-toggle__container {
@@ -79,7 +77,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($white, .7);
+    background-color: var(--pgn-color-data-table-bg-is-loading);
     z-index: 1;
   }
 }
@@ -88,27 +86,27 @@
   display: flex;
   align-items: flex-start;
 
-  @media (max-width: $max-width-xl) {
+  @media (--pgn-size-breakpoint-max-width-xl) {
     overflow-x: scroll;
   }
 
   .pgn__data-table-layout-sidebar {
-    background-color: $data-table-background-color;
-    border-radius: $border-radius;
-    box-shadow: $data-table-box-shadow;
-    padding: $data-table-padding-small;
-    margin-right: map_get($spacers, 4);
-    flex: 0 0 $data-table-layout-sidebar-width;
+    background-color: var(--pgn-color-data-table-bg-base);
+    border-radius: var(--pgn-size-border-radius-base);
+    box-shadow: var(--pgn-elevation-data-table-box-shadow);
+    padding: var(--pgn-spacing-data-table-padding-small);
+    margin-right: var(--pgn-spacing-spacer-4);
+    flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
   }
 
   .pgn__data-table-side-filters {
     .pgn__data-table-side-filters-title {
-      margin-bottom: map_get($spacers, 3);
+      margin-bottom: var(--pgn-spacing-spacer-3);
       text-align: start;
     }
 
     .pgn__data-table-side-filters-status {
-      margin-bottom: map_get($spacers, 2);
+      margin-bottom: var(--pgn-spacing-spacer-2);
       display: flex;
       justify-content: flex-end;
     }
@@ -129,23 +127,23 @@
   width: 100%;
 
   &.is-striped tr:nth-child(even) {
-    background-color: $light-200;
+    background-color: var(--pgn-color-light-200);
   }
 
   th {
-    background-color: $light-300;
-    padding: $data-table-cell-padding;
+    background-color: var(--pgn-color-light-300);
+    padding: var(--pgn-spacing-data-table-padding-cell);
     text-align: start;
   }
 
   td {
-    padding: $table-cell-padding;
+    padding: var(--pgn-spacing-data-table-padding-cell);
     line-height: 24px;
     text-align: start;
   }
 
   & tr.is-selected {
-    background-color: $info-100 !important;
+    background-color: var(--pgn-color-info-100) !important;
   }
 }
 
@@ -157,17 +155,17 @@
 }
 
 .pgn__data-table-empty {
-  padding: $data-table-padding-x $data-table-padding-y;
+  padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y);
 }
 
 .pgn__data-table-actions {
   display: flex;
   justify-content: space-between;
-  padding-bottom: $data-table-padding-small;
+  padding-bottom: var(--pgn-spacing-data-table-padding-small);
 }
 
 .pgn__data-table-status-bar {
-  padding: $data-table-padding-y $data-table-padding-x;
+  padding: var(--pgn-spacing-data-table-padding-y) var(--pgn-spacing-data-table-padding-x);
 }
 
 .pgn__data-table-filters {
@@ -175,11 +173,11 @@
 }
 
 .pgn__data-table-filters-breakout-filter {
-  margin-inline-end: map_get($spacers, 2);
+  margin-inline-end: var(--pgn-spacing-spacer-2);
 }
 
 .pgn__data-table-filters-dropdown-item {
-  padding: $data-table-padding-small 14px;
+  padding: var(--pgn-spacing-data-table-padding-small) 14px;
   min-width: 15em;
 
   .pgn__form-checkbox {
@@ -196,9 +194,9 @@
 .pgn__data-table-footer {
   display: flex;
   justify-content: space-between;
-  padding: $data-table-padding-x $data-table-padding-y;
+  padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y);
   align-items: center;
-  border-top: $data-table-border;
+  border-top: var(--pgn-size-data-table-border) solid var(--pgn-color-data-table-border);
 
   .btn-icon .pgn__icon {
     [dir="rtl"] & {
@@ -211,14 +209,14 @@
   display: flex;
 
   .pgn__page-count {
-    align-self: $data-table-footer-position;
+    align-self: var(--pgn-spacing-data-table-footer-position);
   }
 }
 
 .pgn__data-table-pagination-dropdown {
   overflow-y: auto;
-  max-height: $data-table-pagination-dropdown-max-height;
-  min-width: $data-table-pagination-dropdown-min-width;
+  max-height: var(--pgn-size-data-table-dropdown-pagination-max-height);
+  min-width: var(--pgn-size-data-table-dropdown-pagination-min-width);
 
   a {
     text-align: center;
@@ -226,7 +224,7 @@
 }
 
 .pgn__checkbox-filter-label {
-  font-weight: $font-weight-bold;
+  font-weight: var(--pgn-typography-font-weight-bold);
 }
 
 .pgn__checkbox-filter {
@@ -261,15 +259,15 @@
 }
 
 .pgn__data-table-card-view {
-  padding: 0 $data-table-padding-x;
+  padding: 0 var(--pgn-spacing-data-table-padding-x);
 
   .pgn__data-table-card-view-default-skeleton-card-section {
-    margin-top: map_get($spacers, 2);
+    margin-top: var(--pgn-spacing-spacer-2);
   }
 }
 
 .pgn__data-table__action-btn {
-  margin-left: map_get($spacers, 2);
+  margin-left: var(--pgn-spacing-spacer-2);
 
   &:first-child {
     margin-left: 0;
@@ -285,10 +283,10 @@
   overflow: hidden;
 }
 
-.pgn__datatable__overflow-actions-menu {
-  background: #FFFFFF;
-  padding: map_get($spacers, 2);
-  box-shadow: $level-1-box-shadow;
+.pgn__data-table__overflow-actions-menu {
+  background: var(--pgn-color-white);
+  padding: var(--pgn-spacing-spacer-2);
+  box-shadow: var(--pgn-elevation-box-shadow-level-1);
   border-radius: 4px;
 }
 
@@ -309,10 +307,10 @@
 
   &.selection-right {
     > :first-child {
-      margin-right: map_get($spacers, 2);
+      margin-right: var(--pgn-spacing-spacer-2);
 
       [dir="rtl"] & {
-        margin-left: map_get($spacers, 2);
+        margin-left: var(--pgn-spacing-spacer-2);
         margin-right: 0;
       }
     }
@@ -326,5 +324,5 @@
 .pgn__data-table__controlled-select {
   display: flex;
   align-content: center;
-  padding: map_get($spacers, 1);
+  padding: var(--pgn-spacing-spacer-1);
 }

package/dist/Dropdown/dropdown-bootstrap.scss

@@ -0,0 +1,181 @@
+.dropup,
+.dropright,
+.dropdown,
+.dropleft {
+  position: relative;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+
+  @include caret();
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: var(--pgn-elevation-dropdown-zindex);
+  display: none;
+  float: left;
+  min-width: var(--pgn-size-dropdown-min-width);
+  padding: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-base);
+  margin: var(--pgn-spacing-dropdown-spacer) 0 0;
+  color: var(--pgn-color-dropdown-text);
+  text-align: left;
+  list-style: none;
+  background-color: var(--pgn-color-dropdown-bg);
+  background-clip: padding-box;
+  border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border);
+  box-shadow: var(--pgn-elevation-dropdown-box-shadow);
+
+  @include font-size(var(--pgn-typography-dropdown-font-size));
+  @include border-radius(var(--pgn-size-dropdown-border-radius-base));
+
+  &[x-placement^="top"],
+  &[x-placement^="right"],
+  &[x-placement^="bottom"],
+  &[x-placement^="left"] {
+    right: auto;
+    bottom: auto;
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .dropdown-menu#{$infix}-left {
+      right: auto;
+      left: 0;
+    }
+
+    .dropdown-menu#{$infix}-right {
+      right: 0;
+      left: auto;
+    }
+  }
+}
+
+.dropup {
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: var(--pgn-spacing-dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(up);
+  }
+}
+
+.dropright {
+  .dropdown-menu {
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-left: var(--pgn-spacing-dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(right);
+
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropleft {
+  .dropdown-menu {
+    top: 0;
+    right: 100%;
+    left: auto;
+    margin-top: 0;
+    margin-right: var(--pgn-spacing-dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(left);
+
+    &::before {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropdown-divider {
+  @include nav-divider(var(--pgn-color-dropdown-divider-bg), var(--pgn-spacing-dropdown-divider-margin-y), true);
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item);
+  clear: both;
+  font-weight: var(--pgn-typography-font-weight-normal);
+  color: var(--pgn-color-dropdown-link-base);
+  text-align: inherit;
+  text-decoration: var(--pgn-typography-dropdown-item-text-decoration);
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+
+  @if var(--pgn-spacing-dropdown-padding-y-base) == 0 {
+    &:first-child {
+      @include border-top-radius(var(--pgn-size-dropdown-border-radius-inner));
+    }
+
+    &:last-child {
+      @include border-bottom-radius(var(--pgn-size-dropdown-border-radius-inner));
+    }
+  }
+
+  @include hover-focus() {
+    color: var(--pgn-color-dropdown-link-hover-base);
+    text-decoration: none;
+
+    @include gradient-bg(var(--pgn-color-dropdown-link-hover-bg));
+  }
+
+  &.active,
+  &:active {
+    color: var(--pgn-color-dropdown-link-active-base);
+    text-decoration: none;
+
+    @include gradient-bg(var(--pgn-color-dropdown-link-active-bg));
+  }
+
+  &.disabled,
+  &:disabled {
+    color: var(--pgn-color-dropdown-link-disabled);
+    pointer-events: none;
+    background-color: transparent;
+
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-header {
+  display: block;
+  padding: var(--pgn-spacing-dropdown-padding-header);
+  margin-bottom: 0;
+  color: var(--pgn-color-dropdown-header);
+  white-space: nowrap;
+
+  @include font-size(var(--pgn-typography-font-size-sm));
+}
+
+.dropdown-item-text {
+  display: block;
+  padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item);
+  color: var(--pgn-color-dropdown-link-base);
+}

package/dist/Dropdown/index.js

@@ -23,7 +23,6 @@ import BaseDropdown from 'react-bootstrap/Dropdown';
 import DropdownMenu from 'react-bootstrap/DropdownMenu';
 import BaseDropdownItem from 'react-bootstrap/DropdownItem';
 import BaseDropdownToggle from 'react-bootstrap/DropdownToggle';
-import DropdownDeprecated from './deprecated';
 import Button from '../Button';
 import IconButton from '../IconButton';
 var Dropdown = /*#__PURE__*/React.forwardRef(
@@ -135,7 +134,6 @@ Dropdown.Item.propTypes = {
 Dropdown.Item.defaultProps = {
   className: undefined
 };
-Dropdown.Deprecated = DropdownDeprecated;
 Dropdown.Toggle = DropdownToggle;
 Dropdown.Menu = DropdownMenu;
 Dropdown.Header = BaseDropdown.Header;

package/dist/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","classNames","PropTypes","BaseDropdown","DropdownMenu","BaseDropdownItem","BaseDropdownToggle","DropdownDeprecated","Button","IconButton","Dropdown","forwardRef","_ref","ref","show","autoClose","onToggle","variant","className","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","internalShow","setInternalShow","isClosingPermitted","source","handleToggle","isOpen","event","metadata","_metadata","_objectSpread","currentTarget","document","key","createElement","_extends","concat","propTypes","oneOfType","string","bool","func","oneOf","defaultProps","undefined","DropdownToggle","_ref2","as","bsPrefix","otherProps","_excluded2","prefix","elementType","id","number","isRequired","Item","DropdownItem","_ref3","_excluded3","Deprecated","Toggle","Menu","Header","Divider","default","DropdownButton","SplitButton"],"sources":["../../src/Dropdown/index.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseDropdown from 'react-bootstrap/Dropdown';\nimport DropdownMenu from 'react-bootstrap/DropdownMenu';\nimport BaseDropdownItem from 'react-bootstrap/DropdownItem';\nimport BaseDropdownToggle from 'react-bootstrap/DropdownToggle';\nimport DropdownDeprecated from './deprecated';\nimport Button from '../Button';\nimport IconButton from '../IconButton';\n\nconst Dropdown = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function Dropdown({\n    show,\n    autoClose,\n    onToggle,\n    variant,\n    className,\n    ...rest\n  }, ref) {\n    const [internalShow, setInternalShow] = React.useState(show);\n    const isClosingPermitted = (source) => {\n      // autoClose=false only permits close on button click\n      if (autoClose === false) {\n        return source === 'click';\n      }\n      // autoClose=inside doesn't permit close on rootClose\n      if (autoClose === 'inside') {\n        return source !== 'rootClose';\n      }\n      // autoClose=outside doesn't permit close on select\n      if (autoClose === 'outside') {\n        return source !== 'select';\n      }\n      return true;\n    };\n\n    const handleToggle = (isOpen, event, metadata) => {\n      if (isOpen) {\n        setInternalShow(true);\n        onToggle?.(isOpen, event, metadata);\n        return;\n      }\n      let { source } = { ...metadata };\n\n      if (event.currentTarget === document && (source !== 'keydown' || event.key === 'Escape')) {\n        source = 'rootClose';\n      }\n      if (isClosingPermitted(source)) {\n        setInternalShow(false);\n        onToggle?.(isOpen, event, metadata);\n      }\n    };\n\n    return (\n      <BaseDropdown\n        className={classNames(\n          'pgn__dropdown',\n          `pgn__dropdown-${variant}`,\n          className,\n        )}\n        data-testid=\"dropdown\"\n        onToggle={handleToggle}\n        ref={ref}\n        show={internalShow}\n        {...rest}\n      />\n    );\n  },\n);\n\nDropdown.propTypes = {\n  autoClose: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  className: PropTypes.string,\n  onToggle: PropTypes.func,\n  show: PropTypes.bool,\n  variant: PropTypes.oneOf(['light', 'dark']),\n};\n\nDropdown.defaultProps = {\n  autoClose: true,\n  className: '',\n  onToggle: undefined,\n  show: false,\n  variant: 'light',\n};\n\nconst DropdownToggle = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function DropdownToggle({\n    as,\n    bsPrefix,\n    ...otherProps\n  }, ref) {\n    // hide arrow from the toggle if it is rendered as IconButton\n    // because it hinders the positioning of IconButton\n    const prefix = as === IconButton ? 'pgn__dropdown-toggle-iconbutton' : bsPrefix;\n    return <BaseDropdownToggle {...otherProps} as={as} bsPrefix={prefix} ref={ref} />;\n  },\n);\n\nDropdownToggle.propTypes = {\n  /** Specifies the base element. */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name. */\n  bsPrefix: PropTypes.string,\n  /** An html id attribute, necessary for assistive technologies, such as screen readers. */\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n};\n\nDropdownToggle.defaultProps = {\n  as: Button,\n  bsPrefix: 'dropdown-toggle',\n};\n\nDropdown.Item = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function DropdownItem({ className, ...otherProps }, ref) {\n    return (\n      <BaseDropdownItem\n        className={classNames(className, 'pgn__dropdown-item')}\n        ref={ref}\n        {...otherProps}\n      />\n    );\n  },\n);\n\nDropdown.Item.propTypes = {\n  className: PropTypes.string,\n};\n\nDropdown.Item.defaultProps = {\n  className: undefined,\n};\n\nDropdown.Deprecated = DropdownDeprecated;\nDropdown.Toggle = DropdownToggle;\nDropdown.Menu = DropdownMenu;\nDropdown.Header = BaseDropdown.Header;\nDropdown.Divider = BaseDropdown.Divider;\n\nexport default Dropdown;\nexport { DropdownToggle };\nexport { default as DropdownButton } from 'react-bootstrap/DropdownButton';\nexport { default as SplitButton } from 'react-bootstrap/SplitButton';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","PropTypes","BaseDropdown","DropdownMenu","BaseDropdownItem","BaseDropdownToggle","Button","IconButton","Dropdown","forwardRef","_ref","ref","show","autoClose","onToggle","variant","className","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","internalShow","setInternalShow","isClosingPermitted","source","handleToggle","isOpen","event","metadata","_metadata","_objectSpread","currentTarget","document","key","createElement","_extends","concat","propTypes","oneOfType","string","bool","func","oneOf","defaultProps","undefined","DropdownToggle","_ref2","as","bsPrefix","otherProps","_excluded2","prefix","elementType","id","number","isRequired","Item","DropdownItem","_ref3","_excluded3","Toggle","Menu","Header","Divider","default","DropdownButton","SplitButton"],"sources":["../../src/Dropdown/index.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseDropdown from 'react-bootstrap/Dropdown';\nimport DropdownMenu from 'react-bootstrap/DropdownMenu';\nimport BaseDropdownItem from 'react-bootstrap/DropdownItem';\nimport BaseDropdownToggle from 'react-bootstrap/DropdownToggle';\nimport Button from '../Button';\nimport IconButton from '../IconButton';\n\nconst Dropdown = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function Dropdown({\n    show,\n    autoClose,\n    onToggle,\n    variant,\n    className,\n    ...rest\n  }, ref) {\n    const [internalShow, setInternalShow] = React.useState(show);\n    const isClosingPermitted = (source) => {\n      // autoClose=false only permits close on button click\n      if (autoClose === false) {\n        return source === 'click';\n      }\n      // autoClose=inside doesn't permit close on rootClose\n      if (autoClose === 'inside') {\n        return source !== 'rootClose';\n      }\n      // autoClose=outside doesn't permit close on select\n      if (autoClose === 'outside') {\n        return source !== 'select';\n      }\n      return true;\n    };\n\n    const handleToggle = (isOpen, event, metadata) => {\n      if (isOpen) {\n        setInternalShow(true);\n        onToggle?.(isOpen, event, metadata);\n        return;\n      }\n      let { source } = { ...metadata };\n\n      if (event.currentTarget === document && (source !== 'keydown' || event.key === 'Escape')) {\n        source = 'rootClose';\n      }\n      if (isClosingPermitted(source)) {\n        setInternalShow(false);\n        onToggle?.(isOpen, event, metadata);\n      }\n    };\n\n    return (\n      <BaseDropdown\n        className={classNames(\n          'pgn__dropdown',\n          `pgn__dropdown-${variant}`,\n          className,\n        )}\n        data-testid=\"dropdown\"\n        onToggle={handleToggle}\n        ref={ref}\n        show={internalShow}\n        {...rest}\n      />\n    );\n  },\n);\n\nDropdown.propTypes = {\n  autoClose: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  className: PropTypes.string,\n  onToggle: PropTypes.func,\n  show: PropTypes.bool,\n  variant: PropTypes.oneOf(['light', 'dark']),\n};\n\nDropdown.defaultProps = {\n  autoClose: true,\n  className: '',\n  onToggle: undefined,\n  show: false,\n  variant: 'light',\n};\n\nconst DropdownToggle = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function DropdownToggle({\n    as,\n    bsPrefix,\n    ...otherProps\n  }, ref) {\n    // hide arrow from the toggle if it is rendered as IconButton\n    // because it hinders the positioning of IconButton\n    const prefix = as === IconButton ? 'pgn__dropdown-toggle-iconbutton' : bsPrefix;\n    return <BaseDropdownToggle {...otherProps} as={as} bsPrefix={prefix} ref={ref} />;\n  },\n);\n\nDropdownToggle.propTypes = {\n  /** Specifies the base element. */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name. */\n  bsPrefix: PropTypes.string,\n  /** An html id attribute, necessary for assistive technologies, such as screen readers. */\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n};\n\nDropdownToggle.defaultProps = {\n  as: Button,\n  bsPrefix: 'dropdown-toggle',\n};\n\nDropdown.Item = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function DropdownItem({ className, ...otherProps }, ref) {\n    return (\n      <BaseDropdownItem\n        className={classNames(className, 'pgn__dropdown-item')}\n        ref={ref}\n        {...otherProps}\n      />\n    );\n  },\n);\n\nDropdown.Item.propTypes = {\n  className: PropTypes.string,\n};\n\nDropdown.Item.defaultProps = {\n  className: undefined,\n};\n\nDropdown.Toggle = DropdownToggle;\nDropdown.Menu = DropdownMenu;\nDropdown.Header = BaseDropdown.Header;\nDropdown.Divider = BaseDropdown.Divider;\n\nexport default Dropdown;\nexport { DropdownToggle };\nexport { default as DropdownButton } from 'react-bootstrap/DropdownButton';\nexport { default as SplitButton } from 'react-bootstrap/SplitButton';\n"],"mappings":"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","ignoreList":[]}

package/dist/Dropdown/index.scss

@@ -1,47 +1,46 @@
-@import "variables";
-@import "~bootstrap/scss/dropdown";
+@import "dropdown-bootstrap";
 
 .pgn__dropdown-dark {
   .dropdown-menu {
-    background-color: $dark-300;
-    color: $white;
+    background-color: var(--pgn-color-dark-300);
+    color: var(--pgn-color-white);
 
     .pgn__dropdown-item {
-      color: $white;
+      color: var(--pgn-color-white);
       font-weight: 400;
 
       &:hover {
-        background-color: $dark-200;
+        background-color: var(--pgn-color-dark-200);
       }
 
       &.active {
-        background-color: $light-300;
-        color: $primary-700;
+        background-color: var(--pgn-color-light-300);
+        color: var(--pgn-color-primary-700);
         font-weight: 700;
       }
 
       &:focus {
-        border: 2px solid $white;
+        border: 2px solid var(--pgn-color-white);
         background-color: inherit;
       }
     }
 
     .dropdown-header {
-      color: $light-700;
+      color: var(--pgn-color-light-700);
     }
 
 
     .dropdown-divider {
-      border-color: $dark-200;
+      border-color: var(--pgn-color-dark-200);
     }
   }
 }
 
 .dropdown-toggle::after {
+  content: "";
   border: 0;
   border-style: solid;
   border-width: .15rem .15rem 0 0;
-  content: "";
   height: .45rem;
   margin-inline-start: .5em;
   position: relative;