@douyinfe/semi-ui 2.5.1 → 2.7.0-beta.0

package/cascader/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, ReactNode, CSSProperties, MouseEvent } from 'react';
+import React, { Fragment, ReactNode, CSSProperties, MouseEvent, KeyboardEvent } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -54,6 +54,7 @@ export interface CascaderProps extends BasicCascaderProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
     arrowIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
@@ -100,6 +101,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         'aria-errormessage': PropTypes.string,
         'aria-describedby': PropTypes.string,
         'aria-required': PropTypes.bool,
+        'aria-label': PropTypes.string,
         arrowIcon: PropTypes.node,
         changeOnSelect: PropTypes.bool,
         defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
@@ -197,6 +199,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onDropdownVisibleChange: noop,
         onListScroll: noop,
         enableLeafClick: false,
+        'aria-label': 'Cascader'
     };
 
     options: any;
@@ -584,7 +587,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         );
     }
 
-    handleItemClick = (e: MouseEvent, item: Entity | Data) => {
+    handleItemClick = (e: MouseEvent | KeyboardEvent, item: Entity | Data) => {
         this.foundation.handleItemClick(e, item);
     };
 
@@ -708,9 +711,32 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         );
     };
 
+    renderDisplayText = (): ReactNode => {
+        const { displayProp, separator, displayRender } = this.props;
+        const { selectedKeys } = this.state;
+        let displayText: ReactNode = '';
+        if (selectedKeys.size) {
+            const displayPath = this.foundation.getItemPropPath([...selectedKeys][0], displayProp);
+            if (displayRender && typeof displayRender === 'function') {
+                displayText = displayRender(displayPath);
+            } else {
+                displayText = displayPath.map((path: ReactNode, index: number)=>(
+                    <Fragment key={`${path}-${index}`}>
+                        {
+                            index<displayPath.length-1
+                                ? <>{path}{separator}</>
+                                : path
+                        }
+                    </Fragment>
+                ));
+            }
+        }
+        return displayText;
+    }
+
     renderSelectContent = () => {
         const { placeholder, filterTreeNode, multiple } = this.props;
-        const { selectedKeys, checkedKeys } = this.state;
+        const { checkedKeys } = this.state;
         const searchable = Boolean(filterTreeNode);
         if (!searchable) {
             if (multiple) {
@@ -719,11 +745,9 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 }
                 return this.renderMultipleTags();
             } else {
-                const displayText = selectedKeys.size ?
-                    this.foundation.renderDisplayText([...selectedKeys][0]) :
-                    '';
+                const displayText = this.renderDisplayText();
                 const spanCls = cls({
-                    [`${prefixcls}-selection-placeholder`]: !displayText || !displayText.length,
+                    [`${prefixcls}-selection-placeholder`]: !displayText,
                 });
                 return <span className={spanCls}>{displayText ? displayText : placeholder}</span>;
             }
@@ -798,6 +822,14 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         this.foundation.handleClear();
     };
 
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress = (e: KeyboardEvent) => {
+        e && e.stopPropagation();
+        this.foundation.handleClearEnterPress();
+    };
+
     showClearBtn = () => {
         const { showClear, disabled, multiple } = this.props;
         const { selectedKeys, isOpen, isHovering, checkedKeys } = this.state;
@@ -811,7 +843,13 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const allowClear = this.showClearBtn();
         if (allowClear) {
             return (
-                <div className={clearCls} onClick={this.handleClear} role='button' tabIndex={0}>
+                <div 
+                    className={clearCls}
+                    onClick={this.handleClear} 
+                    onKeyPress={this.handleClearEnterPress}
+                    role='button' 
+                    tabIndex={0}
+                >
                     <IconClear />
                 </div>
             );
@@ -891,6 +929,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 style={style}
                 ref={this.triggerRef}
                 onClick={e => this.foundation.handleClick(e)}
+                onKeyPress={e => this.foundation.handleSelectionEnterPress(e)}
                 aria-invalid={this.props['aria-invalid']}
                 aria-errormessage={this.props['aria-errormessage']}
                 aria-label={this.props['aria-label']}

package/cascader/item.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/cascader/constants';
+import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 import { includes } from 'lodash';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -43,7 +44,7 @@ export interface CascaderItemProps {
     selectedKeys: Set<string>;
     loadedKeys: Set<string>;
     loadingKeys: Set<string>;
-    onItemClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onItemClick: (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => void;
     onItemHover: (e: React.MouseEvent, item: Entity) => void;
     showNext: ShowNextType;
     onItemCheckboxClick: (item: Entity | Data) => void;
@@ -84,7 +85,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         empty: false,
     };
 
-    onClick = (e: React.MouseEvent, item: Entity | Data) => {
+    onClick = (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => {
         const { onItemClick } = this.props;
         if (item.data.disabled || ('disabled' in item && item.disabled)) {
             return;
@@ -92,6 +93,15 @@ export default class Item extends PureComponent<CascaderItemProps> {
         onItemClick(e, item);
     };
 
+    /**
+     * A11y: simulate item click
+     */
+    handleItemEnterPress = (keyboardEvent: React.KeyboardEvent, item: Entity | Data) => {
+        if (isEnterPress(keyboardEvent)) {
+            this.onClick(keyboardEvent, item);
+        }
+    }
+
     onHover = (e: React.MouseEvent, item: Entity) => {
         const { showNext, onItemHover } = this.props;
         if (item.data.disabled) {
@@ -136,7 +146,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
             case 'loading':
                 return <Spin wrapperClassName={`${prefixcls}-spin-icon`} />;
             case 'empty':
-                return (<span className={`${prefixcls}-icon ${prefixcls}-icon-empty`} />);
+                return (<span aria-hidden={true} className={`${prefixcls}-icon ${prefixcls}-icon-empty`} />);
             default:
                 return null;
         }
@@ -179,11 +189,13 @@ export default class Item extends PureComponent<CascaderItemProps> {
                     });
                     return (
                         <li
+                            role='menuitem'
                             className={className}
                             key={key}
                             onClick={e => {
                                 this.onClick(e, item);
                             }}
+                            onKeyPress={e => this.handleItemEnterPress(e, item)}
                         >
                             <span className={`${prefixcls}-label`}>
                                 {!multiple && this.renderIcon('empty')}
@@ -211,9 +223,9 @@ export default class Item extends PureComponent<CascaderItemProps> {
         let showChildItem: Entity;
         const ind = content.length;
         content.push(
-            <ul className={`${prefixcls}-list`} key={renderData[0].key} onScroll={e => this.props.onListScroll(e, ind)}>
+            <ul role='menu' className={`${prefixcls}-list`} key={renderData[0].key} onScroll={e => this.props.onListScroll(e, ind)}>
                 {renderData.map(item => {
-                    const { data, key } = item;
+                    const { data, key, parentKey } = item;
                     const { children, label, disabled, isLeaf } = data;
                     const { active, selected, loading } = this.getItemStatus(key);
                     const hasChild = Boolean(children) && children.length;
@@ -226,13 +238,21 @@ export default class Item extends PureComponent<CascaderItemProps> {
                         [`${prefixcls}-select`]: selected && !multiple,
                         [`${prefixcls}-disabled`]: disabled
                     });
+                    const otherAriaProps = parentKey ? { ['aria-owns']: `cascaderItem-${parentKey}` } : {};
                     return (
                         <li
+                            role='menuitem'
+                            id={`cascaderItem-${key}`}
+                            aria-expanded={active}
+                            aria-haspopup={Boolean(showExpand)}
+                            aria-disabled={disabled}
+                            {...otherAriaProps}
                             className={className}
                             key={key}
                             onClick={e => {
                                 this.onClick(e, item);
                             }}
+                            onKeyPress={e => this.handleItemEnterPress(e, item)}
                             onMouseEnter={e => {
                                 this.onHover(e, item);
                             }}

package/datePicker/_story/v2/InsetInput.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { DatePicker, Space, Input, Button, Select } from '@douyinfe/semi-ui';
+import { Position } from '@douyinfe/semi-foundation/tooltip/foundation';
+import { strings } from '@douyinfe/semi-foundation/tooltip/constants';
+import * as dateFns from 'date-fns';
+
+/**
+ * Test with Chromatic
+ */
+export default function App() {
+    const spacing = [200, 400];
+    const [date, setDate] = React.useState();
+    const [insetInput, setInsetInput] = React.useState(true);
+    const [position, setPosition] = React.useState('leftTopOver');
+    const [needConfirm, setNeedConfirm] = React.useState(false);
+    const [density, setDensity] = React.useState(true);
+
+    const props = {
+        defaultOpen: true,
+        motion: false,
+        insetInput,
+        defaultPickerValue: '2021-12-01',
+        position,
+        density: density ? 'compact' : 'default',
+        autoAdjustOverflow: false,
+    };
+
+    const positionOptionList = strings.POSITION_SET.map((position) => ({
+        value: position,
+        label: position,
+        key: position,
+    }));
+
+    const triggerRender = ({ placeholder }) => {
+        const format = 'Pp';
+        const value = (date && dateFns.format(date, format)) || placeholder;
+        return <Input value={value} readOnly />;
+    };
+
+    const handleDateChange = (date) => {
+        setDate(date);
+    };
+
+    const handleBtnClick = () => {
+        setInsetInput(!insetInput);
+    };
+
+    const handleReset = () => {
+        setInsetInput(true);
+        setPosition('leftTopOver');
+    };
+
+    const handleToggleNeedConfirm = () => {
+        setNeedConfirm(!needConfirm);
+    };
+
+    const handleToggleDensity = () => {
+        setDensity(!density);
+    };
+
+    return (
+        <div style={{ height: '200vh' }}>
+            <div style={{ marginBottom: 12 }}>
+                <Space>
+                    <Button onClick={handleBtnClick}>
+                        {`insetInput=${insetInput}`}
+                    </Button>
+                    <Button onClick={handleToggleNeedConfirm}>
+                        {`needConfirm=${needConfirm}`}
+                    </Button>
+                    <Button onClick={handleToggleDensity}>
+                        {`小尺寸=${density}`}
+                    </Button>
+                    <Select
+                        style={{ width: 200 }}
+                        optionList={positionOptionList} 
+                        placeholder='选择position'
+                        value={position}
+                        onChange={setPosition}
+                        showClear
+                    />
+                    <Button onClick={handleReset} theme="solid">reset</Button>
+                </Space>
+            </div>
+            <Space wrap spacing={spacing}>
+                <DatePicker placeholder='选择单个日期' {...props} />
+                <DatePicker placeholder='选择月' {...props} type='month' />
+                <DatePicker placeholder='选择日期时间' {...props} type='dateTime' needConfirm={needConfirm} />
+                <DatePicker placeholder='选择日期范围' {...props} type='dateRange' />
+                <DatePicker placeholder='选择日期时间范围' {...props} type='dateTimeRange' needConfirm={needConfirm} />
+                <DatePicker placeholder='format=Pp' {...props} format='yyyy-MM-dd  HH:mm:ss' type='dateTimeRange' />
+            </Space>
+        </div>
+    );
+}
+
+App.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+        viewports: [1800]
+    },
+};
+App.storyName = 'inset input';

package/datePicker/_story/v2/InsetInputE2E.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { DatePicker, Space, Button } from '@douyinfe/semi-ui';
+
+/**
+ * Test with Cypress
+ * Don't modify DOM structure
+ */
+export default function App() {
+    const [needConfirm, setNeedConfirm] = React.useState(false);
+
+    const spacing = [200, 400];
+    const props = {
+        insetInput: true,
+        defaultPickerValue: '2021-12-01',
+        motion: false,
+    };
+
+    const handleToggleNeedConfirm = () => {
+        setNeedConfirm(!needConfirm);
+    };
+
+    return (
+        <div style={{ height: '300vh' }}>
+            <div style={{ marginBottom: 12 }}>
+                <Space>
+                    <Button onClick={handleToggleNeedConfirm} data-cy="btn">
+                        {`needConfirm=${needConfirm}`}
+                    </Button>
+                </Space>
+            </div>
+            <Space wrap spacing={spacing}>
+                <div data-cy="date">
+                    <DatePicker placeholder="选择单个日期" {...props} />
+                </div>
+                <div data-cy="month">
+                    <DatePicker
+                        {...props}
+                        placeholder="选择月"
+                        type="month"
+                        defaultValue="2021-12"
+                        timePickerOpts={{
+                            scrollItemProps: { motion: false },
+                        }}
+                    />
+                </div>
+                <div data-cy="dateTime">
+                    <DatePicker placeholder="选择日期时间" {...props} type="dateTime" needConfirm={needConfirm} />
+                </div>
+                <div data-cy="dateRange">
+                    <DatePicker placeholder="选择日期范围" {...props} type="dateRange" />
+                </div>
+                <div data-cy="dateTimeRange">
+                    <DatePicker
+                        placeholder="选择日期时间范围"
+                        {...props}
+                        type="dateTimeRange"
+                        needConfirm={needConfirm}
+                    />
+                </div>
+                <div data-cy="customFormat">
+                    <DatePicker placeholder="选择日期范围" {...props} type="dateRange" format="Pp" />
+                </div>
+            </Space>
+        </div>
+    );
+}
+
+App.parameters = { chromatic: { disableSnapshot: true } };
+App.storyName = 'inset input e2e test';

package/datePicker/_story/v2/index.js

@@ -1,3 +1,5 @@
 export { default as YearButton } from './YearButton';
 export { default as PanelOpen  } from './PanelOpen';
 export { default as FixInputRangeFocus } from './FixInputRangeFocus';
+export { default as InsetInput  } from './InsetInput';
+export { default as InsetInputE2E  } from './InsetInputE2E';

package/datePicker/dateInput.tsx

@@ -1,21 +1,28 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable no-unused-vars */
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
+
 import DateInputFoundation, {
     DateInputAdapter,
     DateInputFoundationProps,
-    RangeType
+    RangeType,
+    InsetInputChangeProps,
+    InsetInputChangeFoundationProps,
 } from '@douyinfe/semi-foundation/datePicker/inputFoundation';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/datePicker/constants';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import Input from '../input/index';
 import { IconCalendar, IconCalendarClock, IconClear } from '@douyinfe/semi-icons';
 import { BaseValueType, ValueType } from '@douyinfe/semi-foundation/datePicker/foundation';
 
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import Input from '../input/index';
+import { InsetDateInput, InsetTimeInput } from './insetInput';
+
 export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     insetLabel?: React.ReactNode;
     prefix?: React.ReactNode;
@@ -25,9 +32,10 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.MouseEvent<HTMLInputElement>, rangeType?: RangeType) => void;
     onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void;
+    value?: Date[];
 }
 
-
 // eslint-disable-next-line @typescript-eslint/ban-types
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes = {
@@ -40,7 +48,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         value: PropTypes.array,
         disabled: PropTypes.bool,
         type: PropTypes.oneOf(strings.TYPE_SET),
-        multiple: PropTypes.bool,
         showClear: PropTypes.bool,
         format: PropTypes.string, // Attributes not used
         inputStyle: PropTypes.object,
@@ -55,6 +62,8 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         rangeInputStartRef: PropTypes.object,
         rangeInputEndRef: PropTypes.object,
         rangeSeparator: PropTypes.string,
+        insetInput: PropTypes.bool,
+        insetInputValue: PropTypes.object,
     };
 
     static defaultProps = {
@@ -65,7 +74,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onBlur: noop,
         onClear: noop,
         onFocus: noop,
-        multiple: false,
         type: 'date',
         inputStyle: {},
         inputReadOnly: false,
@@ -92,6 +100,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             notifyRangeInputClear: (...args) => this.props.onRangeClear(...args),
             notifyRangeInputFocus: (...args) => this.props.onFocus(...args),
             notifyTabPress: (...args) => this.props.onRangeEndTabPress(...args),
+            notifyInsetInputChange: options => this.props.onInsetInputChange(options),
         };
     }
 
@@ -140,6 +149,10 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         this.handleRangeInputFocus(e, 'rangeStart');
     };
 
+    handleInsetInputChange = (options: InsetInputChangeFoundationProps) => {
+        this.foundation.handleInsetInputChange(options);
+    };
+
     getRangeInputValue = (rangeStart: string, rangeEnd: string) => {
         const { rangeSeparator } = this.props;
         const rangeInputValue = `${rangeStart}${rangeSeparator}${rangeEnd}`;
@@ -177,9 +190,12 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         const allowClear = (rangeStart || rangeEnd) && showClear;
         return allowClear && !disabled ? (
             <div
+                role="button"
+                tabIndex={0}
+                aria-label="Clear range input value"
                 className={`${prefixCls}-range-input-clearbtn`}
                 onMouseDown={e => !disabled && this.handleRangeInputClear(e)}>
-                <IconClear />
+                <IconClear aria-hidden />
             </div>
         ) : null;
     }
@@ -223,11 +239,11 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         const rangePlaceholder = Array.isArray(placeholder) ? placeholder : [placeholder, placeholder];
         const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
         const inputLeftWrapperCls = cls(`${prefixCls}-range-input-wrapper-start`, `${prefixCls}-range-input-wrapper`, {
-            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart',
-            [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel
+            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart' && !disabled,
+            [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel,
         });
         const inputRightWrapperCls = cls(`${prefixCls}-range-input-wrapper-end`, `${prefixCls}-range-input-wrapper`, {
-            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd'
+            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd' && !disabled,
         });
         return (
             <>
@@ -279,7 +295,72 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         );
     }
 
-    render() {
+    renderInputInset() {
+        const {
+            type,
+            handleInsetDateFocus,
+            handleInsetTimeFocus,
+            value,
+            insetInputValue,
+            prefixCls,
+            rangeInputStartRef,
+            rangeInputEndRef,
+            density,
+        } = this.props;
+
+        const _isRangeType = type.includes('Range');
+        const newInsetInputValue = this.foundation.getInsetInputValue({ value, insetInputValue });
+        const { datePlaceholder, timePlaceholder } = this.foundation.getInsetInputPlaceholder();
+
+        const insetInputWrapperCls = `${prefixCls}-inset-input-wrapper`;
+        const separatorCls = `${prefixCls}-inset-input-separator`;
+
+        return (
+            <div className={insetInputWrapperCls} x-type={type}>
+                <InsetDateInput
+                    forwardRef={rangeInputStartRef}
+                    insetInputValue={newInsetInputValue}
+                    placeholder={datePlaceholder}
+                    valuePath={'monthLeft.dateInput'}
+                    onChange={this.handleInsetInputChange}
+                    onFocus={e => handleInsetDateFocus(e, 'rangeStart')}
+                />
+                <InsetTimeInput
+                    disabled={!newInsetInputValue.monthLeft.dateInput}
+                    insetInputValue={newInsetInputValue}
+                    placeholder={timePlaceholder}
+                    type={type}
+                    valuePath={'monthLeft.timeInput'}
+                    onChange={this.handleInsetInputChange}
+                    onFocus={handleInsetTimeFocus}
+                />
+                {_isRangeType && (
+                    <>
+                        <div className={separatorCls}>{density === 'compact' ? null : '-'}</div>
+                        <InsetDateInput
+                            forwardRef={rangeInputEndRef}
+                            insetInputValue={newInsetInputValue}
+                            placeholder={datePlaceholder}
+                            valuePath={'monthRight.dateInput'}
+                            onChange={this.handleInsetInputChange}
+                            onFocus={e => handleInsetDateFocus(e, 'rangeEnd')}
+                        />
+                        <InsetTimeInput
+                            disabled={!newInsetInputValue.monthRight.dateInput}
+                            insetInputValue={newInsetInputValue}
+                            placeholder={timePlaceholder}
+                            type={type}
+                            valuePath={'monthRight.timeInput'}
+                            onChange={this.handleInsetInputChange}
+                            onFocus={handleInsetTimeFocus}
+                        />
+                    </>
+                )}
+            </div>
+        );
+    }
+
+    renderTriggerInput() {
         const {
             placeholder,
             type,
@@ -293,6 +374,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             validateStatus,
             block,
             prefixCls,
+            multiple, // Whether to allow multiple values for email and file types
             dateFnsLocale, // No need to pass to input
             onBlur,
             onClear,
@@ -308,10 +390,12 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             onRangeEndTabPress,
             rangeInputFocus,
             rangeSeparator,
+            insetInput,
+            insetInputValue,
             ...rest
         } = this.props;
-        const dateIcon = <IconCalendar />;
-        const dateTimeIcon = <IconCalendarClock />;
+        const dateIcon = <IconCalendar aria-hidden />;
+        const dateTimeIcon = <IconCalendarClock aria-hidden />;
         const suffix = type.includes('Time') ? dateTimeIcon : dateIcon;
         let text = '';
 
@@ -355,4 +439,9 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             />
         );
     }
+
+    render() {
+        const { insetInput } = this.props;
+        return insetInput ? this.renderInputInset() : this.renderTriggerInput();
+    }
 }