Skip to content

Commit fc3adc0

Browse files
JialeclJialecl
committed
Merge branch 'jialecl/themeGenerator-landingContent' of https://github.com/dxc-technology/halstack-react into jialecl/themeGenerator-landingContent
2 parents 587a631 + 46cf6c6 commit fc3adc0

13 files changed

Lines changed: 595 additions & 502 deletions

File tree

‎apps/website/screens/components/file-input/code/FileInputCodePage.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,21 @@ const sections = [
188188
<TableCode>false</TableCode>
189189
</td>
190190
</tr>
191+
<tr>
192+
<td>
193+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
194+
<StatusBadge status="new" />
195+
size
196+
</DxcFlex>
197+
</td>
198+
<td>
199+
<TableCode>'medium' | 'fillParent'</TableCode>
200+
</td>
201+
<td>Size of the component.</td>
202+
<td>
203+
<TableCode>'medium'</TableCode>
204+
</td>
205+
</tr>
191206
<tr>
192207
<td>tabIndex</td>
193208
<td>

‎package-lock.json‎

Lines changed: 333 additions & 340 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/lib/src/base-menu/GroupItem.tsx‎

Lines changed: 62 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useContext, useId } from "react";
1+
import { useContext, useEffect, useId, useState } from "react";
22
import DxcIcon from "../icon/Icon";
33
import SubMenu from "./SubMenu";
44
import ItemAction from "./ItemAction";
@@ -10,14 +10,17 @@ import BaseMenuContext from "./BaseMenuContext";
1010

1111
const GroupItem = ({ items, ...props }: GroupItemProps) => {
1212
const groupMenuId = `group-menu-${useId()}`;
13-
14-
const NavigationTreeId = `sidenav-${useId()}`;
13+
const navigationTreeId = `sidenav-${useId()}`;
1514
const contextValue = useContext(BaseMenuContext) ?? {};
1615
const { groupSelected, isOpen, toggleOpen, hasPopOver, isHorizontal } = useGroupItem(
1716
items,
1817
contextValue,
1918
props.defaultOpen
2019
);
20+
const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
21+
useEffect(() => {
22+
setPortalContainer(document?.getElementById(`${navigationTreeId}-portal`));
23+
}, []);
2124

2225
return hasPopOver ? (
2326
<>
@@ -38,60 +41,64 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
3841
{...props}
3942
/>
4043
</Popover.Trigger>
41-
<Popover.Portal container={document.getElementById(`${NavigationTreeId}-portal`)}>
42-
<BaseMenuContext.Provider value={{ ...contextValue, displayGroupLines: false, hasPopOver: false }}>
43-
<Popover.Content
44-
aria-label="Group details"
45-
onKeyDown={(event) => {
46-
if (event.key === "Escape") {
47-
toggleOpen();
48-
}
49-
}}
50-
align="start"
51-
side={isHorizontal ? "bottom" : "right"}
52-
style={{
53-
zIndex: "var(--z-contextualmenu)",
54-
padding: "var(--spacing-padding-xs)",
55-
boxShadow: "var(--shadow-100)",
56-
backgroundColor: "var(--color-bg-neutral-lightest)",
57-
borderRadius: "var(--border-radius-m)",
58-
...(isHorizontal
59-
? {}
60-
: {
61-
display: "flex",
62-
flexDirection: "column",
63-
gap: "var(--spacing-gap-xxs)",
64-
}),
65-
}}
66-
sideOffset={isHorizontal ? 16 : 0}
67-
onInteractOutside={() => toggleOpen()}
68-
>
69-
{!isHorizontal && props.depthLevel === 0 && (
70-
<ItemAction
71-
aria-controls={isOpen ? groupMenuId : undefined}
72-
aria-expanded={isOpen ? true : undefined}
73-
aria-pressed={groupSelected && !isOpen}
74-
collapseIcon={isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />}
75-
onClick={() => toggleOpen()}
76-
selected={groupSelected && !isOpen}
77-
{...props}
78-
icon={undefined}
79-
/>
80-
)}
81-
<SubMenu id={groupMenuId} depthLevel={props.depthLevel} isPopOver={true}>
82-
{items.map((item, index) => (
83-
<MenuItem
84-
item={item}
85-
depthLevel={isHorizontal ? props.depthLevel : props.depthLevel + 1}
86-
key={`${item.label}-${index}`}
44+
{portalContainer && (
45+
<Popover.Portal container={portalContainer}>
46+
<BaseMenuContext.Provider value={{ ...contextValue, displayGroupLines: false, hasPopOver: false }}>
47+
<Popover.Content
48+
aria-label="Group details"
49+
onKeyDown={(event) => {
50+
if (event.key === "Escape") {
51+
toggleOpen();
52+
}
53+
}}
54+
align="start"
55+
side={isHorizontal ? "bottom" : "right"}
56+
style={{
57+
zIndex: "var(--z-contextualmenu)",
58+
padding: "var(--spacing-padding-xs)",
59+
boxShadow: "var(--shadow-100)",
60+
backgroundColor: "var(--color-bg-neutral-lightest)",
61+
borderRadius: "var(--border-radius-m)",
62+
...(isHorizontal
63+
? {}
64+
: {
65+
display: "flex",
66+
flexDirection: "column",
67+
gap: "var(--spacing-gap-xxs)",
68+
}),
69+
}}
70+
sideOffset={isHorizontal ? 16 : 0}
71+
onInteractOutside={() => toggleOpen()}
72+
>
73+
{!isHorizontal && props.depthLevel === 0 && (
74+
<ItemAction
75+
aria-controls={isOpen ? groupMenuId : undefined}
76+
aria-expanded={isOpen ? true : undefined}
77+
aria-pressed={groupSelected && !isOpen}
78+
collapseIcon={
79+
isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />
80+
}
81+
onClick={() => toggleOpen()}
82+
selected={groupSelected && !isOpen}
83+
{...props}
84+
icon={undefined}
8785
/>
88-
))}
89-
</SubMenu>
90-
</Popover.Content>
91-
</BaseMenuContext.Provider>
92-
</Popover.Portal>
86+
)}
87+
<SubMenu id={groupMenuId} depthLevel={props.depthLevel} isPopOver={true}>
88+
{items.map((item, index) => (
89+
<MenuItem
90+
item={item}
91+
depthLevel={isHorizontal ? props.depthLevel : props.depthLevel + 1}
92+
key={`${item.label}-${index}`}
93+
/>
94+
))}
95+
</SubMenu>
96+
</Popover.Content>
97+
</BaseMenuContext.Provider>
98+
</Popover.Portal>
99+
)}
93100
</Popover.Root>
94-
<div id={`${NavigationTreeId}-portal`} style={{ position: "absolute" }} />
101+
<div id={`${navigationTreeId}-portal`} style={{ position: "absolute" }} />
95102
</>
96103
) : (
97104
<>

‎packages/lib/src/date-input/DateInput.tsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,8 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
150150
: null
151151
);
152152
const [sideOffset, setSideOffset] = useState(SIDEOFFSET);
153+
const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
154+
153155
const translatedLabels = useContext(HalstackLanguageContext);
154156
const dateRef = useRef<HTMLDivElement | null>(null);
155157
const popoverContentRef = useRef<HTMLDivElement | null>(null);
@@ -258,6 +260,9 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
258260
closeCalendar();
259261
}
260262
};
263+
useEffect(() => {
264+
setPortalContainer(document?.getElementById(`${calendarId}-portal`));
265+
}, []);
261266

262267
useEffect(() => {
263268
window.addEventListener("scroll", adjustSideOffset);
@@ -327,20 +332,23 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
327332
ariaLabel={ariaLabel}
328333
/>
329334
</Popover.Trigger>
330-
<Popover.Portal container={document.getElementById(`${calendarId}-portal`)}>
331-
<StyledPopoverContent
332-
sideOffset={sideOffset}
333-
align="end"
334-
aria-modal
335-
onBlur={handleDatePickerOnBlur}
336-
onKeyDown={handleDatePickerEscKeydown}
337-
ref={popoverContentRef}
338-
>
339-
<DatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} />
340-
</StyledPopoverContent>
341-
</Popover.Portal>
335+
{portalContainer && (
336+
<Popover.Portal container={portalContainer}>
337+
<StyledPopoverContent
338+
sideOffset={sideOffset}
339+
align="end"
340+
aria-modal
341+
onBlur={handleDatePickerOnBlur}
342+
onKeyDown={handleDatePickerEscKeydown}
343+
ref={popoverContentRef}
344+
>
345+
<DatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} />
346+
</StyledPopoverContent>
347+
</Popover.Portal>
348+
)}
342349
</Popover.Root>
343350
</DateInputContainer>
351+
344352
<div id={`${calendarId}-portal`} style={{ position: "absolute" }} />
345353
</>
346354
);

‎packages/lib/src/dropdown/Dropdown.tsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as Popover from "@radix-ui/react-popover";
2-
import { FocusEvent, KeyboardEvent, useCallback, useId, useLayoutEffect, useRef, useState } from "react";
2+
import { FocusEvent, KeyboardEvent, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
33
import styled from "@emotion/styled";
44
import { getMargin } from "../common/utils";
55
import { spaces } from "../common/variables";
@@ -131,6 +131,10 @@ const DxcDropdown = ({
131131
const menuId = `menu-${id}`;
132132
const [isOpen, changeIsOpen] = useState(false);
133133
const [visualFocusIndex, setVisualFocusIndex] = useState(0);
134+
const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
135+
useEffect(() => {
136+
setPortalContainer(document?.getElementById(`${id}-portal`));
137+
}, []);
134138

135139
const triggerRef = useRef<HTMLButtonElement | null>(null);
136140
const menuRef = useRef<HTMLUListElement | null>(null);
@@ -300,23 +304,26 @@ const DxcDropdown = ({
300304
</DropdownTrigger>
301305
</Popover.Trigger>
302306
</Tooltip>
303-
<Popover.Portal container={document.getElementById(`${id}-portal`)}>
304-
<Popover.Content aria-label="Dropdown options" asChild sideOffset={1}>
305-
<DropdownMenu
306-
id={menuId}
307-
dropdownTriggerId={triggerId}
308-
options={options}
309-
iconsPosition={optionsIconPosition}
310-
visualFocusIndex={visualFocusIndex}
311-
menuItemOnClick={handleMenuItemOnClick}
312-
onKeyDown={handleMenuOnKeyDown}
313-
styles={{ width }}
314-
ref={menuRef}
315-
/>
316-
</Popover.Content>
317-
</Popover.Portal>
307+
{portalContainer && (
308+
<Popover.Portal container={portalContainer}>
309+
<Popover.Content aria-label="Dropdown options" asChild sideOffset={1}>
310+
<DropdownMenu
311+
id={menuId}
312+
dropdownTriggerId={triggerId}
313+
options={options}
314+
iconsPosition={optionsIconPosition}
315+
visualFocusIndex={visualFocusIndex}
316+
menuItemOnClick={handleMenuItemOnClick}
317+
onKeyDown={handleMenuOnKeyDown}
318+
styles={{ width }}
319+
ref={menuRef}
320+
/>
321+
</Popover.Content>
322+
</Popover.Portal>
323+
)}
318324
</Popover.Root>
319325
</DropdownContainer>
326+
320327
<div id={`${id}-portal`} style={{ position: "absolute" }} />
321328
</>
322329
);

‎packages/lib/src/file-input/FileInput.stories.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from "@storybook/react-vite";
22
import ExampleContainer from "../../.storybook/components/ExampleContainer";
33
import Title from "../../.storybook/components/Title";
44
import DxcFileInput from "./FileInput";
5+
import DxcContainer from "../container/Container";
56

67
export default {
78
title: "File Input",
@@ -510,6 +511,33 @@ const FileInput = () => (
510511
margin="xxlarge"
511512
/>
512513
</ExampleContainer>
514+
<Title title="Sizes" theme="light" level={3} />
515+
<ExampleContainer>
516+
<Title title="fillParent size" theme="light" level={4} />
517+
<DxcContainer width="200px">
518+
<DxcFileInput
519+
label="File input"
520+
helperText="Please select files"
521+
value={fileExample}
522+
callbackFile={() => {}}
523+
mode="filedrop"
524+
size="fillParent"
525+
/>
526+
</DxcContainer>
527+
</ExampleContainer>
528+
<ExampleContainer>
529+
<Title title="fillParent size" theme="light" level={4} />
530+
<DxcContainer width="200px">
531+
<DxcFileInput
532+
label="File input"
533+
helperText="Please select files"
534+
value={fileExample}
535+
callbackFile={() => {}}
536+
mode="dropzone"
537+
size="fillParent"
538+
/>
539+
</DxcContainer>
540+
</ExampleContainer>
513541
</>
514542
);
515543
// const EllipsisError = () => {

0 commit comments

Comments
 (0)