Enhancements

.changeset/nine-dancers-admire.md

@@ -0,0 +1,12 @@
+---
+"@real-system/ariakit-library": patch
+"@real-system/menu-primitive": patch
+"@real-system/styled-library": patch
+"@real-system/popover": patch
+"@real-system/tooltip": patch
+"@real-system/select": patch
+"@real-system/menu": patch
+"@real-system/core": patch
+---
+
+Fix popover placement bug; caused when a popover arrow is not mounted

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn precise-commits && git add -A .
+yarn lint-staged && git add -A .

.husky/prepare-commit-msg

@@ -1,8 +1,5 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 # Only run commitizen if no commit message was already provided
 if [ -z "${2-}" ]; then
     # By default git hooks are not interactive. exec < /dev/tty allows a users terminal to interact with commitizen
-    exec < /dev/tty && pnpm commit --hook || true
+    exec < /dev/tty && yarn commit --hook || true
 fi

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "*.{ts,tsx,js,md,mdx}": "eslint --fix"
+}

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.tabSize": 2,
   "eslint.validate": [

.yarn/patches/@ariakit-react-core-npm-0.4.0-09b9e9aaa6.patch

@@ -0,0 +1,26 @@
+diff --git a/cjs/__chunks/ID5QP4WT.cjs b/cjs/__chunks/ID5QP4WT.cjs
+index 5cd4886b760de45bde68278d843930168e841054..64198a8eae1008003be774f9cf4104c53d201b59 100644
+--- a/cjs/__chunks/ID5QP4WT.cjs
++++ b/cjs/__chunks/ID5QP4WT.cjs
+@@ -237,7 +237,7 @@ var usePopover = _Q67LZMDTcjs.createHook.call(void 0,
+             fitViewport,
+             overflowPadding
+           })
+-        ];
++        ].filter(Boolean);
+         const pos = await _dom.computePosition.call(void 0, anchor, popoverElement, {
+           placement,
+           strategy: fixed ? "fixed" : "absolute",
+diff --git a/esm/__chunks/KMWSQ7OZ.js b/esm/__chunks/KMWSQ7OZ.js
+index 36701588d8c1062b5cdcf929a5d89d7c0572e42c..7add8ee37f203847f566a1cd6ed4b8a5bdf59af9 100644
+--- a/esm/__chunks/KMWSQ7OZ.js
++++ b/esm/__chunks/KMWSQ7OZ.js
+@@ -237,7 +237,7 @@ var usePopover = createHook(
+             fitViewport,
+             overflowPadding
+           })
+-        ];
++        ].filter(Boolean);
+         const pos = await computePosition(anchor, popoverElement, {
+           placement,
+           strategy: fixed ? "fixed" : "absolute",

package.json

@@ -34,7 +34,7 @@
     "lint": "eslint \"packages/**/*.{ts,tsx,mdx}\"",
     "lint:fix": "yarn lint --fix",
     "tscheck": "yarn workspaces foreach -p run tscheck",
-    "precise-commits": "precise-commits",
+    "lint-staged": "lint-staged",
     "pkgs:check": "manypkg check",
     "pkgs:fix": "manypkg fix",
     "commit": "git cz",
@@ -58,7 +58,7 @@
     "build:pkg": "node tools/build-package.js",
     "build:storybook": "storybook build -o _storybook/dist -c _storybook",
     "___________DEVELOPMENT___________": "dev scripts",
-    "bootstrap": "yarn && husky install",
+    "bootstrap": "yarn && husky",
     "dev": "node ./tools/run-workspace-dev --select=true",
     "dev:storybook": "yarn dev --with='yarn storybook'",
     "storybook": "storybook dev -c _storybook -p 6006",
@@ -70,22 +70,22 @@
     }
   },
   "dependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.7",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.23.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-runtime": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.23.7",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@commitlint/cli": "^18.5.0",
-    "@commitlint/config-conventional": "^18.5.0",
-    "@commitlint/cz-commitlint": "^18.5.0",
-    "@commitlint/prompt-cli": "^18.5.0",
+    "@commitlint/cli": "^18.6.0",
+    "@commitlint/config-conventional": "^18.6.0",
+    "@commitlint/cz-commitlint": "^18.6.0",
+    "@commitlint/prompt-cli": "^18.6.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/jest": "^11.11.0",
     "@manypkg/cli": "^0.21.2",
@@ -107,7 +107,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.11.6",
+    "@types/node": "^20.11.8",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/react-test-renderer": "^18.0.7",
@@ -136,16 +136,16 @@
     "execa": "^5.1.1",
     "fuzzy": "^0.1.3",
     "generate-template-files": "^3.2.1",
-    "husky": "^8.0.3",
+    "husky": "^9.0.6",
     "inquirer": "^8.2.6",
     "inquirer-checkbox-plus-prompt": "^1.4.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
     "js-yaml": "^4.1.0",
+    "lint-staged": "^15.2.0",
     "lodash.debounce": "^4.0.8",
     "minimist": "^1.2.8",
-    "precise-commits": "^1.0.2",
     "prettier": "^3.2.4",
     "qnm": "^2.10.3",
     "react": "^18.2.0",
@@ -172,7 +172,8 @@
     "@types/react-test-renderer": "18.0.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@ariakit/[email protected]": "patch:@ariakit/react-core@npm%3A0.4.0#./.yarn/patches/@ariakit-react-core-npm-0.4.0-09b9e9aaa6.patch"
   },
   "packageManager": "[email protected]"
 }

packages/components/menu/src/Menu.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import {
-  MenuArrowPrimitive,
   MenuProviderPrimitive,
   type MenuProviderPrimitiveProps,
   useMenuStorePrimitive,
@@ -46,10 +45,7 @@ function Menu({
     setOpen,
   });
   return (
-    <MenuProviderPrimitive store={store}>
-      <MenuArrowPrimitive size={0} />
-      {children}
-    </MenuProviderPrimitive>
+    <MenuProviderPrimitive store={store}>{children}</MenuProviderPrimitive>
   );
 }
 

packages/components/popover/src/Popover.tsx

@@ -72,7 +72,7 @@ const Popover: PopoverComponent = forwardRef<HTMLDivElement, PopoverProps>(
         data-testid={makeTestId('popover')}
         render={(htmlProps) => <StyledPopover {...htmlProps} {...restProps} />}
         ref={ref}>
-        <PopoverArrowPrimitive store={store} size={hideArrow ? 0 : 30} />
+        {hideArrow ? null : <PopoverArrowPrimitive store={store} />}
         {!hideCloseButton && (
           <PopoverDismiss
             variant="minimal"

packages/components/select/src/Select.tsx

@@ -13,13 +13,11 @@ import { selectStyles } from './Select.style';
 import { SelectGroup } from './SelectGroup';
 import { SelectItem } from './SelectItem';
 import { SelectPopover } from './SelectPopover';
-import { SelectSeparator } from './SelectSeparator';
 import type { SelectProps } from './types';
 
 export interface SelectComponent
   extends React.ForwardRefExoticComponent<SelectProps> {
   Item: typeof SelectItem;
-  Separator: typeof SelectSeparator;
   Group: typeof SelectGroup;
 }
 
@@ -61,32 +59,28 @@ const Select: SelectComponent = forwardRef<HTMLButtonElement, SelectProps>(
           placement={placement}
           setValue={onChange}
           setOpen={setOpen}
-          animated
           value={value}
           defaultValue={defaultValue}
           open={open}>
-          <>
-            <SelectLabelPrimitive
-              render={
-                <Text.Label as="span" required={required} disabled={disabled} />
-              }>
-              {label}
-            </SelectLabelPrimitive>
-            <SelectPrimitive
-              render={<real.button {...styles} />}
-              disabled={disabled}
-              ref={ref}
-            />
-            <SelectPopover>{children as React.ReactNode}</SelectPopover>
-          </>
+          <SelectLabelPrimitive
+            render={
+              <Text.Label as="span" required={required} disabled={disabled} />
+            }>
+            {label}
+          </SelectLabelPrimitive>
+          <SelectPrimitive
+            render={<real.button {...styles} />}
+            disabled={disabled}
+            ref={ref}
+          />
+          <SelectPopover>{children as React.ReactNode}</SelectPopover>
         </SelectProviderPrimitive>
       </real.div>
     );
   }
 );
 
 Select.Item = SelectItem;
-Select.Separator = SelectSeparator;
 Select.Group = SelectGroup;
 
 export type { SelectProps };

packages/components/select/src/SelectGroup/SelectGroup.tsx

@@ -13,7 +13,12 @@ import { SelectGroupLabel } from './SelectGroupLabel';
 type SelectGroupProps = OmitSelectPrivateProps<SelectGroupPrimitiveProps> &
   StylishProps;
 
-const StyledSelectGroup = styled(SelectGroupPrimitive)<SelectGroupProps>({});
+const StyledSelectGroup = styled(SelectGroupPrimitive)<SelectGroupProps>({
+  _firstAndNotOnly: {
+    borderBottom: 'weak',
+    paddingBottom: 3,
+  },
+});
 
 export interface SelectGroupComponent
   extends React.ForwardRefExoticComponent<SelectGroupProps> {

packages/components/select/src/index.ts

@@ -4,4 +4,3 @@ export type {
   SelectGroupProps,
 } from './SelectGroup/index';
 export type { SelectItemProps } from './SelectItem';
-export type { SelectSeparatorProps } from './SelectSeparator';

packages/components/select/stories/Select.stories.tsx

@@ -27,7 +27,6 @@ export const SelectGroupStory = (_args) => {
         <Select.Item value="Grape" disabled />
         <Select.Item value="Melon" />
       </Select.Group>
-      <Select.Separator />
       <Select.Group>
         <Select.Group.Label>Vegatables</Select.Group.Label>
         <Select.Item value="Cucumber" />

packages/components/tooltip/src/Tooltip.tsx

@@ -72,7 +72,7 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(
               alwaysVisible
               gutter={gutter}
               {...restProps}>
-              <TooltipArrowPrimitive size={hideArrow ? 0 : 30} />
+              {hideArrow ? null : <TooltipArrowPrimitive />}
               <Text as="span" color="white">
                 {label}
               </Text>

packages/core/package.json

@@ -75,10 +75,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.7",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.23.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.3"
   }
-}
+}

packages/libraries/ariakit-library/src/menu.ts

@@ -1,5 +1,4 @@
 export type {
-  MenuArrowProps as AriakitMenuArrowProps,
   MenuItemCheckboxProps as AriakitMenuItemCheckboxProps,
   MenuItemProps as AriakitMenuItemProps,
   MenuItemRadioProps as AriakitMenuItemRadioProps,
@@ -8,7 +7,6 @@ export type {
 } from '@ariakit/react/menu';
 export {
   Menu as AriakitMenu,
-  MenuArrow as AriakitMenuArrow,
   MenuButton as AriakitMenuButton,
   MenuGroup as AriakitMenuGroup,
   MenuGroupLabel as AriakitMenuGroupLabel,

packages/libraries/ariakit-library/src/popover.ts

@@ -1,6 +1,7 @@
 export {
   Popover as AriakitPopover,
   PopoverArrow as AriakitPopoverArrow,
+  type PopoverArrowProps as AriakitPopoverArrowProps,
   PopoverDescription as AriakitPopoverDescription,
   PopoverDisclosure as AriakitPopoverDisclosure,
   type PopoverDisclosureProps as AriakitPopoverDisclosureProps,