From 02ab2d244ad6cac3f87999fa07d1218ac9bd2fc3 Mon Sep 17 00:00:00 2001 From: Jon Ambas Date: Fri, 17 Nov 2023 17:53:30 -0500 Subject: [PATCH] fix(react): fix z-index issues with DateField inside a Drawer (#181) * fix(react): fix z-index issues with DateField inside a Drawer * chore(change): add change --- .changeset/metal-students-add.md | 5 + libra/components/Drawer.libra.tsx | 14 +- package-lock.json | 196 +++++++++++++++++++- packages/react/package.json | 4 +- packages/react/src/date-field/DateField.tsx | 49 +++-- 5 files changed, 244 insertions(+), 24 deletions(-) create mode 100644 .changeset/metal-students-add.md diff --git a/.changeset/metal-students-add.md b/.changeset/metal-students-add.md new file mode 100644 index 0000000..e5f78f9 --- /dev/null +++ b/.changeset/metal-students-add.md @@ -0,0 +1,5 @@ +--- +'@sweatpants/react': patch +--- + +Fix DateField z-index when rendered inside a Drawer diff --git a/libra/components/Drawer.libra.tsx b/libra/components/Drawer.libra.tsx index 6c22790..d1e7e85 100644 --- a/libra/components/Drawer.libra.tsx +++ b/libra/components/Drawer.libra.tsx @@ -1,4 +1,11 @@ -import { Button, Text, Drawer, Stack } from '../../packages/react/src'; +import { + Button, + Text, + Drawer, + Stack, + DateField, + Select +} from '../../packages/react/src'; directory('Drawer', () => { add('Default', () => { @@ -8,6 +15,11 @@ directory('Drawer', () => { Drawer + + diff --git a/package-lock.json b/package-lock.json index 7c48b62..2ca0b2e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2254,6 +2254,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.4.tgz", "integrity": "sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.1", @@ -2304,6 +2305,7 @@ }, "node_modules/@radix-ui/react-dismissable-layer": { "version": "1.0.4", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", @@ -2346,6 +2348,7 @@ }, "node_modules/@radix-ui/react-focus-scope": { "version": "1.0.3", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", @@ -2531,6 +2534,7 @@ }, "node_modules/@radix-ui/react-popper": { "version": "1.1.2", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", @@ -2562,6 +2566,7 @@ }, "node_modules/@radix-ui/react-portal": { "version": "1.0.3", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", @@ -2630,6 +2635,7 @@ }, "node_modules/@radix-ui/react-select": { "version": "1.2.2", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", @@ -13599,9 +13605,9 @@ "version": "0.7.18", "license": "MIT", "dependencies": { - "@radix-ui/react-dialog": "1.0.4", + "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-popover": "1.0.7", - "@radix-ui/react-select": "1.2.2", + "@radix-ui/react-select": "2.0.0", "@radix-ui/react-slot": "1.0.2", "@react-hook/resize-observer": "1.2.6", "date-fns": "2.30.0", @@ -13617,6 +13623,192 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } + }, + "packages/react/node_modules/@radix-ui/react-dialog": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz", + "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "packages/react/node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", + "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-escape-keydown": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "packages/react/node_modules/@radix-ui/react-focus-scope": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz", + "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "packages/react/node_modules/@radix-ui/react-popper": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz", + "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-rect": "1.0.1", + "@radix-ui/react-use-size": "1.0.1", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "packages/react/node_modules/@radix-ui/react-portal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", + "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "packages/react/node_modules/@radix-ui/react-select": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz", + "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.1", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } } } } diff --git a/packages/react/package.json b/packages/react/package.json index ff90661..f550a34 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -29,9 +29,9 @@ "@types/date-fns": "2.6.0" }, "dependencies": { - "@radix-ui/react-dialog": "1.0.4", + "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-popover": "1.0.7", - "@radix-ui/react-select": "1.2.2", + "@radix-ui/react-select": "2.0.0", "@radix-ui/react-slot": "1.0.2", "@react-hook/resize-observer": "1.2.6", "date-fns": "2.30.0", diff --git a/packages/react/src/date-field/DateField.tsx b/packages/react/src/date-field/DateField.tsx index 143a283..64c3516 100644 --- a/packages/react/src/date-field/DateField.tsx +++ b/packages/react/src/date-field/DateField.tsx @@ -27,12 +27,14 @@ export type DateFieldProps = Omit< onValueChange?: (value: Date) => void; fromDate?: Date; toDate?: Date; + className?: string; }; const DateField = forwardRef( (props, userRef) => { const { align = 'left', + className, id, defaultValue, value, @@ -45,6 +47,8 @@ const DateField = forwardRef( toDate = addYears(new Date(), 20) } = props; + const [open, setOpen] = useState(false); + const dayToString = (day: Date) => { return format(day, 'MM/dd/yyyy'); }; @@ -106,11 +110,12 @@ const DateField = forwardRef( }; return ( - - + + ( hideLabel={hideLabel} placeholder="MM/DD/YYYY" value={internalValue} - onChange={handleFieldOnChange} + onChange={(e) => { + if (!open) { + setOpen(true); + } + handleFieldOnChange(e); + }} ref={userRef} /> - - e.preventDefault()}> - - { - setDisplayMonth(d); - }} - month={displayMonth} - selected={datePickerValue} - onSelect={onDatePickerSelect} - fromDate={fromDate} - toDate={toDate} - /> - - - + e.preventDefault()}> + + { + setDisplayMonth(d); + }} + month={displayMonth} + selected={datePickerValue} + onSelect={onDatePickerSelect} + fromDate={fromDate} + toDate={toDate} + /> + + ); }