@charcoal-ui/react 6.1.1-beta.1 → 6.1.1-beta.2
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.
- package/dist/components/DropdownSelector/Popover/index.d.ts.map +1 -1
- package/dist/components/DropdownSelector/Popover/index2.cjs +22 -12
- package/dist/components/DropdownSelector/Popover/index2.cjs.map +1 -1
- package/dist/components/DropdownSelector/Popover/index2.js +22 -12
- package/dist/components/DropdownSelector/Popover/index2.js.map +1 -1
- package/dist/components/Notification/Toast/index2.js +16 -20
- package/dist/components/Notification/Toast/index2.js.map +1 -1
- package/dist/components/Pagination/index2.js +52 -60
- package/dist/components/Pagination/index2.js.map +1 -1
- package/dist/index.css +1163 -1163
- package/dist/layered.css +1163 -1163
- package/dist/layered.css.map +1 -1
- package/package.json +3 -3
- package/src/components/DropdownSelector/Popover/index.tsx +28 -22
- package/src/components/DropdownSelector/index.browser.test.tsx +64 -0
- package/src/components/DropdownSelector/index.story.tsx +38 -12
|
@@ -548,20 +548,46 @@ export const InertWorkaroundPenOutside: StoryObj<typeof DropdownSelector> = {
|
|
|
548
548
|
render: function Render() {
|
|
549
549
|
const [selected, setSelected] = useState('1')
|
|
550
550
|
const [backgroundClickCount, setBackgroundClickCount] = useState(0)
|
|
551
|
+
const [behindOptionsClickCount, setBehindOptionsClickCount] = useState(0)
|
|
551
552
|
|
|
552
553
|
return (
|
|
553
554
|
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 64 }}>
|
|
554
|
-
<div style={{
|
|
555
|
-
<
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
555
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
556
|
+
<div style={{ position: 'relative', width: 288 }}>
|
|
557
|
+
<div style={{ position: 'relative', zIndex: 1 }}>
|
|
558
|
+
<DropdownSelector
|
|
559
|
+
value={selected}
|
|
560
|
+
onChange={setSelected}
|
|
561
|
+
label="DropdownSelector"
|
|
562
|
+
inertWorkaround
|
|
563
|
+
>
|
|
564
|
+
<DropdownMenuItem value="1">Option 1</DropdownMenuItem>
|
|
565
|
+
<DropdownMenuItem value="2">Option 2</DropdownMenuItem>
|
|
566
|
+
<DropdownMenuItem value="3">Option 3</DropdownMenuItem>
|
|
567
|
+
</DropdownSelector>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
<div>
|
|
571
|
+
<Button
|
|
572
|
+
data-testid="behind-options-button"
|
|
573
|
+
onClick={() => {
|
|
574
|
+
setBehindOptionsClickCount((count) => count + 1)
|
|
575
|
+
}}
|
|
576
|
+
style={{
|
|
577
|
+
position: 'relative',
|
|
578
|
+
top: 0,
|
|
579
|
+
left: 0,
|
|
580
|
+
width: '100%',
|
|
581
|
+
height: 120,
|
|
582
|
+
}}
|
|
583
|
+
>
|
|
584
|
+
Button behind options
|
|
585
|
+
</Button>
|
|
586
|
+
</div>
|
|
587
|
+
<div data-testid="selected-option">Selected option: {selected}</div>
|
|
588
|
+
<div data-testid="behind-options-click-count">
|
|
589
|
+
Behind options click count: {behindOptionsClickCount}
|
|
590
|
+
</div>
|
|
565
591
|
</div>
|
|
566
592
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
567
593
|
<Button
|
|
@@ -570,7 +596,7 @@ export const InertWorkaroundPenOutside: StoryObj<typeof DropdownSelector> = {
|
|
|
570
596
|
setBackgroundClickCount((count) => count + 1)
|
|
571
597
|
}}
|
|
572
598
|
>
|
|
573
|
-
|
|
599
|
+
Outside background button
|
|
574
600
|
</Button>
|
|
575
601
|
<div data-testid="background-click-count">
|
|
576
602
|
Background click count: {backgroundClickCount}
|