Skip to content

Commit

Permalink
Merge 2a41a0f into 0017789
Browse files Browse the repository at this point in the history
  • Loading branch information
KenAJoh authored Dec 20, 2024
2 parents 0017789 + 2a41a0f commit 11a6c62
Show file tree
Hide file tree
Showing 28 changed files with 135 additions and 158 deletions.
10 changes: 4 additions & 6 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,8 @@ import React, { useLayoutEffect } from "react";
import darksideCss from "../@navikt/core/css/darkside/index.css?inline";
// @ts-expect-error - Temporary
import defaultCss from "../@navikt/core/css/index.css?inline";
import {
Provider,
UNSAFE_AkselTheme,
} from "../@navikt/core/react/src/provider";
import { Provider } from "../@navikt/core/react/src/provider";
import { Theme } from "../@navikt/core/react/src/theme";
import en from "../@navikt/core/react/src/util/i18n/locales/en";
import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
Expand All @@ -31,9 +29,9 @@ const ModeDecorator = ({ children, mode, theme }) => {
}, [mode]);

return mode === "darkside" ? (
<UNSAFE_AkselTheme theme={theme || undefined} hasBackground={false}>
<Theme theme={theme || undefined} hasBackground={false}>
{children}
</UNSAFE_AkselTheme>
</Theme>
) : (
children
);
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/accordion/AccordionContent.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cl from "clsx";
import React, { forwardRef, useContext } from "react";
import { UNSAFE_useAkselTheme } from "../provider";
import { useThemeInternal } from "../theme/Theme";
import { BodyLong } from "../typography";
import { AccordionItemContext } from "./AccordionItem";

Expand All @@ -16,7 +16,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
({ children, className, ...rest }, ref) => {
const context = useContext(AccordionItemContext);

const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

if (context === null) {
console.error(
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/accordion/AccordionHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cl from "clsx";
import React, { forwardRef, useContext } from "react";
import { ChevronDownIcon } from "@navikt/aksel-icons";
import { UNSAFE_useAkselTheme } from "../provider";
import { useThemeInternal } from "../theme/Theme";
import { Heading } from "../typography";
import { composeEventHandlers } from "../util/composeEventHandlers";
import { AccordionContext } from "./AccordionContext";
Expand All @@ -20,7 +20,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
const itemContext = useContext(AccordionItemContext);
const accordionContext = useContext(AccordionContext);

const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

if (itemContext === null) {
console.error(
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React from "react";
import { Button as RDPButton, useDayPicker } from "react-day-picker";
import { Button } from "../../../button";
import { UNSAFE_useAkselTheme } from "../../../provider";
import { useThemeInternal } from "../../../theme/Theme";
import { Detail } from "../../../typography";
import { useDateTranslationContext } from "../../context";

Expand All @@ -21,7 +21,7 @@ function WeekNumber({
dates,
}: WeekNumberProps): JSX.Element {
const { onWeekNumberClick, styles, classNames } = useDayPicker();
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);
const translate = useDateTranslationContext().translate;

if (!onWeekNumberClick) {
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/form/search/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React, {
} from "react";
import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
import { Button } from "../../button";
import { UNSAFE_useAkselTheme } from "../../provider";
import { useThemeInternal } from "../../theme/Theme";
import { BodyShort, ErrorMessage, Label } from "../../typography";
import { omit } from "../../util";
import { useMergeRefs } from "../../util/hooks/useMergeRefs";
Expand Down Expand Up @@ -125,7 +125,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
...rest
} = props;

const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

const searchRef = useRef<HTMLInputElement | null>(null);
const mergedRef = useMergeRefs(searchRef, ref);
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/form/switch/Switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import React, {
useState,
} from "react";
import { Loader } from "../../loader";
import { UNSAFE_useAkselTheme } from "../../provider";
import { useThemeInternal } from "../../theme/Theme";
import { BodyShort } from "../../typography";
import { omit } from "../../util";
import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
Expand Down Expand Up @@ -69,7 +69,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
defaultChecked ?? checkedProp ?? false,
);

const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

useEffect(() => {
checkedProp !== undefined && setChecked(checkedProp);
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/guide-panel/GuidePanel.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cl from "clsx";
import React, { HTMLAttributes, forwardRef } from "react";
import { UNSAFE_useAkselTheme } from "../provider";
import { useThemeInternal } from "../theme/Theme";
import { DefaultIllustration } from "./Illustration";
import { DarksideGudiepanelIllustration } from "./Illustration.darkside";

Expand Down Expand Up @@ -37,7 +37,7 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
*/
export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
({ children, className, illustration, poster, ...rest }, ref) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

return (
<div
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/help-text/HelpText.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cl from "clsx";
import React, { forwardRef, useRef, useState } from "react";
import { Popover, PopoverProps } from "../popover";
import { UNSAFE_useAkselTheme } from "../provider";
import { useThemeInternal } from "../theme/Theme";
import { composeEventHandlers } from "../util/composeEventHandlers";
import { useMergeRefs } from "../util/hooks/useMergeRefs";
import { useI18n } from "../util/i18n/i18n.context";
Expand Down Expand Up @@ -52,7 +52,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
const buttonRef = useRef<HTMLButtonElement | null>(null);
const mergedRef = useMergeRefs(buttonRef, ref);
const [open, setOpen] = useState(false);
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);
const translate = useI18n("HelpText");

const titleWithFallback = title || translate("title");
Expand Down
8 changes: 4 additions & 4 deletions @navikt/core/react/src/internal-header/InternalHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cl from "clsx";
import React, { HTMLAttributes, forwardRef } from "react";
import { UNSAFE_AkselTheme, UNSAFE_useAkselTheme } from "../provider";
import { Theme, useThemeInternal } from "../theme/Theme";
import { OverridableComponent } from "../util/types";
import InternalHeaderButton, {
InternalHeaderButtonProps,
Expand Down Expand Up @@ -78,20 +78,20 @@ interface InternalHeaderComponent
* ```
*/
export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

/*
* Component is always in "dark" mode, so we manually override global theme.
*/
if (themeContext) {
return (
<UNSAFE_AkselTheme theme="dark" asChild>
<Theme theme="dark" asChild>
<header
{...rest}
ref={ref}
className={cl("navds-internalheader", className)}
/>
</UNSAFE_AkselTheme>
</Theme>
);
}

Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/layout/base/BasePrimitive.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cl from "clsx";
import React from "react";
import { UNSAFE_useAkselTheme } from "../../provider";
import { Slot } from "../../slot/Slot";
import { useThemeInternal } from "../../theme/Theme";
import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
import { ResponsiveProp, SpacingScale } from "../utilities/types";

Expand Down Expand Up @@ -252,7 +252,7 @@ export const BasePrimitive = ({
flexShrink,
gridColumn,
}: BasePrimitiveProps) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);
const prefix = themeContext ? "ax" : "a";

const style: React.CSSProperties = {
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/layout/bleed/Bleed.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cl from "clsx";
import React, { forwardRef } from "react";
import { UNSAFE_useAkselTheme } from "../../provider";
import { Slot } from "../../slot/Slot";
import { useThemeInternal } from "../../theme/Theme";
import { getResponsiveProps } from "../utilities/css";
import { ResponsiveProp, SpacingScale } from "../utilities/types";

Expand Down Expand Up @@ -81,7 +81,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
},
ref,
) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);
const prefix = themeContext ? "ax" : "a";

let style: React.CSSProperties = {
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/layout/box/Box.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import cl from "clsx";
import React, { forwardRef } from "react";
import { type BorderRadiusKeys } from "@navikt/ds-tokens/types";
import { UNSAFE_useAkselTheme } from "../../provider";
import { Slot } from "../../slot/Slot";
import { useThemeInternal } from "../../theme/Theme";
import { omit } from "../../util";
import { OverridableComponent } from "../../util/types";
import BasePrimitive, {
Expand Down Expand Up @@ -109,7 +109,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
},
ref,
) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

if (
process.env.NODE_ENV !== "production" &&
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/layout/grid/HGrid.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cl from "clsx";
import React, { forwardRef } from "react";
import { UNSAFE_useAkselTheme } from "../../provider";
import { Slot } from "../../slot/Slot";
import { useThemeInternal } from "../../theme/Theme";
import { OverridableComponent, omit } from "../../util";
import BasePrimitive, {
PRIMITIVE_PROPS,
Expand Down Expand Up @@ -78,7 +78,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
},
ref,
) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);
const prefix = themeContext ? "ax" : "a";

const styles: React.CSSProperties = {
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/layout/page/Page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cl from "clsx";
import React, { forwardRef } from "react";
import { UNSAFE_useAkselTheme } from "../../provider";
import { useThemeInternal } from "../../theme/Theme";
import { OverridableComponent } from "../../util";
import { BackgroundColorToken } from "../utilities/types";
import { PageBlock } from "./parts/PageBlock";
Expand Down Expand Up @@ -54,7 +54,7 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
},
ref,
) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

if (process.env.NODE_ENV !== "production" && themeContext && background) {
console.warn(
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/layout/stack/Stack.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cl from "clsx";
import React, { HTMLAttributes, forwardRef } from "react";
import { UNSAFE_useAkselTheme } from "../../provider";
import { Slot } from "../../slot/Slot";
import { useThemeInternal } from "../../theme/Theme";
import { omit } from "../../util";
import { OverridableComponent } from "../../util/types";
import BasePrimitive, {
Expand Down Expand Up @@ -84,7 +84,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
},
ref,
) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);
const prefix = themeContext ? "ax" : "a";

const style: React.CSSProperties = {
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/overlays/action-menu/ActionMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import cl from "clsx";
import React, { forwardRef, useRef } from "react";
import { ChevronRightIcon } from "@navikt/aksel-icons";
import { useModalContext } from "../../modal/Modal.context";
import { UNSAFE_useAkselTheme } from "../../provider";
import { Slot } from "../../slot/Slot";
import { useThemeInternal } from "../../theme/Theme";
import { OverridableComponent, useId } from "../../util";
import { composeEventHandlers } from "../../util/composeEventHandlers";
import { createContext } from "../../util/create-context";
Expand Down Expand Up @@ -736,7 +736,7 @@ export const ActionMenuRadioItem = forwardRef<
{ children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
ref,
) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

return (
<Menu.RadioItem
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/pagination/PaginationItem.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cl from "clsx";
import React, { forwardRef } from "react";
import { Button, ButtonProps } from "../button";
import { UNSAFE_useAkselTheme } from "../provider";
import { useThemeInternal } from "../theme/Theme";
import { OverridableComponent } from "../util/types";

export interface PaginationItemProps extends ButtonProps {
Expand Down Expand Up @@ -40,7 +40,7 @@ export const Item: PaginationItemType = forwardRef(
},
ref,
) => {
const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

return (
<Button
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/src/popover/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
import { DateInputContext } from "../date/context";
import { useModalContext } from "../modal/Modal.context";
import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
import { UNSAFE_useAkselTheme } from "../provider";
import { useThemeInternal } from "../theme/Theme";
import { useClientLayoutEffect } from "../util/hooks";
import { useMergeRefs } from "../util/hooks/useMergeRefs";
import PopoverContent, { PopoverContentType } from "./PopoverContent";
Expand Down Expand Up @@ -125,7 +125,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
const chosenFlip = isInDatepicker ? false : _flip;

const themeContext = UNSAFE_useAkselTheme(false);
const themeContext = useThemeInternal(false);

const {
update,
Expand Down
17 changes: 17 additions & 0 deletions @navikt/core/react/src/portal/Portal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { HTMLAttributes, forwardRef } from "react";
import ReactDOM from "react-dom";
import { useProvider } from "../provider/Provider";
import { Slot } from "../slot/Slot";
import { Theme, useThemeInternal } from "../theme/Theme";
import { AsChildProps } from "../util/types";

interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
Expand All @@ -15,11 +16,27 @@ export type PortalProps = PortalBaseProps & AsChildProps;

export const Portal = forwardRef<HTMLDivElement, PortalProps>(
({ rootElement, asChild, ...rest }, ref) => {
const themeContext = useThemeInternal(false);
const contextRoot = useProvider()?.rootElement;
const root = rootElement ?? contextRoot ?? globalThis?.document?.body;

const Component = asChild ? Slot : "div";

/**
* Portal can be mounted outside of theme-classNames.
* If a theme is present, we want to make sure that theme cascades to portaled element.
*/
if (themeContext) {
return root
? ReactDOM.createPortal(
<Theme theme={themeContext.theme} asChild hasBackground={false}>
<Component ref={ref} data-aksel-portal="" {...rest} />
</Theme>,
root,
)
: null;
}

return root
? ReactDOM.createPortal(
<Component ref={ref} data-aksel-portal="" {...rest} />,
Expand Down
4 changes: 0 additions & 4 deletions @navikt/core/react/src/provider/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,2 @@
"use client";
export { default as Provider, type ProviderProps } from "./Provider";
export {
AkselTheme as UNSAFE_AkselTheme,
useAkselTheme as UNSAFE_useAkselTheme,
} from "./theme/AkselTheme";
Loading

0 comments on commit 11a6c62

Please sign in to comment.