Version Packages (#1837)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-codemod
 
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -39,8 +39,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.5.1",
-    "@navikt/ds-react": "^2.5.1",
+    "@navikt/ds-icons": "^2.6.0",
+    "@navikt/ds-react": "^2.6.0",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.5.1",
+    "@navikt/ds-tokens": "^2.6.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @navikt/ds-react
 
+## 2.6.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.0
+
 ## 2.5.1
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.5.1",
+    "@navikt/ds-icons": "^2.6.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.5.1",
+    "@navikt/ds-tokens": "^2.6.0",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-icons
 
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal
 
+## 2.6.0
+
 ## 2.5.1
 
 ## 2.5.0

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-react-internal
 
+## 2.6.0
+
+### Minor Changes
+
+- [#1835](https://github.com/navikt/aksel/pull/1835) [`b575816e7`](https://github.com/navikt/aksel/commit/b575816e736d440f224e1e70abf851262a976981) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Controlled og defaultOpen-states for Dropdown
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.6.0
+  - @navikt/ds-icons@2.6.0
+
 ## 2.5.1
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.5.1",
-    "@navikt/ds-react": "^2.5.1",
+    "@navikt/ds-icons": "^2.6.0",
+    "@navikt/ds-react": "^2.6.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

@navikt/internal/react/src/dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import Menu, { MenuType } from "./Menu";
 export interface DropdownProps {
   children: React.ReactNode;
   /**
-   * Handler that is called when an item is selected.
+   * Handler called when an item is selected.
    */
   onSelect?: (element: React.MouseEvent) => void;
   /**
@@ -13,6 +13,14 @@ export interface DropdownProps {
    * @default true
    */
   closeOnSelect?: boolean;
+  /**
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.
+   */
+  open?: boolean;
 }
 
 export interface DropdownType extends React.FC<DropdownProps> {
@@ -22,7 +30,7 @@ export interface DropdownType extends React.FC<DropdownProps> {
 
 export interface DropdownContextType {
   readonly isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleToggle: (v: boolean) => void;
   readonly anchorEl: Element | null;
   setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
   onSelect: (element: React.MouseEvent) => void;
@@ -30,20 +38,34 @@ export interface DropdownContextType {
 
 export const DropdownContext = createContext<DropdownContextType | null>(null);
 
-export const Dropdown = (({ children, onSelect, closeOnSelect = true }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+export const Dropdown = (({
+  children,
+  onSelect,
+  closeOnSelect = true,
+  defaultOpen = false,
+  open,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
+  const handleToggle = (v: boolean) => {
+    if (open === undefined) {
+      setIsOpen(v);
+    }
+  };
+
   return (
     <DropdownContext.Provider
       value={{
-        isOpen,
-        setIsOpen,
+        isOpen: open ?? isOpen,
+        handleToggle,
         anchorEl,
         setAnchorEl,
         onSelect: (event) => {
           onSelect?.(event);
-          closeOnSelect && setIsOpen(false);
+          if (closeOnSelect) {
+            open === undefined && setIsOpen(false);
+          }
         },
       }}
     >

@navikt/internal/react/src/dropdown/Menu/GroupedList/Item.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "clsx";
 import { OverridableComponent } from "@navikt/ds-react";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { DropdownContext } from "../../Dropdown";
 
 export interface GroupedItemProps
@@ -19,6 +19,7 @@ export type GroupedItemType = OverridableComponent<
 export const GroupedItem: GroupedItemType = forwardRef(
   ({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
+
     return (
       <dd className="navdsi-dropdown__list-item">
         <Component

@navikt/internal/react/src/dropdown/Menu/List/Item.tsx

@@ -18,6 +18,7 @@ export type ListItemType = OverridableComponent<
 export const ListItem: ListItemType = forwardRef(
   ({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
+
     return (
       <li className="navdsi-dropdown__list-item">
         <Component

@navikt/internal/react/src/dropdown/Menu/index.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "clsx";
 import { Popover } from "@navikt/ds-react";
-import List, { ListType } from "./List";
-import GroupedList, { GroupedListType } from "./GroupedList";
-import Divider, { DividerType } from "./Divider";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { DropdownContext } from "../Dropdown";
+import Divider, { DividerType } from "./Divider";
+import GroupedList, { GroupedListType } from "./GroupedList";
+import List, { ListType } from "./List";
 
 interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -57,7 +57,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
       return null;
     }
 
-    const { isOpen, anchorEl, setIsOpen } = context;
+    const { isOpen, anchorEl, handleToggle } = context;
 
     return (
       <Popover
@@ -70,7 +70,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
         anchorEl={anchorEl}
         open={isOpen}
         onClose={() => {
-          setIsOpen(false);
+          handleToggle(false);
           onClose && onClose();
         }}
       />

@navikt/internal/react/src/dropdown/Toggle.tsx

@@ -23,15 +23,23 @@ export const Toggle: ToggleType = forwardRef(
       return null;
     }
 
-    const { setAnchorEl, setIsOpen, isOpen } = context;
+    const { setAnchorEl, handleToggle, isOpen } = context;
 
     return (
       <button
         {...rest}
-        ref={ref}
+        ref={(el) => {
+          setAnchorEl(el);
+
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref != null) {
+            ref.current = el;
+          }
+        }}
         onClick={(e) => {
           setAnchorEl(e.currentTarget);
-          setIsOpen((isOpen) => !isOpen);
+          handleToggle(!isOpen);
           onClick && onClick(e);
         }}
         aria-expanded={isOpen}

@navikt/internal/react/src/dropdown/dropdown.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { Dropdown } from "..";
 import { Meta } from "@storybook/react";
+import { Button } from "@navikt/ds-react";
 
 export default {
   title: "ds-react-internal/Dropdown",
@@ -34,3 +35,57 @@ export const Default = () => {
     </Dropdown>
   );
 };
+
+export const DefaultOpen = {
+  render: () => (
+    <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
+      <Button as={Dropdown.Toggle}>Toggle</Button>
+      <Dropdown.Menu
+        strategy="fixed"
+        onClose={() => console.log("ONCLOSE default")}
+      >
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item
+            onClick={() => console.log("GroupedList.Item-click")}
+          >
+            Gosys
+          </Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+  args: { chromatic: { delay: 300 } },
+};
+
+export const ControlledOpen = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openState, setOpenState] = useState(true);
+    return (
+      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+          Toggle
+        </Button>
+        <Dropdown.Menu
+          strategy="fixed"
+          onClose={() => console.log("ONCLOSE CONTROLLED")}
+        >
+          <Dropdown.Menu.GroupedList>
+            <Dropdown.Menu.GroupedList.Heading>
+              Systemer og oppslagsverk
+            </Dropdown.Menu.GroupedList.Heading>
+            <Dropdown.Menu.GroupedList.Item
+              onClick={() => console.log("GroupedList.Item-click")}
+            >
+              Gosys
+            </Dropdown.Menu.GroupedList.Item>
+          </Dropdown.Menu.GroupedList>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
+  args: { chromatic: { delay: 300 } },
+};

aksel.nav.no/package.json

@@ -15,14 +15,14 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/ds-codemod": "^2.5.1",
-    "@navikt/ds-css": "^2.5.1",
-    "@navikt/ds-css-internal": "^2.5.1",
-    "@navikt/ds-icons": "^2.5.1",
-    "@navikt/ds-react": "^2.5.1",
-    "@navikt/ds-react-internal": "^2.5.1",
-    "@navikt/ds-tailwind": "^2.5.1",
-    "@navikt/ds-tokens": "^2.5.1"
+    "@navikt/ds-codemod": "^2.6.0",
+    "@navikt/ds-css": "^2.6.0",
+    "@navikt/ds-css-internal": "^2.6.0",
+    "@navikt/ds-icons": "^2.6.0",
+    "@navikt/ds-react": "^2.6.0",
+    "@navikt/ds-react-internal": "^2.6.0",
+    "@navikt/ds-tailwind": "^2.6.0",
+    "@navikt/ds-tokens": "^2.6.0"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/sanity-modules/code-examples/Examples.tsx

@@ -19,6 +19,7 @@ const ComponentExamples = ({
 }): JSX.Element => {
   const [activeExample, setActiveExample] = useState(null);
   const [frameState, setFrameState] = useState(300);
+  const [unloaded, setUnloaded] = useState(true);
 
   const handleExampleLoad = () => {
     let attempts = 0;
@@ -32,6 +33,7 @@ const ComponentExamples = ({
         const newHeight = iframePadding + exampleWrapper.offsetHeight;
         clearInterval(waitForExampleContentToRender);
         setFrameState(newHeight < 300 ? 300 : newHeight);
+        setUnloaded(false);
       }
 
       attempts++;
@@ -77,7 +79,10 @@ const ComponentExamples = ({
                 key={fil._key}
                 value={fil.navn}
                 selected={active === fil.navn}
-                onClick={() => setActiveExample(fil.navn)}
+                onClick={() => {
+                  setActiveExample(fil.navn);
+                  setUnloaded(true);
+                }}
               >
                 {fixName(fil.navn)}
               </Chips.Toggle>
@@ -100,7 +105,15 @@ const ComponentExamples = ({
 
             {active === fil.navn && (
               <>
-                <div className="overflow-hidden rounded-t border border-b-0 border-gray-300 bg-gray-50">
+                <div
+                  className={cl(
+                    "overflow-hidden rounded-t border border-b-0 border-gray-300 ",
+                    {
+                      "relative animate-pulse": unloaded,
+                      "bg-gray-50": !unloaded,
+                    }
+                  )}
+                >
                   <iframe
                     src={`/eksempler/${node.dir.title}/${fil.navn.replace(
                       ".tsx",
@@ -111,10 +124,19 @@ const ComponentExamples = ({
                     id={iframeId}
                     aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                     className={cl(
-                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]"
+                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
+                      { invisible: unloaded }
                     )}
                     title="Kode-eksempler"
                   />
+                  {unloaded && (
+                    <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
+                      <div className="grid w-3/5 gap-2">
+                        <div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
+                        <div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
+                      </div>
+                    </div>
+                  )}
                 </div>
                 <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
                   <CodeSandbox code={fil.innhold.trim()} />

aksel.nav.no/website/components/sanity-modules/token-view/Frame.tsx

@@ -5,10 +5,12 @@ export const Frame = ({
   tokens,
   styles,
   element: Element,
+  showHex,
 }: {
   tokens: { name: string; value: string; description?: string }[];
   styles?: string;
   element?: ({ token, name }: { token: string; name?: string }) => JSX.Element;
+  showHex?: boolean;
 }) => {
   const hasDescription = !!tokens.find((x) => x?.description);
   return (
@@ -45,7 +47,7 @@ export const Frame = ({
               {c.value}
             </td>
             <Detail as="td" className="mt-1">
-              {c.description}
+              {showHex ? getHex(c.value) : c.description}
             </Detail>
           </tr>
         ))}
@@ -53,3 +55,23 @@ export const Frame = ({
     </table>
   );
 };
+
+function getHex(value: string) {
+  return RGBAToHexA(value.replace(", 1)", ""));
+}
+
+/* https://stackoverflow.com/a/73401564 */
+function RGBAToHexA(rgba, forceRemoveAlpha = false) {
+  return (
+    "#" +
+    rgba
+      .replace(/^rgba?\(|\s+|\)$/g, "") // Get's rgba / rgb string values
+      .split(",") // splits them at ","
+      .filter((string, index) => !forceRemoveAlpha || index !== 3)
+      .map((string) => parseFloat(string)) // Converts them to numbers
+      .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
+      .map((number) => number.toString(16)) // Converts numbers to hex
+      .map((string) => (string.length === 1 ? "0" + string : string)) // Adds 0 when length of one number is 1
+      .join("")
+  ); // Puts the array to togehter to a string
+}

aksel.nav.no/website/components/sanity-modules/token-view/categories/Global.tsx

@@ -5,5 +5,5 @@ import { Frame } from "../Frame";
 export const GlobalView = ({ cat }: { cat: string }) => {
   const colors = docs[cat];
 
-  return <Frame tokens={colors} styles="background" />;
+  return <Frame tokens={colors} styles="background" showHex />;
 };

aksel.nav.no/website/components/sanity-modules/token-view/categories/Semantic.tsx

@@ -11,6 +11,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
           const isLigth = c.luminosity() > 0.9;
@@ -38,6 +39,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
           const isLigth = c.luminosity() > 0.9;
@@ -66,6 +68,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
           const isLigth = c.luminosity() > 0.9;
@@ -92,5 +95,5 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       />
     );
   }
-  return <Frame tokens={colors} styles="background" />;
+  return <Frame tokens={colors} styles="background" showHex />;
 };

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "2.5.1",
-    "@navikt/ds-react": "2.5.1",
+    "@navikt/ds-css": "2.6.0",
+    "@navikt/ds-react": "2.6.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },