🐛 FIX: useOutsideClick + Popover & Config Fixes (#34)

interunit · Oct 3, 2023 · 2ec8f26 · 2ec8f26
1 parent f040b8b
commit 2ec8f26
Show file tree

Hide file tree

Showing 33 changed files with 247 additions and 59 deletions.
diff --git a/apps/interunit-dot-dev/CHANGELOG.md b/apps/interunit-dot-dev/CHANGELOG.md
@@ -1,5 +1,21 @@
 # interunit-dot-dev
 
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @interunit/popover@0.0.23
+  - @interunit/config@0.0.15
+  - @interunit/a11y@0.0.19
+  - @interunit/combobox@0.0.4
+  - @interunit/collapsible@0.0.17
+  - @interunit/form@0.0.13
+  - @interunit/modal@0.0.17
+  - @interunit/primitives@0.0.21
+  - @interunit/responsive@0.0.14
+  - @interunit/tabs@0.0.13
+
 ## 0.1.7
 
 ### Patch Changes

diff --git a/apps/interunit-dot-dev/app/ui/docs/composites/popover/page.tsx b/apps/interunit-dot-dev/app/ui/docs/composites/popover/page.tsx
@@ -28,7 +28,7 @@ const PopoverPage = () => {
           data={{title: 'Popover', name, description, version, homepage}}
         />
         <ComponentDisplay className="mb-12">
-          <Popover defaultValue={false}>
+          <Popover defaultValue={false} className="relative">
             <Popover.Trigger asChild>
               <Button color={'bg-secondary'}>Click me</Button>
             </Popover.Trigger>
@@ -102,46 +102,41 @@ const PopoverPage = () => {
           <PropsTable
             propsToDisplay={[
               {
-                name: 'triggerType',
-                type: `'click' | 'hover'`,
+                name: 'value',
+                type: `any`,
                 required: false,
-                default: 'click',
-                description:
-                  'The user action that will trigger the popover. Note: on mobile hover will be ignored and click will be used instead. Also, click encompasses React Native onPress.'
+                default: '',
+                description: 'The controlled value of the popover'
               },
               {
-                name: 'defaultIsOpen',
-                type: `boolean`,
+                name: 'onValueChange',
+                type: `(any) => void`,
                 required: false,
-                default: 'false',
-                description: 'If true, the popover will be open by default'
+                default: '',
+                description: 'The controlled value setter of the popover'
               },
-
               {
-                name: 'settings',
-                type: `PopoverSettings`,
+                name: 'defaultValue',
+                type: `any`,
                 required: false,
                 default: '',
-                description: 'General settings for the popover.',
-                properties: [
-                  {
-                    name: 'shouldCloseOnInteractionOutside',
-                    type: 'boolean',
-                    required: false,
-                    default: 'true',
-                    description:
-                      'If true, the popover will close when the user clicks outside of the popover'
-                  }
-                ]
+                description: 'The unconrolled value of the popover'
               },
-
               {
-                name: 'onPopoverChange',
-                type: `(popoverState) => void`,
+                name: 'asChild',
+                type: `boolean`,
                 required: false,
-                default: '',
+                default: 'false',
                 description:
-                  'A callback that will be called when the popover state changes.'
+                  'Use the built in Popover element or set asChild to true to provide your own'
+              },
+              {
+                name: 'shoudCloseOnOutsideClick',
+                type: `boolean`,
+                required: false,
+                default: 'true',
+                description:
+                  'Whether or not the popover should close when clicking outside of it'
               },
               {
                 name: 'children',
@@ -159,6 +154,23 @@ const PopoverPage = () => {
           </P.TX>
           <PropsTable
             propsToDisplay={[
+              {
+                name: 'interaction',
+                type: 'click | hover | none',
+                required: false,
+                default: 'click',
+                description:
+                  'The interaction that will trigger the popover to open'
+              },
+              {
+                name: 'asChild',
+                type: `boolean`,
+                required: false,
+                default: 'false',
+                description:
+                  'Use the built in Popover element or set asChild to true to provide your own'
+              },
+
               {
                 name: 'children',
                 type: 'React.ReactNode',
@@ -283,7 +295,14 @@ const PopoverPage = () => {
                   }
                 ]
               },
-
+              {
+                name: 'asChild',
+                type: `boolean`,
+                required: false,
+                default: 'false',
+                description:
+                  'Use the built in Popover element or set asChild to true to provide your own'
+              },
               {
                 name: 'children',
                 type: 'React.ReactNode',

diff --git a/apps/interunit-dot-dev/package.json b/apps/interunit-dot-dev/package.json
@@ -1,6 +1,6 @@
 {
   "name": "interunit-dot-dev",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/apps/interunit-example-app/CHANGELOG.md b/apps/interunit-example-app/CHANGELOG.md
@@ -1,5 +1,19 @@
 # interunit-example-app
 
+## 1.0.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @interunit/popover@0.0.23
+  - @interunit/config@0.0.15
+  - @interunit/combobox@0.0.4
+  - @interunit/form@0.0.13
+  - @interunit/modal@0.0.17
+  - @interunit/primitives@0.0.21
+  - @interunit/responsive@0.0.14
+  - @interunit/tabs@0.0.13
+
 ## 1.0.4
 
 ### Patch Changes

diff --git a/apps/interunit-example-app/package.json b/apps/interunit-example-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "interunit-example-app",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "index.js",
   "scripts": {
     "dev:all": "expo start --dev-client",

diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @interunit/a11y
 
+## 0.0.19
+
+### Patch Changes
+
+- - A11y
+    - Fix onOutsideClick hook
+  - Config
+    - Optional change the env var to avoid issues
+  - Popover
+    - Update docs
+    - re-enable outside click
+    - Add 'none' option for trigger interactionA
+    - Fix offset calculation
+- Updated dependencies
+  - @interunit/config@0.0.15
+  - @interunit/primitives@0.0.21
+
 ## 0.0.18
 
 ### Patch Changes

diff --git a/packages/a11y/package.json b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interunit/a11y",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "A11y utilities to use in InterUnit",
   "homepage": "https://github.com/interunit/ui#readme",
   "bugs": {

diff --git a/packages/a11y/src/hooks/useOutsideClick.ts b/packages/a11y/src/hooks/useOutsideClick.ts
@@ -6,16 +6,17 @@ const useOutsideClick = ({
   fn,
   isEnabled = true
 }: {
-  ref: React.RefObject<any>
+  ref: any
   fn: () => void
   isEnabled?: boolean
 }) => {
   // no-op until we figure out how to get this working in native
   if (getEnvironmentName() === 'native') return
   const handleClick = (event: MouseEvent) => {
-    if (isEnabled && ref.current && !ref.current.contains(event.target)) {
-      fn()
+    if (!isEnabled || !ref || ref?.contains(event.target)) {
+      return
     }
+    fn()
   }
 
   React.useEffect(() => {

diff --git a/packages/collapsible/CHANGELOG.md b/packages/collapsible/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @interunit/collapsible
 
+## 0.0.17
+
+### Patch Changes
+
+- Updated dependencies
+  - @interunit/config@0.0.15
+  - @interunit/a11y@0.0.19
+  - @interunit/primitives@0.0.21
+
 ## 0.0.16
 
 ### Patch Changes

diff --git a/packages/collapsible/package.json b/packages/collapsible/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interunit/collapsible",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "A component that expands and collapses content",
   "homepage": "https://github.com/interunit/ui#readme",
   "bugs": {

diff --git a/packages/combobox/CHANGELOG.md b/packages/combobox/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @interunit/combobox
 
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @interunit/popover@0.0.23
+  - @interunit/config@0.0.15
+  - @interunit/a11y@0.0.19
+  - @interunit/primitives@0.0.21
+  - @interunit/toolbox@0.0.15
+
 ## 0.0.3
 
 ### Patch Changes

diff --git a/packages/combobox/package.json b/packages/combobox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interunit/combobox",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "homepage": "https://github.com/interunit/ui#readme",
   "bugs": {

diff --git a/packages/config/CHANGELOG.md b/packages/config/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @interunit/config
 
+## 0.0.15
+
+### Patch Changes
+
+- - A11y
+    - Fix onOutsideClick hook
+  - Config
+    - Optional change the env var to avoid issues
+  - Popover
+    - Update docs
+    - re-enable outside click
+    - Add 'none' option for trigger interactionA
+    - Fix offset calculation
+
 ## 0.0.14
 
 ### Patch Changes

diff --git a/packages/config/package.json b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interunit/config",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Handles all config for interactions between packages",
   "homepage": "https://github.com/interunit/ui#readme",
   "bugs": {

diff --git a/packages/config/src/helpers/getEnvironmentName.ts b/packages/config/src/helpers/getEnvironmentName.ts
@@ -5,7 +5,7 @@ export const getEnvironmentName = () => {
   // so native tests run in a web env. This will fix that.
   // Might need to rethink this using haste or some other solution
   // if more problems arise from this same issue.
-  if (process.env.TEST_ENV_NAME) {
+  if (process?.env?.TEST_ENV_NAME) {
     if (
       process.env.TEST_ENV_NAME !== ('native' as string) &&
       process.env.TEST_ENV_NAME !== ('web' as string)

diff --git a/packages/crossplatform/CHANGELOG.md b/packages/crossplatform/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @interunit/crossplatform
 
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies
+  - @interunit/config@0.0.15
+  - @interunit/toolbox@0.0.15
+
 ## 0.0.14
 
 ### Patch Changes

diff --git a/packages/crossplatform/package.json b/packages/crossplatform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interunit/crossplatform",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Components and helpers to make cross-platform translations and development smooth",
   "homepage": "https://github.com/interunit/ui#readme",
   "bugs": {

diff --git a/packages/form/CHANGELOG.md b/packages/form/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @interunit/form
 
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies
+  - @interunit/config@0.0.15
+  - @interunit/a11y@0.0.19
+  - @interunit/primitives@0.0.21
+
 ## 0.0.12
 
 ### Patch Changes

diff --git a/packages/form/package.json b/packages/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interunit/form",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": true,
   "description": "Components for easily creating accessible forms",
   "homepage": "https://github.com/interunit/ui/tree/main/packages/form",

diff --git a/packages/modal/CHANGELOG.md b/packages/modal/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @interunit/modal
 
+## 0.0.17
+
+### Patch Changes
+
+- Updated dependencies
+  - @interunit/config@0.0.15
+  - @interunit/a11y@0.0.19
+  - @interunit/primitives@0.0.21
+
 ## 0.0.16
 
 ### Patch Changes

diff --git a/packages/modal/package.json b/packages/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interunit/modal",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "A low-level component to help display content on top of the current page or view",
   "homepage": "https://github.com/interunit/ui#readme",
   "bugs": {