dumi 2.2.0-alpha.2 → 2.2.0-rc.0

package/theme-default/builtins/Tree/index.js

@@ -0,0 +1,206 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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."); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import { ReactComponent as FileOutlined } from '@ant-design/icons-svg/inline-svg/outlined/file.svg';
+import { ReactComponent as FolderOpenOutlined } from '@ant-design/icons-svg/inline-svg/outlined/folder-open.svg';
+import { ReactComponent as FolderOutlined } from '@ant-design/icons-svg/inline-svg/outlined/folder.svg';
+import { ReactComponent as MinusSquareOutlined } from '@ant-design/icons-svg/inline-svg/outlined/minus-square.svg';
+import { ReactComponent as PlusSquareOutlined } from '@ant-design/icons-svg/inline-svg/outlined/plus-square.svg';
+import Tree from 'rc-tree';
+import React, { createRef, useEffect, useState } from 'react';
+import "./index.less";
+
+function getTreeFromList(nodes) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var data = [];
+  [].concat(nodes).forEach(function (node, i) {
+    var key = "".concat(prefix ? "".concat(prefix, "-") : '').concat(i);
+
+    switch (node === null || node === void 0 ? void 0 : node.type) {
+      case 'ul':
+        {
+          var _data;
+
+          var parent = ((_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data.children) || data;
+          var ulLeafs = getTreeFromList(node.props.children || [], key);
+          parent.push.apply(parent, _toConsumableArray(ulLeafs));
+          break;
+        }
+
+      case 'li':
+        {
+          var liLeafs = getTreeFromList(node.props.children, key);
+          data.push({
+            title: [].concat(node.props.children).filter(function (child) {
+              return child.type !== 'ul';
+            }),
+            key: key,
+            children: liLeafs,
+            isLeaf: !liLeafs.length
+          });
+          break;
+        }
+
+      default:
+    }
+  });
+  return data;
+}
+
+var useListToTree = function useListToTree(nodes) {
+  var _useState = useState(getTreeFromList(nodes)),
+      _useState2 = _slicedToArray(_useState, 2),
+      tree = _useState2[0],
+      setTree = _useState2[1];
+
+  useEffect(function () {
+    setTree(getTreeFromList(nodes));
+  }, [nodes]);
+  return tree;
+};
+
+var getIcon = function getIcon(props) {
+  var isLeaf = props.isLeaf,
+      expanded = props.expanded;
+
+  if (isLeaf) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "dumi-default-tree-icon"
+    }, /*#__PURE__*/React.createElement(FileOutlined, {
+      fill: "currentColor"
+    }));
+  }
+
+  return expanded ? /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-tree-icon"
+  }, /*#__PURE__*/React.createElement(FolderOpenOutlined, {
+    fill: "currentColor"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-tree-icon"
+  }, /*#__PURE__*/React.createElement(FolderOutlined, {
+    fill: "currentColor"
+  }));
+};
+
+var renderSwitcherIcon = function renderSwitcherIcon(props) {
+  var isLeaf = props.isLeaf,
+      expanded = props.expanded;
+
+  if (isLeaf) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "tree-switcher-leaf-line"
+    });
+  }
+
+  return expanded ? /*#__PURE__*/React.createElement("span", {
+    className: "tree-switcher-line-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-tree-icon"
+  }, /*#__PURE__*/React.createElement(MinusSquareOutlined, {
+    fill: "currentColor"
+  }))) : /*#__PURE__*/React.createElement("span", {
+    className: "tree-switcher-line-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-tree-icon"
+  }, /*#__PURE__*/React.createElement(PlusSquareOutlined, {
+    fill: "currentColor"
+  })));
+}; // ================== Collapse Motion ==================
+
+
+var getCollapsedHeight = function getCollapsedHeight() {
+  return {
+    height: 0,
+    opacity: 0
+  };
+};
+
+var getRealHeight = function getRealHeight(node) {
+  var scrollHeight = node.scrollHeight;
+  return {
+    height: scrollHeight,
+    opacity: 1
+  };
+};
+
+var getCurrentHeight = function getCurrentHeight(node) {
+  return {
+    height: node ? node.offsetHeight : 0
+  };
+};
+
+var skipOpacityTransition = function skipOpacityTransition(_, event) {
+  return (event === null || event === void 0 ? void 0 : event.deadline) === true || event.propertyName === 'height';
+};
+
+var initCollapseMotion = {
+  motionName: 'ant-motion-collapse',
+  onAppearStart: getCollapsedHeight,
+  onEnterStart: getCollapsedHeight,
+  onAppearActive: getRealHeight,
+  onEnterActive: getRealHeight,
+  onLeaveStart: getCurrentHeight,
+  onLeaveActive: getCollapsedHeight,
+  onAppearEnd: skipOpacityTransition,
+  onEnterEnd: skipOpacityTransition,
+  onLeaveEnd: skipOpacityTransition,
+  motionDeadline: 500
+};
+export default (function (props) {
+  var data = useListToTree(props.children);
+  var treeRef = /*#__PURE__*/createRef();
+
+  var onClick = function onClick(event, node) {
+    var isLeaf = node.isLeaf;
+
+    if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
+      return;
+    }
+
+    treeRef.current.onNodeExpand(event, node);
+  };
+
+  return /*#__PURE__*/React.createElement(Tree, {
+    className: "dumi-default-tree",
+    icon: getIcon,
+    ref: treeRef,
+    itemHeight: 20,
+    showLine: true,
+    selectable: false,
+    virtual: false,
+    motion: _objectSpread(_objectSpread({}, initCollapseMotion), {}, {
+      motionAppear: false
+    }),
+    onClick: onClick,
+    treeData: [{
+      key: '0',
+      title: props.title || '<root>',
+      children: data
+    }],
+    defaultExpandAll: true,
+    switcherIcon: renderSwitcherIcon
+  });
+});

package/theme-default/builtins/Tree/index.less

@@ -0,0 +1,186 @@
+@import (reference) '../../styles/variables.less';
+@treePrefixCls: ~'rc-tree';
+@treeNodePrefixCls: ~'@{treePrefixCls}-treenode';
+
+.@{prefix}-tree {
+  @bg-color: tint(@c-site-bg, 50%);
+
+  padding: 16px;
+  margin: 24px 0 32px;
+  background: @bg-color;
+  border: 1px solid @c-border-light;
+  border-radius: 2px;
+  color: @c-text;
+  overflow-y: auto;
+
+  @{dark-selector} & {
+    @bg-color: shade(@c-site-bg-dark, 50%);
+
+    color: @c-text-dark;
+    background: @bg-color;
+    border-color: @c-border-dark;
+  }
+
+  small {
+    @small-font-color: @c-text-note-dark;
+
+    padding-left: 24px;
+    color: @c-text-note-dark;
+    font-size: 14px;
+    white-space: nowrap;
+
+    @{dark-selector} & {
+      color: @c-text-note-dark;
+    }
+
+    &::before {
+      content: '# ';
+    }
+  }
+
+  &.@{treePrefixCls} {
+    transition: all 0.3s;
+    line-height: 1.5715;
+    list-style: none;
+    font-size: 14px;
+
+    .@{treeNodePrefixCls} {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 4px;
+        left: 0;
+        transition: background 0.3s;
+        content: '';
+      }
+
+      &:hover::before {
+        background: shade(@bg-color, 5%);
+
+        @{dark-selector} & {
+          @bg-color: shade(@c-site-bg-dark, 50%);
+
+          background: tint(@bg-color, 10%);
+        }
+      }
+
+      > * {
+        z-index: 1;
+      }
+    }
+
+    @treeNode-size: 28px;
+    @border: #d9d9d9;
+
+    .@{treeNodePrefixCls} span.@{treePrefixCls}-switcher {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: @treeNode-size;
+      margin-right: 2px;
+      line-height: @treeNode-size;
+      background: transparent;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+
+    .@{treeNodePrefixCls} .@{treePrefixCls}-node-content-wrapper {
+      flex: auto;
+      min-height: @treeNode-size;
+      margin: 0;
+      padding: 0 4px;
+      line-height: @treeNode-size;
+      cursor: pointer;
+      white-space: nowrap;
+      .@{treePrefixCls}-iconEle {
+        margin-right: 6px;
+        vertical-align: 0;
+      }
+    }
+
+    &.@{treePrefixCls}-show-line {
+      .@{treePrefixCls}-indent {
+        display: inline-block;
+        height: 0;
+        vertical-align: bottom;
+        flex-shrink: 0;
+
+        &-unit {
+          position: relative;
+          display: inline-block;
+          width: 24px;
+          height: @treeNode-size;
+
+          &::before {
+            position: absolute;
+            top: 0;
+            right: 12px;
+            bottom: -4px;
+            border-right: 1px solid @border;
+            content: '';
+          }
+
+          &-end::before {
+            display: none;
+          }
+        }
+      }
+
+      .tree-switcher-leaf-line {
+        position: relative;
+        z-index: 1;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          bottom: -4px;
+          margin-left: -1px;
+          border-left: 1px solid @border;
+          content: ' ';
+        }
+
+        &::after {
+          position: absolute;
+          top: 0;
+          bottom: calc(@treeNode-size / 2);
+          width: 12px;
+          margin-left: -1px;
+          border-bottom: 1px solid @border;
+          content: ' ';
+        }
+      }
+
+      .@{treeNodePrefixCls}-leaf-last {
+        .tree-switcher-leaf-line::before {
+          height: calc(@treeNode-size / 2);
+        }
+      }
+    }
+  }
+
+  &-icon {
+    width: 16px;
+    color: @c-text;
+    vertical-align: -0.225em;
+    display: inline-block;
+
+    @{dark-selector} & {
+      color: @c-text-dark;
+    }
+  }
+}
+
+.ant-motion-collapse {
+  overflow: hidden;
+  transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out !important;
+}

package/theme-default/slots/ColorSwitch/index.less

@@ -12,13 +12,15 @@
       inset-inline-end: -15px;
       transform: none;
 
-      [class*='-switch'] + & {
+      [class*='-switch'] + &,
+      [class*='-select'] + & {
         inset-inline-end: 0;
       }
     }
   }
 
-  [class*='-switch'] + & {
+  [class*='-switch'] + &,
+  [class*='-select'] + & {
     margin-inline-start: 15px;
     margin-inline-end: -15px;
     padding-inline: 15px;

package/theme-default/slots/Navbar/index.js

@@ -1,30 +1,97 @@
 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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { ReactComponent as IconDown } from '@ant-design/icons-svg/inline-svg/outlined/down.svg';
 import { Link, useLocation, useNavData } from 'dumi';
 import NavbarExtra from 'dumi/theme/slots/NavbarExtra';
-import React from 'react';
+import React, { useState } from 'react';
 import "./index.less";
 
-var Navbar = function Navbar() {
-  var nav = useNavData();
+var NavbarItem = function NavbarItem(_ref) {
+  var data = _ref.data;
 
   var _useLocation = useLocation(),
       pathname = _useLocation.pathname;
 
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "dumi-default-navbar"
-  }, nav.map(function (item) {
+  var _useState = useState(function () {
+    var _data$children;
+
+    return (_data$children = data.children) === null || _data$children === void 0 ? void 0 : _data$children.some(function (item) {
+      var activePath = item.activePath || item.link;
+      return activePath && pathname.startsWith(activePath);
+    });
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCollapsed = _useState2[0],
+      setIsCollapsed = _useState2[1];
+
+  var CollapsedBtn = data.children && /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-navbar-collapse-btn",
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setIsCollapsed(function (v) {
+        return !v;
+      });
+    },
+    "data-collapsed": isCollapsed || undefined
+  }, /*#__PURE__*/React.createElement(IconDown, null));
+  var NestedNav = data.children && /*#__PURE__*/React.createElement("ul", {
+    className: "dumi-default-navbar-dropdown",
+    "data-collapsed": isCollapsed || undefined
+  }, /*#__PURE__*/React.createElement(NavbarContent, {
+    data: data.children
+  })); // user custom nav has no activePath, so fallback to link
+
+  var activePath = data.activePath || data.link;
+  var extraProps = activePath && pathname.startsWith(activePath) ? {
+    className: 'active'
+  } : {};
+  return data.link ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Link, _extends({
+    to: data.link
+  }, extraProps), data.title), CollapsedBtn, NestedNav) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setIsCollapsed(function (v) {
+        return !v;
+      });
+    }
+  }, extraProps), data.title), CollapsedBtn, NestedNav);
+};
+
+var NavbarContent = function NavbarContent(_ref2) {
+  var data = _ref2.data;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(function (item) {
     return /*#__PURE__*/React.createElement("li", {
-      key: item.link
-    }, /^(\w+:)\/\/|^(mailto|tel):/.test(item.link) ? /*#__PURE__*/React.createElement("a", {
+      key: item.activePath
+    }, item.link && /^(\w+:)\/\/|^(mailto|tel):/.test(item.link) ? /*#__PURE__*/React.createElement("a", {
       href: item.link,
       target: "_blank",
       rel: "noreferrer"
-    }, item.title) : /*#__PURE__*/React.createElement(Link, _extends({
-      to: item.link
-    }, pathname.startsWith(item.activePath || item.link) ? {
-      className: 'active'
-    } : {}), item.title));
+    }, item.title) : /*#__PURE__*/React.createElement(NavbarItem, {
+      data: item
+    }));
+  }));
+};
+
+var Navbar = function Navbar() {
+  var nav = useNavData();
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "dumi-default-navbar"
+  }, /*#__PURE__*/React.createElement(NavbarContent, {
+    data: nav
   }), /*#__PURE__*/React.createElement(NavbarExtra, null));
 };
 

package/theme-default/slots/Navbar/index.less

@@ -13,14 +13,21 @@
   }
 
   > li {
+    color: @c-text-secondary;
     font-size: 18px;
     line-height: 1;
     text-align: center;
+    position: relative;
+
+    @{dark-selector} & {
+      color: @c-text-secondary-dark;
+    }
 
     @media @mobile {
       padding: 12px 0;
     }
 
+    > .@{prefix}-navbar-dropdown > li > a,
     > a {
       color: @c-text-secondary;
       text-decoration: none;
@@ -37,17 +44,134 @@
           color: @c-primary-dark;
         }
       }
+    }
+
+    > a.active,
+    > span.active,
+    > .@{prefix}-navbar-dropdown > li > a.active {
+      color: @c-text;
+      font-weight: bold;
+
+      @{dark-selector} & {
+        color: @c-text-dark;
+      }
+    }
+
+    > .@{prefix}-navbar-collapse-btn {
+      appearance: none;
+      margin-left: 6px;
+      margin-right: -24px;
+      width: 18px;
+      height: 18px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      vertical-align: middle;
+
+      > svg {
+        fill: @c-text-note;
+        width: 14px;
+        transition: transform 0.3s;
+
+        @{dark-selector} & {
+          fill: @c-text-note-dark;
+        }
+      }
+
+      &[data-collapsed] > svg {
+        transform: rotate(180deg);
+      }
+
+      @media @desktop {
+        margin-left: 4px;
+        margin-right: 0;
+        pointer-events: none;
+
+        > svg {
+          width: 12px;
+          transition-delay: 0.1s;
+        }
+      }
+    }
+
+    &:hover > .@{prefix}-navbar-collapse-btn > svg {
+      transform: rotate(180deg);
+      transition-delay: 0;
+    }
+
+    > .@{prefix}-navbar-dropdown {
+      position: absolute;
+      top: 100%;
+      left: -18px;
+      min-width: calc(100% + 16px);
+      list-style: none;
+      padding: 0;
+      margin: 6px 0 0;
+      background-color: #fff;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 10%);
+      border-radius: 6px;
+      transition: all 0.2s ease-in-out;
+
+      @{dark-selector} & {
+        background-color: lighten(@c-site-bg-dark, 6%);
+      }
+
+      > li {
+        > a {
+          display: block;
+          padding: 0 18px;
+          color: @c-text-secondary;
+          font-size: 15px;
+          line-height: 1.5;
+          text-align: left;
+
+          @media @mobile {
+            display: inline;
+          }
+
+          &:hover {
+            color: @c-primary;
+          }
+        }
+
+        &:first-child > a {
+          padding-top: 8px;
+        }
+
+        &:last-child > a {
+          padding-bottom: 8px;
+        }
+      }
 
-      &.active {
-        color: @c-text;
-        font-weight: bold;
+      @media @mobile {
+        position: static;
+        background: transparent;
+        box-shadow: none;
+        min-width: 0;
 
         @{dark-selector} & {
-          color: @c-text-dark;
+          background: transparent;
+        }
+
+        &:not([data-collapsed]) {
+          display: none;
         }
       }
     }
 
+    &:not(:hover) > .@{prefix}-navbar-dropdown {
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-6px) scale(0.98);
+      transition-delay: 0.1s;
+
+      @media @mobile {
+        visibility: visible;
+        opacity: 1;
+        transform: none;
+      }
+    }
+
     &:not(:last-child) {
       margin-inline-end: 48px;
 

package/theme-default/slots/RtlSwitch/index.less

@@ -7,7 +7,8 @@
   background-color: transparent;
   cursor: pointer;
 
-  [class*='-switch'] + & {
+  [class*='-switch'] + &,
+  [class*='-select'] + & {
     margin-inline-start: 15px;
     margin-inline-end: -15px;
     padding-inline: 15px;

package/theme-default/slots/SocialIcon/index.less

@@ -4,7 +4,8 @@
   font-size: 0;
   line-height: 0;
 
-  [class*='-switch'] + & {
+  [class*='-switch'] + &,
+  [class*='-select'] + & {
     margin-inline-start: 15px;
     margin-inline-end: -15px;
     padding-inline: 15px;