@douyinfe/semi-ui 2.7.0 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,19 +1,15 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import { Button, Typography, Card, Tooltip, Tag, Avatar, Rating, Nav, Layout } from '../../index';
3
3
  import { IconHelpCircle, IconUser, IconStar, IconSetting } from '@douyinfe/semi-icons';
4
- import SemiA11y from './a11y';
5
4
  import './index.scss';
6
5
 
7
6
  export default {
8
7
  title: 'Base',
9
8
  };
10
9
 
11
- export {
12
- TestAlwaysDarkLight,
13
- SemiA11y
14
- };
10
+ export { default as SemiA11y } from './a11y';
15
11
 
16
- const TestAlwaysDarkLight = () => {
12
+ export const TestAlwaysDarkLight = () => {
17
13
  function Demo() {
18
14
  const { Text } = Typography;
19
15
  const { Header, Footer, Sider, Content } = Layout;
@@ -6,11 +6,7 @@ export default {
6
6
  title: 'Portal',
7
7
  }
8
8
 
9
- export {
10
- Basic
11
- }
12
-
13
- const Basic = () => (
9
+ export const Basic = () => (
14
10
  <div>
15
11
  <Portal>123</Portal>
16
12
  </div>
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
2
2
  import { getActiveElement } from '../index';
3
3
  import { get, isFunction } from 'lodash';
4
4
 
5
+ /* istanbul ignore next */
5
6
  export function usePrevFocus() {
6
7
  const [prevFocusElement, setPrevFocus] = useState<HTMLElement>(getActiveElement());
7
8
 
package/dist/css/semi.css CHANGED
@@ -1588,7 +1588,7 @@ body[theme-mode=dark], body .semi-always-dark {
1588
1588
  vertical-align: middle;
1589
1589
  white-space: nowrap;
1590
1590
  }
1591
- .semi-button:focus {
1591
+ .semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible {
1592
1592
  outline: 2px solid var(--semi-color-primary-light-active);
1593
1593
  }
1594
1594
  .semi-button-danger {
@@ -1604,8 +1604,8 @@ body[theme-mode=dark], body .semi-always-dark {
1604
1604
  .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
1605
1605
  color: var(--semi-color-danger);
1606
1606
  }
1607
- .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus {
1608
- outline-color: var(--semi-color-danger-light-active);
1607
+ .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
1608
+ outline: 2px solid var(--semi-color-danger-light-active);
1609
1609
  }
1610
1610
  .semi-button-warning {
1611
1611
  background-color: var(--semi-color-warning);
@@ -1620,8 +1620,8 @@ body[theme-mode=dark], body .semi-always-dark {
1620
1620
  .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
1621
1621
  color: var(--semi-color-warning);
1622
1622
  }
1623
- .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus {
1624
- outline-color: var(--semi-color-warning-light-active);
1623
+ .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
1624
+ outline: 2px solid var(--semi-color-warning-light-active);
1625
1625
  }
1626
1626
  .semi-button-tertiary {
1627
1627
  background-color: var(--semi-color-tertiary);