feat: add the ability to un-mount global styles (#253)

* minimum changes

* clean more issues

* fix more issues

* v2.0.0-0

* remove size limit

Author: mikeldking

.github/workflows/size.yml

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.11",
+  "version": "2.0.0-0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -22,6 +22,7 @@
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
+    "typecheck": "tsc --noEmit",
     "chromatic": "npx chromatic --project-token 1yugawkzsgd"
   },
   "peerDependencies": {
@@ -87,7 +88,7 @@
     "ts-dedent": "^2.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
-    "typescript": "^4.9.5"
+    "typescript": "5.4.5"
   },
   "resolutions": {
     "react": "^18",

package.json

@@ -19,7 +19,7 @@ export const buttonCSS = css`
   }
   &[disabled] {
     cursor: default;
-    opacity: ${theme.opacity.disabled};
+    opacity: var(--ac-opacity-disabled);
   }
   &[data-size='default'][data-childless='false'] {
     padding: var(--ac-global-dimension-static-size-100)

src/button/styles.ts

@@ -144,7 +144,7 @@ function ListBoxBase<T>(
         style={props.style}
         {...mergeProps(listBoxProps, domProps)}
         ref={ref}
-        focusedKey={state.selectionManager.focusedKey}
+        focusedKey={state.selectionManager.focusedKey || undefined}
         sizeToFit="height"
         scrollDirection="vertical"
         className="ac-menu"

src/listbox/ListBoxBase.tsx

@@ -125,7 +125,7 @@ function MenuTrigger(props: MenuTriggerProps, ref: DOMRef<HTMLElement>) {
       isOpen={state.isOpen}
       style={positionProps.style}
       ref={menuPopoverRef}
-      placement={placement}
+      placement={placement || undefined}
       onClose={state.close}
       shouldCloseOnBlur
     >

src/menu/MenuTrigger.tsx

@@ -77,12 +77,13 @@ function Picker<T extends object>(
     unwrappedTriggerRef
   );
 
+  const propsPlacement = `${direction} ${align}` as Placement;
   const { overlayProps, placement, updatePosition } = useOverlayPosition({
     targetRef: unwrappedTriggerRef,
     overlayRef: unwrappedDropdownRef,
     // @ts-ignore refs are not playing nicely with hooks
     scrollRef: listboxRef,
-    placement: `${direction} ${align}` as Placement,
+    placement: propsPlacement,
     shouldFlip: shouldFlip,
     isOpen: state.isOpen,
     onClose: state.close,
@@ -162,7 +163,7 @@ function Picker<T extends object>(
       className={classNames('ac-dropdown', props.className)}
       // @ts-ignore
       ref={dropdownRef}
-      placement={placement}
+      placement={placement || 'center'}
       hideArrow
       shouldCloseOnBlur
       onClose={state.close}

src/picker/Picker.tsx

@@ -58,7 +58,7 @@ export function PopoverTrigger(props: PopoverTriggerProps) {
       isOpen={state.isOpen}
       ref={overlayRef}
       onClose={state.close}
-      placement={placement}
+      placement={placement || 'bottom'}
       {...popoverProps}
     >
       {typeof content === 'function' ? content(state.close) : content}

src/popover/PopoverTrigger.tsx

@@ -12,7 +12,7 @@ function ProgressBar(props: ACProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <ProgressBarBase
       {...otherProps}
-      ref={ref}
+      ref={ref as any}
       barProps={progressBarProps}
       labelProps={labelProps}
       barClassName={classNames({

src/progress/ProgressBar.tsx

@@ -1016,6 +1016,10 @@ export const derivedCSS = (theme: ProviderTheme) => css`
     --ac-alias-single-line-width: var(--ac-global-dimension-size-2400);
   }
 `;
+
+const opacitiesCSS = css`
+  --ac-opacity-disabled: 0.6;
+`;
 export function GlobalStyles() {
   let { theme } = useProvider();
   theme = theme || 'dark';
@@ -1027,7 +1031,8 @@ export function GlobalStyles() {
         staticCSS,
         themeCSS,
         derivedCSS(theme),
-        mediumRootCSS
+        mediumRootCSS,
+        opacitiesCSS
       )}
     />
   );

src/provider/GlobalStyles.tsx

@@ -7,7 +7,12 @@ const Context = React.createContext<ProviderContext | null>(null);
 
 export function Provider(props: ProviderProps) {
   const prevContext = useContext(Context);
-  const { children, theme: propsTheme, ...context } = props;
+  const {
+    children,
+    theme: propsTheme,
+    mountGlobalStyles = true,
+    ...context
+  } = props;
   let theme: ProviderTheme = propsTheme || 'dark';
   const isRootProvider = !prevContext;
   // If there is a theme higher up in the tree, use that theme
@@ -21,7 +26,7 @@ export function Provider(props: ProviderProps) {
   );
   return (
     <Context.Provider value={{ ...context, theme }}>
-      {isRootProvider ? <GlobalStyles /> : null}
+      {isRootProvider && mountGlobalStyles ? <GlobalStyles /> : null}
       <div className={`ac-theme ac-theme--${theme}`}>{content}</div>
     </Context.Provider>
   );

src/provider/Provider.tsx

@@ -59,7 +59,7 @@ export function TooltipTrigger(props: TooltipTriggerProps) {
   );
 
   const { overlayProps, arrowProps, placement } = useOverlayPosition({
-    placement: props.placement || 'top',
+    placement: props.placement,
     targetRef: tooltipTriggerRef,
     overlayRef,
     offset,
@@ -73,7 +73,7 @@ export function TooltipTrigger(props: TooltipTriggerProps) {
       <TooltipContext.Provider
         value={{
           state,
-          placement,
+          placement: placement || 'top',
           ref: overlayRef,
           style: overlayProps.style,
           arrowProps,

src/tooltip/TooltipTrigger.tsx

@@ -76,7 +76,7 @@ export interface Node<T> {
   /** An accessibility label for this node. */
   'aria-label'?: string;
   /** The index of this node within its parent. */
-  index?: number;
+  index: number;
   /** A function that should be called to wrap the rendered node. */
   wrapper?: (element: ReactElement) => ReactElement;
   /** The key of the parent node. */

src/types/collection.ts

@@ -16,6 +16,12 @@ interface ContextProps {
 export interface ProviderProps extends ContextProps {
   /** The content of the Provider. */
   children: ReactNode;
+  /**
+   * Whether or not to mount the global styles. This should only be set to false if
+   * you are wanting to manually set the global design tokens.
+   * @default true
+   */
+  mountGlobalStyles?: boolean;
 }
 
-export type ProviderContext = ContextProps
+export type ProviderContext = ContextProps;