@douyinfe/semi-ui 2.19.0-alpha.8 → 2.19.0

package/_utils/index.ts

@@ -47,12 +47,16 @@ export function cloneDeep(value: any, customizer?: (value: any) => void) {
                     set(newArray, key, v[key]);
                 });
                 // internal-issues:887
-                warning(
-                    get(process, 'env.NODE_ENV') !== 'production',
-                    `[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.
+                try {
+                    warning(
+                        get(process, 'env.NODE_ENV') !== 'production',
+                        `[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.
                     The maximum length of an array is 4294967295.
                     Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript`
-                );
+                    );
+                } catch (e){
+
+                }
                 return newArray;
             } else {
                 return undefined;
@@ -191,4 +195,4 @@ export function getFocusableElements(node: HTMLElement) {
     // we are not filtered elements which are invisible
     const focusableElements = Array.from(node.querySelectorAll<HTMLElement>(focusableSelectorsStr));
     return focusableElements;
-}
+}

package/anchor/index.tsx

@@ -10,10 +10,12 @@ import '@douyinfe/semi-foundation/anchor/anchor.scss';
 import { noop, debounce, throttle } from 'lodash';
 import getUuid from '@douyinfe/semi-foundation/utils/uuid';
 import { ArrayElement } from '../_base/base';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 
 const prefixCls = cssClasses.PREFIX;
 
 export { LinkProps } from './link';
+
 export interface AnchorProps {
     autoCollapse?: boolean;
     className?: string;
@@ -44,6 +46,7 @@ export interface AnchorState {
 }
 
 class Anchor extends BaseComponent<AnchorProps, AnchorState> {
+    static contextType = ConfigContext;
     static Link = Link;
     static PropTypes = {
         size: PropTypes.oneOf(strings.SIZE),
@@ -88,6 +91,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     childMap: Record<string, Set<string>>;
     handler: () => void;
     clickHandler: () => void;
+    context: ContextValue;
 
     constructor(props: AnchorProps) {
         super(props);
@@ -96,7 +100,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
             links: [],
             clickLink: false,
             scrollHeight: '100%',
-            slideBarTop: '0'
+            slideBarTop: '0',
         };
 
         this.foundation = new AnchorFoundation(this.adapter);
@@ -107,9 +111,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         return {
             ...super.adapter,
             addLink: value => {
-                this.setState(prevState => (
-                    { links: [...prevState.links, value] }
-                ));
+                this.setState(prevState => ({ links: [...prevState.links, value] }));
             },
             removeLink: link => {
                 this.setState(prevState => {
@@ -218,6 +220,28 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         this.foundation.updateChildMap(prevState, state);
     };
 
+    renderChildren = () => {
+        const loop = (children, level = 1) => {
+            return React.Children.map(children, child => {
+                if (React.isValidElement(child)) {
+                    const childProps = {
+                        direction: this.context.direction,
+                        level,
+                        children: [],
+                    };
+                    const { children } = child.props as any;
+                    const hasChildren = children && React.Children.count(children) > 0;
+                    if (hasChildren) {
+                        childProps.children = loop(children, level + 1);
+                    }
+                    return React.cloneElement(child, childProps);
+                }
+                return null;
+            });
+        };
+        return loop(this.props.children);
+    };
+
     componentDidMount() {
         const { defaultAnchor = '' } = this.props;
         this.anchorID = getUuid('semi-anchor').replace('.', '');
@@ -286,15 +310,23 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
                     removeLink: this.removeLink,
                 }}
             >
-                <div role="navigation" aria-label={ ariaLabel || 'Side navigation'} className={wrapperCls} style={wrapperStyle} id={this.anchorID}>
+                <div
+                    role="navigation"
+                    aria-label={ariaLabel || 'Side navigation'}
+                    className={wrapperCls}
+                    style={wrapperStyle}
+                    id={this.anchorID}
+                >
                     <div aria-hidden className={slideCls} style={{ height: scrollHeight }}>
                         <span className={slideBarCls} style={{ top: slideBarTop }} />
                     </div>
-                    <div className={anchorWrapper} role="list">{children}</div>
+                    <div className={anchorWrapper} role="list">
+                        {this.renderChildren()}
+                    </div>
                 </div>
             </AnchorContext.Provider>
         );
     }
 }
 
-export default Anchor;
+export default Anchor;

package/anchor/link.tsx

@@ -16,6 +16,8 @@ export interface LinkProps {
     children?: ReactNode;
     style?: React.CSSProperties;
     disabled?: boolean;
+    level?: number;
+    direction?: 'ltr' | 'rtl';
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -38,6 +40,7 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     foundation: LinkFoundation;
 
     context!: AnchorContextType;
+
     constructor(props: LinkProps) {
         super(props);
         this.foundation = new LinkFoundation(this.adapter);
@@ -120,11 +123,13 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         if (!this.context.autoCollapse) {
             return <div role="list">{children}</div>;
         }
-        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? <div role="list">{children}</div> : null;
+        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? (
+            <div role="list">{children}</div>
+        ) : null;
     };
 
     render() {
-        const { href, className, style, disabled = false, title } = this.props;
+        const { href, className, style, disabled = false, title, level, direction } = this.props;
         const { activeLink, showTooltip } = this.context;
         const active = activeLink === href;
         const linkCls = cls(`${prefixCls}-link`, className);
@@ -132,8 +137,12 @@ export default class Link extends BaseComponent<LinkProps, {}> {
             [`${prefixCls}-link-title-active`]: active,
             [`${prefixCls}-link-title-disabled`]: disabled,
         });
+        const paddingAttributeKey = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
         const ariaProps = {
             'aria-disabled': disabled,
+            style: {
+                [paddingAttributeKey]: 8 * level,
+            },
         };
         if (active) {
             ariaProps['aria-details'] = 'active';

package/avatar/index.tsx

@@ -31,6 +31,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: noop,
     };
 
+    static elementType: string;
     static propTypes = {
         children: PropTypes.node,
         color: PropTypes.oneOf(colorSet),
@@ -192,7 +193,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             const finalProps = clickable ? { ...props, ...a11yFocusProps } : props;
             content = (
                 <span className={`${prefixCls}-content`}>
-                    <span {...finalProps}  x-semi-prop="children">{children}</span>
+                    <span {...finalProps} x-semi-prop="children">{children}</span>
                 </span>
             );
         }
@@ -234,3 +235,4 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         );
     }
 }
+Avatar.elementType = 'Avatar';

package/calendar/_story/calendar.stories.js

@@ -530,7 +530,24 @@ export const EventRender  = () => <EventRenderDemo />;
 
 
 export const WeekStartsOnDemo = () => {
-    const [v, setV] = useState(0);
+    const [v, setV] = useState(6);
+    const allDayStyle = {
+      borderRadius: '3px',
+      boxSizing: 'border-box',
+      border: 'var(--semi-color-bg-1) 1px solid',
+      padding: '2px 4px',
+      backgroundColor: 'var(--semi-color-primary-light-active)',
+      height: '100%',
+      overflow: 'hidden',
+    };
+    const events = [
+      {
+        key: '0',
+        start: new Date(2022, 8, 5, 14, 45, 0),
+        end: new Date(2022, 8, 6, 6, 18, 0),
+        children: <div style={allDayStyle}>9月5日 14:45 ~ 9月6日 6:18</div>,
+      }
+    ]
     return (
         <div>
             <RadioGroup defaultValue={v} aria-label="周起始日" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
@@ -544,9 +561,9 @@ export const WeekStartsOnDemo = () => {
             </RadioGroup>
             <Calendar
                 mode="month"
-                weekStartsOn={v}
+                weekStartsOn={1}
+                events={events}
                 dateGridRender={(dateString, date) => {
-                    console.log(dateString);
                     if (dateString === new Date(2019, 6, 16).toString()) {
                     return (
                         <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>123test</div>

package/checkbox/checkbox.tsx

@@ -81,6 +81,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseLeave: noop,
         type: 'default',
     };
+    static elementType: string;
+
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;
 
@@ -288,6 +290,6 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         );
     }
 }
-
+Checkbox.elementType = 'Checkbox';
 
 export default Checkbox;

package/dist/css/semi.css

@@ -522,6 +522,7 @@ body {
   --semi-transition_function-easeIn:ease-in;
   --semi-transition_function-easeOut:ease-out;
   --semi-transition_function-easeInIOut:ease-in-out;
+  --semi-transition_delay-none: 0ms;
   --semi-transition_delay-slowest:0ms;
   --semi-transition_delay-slower:0ms;
   --semi-transition_delay-slow:0ms;
@@ -575,8 +576,6 @@ body {
   left: 0;
   top: 0;
   height: 100%;
-  box-sizing: border-box;
-  padding: 2px 0;
 }
 .semi-anchor-slide-muted {
   display: none;
@@ -612,13 +611,6 @@ body {
   border-radius: 1px;
   content: " ";
 }
-.semi-anchor-link {
-  padding-left: 8px;
-}
-.semi-anchor-link-wrapper {
-  padding-right: 2px;
-  margin: 2px 0;
-}
 .semi-anchor-link-title {
   cursor: pointer;
   color: var(--semi-color-text-2);
@@ -639,6 +631,7 @@ body {
 }
 .semi-anchor-link-title:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
 }
 .semi-anchor-link-title-disabled {
   color: var(--semi-color-disabled-text);
@@ -681,7 +674,6 @@ body {
 }
 .semi-rtl .semi-anchor-link,
 .semi-portal-rtl .semi-anchor-link {
-  padding-right: 8px;
   padding-left: auto;
 }
 
@@ -14293,14 +14285,8 @@ body {
   display: inline-flex;
   flex-direction: column;
 }
-.semi-popconfirm-header-content {
-  color: var(--semi-color-text-2);
-}
-.semi-popconfirm-header-content > p {
-  margin: 0;
-  padding: 0;
-}
 .semi-popconfirm-body {
+  margin-left: 36px;
   color: var(--semi-color-text-2);
 }
 .semi-popconfirm-body > p {
@@ -15785,6 +15771,7 @@ body {
 .semi-sidesheet-body {
   padding: 0 24px;
   flex: 1;
+  overflow: auto;
 }
 .semi-sidesheet-content {
   height: 100%;
@@ -19623,6 +19610,9 @@ body {
   user-select: none;
   cursor: not-allowed;
 }
+.semi-tree-option-list .semi-checkboxGroup-vertical {
+  row-gap: 0;
+}
 
 .semi-tree-option-list-block .semi-tree-option:hover {
   background-color: var(--semi-color-fill-0);