+ 
+
+
,
+ );
+
+ cy.get('#single').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
+ it('prop: zIndex', () => {
+ mount(
+
+
,
+ );
+
+ cy.get('#single').realClick();
+
+ cy.get('[data-floating-ui-portal] > div').should('have.css', 'z-index', '10000');
+ });
+
it('flow: single uncontrolled', () => {
cy.viewport(1000, 500);
@@ -1401,7 +1431,43 @@ describe('plasma-b2c: Combobox', () => {
cy.matchImageSnapshot();
});
- it('keyboard interactions', () => {
+ it('keyboard interactions: single', () => {
+ cy.viewport(1000, 500);
+
+ const Component = () => {
+ return (
+
+
+ );
+ };
+
+ mount(
+
+
+
+
+
+
+
+
,
+ );
+
+ cy.get('button').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
+ it('prop: zIndex', () => {
+ mount(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+ );
+
+ cy.get('#single').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
+ it('prop: zIndex', () => {
+ mount(
+
+
+
,
+ );
+
+ cy.get('#single').realClick();
+
+ cy.get('[data-floating-ui-portal] > div').should('have.css', 'z-index', '10000');
+ });
+
+ it('prop: renderValue', () => {
+ cy.viewport(400, 800);
+
+ const Component = () => {
+ const [valueSingle, setValueSingle] = React.useState('paris');
+ const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']);
+
+ return (
+
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ {value3.includes('gradient') ? 'Градиент' : value3}
+ {opacity && {opacity.alpha} }
+
+ - =
- | {
- multiple?: false;
- value?: string;
- onChange?: (value: string) => void;
- /**
- * Если включено - будет выведено общее количество выбранных элементов вместо перечисления.
- * @default false
- */
- isTargetAmount?: never | false;
- /**
- * Ручная настройка количества выбранных элементов. Только при isTargetAmount === true.
- * @default undefined
- */
- targetAmount?: never;
- renderValue?: never;
- }
- | {
- multiple: true;
- value?: Array
+ ) => void;
setTextValue: React.Dispatch>;
+ multiple: boolean | undefined;
+ value: string | string[];
+ textValue: string;
+ valueToItemMap: ValueToItemMapType;
};
type ReturnedProps = {
@@ -56,6 +61,10 @@ export const useKeyNavigation = ({
handleListToggle,
handlePressDown,
setTextValue,
+ multiple,
+ value,
+ textValue,
+ valueToItemMap,
}: Props): ReturnedProps => {
const currentIndex: number = focusedPath?.[focusedPath.length - 1] || 0;
const currentLength: number = pathMap.get(path?.[focusedPath.length - 1]) || 0;
@@ -179,7 +188,19 @@ export const useKeyNavigation = ({
dispatchPath({ type: 'reset' });
dispatchFocusedPath({ type: 'reset' });
handleListToggle(false);
- setTextValue('');
+
+ if (multiple) {
+ setTextValue('');
+ } else if (textValue !== value) {
+ // Проверяем, отличается ли значение в инпуте от выбранного value после нажатия Tab/Enter.
+ // Если изменилось, то возвращаем label выбранного айтема.
+ // Если нет выбранного элемента, то стираем значение инпута.
+ if (isEmpty(value)) {
+ setTextValue('');
+ } else {
+ setTextValue(valueToItemMap.get(value as string)?.label || '');
+ }
+ }
break;
}
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx
index 991bdb5f8e..dc7b6c19df 100644
--- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx
+++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx
@@ -30,7 +30,7 @@ export const Item: FC = ({
ariaLevel,
ariaLabel,
}) => {
- const { value, label, disabled, contentLeft, contentRight } = item;
+ const { value, label, disabled, contentLeft, contentRight, className, ...rest } = item;
const ref = useRef(null);
@@ -83,7 +83,8 @@ export const Item: FC = ({
return (
;
/**
@@ -28,6 +28,10 @@ export type ItemOption = {
* Слот для контента справа
*/
contentRight?: ReactNode;
+ /**
+ * Classname для item
+ */
+ className?: string;
};
export type ItemOptionTransformed = ItemOption & { parent?: ItemOption | null };
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.styles.ts
new file mode 100644
index 0000000000..c5ae9af79b
--- /dev/null
+++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.styles.ts
@@ -0,0 +1,7 @@
+import { styled } from '@linaria/react';
+
+import { applyHidden } from '../../../../../mixins';
+
+export const SelectHidden = styled.select`
+ ${applyHidden()};
+`;
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.tsx
new file mode 100644
index 0000000000..886603430e
--- /dev/null
+++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.tsx
@@ -0,0 +1,65 @@
+import React, { ChangeEvent, forwardRef, useLayoutEffect, useRef } from 'react';
+import { useForkRef } from '@salutejs/plasma-core';
+
+import { createEvent } from '../../../../../utils';
+import { ComboboxProps } from '../../Combobox.types';
+import { ValueToItemMapType } from '../../hooks/getPathMaps';
+
+import { SelectHidden } from './SelectNative.styles';
+
+type Props = Pick & {
+ onChange: (value: ChangeEvent | null) => void;
+ onSetValue: (value: string | string[]) => void;
+ items: ValueToItemMapType;
+};
+
+export const SelectNative = forwardRef(
+ ({ name, multiple, items, value, onChange, onSetValue }, ref) => {
+ const values = (multiple ? value : [value]) as string[];
+ const selectRef = useRef(null);
+ const forkRef = useForkRef(selectRef, ref as any);
+ const options = Array.from(items.keys());
+
+ useLayoutEffect(() => {
+ const event = createEvent(selectRef);
+ if (onChange) {
+ onChange(event);
+ }
+ }, [values]);
+
+ useLayoutEffect(() => {
+ if (selectRef.current && !multiple) {
+ const valueInit = selectRef.current.value;
+
+ if (valueInit) {
+ onSetValue(valueInit);
+ }
+ }
+
+ if (selectRef.current && multiple) {
+ const valuesInit = Array.from(selectRef.current.selectedOptions).map((v) => v.value);
+ if (valuesInit.length !== 0) {
+ onSetValue(valuesInit);
+ }
+ }
+ }, []);
+
+ return (
+ <>
+
+ {options.map((v) => (
+
+ ))}
+
+
+ );
+ },
+);
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts
index 1331627a56..89c3371b83 100644
--- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts
+++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts
@@ -125,10 +125,7 @@ export const StyledTextField = styled(TextField)`
${textFieldTokens.chipCloseIconColor}: var(${comboboxTokens.textFieldChipCloseIconColor});
${textFieldTokens.chipOutlineSize}: var(${comboboxTokens.textFieldChipOutlineSize});
${textFieldTokens.chipWidth}: var(${comboboxTokens.textFieldChipWidth});
- ${textFieldTokens.chipPaddingTop}: var(${comboboxTokens.textFieldChipPaddingTop});
- ${textFieldTokens.chipPaddingRight}: var(${comboboxTokens.textFieldChipPaddingRight});
- ${textFieldTokens.chipPaddingBottom}: var(${comboboxTokens.textFieldChipPaddingBottom});
- ${textFieldTokens.chipPaddingLeft}: var(${comboboxTokens.textFieldChipPaddingLeft});
+ ${textFieldTokens.chipPadding}: var(${comboboxTokens.textFieldChipPadding});
${textFieldTokens.chipCloseIconSize}: var(${comboboxTokens.textFieldChipCloseIconSize});
${textFieldTokens.chipFontFamily}: var(${comboboxTokens.textFieldChipFontFamily});
${textFieldTokens.chipFontSize}: var(${comboboxTokens.textFieldChipFontSize});
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxOld/Combobox.tokens.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxOld/Combobox.tokens.ts
index 61906798cc..fc75a57cef 100644
--- a/packages/plasma-new-hope/src/components/Combobox/ComboboxOld/Combobox.tokens.ts
+++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxOld/Combobox.tokens.ts
@@ -173,10 +173,7 @@ export const tokens = {
chipBorderRadius: '--plasma-combobox-old-chip-border-radius',
chipWidth: '--plasma-combobox-old-chip-width',
chipHeight: '--plasma-combobox-old-chip-height',
- chipPaddingTop: '--plasma-combobox-old-chip-padding-top',
- chipPaddingRight: '--plasma-combobox-old-chip-padding-right',
- chipPaddingBottom: '--plasma-combobox-old-chip-padding-bottom',
- chipPaddingLeft: '--plasma-combobox-old-chip-padding-left',
+ chipPadding: '--plasma-combobox-old-chip-padding',
chipCloseIconSize: '--plasma-combobox-old-chip-close-icon-size',
chipFontFamily: '--plasma-combobox-old-chip-font-family',
chipFontSize: '--plasma-combobox-old-chip-font-size',
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxOld/ui/ComboboxChip/ComboboxChip.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxOld/ui/ComboboxChip/ComboboxChip.styles.ts
index 357121a4e6..6a6690a1a2 100644
--- a/packages/plasma-new-hope/src/components/Combobox/ComboboxOld/ui/ComboboxChip/ComboboxChip.styles.ts
+++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxOld/ui/ComboboxChip/ComboboxChip.styles.ts
@@ -24,8 +24,7 @@ export const StyledChip = styled(Chip)`
${chipTokens.borderRadius}: var(${tokens.chipBorderRadius});
${chipTokens.width}: var(${tokens.chipWidth});
${chipTokens.height}: var(${tokens.chipHeight});
- ${chipTokens.paddingRight}: var(${tokens.chipPaddingRight});
- ${chipTokens.paddingLeft}: var(${tokens.chipPaddingLeft});
+ ${chipTokens.padding}: var(${tokens.chipPadding});
${chipTokens.fontFamily}: var(${tokens.chipFontFamily});
${chipTokens.fontSize}: var(${tokens.chipFontSize});
${chipTokens.fontStyle}: var(${tokens.chipFontStyle});
diff --git a/packages/plasma-new-hope/src/components/Counter/Counter.tokens.ts b/packages/plasma-new-hope/src/components/Counter/Counter.tokens.ts
index 6af5298963..9f82597e8a 100644
--- a/packages/plasma-new-hope/src/components/Counter/Counter.tokens.ts
+++ b/packages/plasma-new-hope/src/components/Counter/Counter.tokens.ts
@@ -8,10 +8,7 @@ export const tokens = {
borderRadius: '--plasma-counter-border-radius',
height: '--plasma-counter-height',
- paddingTop: '--plasma-counter-padding-top',
- paddingRight: '--plasma-counter-padding-right',
- paddingBottom: '--plasma-counter-padding-bottom',
- paddingLeft: '--plasma-counter-padding-left',
+ padding: '--plasma-counter-padding',
fontFamily: '--plasma-counter-font-family',
fontSize: '--plasma-counter-font-size',
diff --git a/packages/plasma-new-hope/src/components/Counter/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Counter/variations/_size/base.ts
index d085a53930..c680cef70c 100644
--- a/packages/plasma-new-hope/src/components/Counter/variations/_size/base.ts
+++ b/packages/plasma-new-hope/src/components/Counter/variations/_size/base.ts
@@ -14,10 +14,7 @@ export const base = css`
height: var(${tokens.height});
- padding-top: var(${tokens.paddingTop});
- padding-right: var(${tokens.paddingRight});
- padding-bottom: var(${tokens.paddingBottom});
- padding-left: var(${tokens.paddingLeft});
+ padding: var(${tokens.padding});
&.${classes.round} {
width: var(${tokens.height});
diff --git a/packages/plasma-new-hope/src/components/Counter/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Counter/variations/_size/tokens.json
index f0b37696f9..386d17d87b 100644
--- a/packages/plasma-new-hope/src/components/Counter/variations/_size/tokens.json
+++ b/packages/plasma-new-hope/src/components/Counter/variations/_size/tokens.json
@@ -1,10 +1,7 @@
[
"--plasma-counter-border-radius",
"--plasma-counter-height",
- "--plasma-counter-padding-top",
- "--plasma-counter-padding-right",
- "--plasma-counter-padding-bottom",
- "--plasma-counter-padding-left",
+ "--plasma-counter-padding",
"--plasma-counter-font-family",
"--plasma-counter-font-size",
"--plasma-counter-font-style",
diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx
index bdfe3ab9b2..4a2625a816 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx
+++ b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx
@@ -192,3 +192,38 @@ export function App() {
);
}
```
+
+### Обязательность поля
+Обязательность поля задаётся с помощью свойства `required`.
+Если поле является обязательным, то у компонента появляется специальный индикатор.
+Изменить расположение индикатора можно с помощью свойства `requiredPlacement`, которое принимает значения `left` и `right`.
+
+```tsx live
+import React from 'react';
+import { DatePicker, IconButton } from '@salutejs/{{ package }}';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+ const ActionButton = () => {
+ return (
+
+
+ );
+ };
+
+ return (
+ {label} }
;
export type DatePickerRangeFieldProps = {
+ /**
+ * Задает выравнивание индикатора обязательности поля
+ * @default right
+ */
+ requiredPlacement?: 'left' | 'right';
+ /**
+ * Флаг обязательности поля
+ */
+ required?: boolean;
/**
* Значение по умолчанию для первого поля.
*/
diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts
index c3e299edfc..3e06cabcb8 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts
+++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts
@@ -1,18 +1,13 @@
import { css } from '@linaria/core';
import { tokens } from '../../../DatePicker.tokens';
-import { LeftHelper, StyledLabel } from '../../RangeDate.styles';
+import { LeftHelper } from '../../RangeDate.styles';
export const base = css`
&[readonly] {
cursor: default;
${tokens.textFieldBackgroundColorReadOnly}: transparent;
- ${StyledLabel} {
- display: block;
- color: var(${tokens.labelColorReadOnly});
- }
-
${LeftHelper} {
color: var(${tokens.leftHelperColorReadOnly});
}
diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts
index 9011d6e088..a7137bb653 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts
+++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts
@@ -1,20 +1,9 @@
import { css } from '@linaria/core';
import { tokens } from '../../../DatePicker.tokens';
-import { StyledLabel, LeftHelper } from '../../RangeDate.styles';
+import { LeftHelper } from '../../RangeDate.styles';
export const base = css`
- ${StyledLabel} {
- margin: var(${tokens.labelOffset});
-
- font-family: var(${tokens.labelFontFamily});
- font-size: var(${tokens.labelFontSize});
- font-style: var(${tokens.labelFontStyle});
- font-weight: var(${tokens.labelFontWeight});
- letter-spacing: var(${tokens.labelLetterSpacing});
- line-height: var(${tokens.labelLineHeight});
- }
-
${LeftHelper} {
margin: var(${tokens.leftHelperOffset});
diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts
index 25513f01f3..e680b65185 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts
+++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts
@@ -1,14 +1,9 @@
import { css } from '@linaria/core';
-import { LeftHelper, StyledLabel } from '../../RangeDate.styles';
+import { LeftHelper } from '../../RangeDate.styles';
import { tokens } from '../../../DatePicker.tokens';
export const base = css`
- ${StyledLabel} {
- display: block;
- color: var(${tokens.labelColor});
- }
-
${LeftHelper} {
color: var(${tokens.leftHelperColor});
}
diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts
index 3e6e858d66..85cd2ccd5a 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts
+++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts
@@ -44,12 +44,31 @@ export const StyledInput = styled(TextField)`
${textFieldTokens.padding}: var(${tokens.textFieldPadding});
${textFieldTokens.labelInnerPadding}: var(${tokens.labelInnerPadding});
${textFieldTokens.contentLabelInnerPadding}: var(${tokens.contentLabelInnerPadding});
+
+ ${textFieldTokens.labelOffset}: var(${tokens.labelOffset});
+
+ ${textFieldTokens.labelFontFamily}: var(${tokens.labelFontFamily});
+ ${textFieldTokens.labelFontStyle}: var(${tokens.labelFontStyle});
+ ${textFieldTokens.labelFontSize}: var(${tokens.labelFontSize});
+ ${textFieldTokens.labelFontWeight}: var(${tokens.labelFontWeight});
+ ${textFieldTokens.labelLetterSpacing}: var(${tokens.labelLetterSpacing});
+ ${textFieldTokens.labelLineHeight}: var(${tokens.labelLineHeight});
+
${textFieldTokens.labelInnerFontFamily}: var(${tokens.labelInnerFontFamily});
${textFieldTokens.labelInnerFontSize}: var(${tokens.labelInnerFontSize});
${textFieldTokens.labelInnerFontStyle}: var(${tokens.labelInnerFontStyle});
${textFieldTokens.labelInnerFontWeight}: var(${tokens.labelInnerFontWeight});
${textFieldTokens.labelInnerLetterSpacing}: var(${tokens.labelInnerLetterSpacing});
${textFieldTokens.labelInnerLineHeight}: var(${tokens.labelInnerLineHeight});
+ ${textFieldTokens.labelColorReadOnly}: var(${tokens.labelColorReadOnly});
+
+ ${textFieldTokens.indicatorColor}: var(${tokens.indicatorColor});
+ ${textFieldTokens.indicatorSizeInner}: var(${tokens.indicatorSize});
+ ${textFieldTokens.indicatorSizeOuter}: var(${tokens.indicatorSizeOuter});
+ ${textFieldTokens.indicatorLabelPlacementInner}: var(${tokens.indicatorPlacement});
+ ${textFieldTokens.indicatorLabelPlacementOuter}: var(${tokens.indicatorOuterPlacement});
+ ${textFieldTokens.indicatorLabelPlacementInnerRight}: var(${tokens.indicatorPlacementRight});
+ ${textFieldTokens.indicatorLabelPlacementOuterRight}: var(${tokens.indicatorOuterPlacementRight});
${textFieldTokens.leftContentMargin}: var(${tokens.textFieldLeftContentMargin});
${textFieldTokens.rightContentMargin}: var(${tokens.textFieldRightContentMargin});
@@ -100,6 +119,4 @@ export const base = css`
}
`;
-export const StyledLabel = styled.label``;
-
export const LeftHelper = styled.div``;
diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx
index c44af557f1..b880d34b1e 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx
+++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx
@@ -14,7 +14,7 @@ import { base as sizeCSS } from './variations/_size/base';
import { base as viewCSS } from './variations/_view/base';
import { base as disabledCSS } from './variations/_disabled/base';
import { base as readOnlyCSS } from './variations/_readonly/base';
-import { LeftHelper, StyledInput, StyledLabel, StyledPopover, base } from './SingleDate.styles';
+import { LeftHelper, StyledInput, StyledPopover, base } from './SingleDate.styles';
export const datePickerRoot = (
Root: RootProps>,
@@ -28,6 +28,8 @@ export const datePickerRoot = (
label,
labelPlacement = 'outer',
keepPlaceholder,
+ required = false,
+ requiredPlacement = 'right',
placeholder,
leftHelper,
contentLeft,
@@ -84,8 +86,6 @@ export const datePickerRoot = (
const [calendarValue, setCalendarValue] = useState(formatCalendarValue(defaultDate, format, lang));
const [inputValue, setInputValue] = useState(formatInputValue({ value: defaultDate, format, lang }));
- const innerLabelPlacement = labelPlacement === 'inner';
-
const dateFormatDelimiter = useCallback(() => getDateFormatDelimiter(format), [format]);
const { datePickerErrorClass, datePickerSuccessClass, handleChangeValue, handleCommitDate } = useDatePicker(
@@ -156,7 +156,11 @@ export const datePickerRoot = (
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}
- {...(innerLabelPlacement && { label, labelPlacement, keepPlaceholder })}
+ required={required}
+ requiredPlacement={requiredPlacement}
+ label={label}
+ labelPlacement={labelPlacement}
+ keepPlaceholder={keepPlaceholder}
/>
);
@@ -184,7 +188,6 @@ export const datePickerRoot = (
ref={ref}
{...rest}
>
- {!innerLabelPlacement && label && {label} }
{
}, '');
};
+export const StyledPanel = styled(Panel)`
+ ${panelTokens.closeColor}: var(${tokens.closeIconColor});
+`;
+
export const StyledPopup = styled(Popup)<{
placement: DrawerPlacement;
width?: number | string;
diff --git a/packages/plasma-new-hope/src/components/Drawer/Drawer.tokens.ts b/packages/plasma-new-hope/src/components/Drawer/Drawer.tokens.ts
index ae98dc3344..71915c9cfc 100644
--- a/packages/plasma-new-hope/src/components/Drawer/Drawer.tokens.ts
+++ b/packages/plasma-new-hope/src/components/Drawer/Drawer.tokens.ts
@@ -20,4 +20,5 @@ export const tokens = {
contentBackgroundColor: '--plasma-drawer-content-background-color',
padding: '--plasma-drawer-padding',
borderRadius: '--plasma-drawer-border-radius',
+ closeIconColor: '--plasma-drawer-close-icon-color',
};
diff --git a/packages/plasma-new-hope/src/components/Drawer/Drawer.tsx b/packages/plasma-new-hope/src/components/Drawer/Drawer.tsx
index 9c7e9dc892..86a47f9b0a 100644
--- a/packages/plasma-new-hope/src/components/Drawer/Drawer.tsx
+++ b/packages/plasma-new-hope/src/components/Drawer/Drawer.tsx
@@ -1,12 +1,10 @@
import React, { forwardRef, useMemo } from 'react';
import { useForkRef, safeUseId } from '@salutejs/plasma-core';
-import { component, mergeConfig } from '../../engines';
import type { RootProps } from '../../engines';
import { usePopupContext } from '../Popup';
import { Overlay } from '../Overlay';
import { DEFAULT_Z_INDEX } from '../Popup/utils';
-import { panelConfig } from '../Panel';
import { cx, getSizeValueFromProp } from '../../utils';
import { useFocusTrap } from '../../hooks';
@@ -15,13 +13,11 @@ import type { DrawerProps } from './Drawer.types';
import { base as viewCSS } from './variations/_view/base';
import { base as sizeCSS } from './variations/_size/base';
import { base as borderRadiusCSS } from './variations/_borderRadius/base';
-import { StyledPopup } from './Drawer.styles';
+import { StyledPopup, StyledPanel } from './Drawer.styles';
import { getIdLastDrawer } from './DrawerContext';
import { useDrawer } from './hooks';
// issue #823
-const mergedPanelConfig = mergeConfig(panelConfig);
-const Panel = component(mergedPanelConfig);
export const drawerRoot = (Root: RootProps) =>
forwardRef(
@@ -134,9 +130,9 @@ export const drawerRoot = (Root: RootProps) =>
style={{ width: innerWidth, height: innerHeight }}
borderRadius={borderRadius}
>
-
+
{children}
-
+
);
diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx
index 7c8fc8e6e9..c321b2e111 100644
--- a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx
+++ b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx
@@ -50,6 +50,7 @@ export const dropdownRoot = (Root: RootProps
= {
* Callback для кастомной настройки айтема в выпадающем списке.
*/
renderItem?: (item: T) => React.ReactNode;
+ /**
+ * CSS-свойство z-index для выпадающего списка.
+ */
+ zIndex?: CSSProperties['zIndex'];
/**
* Обработчик клика по item.
@@ -130,6 +134,7 @@ export type FloatingPopoverProps = {
isInner?: boolean;
portal?: DropdownProps['portal'];
offset?: [number, number];
+ zIndex?: DropdownProps['zIndex'];
};
export type ItemContext = {
diff --git a/packages/plasma-new-hope/src/components/Dropdown/FloatingPopover.tsx b/packages/plasma-new-hope/src/components/Dropdown/FloatingPopover.tsx
index c599656882..7a45eafddd 100644
--- a/packages/plasma-new-hope/src/components/Dropdown/FloatingPopover.tsx
+++ b/packages/plasma-new-hope/src/components/Dropdown/FloatingPopover.tsx
@@ -12,7 +12,7 @@ import { safeUseId } from '@salutejs/plasma-core';
import { FloatingPopoverProps } from './Dropdown.types';
const FloatingPopover = forwardRef(
- ({ target, children, opened, onToggle, placement, portal, offset = [0, 0], isInner, trigger }, ref) => {
+ ({ target, children, opened, onToggle, placement, portal, offset = [0, 0], isInner, trigger, zIndex }, ref) => {
const { refs, floatingStyles } = useFloating({
placement: placement === 'auto' ? undefined : placement,
open: opened,
@@ -96,7 +96,7 @@ const FloatingPopover = forwardRef(
onMouseLeave={handleFloatingMouseLeave}
style={{
...floatingStyles,
- zIndex: 1,
+ zIndex: zIndex || 1000,
}}
>
{children}
diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx
index 4944120c1b..381e5003f0 100644
--- a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx
+++ b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx
@@ -26,7 +26,18 @@ export const DropdownItem: FC = ({
ariaLevel,
ariaLabel,
}) => {
- const { value, label, disabled, isDisabled, contentLeft, contentRight, dividerBefore, dividerAfter } = item;
+ const {
+ value,
+ label,
+ disabled,
+ isDisabled,
+ contentLeft,
+ contentRight,
+ dividerBefore,
+ dividerAfter,
+ className,
+ ...rest
+ } = item;
const ref = useRef(null);
@@ -94,8 +105,9 @@ export const DropdownItem: FC = ({
{dividerBefore &&
{children}
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.ts
index 922f61c1eb..e0c718e090 100644
--- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.ts
+++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.ts
@@ -3,8 +3,9 @@ import React from 'react';
import { PathAction, PathState, FocusedPathAction, FocusedPathState } from '../reducers';
import type { ItemOptionTransformed } from '../ui/Inner/ui/Item/Item.types';
+import { isEmpty } from '../../../../utils';
-import { PathMapType, FocusedToValueMapType } from './getPathMaps';
+import { PathMapType, FocusedToValueMapType, ValueToItemMapType } from './getPathMaps';
const JUMP_SIZE = 10;
@@ -40,6 +41,10 @@ type Props = {
handleListToggle: (opened: boolean) => void;
handlePressDown: (item: ItemOptionTransformed, e?: React.MouseEvent
+
+ );
+}
+```
diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts
index a2407ce2fb..25c16a6214 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts
+++ b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts
@@ -48,6 +48,16 @@ export const tokens = {
labelLetterSpacing: '--plasma-date-picker__label-letter-spacing',
labelLineHeight: '--plasma-date-picker__label-line-height',
+ /** Токены индикатора */
+ indicatorColor: '--plasma-date-picker__indicator-color',
+
+ indicatorSize: '--plasma-date-picker__indicator-size',
+ indicatorSizeOuter: '--plasma-date-picker__indicator-size-outer',
+ indicatorPlacement: '--plasma-date-picker__indicator-placement',
+ indicatorPlacementRight: '--plasma-date-picker__indicator-placement-right',
+ indicatorOuterPlacement: '--plasma-date-picker__indicator-placement-outer',
+ indicatorOuterPlacementRight: '--plasma-date-picker__indicator-placement-outer-right',
+
/* label-placement-inner */
labelInnerFontFamily: '--plasma-date-picker-placement_inner__label-font-family',
labelInnerFontStyle: '--plasma-date-picker-placement_inner__label-font-style',
diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts
index 89b573eed1..7704ce4468 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts
+++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts
@@ -75,6 +75,14 @@ export const StyledRange = styled(Range)`
${rangeTokens.labelLetterSpacing}: var(${tokens.labelLetterSpacing});
${rangeTokens.labelLineHeight}: var(${tokens.labelLineHeight});
+ ${rangeTokens.indicatorColor}: var(${tokens.indicatorColor});
+ ${rangeTokens.indicatorSize}: var(${tokens.indicatorSize});
+ ${rangeTokens.indicatorSizeOuter}: var(${tokens.indicatorSizeOuter});
+ ${rangeTokens.indicatorPlacement}: var(${tokens.indicatorPlacement});
+ ${rangeTokens.indicatorOuterPlacement}: var(${tokens.indicatorOuterPlacement});
+ ${rangeTokens.indicatorPlacementRight}: var(${tokens.indicatorPlacementRight});
+ ${rangeTokens.indicatorOuterPlacementRight}: var(${tokens.indicatorOuterPlacementRight});
+
${rangeTokens.textFieldHeight}: var(${tokens.textFieldHeight});
${rangeTokens.textFieldBorderRadius}: var(${tokens.textFieldBorderRadius});
${rangeTokens.textFieldPadding}: var(${tokens.textFieldPadding});
@@ -112,6 +120,4 @@ export const base = css`
display: inline-block;
`;
-export const StyledLabel = styled.label``;
-
export const LeftHelper = styled.div``;
diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx
index 0ead1ff91f..a26131750b 100644
--- a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx
+++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx
@@ -24,7 +24,7 @@ import { base as sizeCSS } from './variations/_size/base';
import { base as viewCSS } from './variations/_view/base';
import { base as disabledCSS } from './variations/_disabled/base';
import { base as readOnlyCSS } from './variations/_readonly/base';
-import { LeftHelper, StyledLabel, StyledRange, base } from './RangeDate.styles';
+import { LeftHelper, StyledRange, base } from './RangeDate.styles';
import { RangeDatePopover } from './RangeDatePopover/RangeDatePopover';
export const datePickerRangeRoot = (
@@ -69,6 +69,9 @@ export const datePickerRangeRoot = (
firstTextfieldTextAfter,
secondTextfieldTextAfter,
+ required,
+ requiredPlacement = 'right',
+
format = 'DD.MM.YYYY',
lang = 'ru',
maskWithFormat,
@@ -286,6 +289,9 @@ export const datePickerRangeRoot = (
autoComplete={autoComplete}
dividerIcon={dividerIcon}
dividerVariant={dividerVariant}
+ label={label}
+ required={required}
+ requiredPlacement={requiredPlacement}
disabled={disabled}
readOnly={!disabled && readOnly}
firstPlaceholder={firstPlaceholder}
@@ -382,7 +388,6 @@ export const datePickerRangeRoot = (
readOnly={!disabled && readOnly}
{...rest}
>
- {label &&