@danske/sapphire-react-lab 0.106.2 → 0.107.0

package/build/esm/core/src/ListBox/src/StatelessListBox.js

@@ -0,0 +1,162 @@
+import React, { forwardRef, useState, useLayoutEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import { useListBox } from 'react-aria/useListBox';
+import { VirtualizerItem } from 'react-aria/private/virtualizer/VirtualizerItem';
+import { useObjectRef } from 'react-aria/useObjectRef';
+import { mergeProps } from 'react-aria/mergeProps';
+import styles from '@danske/sapphire-css/components/listbox/listbox.module.css';
+import { ListBoxContext } from './ListBoxContext.js';
+import { ListBoxItemSkeleton } from './ListBoxItemSkeleton.js';
+import { ListBoxOption } from './ListBoxOption.js';
+import { ListBoxSection } from './ListBoxSection.js';
+import { useListWithLoadingStateLayout } from '../../utils/virtualization/useListWithLoadingStateLayout.js';
+import { VirtualizerWithLoadingSkeleton } from '../../utils/virtualization/VirtualizerWithLoadingSkeleton.js';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import '../../Popover/src/Popover.js';
+import '@danske/sapphire-react-context';
+import { useScrollCheck } from '../../utils/useScrollCheck.js';
+import 'react-aria/useButton';
+import { useCollectionFocusProxy } from '../../utils/useCollectionFocusProxy.js';
+import { tokens } from '@danske/sapphire-css/themes';
+import { ListBoxEmptyState } from './ListBoxEmptyState.js';
+import { useMessageFormatter } from '@react-aria/i18n';
+import intlMessages from '../i18n/index.js';
+
+const _StatelessListBox = ({
+  loadingState,
+  loadingSkeletonRowsCount = 4,
+  state,
+  renderLoadingSkeleton = (index) => /* @__PURE__ */ React.createElement(ListBoxItemSkeleton, { key: index, index }),
+  onLoadMore,
+  hasScrollDividers = false,
+  connectedInputRef,
+  shouldUseVirtualFocus = Boolean(connectedInputRef),
+  disableSelectedStyles = false,
+  negativeSideMargin,
+  emptyState: emptyStateProp,
+  ...otherProps
+}, ref) => {
+  const { styleProps } = useSapphireStyleProps(otherProps);
+  const listBoxRef = useObjectRef(ref);
+  const { listBoxProps } = useListBox(
+    {
+      ...otherProps,
+      shouldUseVirtualFocus,
+      isVirtualized: true
+    },
+    state,
+    listBoxRef
+  );
+  const formatMessage = useMessageFormatter(intlMessages);
+  const emptyState = emptyStateProp === null ? null : /* @__PURE__ */ React.createElement(ListBoxEmptyState, null, emptyStateProp || formatMessage("empty"));
+  const layout = useListWithLoadingStateLayout({
+    loadingState,
+    loadingSkeletonRowsCount,
+    sectionDividerHeight: 5,
+    headingHeight: 34
+  });
+  useCollectionFocusProxy({
+    state,
+    focusProxyRef: connectedInputRef,
+    collectionRef: listBoxRef
+  });
+  const { scrollCheckProps, isScrolled, isScrollable } = useScrollCheck(listBoxRef);
+  const constrainWidth = styleProps.style?.maxWidth !== void 0 || styleProps.style?.width !== void 0;
+  const [containerMaxWidth, setContainerMaxWidth] = useState(void 0);
+  useLayoutEffect(() => {
+    setContainerMaxWidth(
+      constrainWidth && listBoxRef.current ? listBoxRef.current.offsetWidth : void 0
+    );
+  }, [constrainWidth]);
+  const renderWrapper = useCallback(
+    (parent, reusableView, children, renderChildren) => {
+      if (reusableView.viewType === "section" && reusableView.content) {
+        return /* @__PURE__ */ React.createElement(
+          ListBoxSection,
+          {
+            key: reusableView.key,
+            item: reusableView.content,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            childrenViews: children
+          },
+          renderChildren(children.filter((c) => c.viewType === "item"))
+        );
+      }
+      return /* @__PURE__ */ React.createElement(
+        VirtualizerItem,
+        {
+          key: reusableView.key,
+          layoutInfo: reusableView.layoutInfo,
+          virtualizer: reusableView.virtualizer,
+          parent: parent?.layoutInfo
+        },
+        reusableView.rendered
+      );
+    },
+    []
+  );
+  return /* @__PURE__ */ React.createElement(
+    ListBoxContext.Provider,
+    {
+      value: {
+        state,
+        shouldUseVirtualFocus,
+        disableSelectedStyles,
+        containerMaxWidth
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      VirtualizerWithLoadingSkeleton,
+      {
+        ...mergeProps(listBoxProps, scrollCheckProps),
+        onLoadMore,
+        scrollDirection: "vertical",
+        autoFocus: Boolean(otherProps.autoFocus),
+        layout,
+        collection: state.collection,
+        persistedKeys: new Set(
+          [
+            ...state.selectionManager.selectedKeys,
+            state.selectionManager.focusedKey
+          ].filter((key) => key !== null)
+        ),
+        className: clsx(
+          styles["sapphire-listbox"],
+          {
+            [styles["sapphire-listbox--selection"]]: !disableSelectedStyles
+          },
+          styleProps.className
+        ),
+        style: {
+          ...styleProps.style,
+          padding: void 0,
+          ...negativeSideMargin ? {
+            marginLeft: typeof negativeSideMargin === "string" ? `calc(${negativeSideMargin} * -1)` : `-${negativeSideMargin}px`,
+            marginRight: typeof negativeSideMargin === "string" ? `calc(${negativeSideMargin} * -1)` : `-${negativeSideMargin}px`
+          } : {},
+          // Should be moved to css when we are a little more sure about what we want, and specially
+          // when/if we need the same feature in Sapphire Angular.
+          borderTop: hasScrollDividers && isScrolled ? `${tokens.size.borderSm} solid ${tokens.color.borderSecondary}` : "",
+          borderBottom: hasScrollDividers && isScrollable ? `${tokens.size.borderSm} solid ${tokens.color.borderSecondary}` : ""
+        },
+        renderWrapper,
+        renderLoadingSkeleton,
+        loadingSkeletonRowsCount,
+        emptyState,
+        ref: listBoxRef,
+        "aria-busy": loadingState && true
+      },
+      (kind, item) => {
+        const node = item;
+        if (kind === "item") {
+          return /* @__PURE__ */ React.createElement(ListBoxOption, { key: node.key, item: node });
+        }
+        return null;
+      }
+    )
+  );
+};
+forwardRef(_StatelessListBox);
+//# sourceMappingURL=StatelessListBox.js.map

package/build/esm/core/src/ListBox/src/StatelessListBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatelessListBox.js","sources":["../../../../../../../core/src/ListBox/src/StatelessListBox.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useCallback,\n  useLayoutEffect,\n  useState,\n  RefObject,\n} from 'react';\nimport clsx from 'clsx';\nimport { AriaListBoxOptions, useListBox } from 'react-aria/useListBox';\nimport { VirtualizerItem } from 'react-aria/private/virtualizer/VirtualizerItem';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { ListState } from 'react-stately/useListState';\nimport { ReusableView } from 'react-stately/useVirtualizerState';\nimport { Node } from '@react-types/shared';\nimport { AriaListBoxProps } from 'react-aria/useListBox';\nimport styles from '@danske/sapphire-css/components/listbox/listbox.module.css';\nimport { ListBoxContext } from './ListBoxContext';\nimport { ListBoxItemSkeleton } from './ListBoxItemSkeleton';\nimport { ListBoxOption } from './ListBoxOption';\nimport { ListBoxSection } from './ListBoxSection';\nimport { useListWithLoadingStateLayout } from '../../utils/virtualization/useListWithLoadingStateLayout';\nimport { VirtualizerWithLoadingSkeleton } from '../../utils/virtualization/VirtualizerWithLoadingSkeleton';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useScrollCheck,\n} from '../../utils';\nimport { useCollectionFocusProxy } from '../../utils/useCollectionFocusProxy';\nimport { tokens } from '@danske/sapphire-css/themes';\nimport {\n  CollectionBaseKeys,\n  GlobalDomAttributes,\n  MultipleSelectionKeys,\n} from '../../utils/types';\nimport { ListBoxEmptyState } from './ListBoxEmptyState';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\n/**\n * Component not exported externally which can render and manage the UI of the\n * listbox.\n * The `state` needs to be provided.\n */\nexport type StatelessListBoxProps<T> = Pick<\n  AriaListBoxOptions<T>,\n  | 'shouldUseVirtualFocus'\n  | 'onAction'\n  | 'autoFocus'\n  | MultipleSelectionKeys\n  | CollectionBaseKeys\n  | 'id'\n  | 'selectionMode'\n> &\n  Pick<AriaListBoxProps<T>, 'children'> &\n  SapphireStyleProps &\n  GlobalDomAttributes & {\n    loadingState?: 'loading';\n    loadingSkeletonRowsCount?: number;\n    /**\n     * Callback called when the user scrolled to the bottom of the listbox.\n     * Useful when implementing infinite scroll.\n     */\n    onLoadMore?: () => void;\n    disableSelectedStyles?: boolean;\n    state: ListState<T>;\n    renderLoadingSkeleton?: (index: number) => React.ReactNode;\n\n    /**\n     * Renders a message indicating the list is empty.\n     * Default is a simple \"No results\" (in given language) message.\n     * Passing `null` will hide the empty state message.\n     */\n    emptyState?: React.ReactNode;\n\n    // TODO(v5): remove. Check usages in Sapphire Insights before writing a codemod.\n    //  The usage is likely to be very limited if any.\n    /**\n     * @deprecated use marginX instead. negativeSideMargin={x} => marginX={`calc(-1 * ${x})`}\n     */\n    negativeSideMargin?: number | string;\n\n    /**\n     * Allows for connecting a (search) input to the ListBox, so that the ListBox\n     * items can be navigated and selected by keyboard when the input is focused.\n     */\n    connectedInputRef?: RefObject<HTMLElement>;\n\n    /**\n     * Whether top and bottom dividers should be shown to mark ListBox's scrollable area.\n     * The top divider will be shown when the list is **scrolled** down,\n     * and the bottom divider will be shown when the list is **scrollable**.\n     */\n    hasScrollDividers?: boolean;\n\n    /**\n     * Whether the listbox items should use virtual focus instead of being focused directly.\n     *\n     * @default `true` if `connectedInputRef` is provided, `false` otherwise\n     */\n    shouldUseVirtualFocus?: boolean;\n  };\n\nconst _StatelessListBox = <T extends object>(\n  {\n    loadingState,\n    loadingSkeletonRowsCount = 4,\n    state,\n    renderLoadingSkeleton = (index: number) => (\n      <ListBoxItemSkeleton key={index} index={index} />\n    ),\n    onLoadMore,\n    hasScrollDividers = false,\n    connectedInputRef,\n    shouldUseVirtualFocus = Boolean(connectedInputRef),\n    disableSelectedStyles = false,\n    negativeSideMargin,\n    emptyState: emptyStateProp,\n    ...otherProps\n  }: StatelessListBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n): JSX.Element => {\n  const { styleProps } = useSapphireStyleProps(otherProps);\n\n  const listBoxRef = useObjectRef(ref);\n  const { listBoxProps } = useListBox(\n    {\n      ...otherProps,\n      shouldUseVirtualFocus,\n      isVirtualized: true,\n    },\n    state,\n    listBoxRef\n  );\n\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const emptyState =\n    emptyStateProp === null ? null : (\n      <ListBoxEmptyState>\n        {emptyStateProp || formatMessage('empty')}\n      </ListBoxEmptyState>\n    );\n\n  const layout = useListWithLoadingStateLayout<T>({\n    loadingState,\n    loadingSkeletonRowsCount,\n    sectionDividerHeight: 5,\n    headingHeight: 34,\n  });\n\n  useCollectionFocusProxy({\n    state,\n    focusProxyRef: connectedInputRef,\n    collectionRef: listBoxRef,\n  });\n\n  const { scrollCheckProps, isScrolled, isScrollable } =\n    useScrollCheck(listBoxRef);\n\n  const constrainWidth =\n    styleProps.style?.maxWidth !== undefined ||\n    styleProps.style?.width !== undefined;\n  const [containerMaxWidth, setContainerMaxWidth] = useState<\n    number | undefined\n  >(undefined);\n  useLayoutEffect(() => {\n    setContainerMaxWidth(\n      constrainWidth && listBoxRef.current\n        ? listBoxRef.current.offsetWidth\n        : undefined\n    );\n  }, [constrainWidth]);\n\n  type View = ReusableView<Node<T>, ReactNode>;\n\n  const renderWrapper = useCallback(\n    (\n      parent: View | null,\n      reusableView: View,\n      children: View[],\n      renderChildren: (views: View[]) => ReactElement[]\n    ) => {\n      if (reusableView.viewType === 'section' && reusableView.content) {\n        return (\n          <ListBoxSection\n            key={reusableView.key}\n            item={reusableView.content!}\n            layoutInfo={reusableView.layoutInfo!}\n            virtualizer={reusableView.virtualizer}\n            childrenViews={children}\n          >\n            {renderChildren(children.filter((c) => c.viewType === 'item'))}\n          </ListBoxSection>\n        );\n      }\n\n      return (\n        <VirtualizerItem\n          key={reusableView.key}\n          layoutInfo={reusableView.layoutInfo!}\n          virtualizer={reusableView.virtualizer}\n          parent={parent?.layoutInfo}\n        >\n          {reusableView.rendered}\n        </VirtualizerItem>\n      );\n    },\n    []\n  );\n\n  return (\n    <ListBoxContext.Provider\n      value={{\n        state,\n        shouldUseVirtualFocus,\n        disableSelectedStyles,\n        containerMaxWidth,\n      }}\n    >\n      <VirtualizerWithLoadingSkeleton\n        {...mergeProps(listBoxProps, scrollCheckProps)}\n        onLoadMore={onLoadMore}\n        scrollDirection=\"vertical\"\n        autoFocus={Boolean(otherProps.autoFocus)}\n        layout={layout}\n        collection={state.collection}\n        persistedKeys={\n          new Set(\n            [\n              ...state.selectionManager.selectedKeys,\n              state.selectionManager.focusedKey,\n            ].filter((key): key is React.Key => key !== null)\n          )\n        }\n        className={clsx(\n          styles['sapphire-listbox'],\n          {\n            [styles['sapphire-listbox--selection']]: !disableSelectedStyles,\n          },\n          styleProps.className\n        )}\n        style={{\n          ...styleProps.style,\n          padding:\n            undefined /* virtualizer tries to take control of padding. this stops that */,\n          ...(negativeSideMargin\n            ? {\n                marginLeft:\n                  typeof negativeSideMargin === 'string'\n                    ? `calc(${negativeSideMargin} * -1)`\n                    : `-${negativeSideMargin}px`,\n                marginRight:\n                  typeof negativeSideMargin === 'string'\n                    ? `calc(${negativeSideMargin} * -1)`\n                    : `-${negativeSideMargin}px`,\n              }\n            : {}),\n          // Should be moved to css when we are a little more sure about what we want, and specially\n          // when/if we need the same feature in Sapphire Angular.\n          borderTop:\n            hasScrollDividers && isScrolled\n              ? `${tokens.size.borderSm} solid ${tokens.color.borderSecondary}`\n              : '',\n          borderBottom:\n            hasScrollDividers && isScrollable\n              ? `${tokens.size.borderSm} solid ${tokens.color.borderSecondary}`\n              : '',\n        }}\n        renderWrapper={renderWrapper as any}\n        renderLoadingSkeleton={renderLoadingSkeleton}\n        loadingSkeletonRowsCount={loadingSkeletonRowsCount}\n        emptyState={emptyState}\n        ref={listBoxRef}\n        aria-busy={loadingState && true}\n      >\n        {(kind, item) => {\n          const node = item as Node<T>;\n          if (kind === 'item') {\n            return <ListBoxOption key={node.key} item={node} />;\n          }\n          return null;\n        }}\n      </VirtualizerWithLoadingSkeleton>\n    </ListBoxContext.Provider>\n  );\n};\n\nexport const StatelessListBox = forwardRef(_StatelessListBox) as <\n  T extends object\n>(\n  props: StatelessListBoxProps<T> & { ref?: Ref<HTMLUListElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":"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"}

package/build/esm/core/src/Pagination/src/usePaginationContext.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const PaginationContext = React.createContext({
+  scrollableRef: void 0
+});
+
+export { PaginationContext };
+//# sourceMappingURL=usePaginationContext.js.map

package/build/esm/core/src/Pagination/src/usePaginationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationContext.js","sources":["../../../../../../../core/src/Pagination/src/usePaginationContext.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface PaginationContextValue {\n  scrollableRef?: React.RefObject<HTMLElement>;\n}\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  scrollableRef: undefined,\n});\nexport const usePaginationContext = (): PaginationContextValue => {\n  return React.useContext(PaginationContext);\n};\n"],"names":[],"mappings":";;AAMO,MAAM,iBAAA,GAAoB,MAAM,aAAA,CAAsC;AAAA,EAC3E,aAAA,EAAe;AACjB,CAAC;;;;"}

package/build/esm/core/src/Popover/src/Popover.js

@@ -0,0 +1,62 @@
+import React, { forwardRef, useEffect } from 'react';
+import { Popover, OverlayTriggerStateContext } from 'react-aria-components';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import clsx from 'clsx';
+import popoverStyles from '@danske/sapphire-css/components/popover/popover.module.css';
+import { FocusScope } from 'react-aria/FocusScope';
+import { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside';
+import { useObjectRef } from 'react-aria/useObjectRef';
+
+forwardRef(function Popover2({
+  children,
+  padded,
+  defaultMaxWidth,
+  maxHeight,
+  state,
+  restoreFocus = false,
+  ...props
+}, forwardedRef) {
+  const ref = useObjectRef(forwardedRef);
+  const { styleProps } = useSapphireStyleProps({ ...props, maxHeight });
+  useEffect(() => {
+    if (state && state.isOpen && props.isNonModal) {
+      return ariaHideOutside([
+        props.triggerRef?.current,
+        ref?.current
+      ]);
+    }
+  }, [state?.isOpen, props.isNonModal, ref, props.triggerRef]);
+  const popover = /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      ...props,
+      ref,
+      style: styleProps.style,
+      className: clsx(styleProps.className, popoverStyles["sapphire-popover"], {
+        [popoverStyles["sapphire-popover--padded"]]: padded,
+        [popoverStyles["sapphire-popover--max-width"]]: defaultMaxWidth
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: popoverStyles["sapphire-popover__content"],
+        role: "presentation"
+      },
+      /* @__PURE__ */ React.createElement(
+        FocusScope,
+        {
+          autoFocus: !props.isNonModal,
+          contain: !props.isNonModal,
+          restoreFocus
+        },
+        children
+      )
+    )
+  );
+  if (state) {
+    return /* @__PURE__ */ React.createElement(OverlayTriggerStateContext.Provider, { value: state }, popover);
+  }
+  return popover;
+});
+//# sourceMappingURL=Popover.js.map

package/build/esm/core/src/Popover/src/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../../../../../core/src/Popover/src/Popover.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef, useEffect } from 'react';\nimport {\n  OverlayTriggerState,\n  Popover as AriaPopover,\n  PopoverProps as RACPopoverProps,\n  OverlayTriggerStateContext,\n} from 'react-aria-components';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n} from '../../utils/useSapphireStyleProps';\nimport clsx from 'clsx';\nimport popoverStyles from '@danske/sapphire-css/components/popover/popover.module.css';\nimport { AriaPositionPropsKeys, GlobalDomAttributes } from '../../utils/types';\nimport { FocusScope } from 'react-aria/FocusScope';\nimport { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside';\nimport { useObjectRef } from 'react-aria/useObjectRef';\n\nexport interface PopoverProps\n  extends Pick<\n      RACPopoverProps,\n      | 'triggerRef'\n      | 'isNonModal'\n      | 'isKeyboardDismissDisabled'\n      | 'shouldCloseOnInteractOutside'\n      | AriaPositionPropsKeys\n    >,\n    SapphireStyleProps,\n    GlobalDomAttributes {\n  state?: OverlayTriggerState;\n  children: React.ReactNode;\n  /**\n   * Whether to include the default popover padding.\n   * @default false\n   */\n  padded?: boolean;\n  /**\n   * Whether it has a predefined size constraint. Useful when the popover is\n   * used as a dropdown of selects, menus etc.\n   * @default false\n   */\n  defaultMaxWidth?: boolean;\n\n  restoreFocus?: boolean;\n}\n\n/**\n * Helper component intended for internal use within Sapphire in components\n * like Select and Menu.\n *\n * *Popovers* are containers used to display transient content such as menus,\n * options, additional actions etc.\n *\n * @internal\n */\nexport const Popover = forwardRef(function Popover(\n  {\n    children,\n    padded,\n    defaultMaxWidth,\n    maxHeight,\n    state,\n    restoreFocus = false,\n    ...props\n  }: PopoverProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const ref = useObjectRef(forwardedRef);\n  const { styleProps } = useSapphireStyleProps({ ...props, maxHeight });\n\n  /*\n   * We need this effect to fix an issue in react-aria's \"usePopover\". The\n   * issue is that a popover which is not a modal (see prop \"isNonModal\") will\n   * get aria-hidden if opened in an existing modal. See more here\n   * https://github.com/adobe/react-spectrum/issues/4213\n   *\n   * This same hack is present in react-aria's useComboBox.\n   * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/combobox/src/useComboBox.ts#L300-L304\n   */\n  useEffect(() => {\n    if (state && state.isOpen && props.isNonModal) {\n      // input to ariaHideOutside is what NOT to hide (and their ancestors).\n      return ariaHideOutside([\n        props.triggerRef?.current as Element,\n        ref?.current as Element,\n      ]);\n    }\n  }, [state?.isOpen, props.isNonModal, ref, props.triggerRef]);\n\n  const popover = (\n    <AriaPopover\n      {...props}\n      ref={ref}\n      style={styleProps.style}\n      className={clsx(styleProps.className, popoverStyles['sapphire-popover'], {\n        [popoverStyles['sapphire-popover--padded']]: padded,\n        [popoverStyles['sapphire-popover--max-width']]: defaultMaxWidth,\n      })}\n    >\n      <div\n        className={popoverStyles['sapphire-popover__content']}\n        role=\"presentation\"\n      >\n        {/*\n         * TODO UC-5016\n         * The Overlay component (from react-aria-components) already wraps the\n         * portal content in a FocusScope with restoreFocus and contain.\n         * We only need autoFocus here to focus the first focusable child\n         * (rather than the popover container itself, which is what RAC does by default).\n         */}\n        <FocusScope\n          autoFocus={!props.isNonModal}\n          contain={!props.isNonModal}\n          restoreFocus={restoreFocus}\n        >\n          {children}\n        </FocusScope>\n      </div>\n    </AriaPopover>\n  );\n\n  if (state) {\n    return (\n      <OverlayTriggerStateContext.Provider value={state}>\n        {popover}\n      </OverlayTriggerStateContext.Provider>\n    );\n  }\n\n  return popover;\n});\n"],"names":["Popover","AriaPopover"],"mappings":";;;;;;;;;AAuDuB,UAAA,CAAW,SAASA,QAAAA,CACzC;AAAA,EACE,QAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,GAAe,KAAA;AAAA,EACf,GAAG;AACL,CAAA,EACA,YAAA,EACA;AACA,EAAA,MAAM,GAAA,GAAM,aAAa,YAAY,CAAA;AACrC,EAAA,MAAM,EAAE,YAAW,GAAI,qBAAA,CAAsB,EAAE,GAAG,KAAA,EAAO,WAAW,CAAA;AAWpE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAA,IAAS,KAAA,CAAM,MAAA,IAAU,KAAA,CAAM,UAAA,EAAY;AAE7C,MAAA,OAAO,eAAA,CAAgB;AAAA,QACrB,MAAM,UAAA,EAAY,OAAA;AAAA,QAClB,GAAA,EAAK;AAAA,OACN,CAAA;AAAA,IACH;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,MAAA,EAAQ,MAAM,UAAA,EAAY,GAAA,EAAK,KAAA,CAAM,UAAU,CAAC,CAAA;AAE3D,EAAA,MAAM,OAAA,mBACJ,KAAA,CAAA,aAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,MACA,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,WAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,aAAA,CAAc,kBAAkB,CAAA,EAAG;AAAA,QACvE,CAAC,aAAA,CAAc,0BAA0B,CAAC,GAAG,MAAA;AAAA,QAC7C,CAAC,aAAA,CAAc,6BAA6B,CAAC,GAAG;AAAA,OACjD;AAAA,KAAA;AAAA,oBAED,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,cAAc,2BAA2B,CAAA;AAAA,QACpD,IAAA,EAAK;AAAA,OAAA;AAAA,sBASL,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,CAAC,KAAA,CAAM,UAAA;AAAA,UAClB,OAAA,EAAS,CAAC,KAAA,CAAM,UAAA;AAAA,UAChB;AAAA,SAAA;AAAA,QAEC;AAAA;AACH;AACF,GACF;AAGF,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,2CACG,0BAAA,CAA2B,QAAA,EAA3B,EAAoC,KAAA,EAAO,SACzC,OACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,OAAA;AACT,CAAC"}

package/build/esm/core/src/Radio/src/RadioBox.js

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/radio/radio.module.css';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import '@danske/sapphire-react-context';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+import { useContextProps, CheckboxContext } from 'react-aria-components';
+
+const RadioBox = forwardRef(function RadioBox2(props, ref) {
+  [props, ref] = useContextProps(props, ref, CheckboxContext);
+  const {
+    elementType: CustomElement = "div",
+    size,
+    isDisabled,
+    isHovered,
+    isFocusVisible,
+    isPressed,
+    isSelected,
+    label,
+    role,
+    children,
+    slot,
+    ...otherProps
+  } = props;
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps);
+  const ariaProps = role === "checkbox" ? { role, "aria-checked": isSelected } : { role };
+  return /* @__PURE__ */ React.createElement(
+    CustomElement,
+    {
+      ...filteredProps,
+      ...ariaProps,
+      ref,
+      className: clsx(
+        styles["sapphire-radio"],
+        {
+          [styles["sapphire-radio--checked"]]: isSelected,
+          [styles["sapphire-radio--md"]]: size === "md",
+          [styles["is-hover"]]: isHovered,
+          [styles["is-focus"]]: isFocusVisible,
+          [styles["is-active"]]: isPressed
+        },
+        styles["js-focus"],
+        styleProps.className
+      ),
+      style: styleProps.style
+    },
+    children,
+    /* @__PURE__ */ React.createElement("span", { className: clsx(styles["sapphire-radio__box"]) }),
+    label && /* @__PURE__ */ React.createElement("span", { className: clsx(styles["sapphire-radio__label"]) }, label)
+  );
+});
+
+export { RadioBox };
+//# sourceMappingURL=RadioBox.js.map

package/build/esm/core/src/Radio/src/RadioBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioBox.js","sources":["../../../../../../../core/src/Radio/src/RadioBox.tsx"],"sourcesContent":["import React, { AriaRole, ForwardedRef, forwardRef, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/radio/radio.module.css';\nimport { SapphireStyleProps, useSapphireStyleProps } from '../../utils';\nimport { GlobalDomAttributes } from '../../utils/types';\nimport {\n  CheckboxContext,\n  SlotProps,\n  useContextProps,\n} from 'react-aria-components';\n\nexport type RadioBoxProps = GlobalDomAttributes &\n  SapphireStyleProps &\n  SlotProps & {\n    elementType?: 'div' | 'label';\n    size?: 'lg' | 'md';\n    isDisabled?: boolean;\n    isHovered?: boolean;\n    isFocusVisible?: boolean;\n    isPressed?: boolean;\n    isSelected?: boolean;\n    label?: ReactNode;\n    children?: ReactNode;\n    role?: AriaRole;\n  };\n\n/**\n * Internal \"dumb\" component which allows one to render the radio box. This\n * does not come with any radio-related functionality. It is just the plain UI\n * element.\n */\nexport const RadioBox = forwardRef(function RadioBox(\n  props: RadioBoxProps,\n  ref: ForwardedRef<HTMLLabelElement>\n) {\n  [props, ref] = useContextProps(props, ref, CheckboxContext);\n  const {\n    elementType: CustomElement = 'div',\n    size,\n    isDisabled,\n    isHovered,\n    isFocusVisible,\n    isPressed,\n    isSelected,\n    label,\n    role,\n    children,\n    slot,\n    ...otherProps\n  } = props;\n  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps);\n  const ariaProps =\n    role === 'checkbox' ? { role, 'aria-checked': isSelected } : { role };\n\n  return (\n    <CustomElement\n      {...filteredProps}\n      {...ariaProps}\n      ref={ref as ForwardedRef<any>}\n      className={clsx(\n        styles['sapphire-radio'],\n        {\n          [styles['sapphire-radio--checked']]: isSelected,\n          [styles['sapphire-radio--md']]: size === 'md',\n          [styles['is-hover']]: isHovered,\n          [styles['is-focus']]: isFocusVisible,\n          [styles['is-active']]: isPressed,\n        },\n        styles['js-focus'],\n        styleProps.className\n      )}\n      style={styleProps.style}\n    >\n      {children}\n      <span className={clsx(styles['sapphire-radio__box'])} />\n      {label && (\n        <span className={clsx(styles['sapphire-radio__label'])}>{label}</span>\n      )}\n    </CustomElement>\n  );\n});\n"],"names":["RadioBox"],"mappings":";;;;;;;;;;;;AA+BO,MAAM,QAAA,GAAW,UAAA,CAAW,SAASA,SAAAA,CAC1C,OACA,GAAA,EACA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAA,CAAgB,KAAA,EAAO,KAAK,eAAe,CAAA;AAC1D,EAAA,MAAM;AAAA,IACJ,aAAa,aAAA,GAAgB,KAAA;AAAA,IAC7B,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,sBAAsB,UAAU,CAAA;AACtE,EAAA,MAAM,SAAA,GACJ,SAAS,UAAA,GAAa,EAAE,MAAM,cAAA,EAAgB,UAAA,EAAW,GAAI,EAAE,IAAA,EAAK;AAEtE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA;AAAA,MACH,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,OAAO,gBAAgB,CAAA;AAAA,QACvB;AAAA,UACE,CAAC,MAAA,CAAO,yBAAyB,CAAC,GAAG,UAAA;AAAA,UACrC,CAAC,MAAA,CAAO,oBAAoB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,UACzC,CAAC,MAAA,CAAO,UAAU,CAAC,GAAG,SAAA;AAAA,UACtB,CAAC,MAAA,CAAO,UAAU,CAAC,GAAG,cAAA;AAAA,UACtB,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG;AAAA,SACzB;AAAA,QACA,OAAO,UAAU,CAAA;AAAA,QACjB,UAAA,CAAW;AAAA,OACb;AAAA,MACA,OAAO,UAAA,CAAW;AAAA,KAAA;AAAA,IAEjB,QAAA;AAAA,wCACA,MAAA,EAAA,EAAK,SAAA,EAAW,KAAK,MAAA,CAAO,qBAAqB,CAAC,CAAA,EAAG,CAAA;AAAA,IACrD,KAAA,wCACE,MAAA,EAAA,EAAK,SAAA,EAAW,KAAK,MAAA,CAAO,uBAAuB,CAAC,CAAA,EAAA,EAAI,KAAM;AAAA,GAEnE;AAEJ,CAAC;;;;"}

package/build/esm/core/src/Separator/src/Separator.js

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Separator as Separator$1 } from 'react-aria-components';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import { useThemeCheck } from '../../utils/useThemeCheck.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import styles from '@danske/sapphire-css/components/separator/separator.module.css';
+
+const Separator = forwardRef(function Separator2(props, ref) {
+  useThemeCheck();
+  const { orientation = "horizontal", ...otherProps } = props;
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps);
+  return /* @__PURE__ */ React.createElement(
+    Separator$1,
+    {
+      ref,
+      ...filteredProps,
+      ...filterDOMProps(props, { global: true }),
+      style: styleProps.style,
+      className: clsx(styles["sapphire-separator"], styleProps.className),
+      orientation
+    }
+  );
+});
+
+export { Separator };
+//# sourceMappingURL=Separator.js.map

package/build/esm/core/src/Separator/src/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sources":["../../../../../../../core/src/Separator/src/Separator.tsx"],"sourcesContent":["/**\n * Based on: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/divider/src/Divider.tsx\n */\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { DOMProps } from '@react-types/shared';\nimport { Separator as RACSeparator } from 'react-aria-components';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '../../utils';\nimport { GlobalDomAttributes } from '../../utils/types';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport styles from '@danske/sapphire-css/components/separator/separator.module.css';\n\nexport interface SeparatorProps\n  extends DOMProps,\n    GlobalDomAttributes,\n    SapphireStyleProps {\n  /**\n   * The orientation of the separator.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Separator = forwardRef(function Separator(\n  props: SeparatorProps,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  useThemeCheck();\n  const { orientation = 'horizontal', ...otherProps } = props;\n  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps);\n\n  return (\n    <RACSeparator\n      ref={ref}\n      {...filteredProps}\n      {...filterDOMProps(props, { global: true })}\n      style={styleProps.style}\n      className={clsx(styles['sapphire-separator'], styleProps.className)}\n      orientation={orientation}\n    />\n  );\n});\n"],"names":["Separator","RACSeparator"],"mappings":";;;;;;;;;;;;;AA4BO,MAAM,SAAA,GAAY,UAAA,CAAW,SAASA,UAAAA,CAC3C,OACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,WAAA,GAAc,YAAA,EAAc,GAAG,YAAW,GAAI,KAAA;AACtD,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,sBAAsB,UAAU,CAAA;AAEtE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,aAAA;AAAA,MACH,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,WAAW,IAAA,CAAK,MAAA,CAAO,oBAAoB,CAAA,EAAG,WAAW,SAAS,CAAA;AAAA,MAClE;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/build/esm/core/src/Skeleton/src/Skeleton.js

@@ -0,0 +1,19 @@
+import 'react';
+import 'clsx';
+import '@danske/sapphire-css/components/skeleton/skeleton.module.css';
+import '@danske/sapphire-react-context';
+import 'react-aria/useId';
+import '../../utils/useSapphireTextStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+import { SkeletonText } from './SkeletonText.js';
+import { SkeletonCircle } from './SkeletonCircle.js';
+
+const Skeleton = {
+  Circle: SkeletonCircle,
+  Text: SkeletonText};
+
+export { Skeleton };
+//# sourceMappingURL=Skeleton.js.map

package/build/esm/core/src/Skeleton/src/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../../../../../core/src/Skeleton/src/Skeleton.tsx"],"sourcesContent":["import { SkeletonBlock, type SkeletonBlockProps } from './SkeletonBlock';\nimport { SkeletonText, type SkeletonTextProps } from './SkeletonText';\nimport { SkeletonCircle, type SkeletonCircleProps } from './SkeletonCircle';\nimport { SkeletonFrom, type SkeletonFromProps } from './SkeletonFrom';\n\nexport const Skeleton = {\n  Block: SkeletonBlock,\n  Circle: SkeletonCircle,\n  Text: SkeletonText,\n  From: SkeletonFrom,\n};\n\nexport type {\n  SkeletonBlockProps,\n  SkeletonCircleProps,\n  SkeletonFromProps,\n  SkeletonTextProps,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAKO,MAAM,QAAA,GAAW;AAAA,EAEtB,MAAA,EAAQ,cAAA;AAAA,EACR,IAAA,EAAM,YAER;;;;"}

package/build/esm/core/src/Skeleton/src/SkeletonCircle.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/skeleton/skeleton.module.css';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import { useThemeCheck } from '../../utils/useThemeCheck.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+import { getAnimationDelay } from './animation.js';
+
+const SkeletonCircle = ({
+  index,
+  children,
+  ...rest
+}) => {
+  useThemeCheck();
+  const { styleProps } = useSapphireStyleProps(rest);
+  const animationDelay = getAnimationDelay(index);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      style: {
+        animationDelay,
+        ...styleProps.style
+      },
+      className: clsx(
+        styles["sapphire-skeleton"],
+        styles["sapphire-skeleton--circle"],
+        styleProps.className
+      )
+    }
+  );
+};
+
+export { SkeletonCircle };
+//# sourceMappingURL=SkeletonCircle.js.map

package/build/esm/core/src/Skeleton/src/SkeletonCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonCircle.js","sources":["../../../../../../../core/src/Skeleton/src/SkeletonCircle.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\n\nimport styles from '@danske/sapphire-css/components/skeleton/skeleton.module.css';\n\nimport { useSapphireStyleProps, useThemeCheck } from '../../utils';\nimport { getAnimationDelay } from './animation';\nimport { SkeletonProps } from './skeleton.model';\n\nexport type SkeletonCircleProps = SkeletonProps;\n\nexport const SkeletonCircle: React.FC<SkeletonCircleProps> = ({\n  index,\n  children,\n  ...rest\n}) => {\n  useThemeCheck();\n\n  const { styleProps } = useSapphireStyleProps(rest);\n\n  const animationDelay = getAnimationDelay(index);\n\n  return (\n    <div\n      {...rest}\n      style={{\n        animationDelay,\n        ...styleProps.style,\n      }}\n      className={cx(\n        styles['sapphire-skeleton'],\n        styles['sapphire-skeleton--circle'],\n        styleProps.className\n      )}\n    />\n  );\n};\n"],"names":["cx"],"mappings":";;;;;;;;;;;;AAWO,MAAM,iBAAgD,CAAC;AAAA,EAC5D,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,IAAI,CAAA;AAEjD,EAAA,MAAM,cAAA,GAAiB,kBAAkB,KAAK,CAAA;AAE9C,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,cAAA;AAAA,QACA,GAAG,UAAA,CAAW;AAAA,OAChB;AAAA,MACA,SAAA,EAAWA,IAAA;AAAA,QACT,OAAO,mBAAmB,CAAA;AAAA,QAC1B,OAAO,2BAA2B,CAAA;AAAA,QAClC,UAAA,CAAW;AAAA;AACb;AAAA,GACF;AAEJ;;;;"}

package/build/esm/core/src/Skeleton/src/SkeletonText.js

@@ -0,0 +1,59 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/skeleton/skeleton.module.css';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import { useThemeCheck } from '../../utils/useThemeCheck.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+import { getAnimationDelay } from './animation.js';
+
+const isFixedWidthType = (props) => {
+  return props.widthType === "fixed";
+};
+const SkeletonText = (props) => {
+  useThemeCheck();
+  const {
+    index,
+    widthType = "randomPct",
+    UNSAFE_className,
+    UNSAFE_style,
+    children,
+    minWidth = 50,
+    maxWidth = 100,
+    ...rest
+  } = props;
+  const animationDelay = getAnimationDelay(index);
+  const { styleProps } = useSapphireStyleProps({
+    UNSAFE_className,
+    UNSAFE_style
+  });
+  const skeletonWidth = useMemo(() => {
+    if (isFixedWidthType(props)) {
+      return props.width;
+    }
+    const calculatedWidth = Math.random() * (maxWidth - minWidth) + minWidth;
+    return widthType === "randomPct" ? `${calculatedWidth}%` : calculatedWidth;
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...rest,
+      style: {
+        width: skeletonWidth,
+        animationDelay,
+        ...styleProps.style
+      },
+      className: clsx(
+        styles["sapphire-skeleton"],
+        styles["sapphire-skeleton--text"],
+        styleProps.className
+      )
+    }
+  );
+};
+
+export { SkeletonText };
+//# sourceMappingURL=SkeletonText.js.map

package/build/esm/core/src/Skeleton/src/SkeletonText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.js","sources":["../../../../../../../core/src/Skeleton/src/SkeletonText.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport cx from 'clsx';\n\nimport styles from '@danske/sapphire-css/components/skeleton/skeleton.module.css';\n\nimport { useSapphireStyleProps, useThemeCheck } from '../../utils';\nimport { SkeletonProps } from './skeleton.model';\nimport { getAnimationDelay } from './animation';\n\ninterface SkeletonTextFixedWidth {\n  /**\n   * Width type. Will be used to determine width calculation.\n   * @default 'randomPct'\n   * */\n  widthType?: 'fixed';\n  /** Allowed width of a skeleton */\n  width: number;\n  minWidth?: never;\n  maxWidth?: never;\n}\n\ninterface SkeletonTextRandomPxWidth {\n  /**\n   * Width type. Will be used to determine width calculation.\n   * @default 'randomPct'\n   */\n  widthType?: 'randomPx';\n  /** Min width of skeleton. Used internally to calculate width of a component */\n  minWidth?: number;\n  /** Max width of skeleton. Used internally to calculate width of a component */\n  maxWidth?: number;\n}\n\ninterface SkeletonTextRandomPcWidth {\n  /**\n   * Width type. Will be used to determine width calculation.\n   * @default 'randomPct'\n   */\n  widthType?: 'randomPct';\n  /** Min width of skeleton. Used internally to calculate width of a component */\n  minWidth?: number;\n  /** Max width of skeleton. Used internally to calculate width of a component */\n  maxWidth?: number;\n}\n\nexport type SkeletonTextProps = SkeletonProps &\n  (\n    | SkeletonTextFixedWidth\n    | SkeletonTextRandomPxWidth\n    | SkeletonTextRandomPcWidth\n  );\n\nconst isFixedWidthType = (\n  props: SkeletonTextProps\n): props is SkeletonProps & SkeletonTextFixedWidth => {\n  return props.widthType === 'fixed';\n};\n\nexport const SkeletonText: React.FC<SkeletonTextProps> = (props) => {\n  useThemeCheck();\n\n  const {\n    index,\n    widthType = 'randomPct',\n    UNSAFE_className,\n    UNSAFE_style,\n    children,\n    minWidth = 50,\n    maxWidth = 100,\n    ...rest\n  } = props;\n\n  const animationDelay = getAnimationDelay(index);\n  // Excluding minWidth & maxWidth props here as they're used only to calculate relevant width but not to define constraints.\n  const { styleProps } = useSapphireStyleProps({\n    UNSAFE_className,\n    UNSAFE_style,\n  });\n\n  const skeletonWidth = useMemo(() => {\n    if (isFixedWidthType(props)) {\n      return props.width;\n    }\n\n    const calculatedWidth = Math.random() * (maxWidth - minWidth) + minWidth;\n\n    return widthType === 'randomPct' ? `${calculatedWidth}%` : calculatedWidth;\n  }, []);\n\n  return (\n    <span\n      {...rest}\n      style={{\n        width: skeletonWidth,\n        animationDelay,\n        ...styleProps.style,\n      }}\n      className={cx(\n        styles['sapphire-skeleton'],\n        styles['sapphire-skeleton--text'],\n        styleProps.className\n      )}\n    />\n  );\n};\n"],"names":["cx"],"mappings":";;;;;;;;;;;;AAoDA,MAAM,gBAAA,GAAmB,CACvB,KAAA,KACoD;AACpD,EAAA,OAAO,MAAM,SAAA,KAAc,OAAA;AAC7B,CAAA;AAEO,MAAM,YAAA,GAA4C,CAAC,KAAA,KAAU;AAClE,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,SAAA,GAAY,WAAA;AAAA,IACZ,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,GAAW,EAAA;AAAA,IACX,QAAA,GAAW,GAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,cAAA,GAAiB,kBAAkB,KAAK,CAAA;AAE9C,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB;AAAA,IAC3C,gBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,QAAQ,MAAM;AAClC,IAAA,IAAI,gBAAA,CAAiB,KAAK,CAAA,EAAG;AAC3B,MAAA,OAAO,KAAA,CAAM,KAAA;AAAA,IACf;AAEA,IAAA,MAAM,eAAA,GAAkB,IAAA,CAAK,MAAA,EAAO,IAAK,WAAW,QAAA,CAAA,GAAY,QAAA;AAEhE,IAAA,OAAO,SAAA,KAAc,WAAA,GAAc,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,GAAM,eAAA;AAAA,EAC7D,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,aAAA;AAAA,QACP,cAAA;AAAA,QACA,GAAG,UAAA,CAAW;AAAA,OAChB;AAAA,MACA,SAAA,EAAWA,IAAA;AAAA,QACT,OAAO,mBAAmB,CAAA;AAAA,QAC1B,OAAO,yBAAyB,CAAA;AAAA,QAChC,UAAA,CAAW;AAAA;AACb;AAAA,GACF;AAEJ;;;;"}

package/build/esm/core/src/Skeleton/src/animation.js

@@ -0,0 +1,4 @@
+const getAnimationDelay = (order) => order ? `${order * 80}ms` : void 0;
+
+export { getAnimationDelay };
+//# sourceMappingURL=animation.js.map

package/build/esm/core/src/Skeleton/src/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sources":["../../../../../../../core/src/Skeleton/src/animation.ts"],"sourcesContent":["export const getAnimationDelay = (order?: number): string | undefined =>\n  order ? `${order * 80}ms` : undefined;\n"],"names":[],"mappings":"AAAO,MAAM,oBAAoB,CAAC,KAAA,KAChC,QAAQ,CAAA,EAAG,KAAA,GAAQ,EAAE,CAAA,EAAA,CAAA,GAAO;;;;"}

package/build/esm/core/src/ThemeRoot/src/ThemeRoot.js

@@ -0,0 +1,42 @@
+import React, { forwardRef, useContext } from 'react';
+import clsx from 'clsx';
+import { ThemeContext } from '@danske/sapphire-react-context';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+import surfaceStyles from '@danske/sapphire-css/components/surface/surface.module.css';
+import { viewStylePropHandlers } from '../../View/src/View.js';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+
+forwardRef(function ThemeRoot2({ children, variant, noSurface = false, ...props }, ref) {
+  const themeContext = useContext(ThemeContext);
+  if (typeof themeContext.theme === "undefined") {
+    throw new Error(
+      "<ThemeRoot> must be rendered inside a <SapphireProvider>."
+    );
+  }
+  const { styleProps } = useSapphireStyleProps(props, viewStylePropHandlers);
+  const theme = themeContext.theme;
+  const themeVariant = variant || themeContext.themeVariant;
+  const themeClassName = theme?.themeClassName;
+  const colorScheme = themeClassName?.includes("dark") ? "dark" : "light";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        themeClassName,
+        themeVariant === "secondary" ? theme?.themeSecondaryModifierClassName : themeVariant === "tertiary" ? theme?.themeTertiaryModifierClassName : themeVariant === "contrast" ? theme?.themeContrastModifierClassName : null,
+        styleProps.className,
+        !noSurface && surfaceStyles["sapphire-surface"]
+      ),
+      style: { ...styleProps.style, colorScheme },
+      ref,
+      ...filterDOMProps(props, { global: true })
+    },
+    children
+  );
+});
+//# sourceMappingURL=ThemeRoot.js.map

package/build/esm/core/src/ThemeRoot/src/ThemeRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeRoot.js","sources":["../../../../../../../core/src/ThemeRoot/src/ThemeRoot.tsx"],"sourcesContent":["import React, { ReactNode, useContext, forwardRef, ForwardedRef } from 'react';\nimport clsx from 'clsx';\nimport { ThemeContext, ThemeContextProps } from '@danske/sapphire-react-context';\nimport { Theme } from '@danske/sapphire-css/themes';\nimport { SapphireStyleProps, useSapphireStyleProps } from '../../utils';\nimport { ThemeVariant } from '../../SapphireProvider/src';\nimport surfaceStyles from '@danske/sapphire-css/components/surface/surface.module.css';\nimport { SapphireViewStyleProps } from '../../View';\nimport { DOMProps, DOMAttributes } from '@react-types/shared';\nimport { viewStylePropHandlers } from '../../View/src/View';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport interface ThemeRootProps\n  extends SapphireStyleProps,\n    Omit<SapphireViewStyleProps, 'backgroundColor' | 'color'>,\n    DOMProps,\n    Omit<\n      DOMAttributes,\n      'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'\n    > {\n  /**\n   * The theme variation, if the theme supports any.\n   */\n  variant?: ThemeVariant;\n  noSurface?: boolean;\n  children: ReactNode;\n}\n\n/**\n * ThemeRoot wraps the children with an element that provides the design tokens\n * in the DOM subtree. Also renders the necessary background surface for the\n * theme's components to be rendered on.\n */\nexport const ThemeRoot = forwardRef(function ThemeRoot(\n  { children, variant, noSurface = false, ...props }: ThemeRootProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const themeContext = useContext(ThemeContext);\n\n  if (typeof themeContext.theme === 'undefined') {\n    throw new Error(\n      '<ThemeRoot> must be rendered inside a <SapphireProvider>.'\n    );\n  }\n  const { styleProps } = useSapphireStyleProps(props, viewStylePropHandlers);\n  const theme = themeContext.theme as ThemeContextProps<\n    Theme,\n    ThemeVariant\n  >['theme'];\n  const themeVariant =\n    variant ||\n    (themeContext.themeVariant as ThemeContextProps<\n      Theme,\n      ThemeVariant\n    >['themeVariant']);\n\n  const themeClassName = theme?.themeClassName;\n  const colorScheme = themeClassName?.includes('dark') ? 'dark' : 'light';\n\n  return (\n    <div\n      className={clsx(\n        themeClassName,\n        themeVariant === 'secondary'\n          ? theme?.themeSecondaryModifierClassName\n          : themeVariant === 'tertiary'\n          ? theme?.themeTertiaryModifierClassName\n          : themeVariant === 'contrast'\n          ? theme?.themeContrastModifierClassName\n          : null,\n        styleProps.className,\n        !noSurface && surfaceStyles['sapphire-surface']\n      )}\n      style={{ ...styleProps.style, colorScheme }}\n      ref={ref}\n      {...filterDOMProps(props, { global: true })}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["ThemeRoot"],"mappings":";;;;;;;;;;;;;AAiCyB,UAAA,CAAW,SAASA,UAAAA,CAC3C,EAAE,QAAA,EAAU,OAAA,EAAS,SAAA,GAAY,KAAA,EAAO,GAAG,KAAA,EAAM,EACjD,GAAA,EACA;AACA,EAAA,MAAM,YAAA,GAAe,WAAW,YAAY,CAAA;AAE5C,EAAA,IAAI,OAAO,YAAA,CAAa,KAAA,KAAU,WAAA,EAAa;AAC7C,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,OAAO,qBAAqB,CAAA;AACzE,EAAA,MAAM,QAAQ,YAAA,CAAa,KAAA;AAI3B,EAAA,MAAM,YAAA,GACJ,WACC,YAAA,CAAa,YAAA;AAKhB,EAAA,MAAM,iBAAiB,KAAA,EAAO,cAAA;AAC9B,EAAA,MAAM,WAAA,GAAc,cAAA,EAAgB,QAAA,CAAS,MAAM,IAAI,MAAA,GAAS,OAAA;AAEhE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,cAAA;AAAA,QACA,YAAA,KAAiB,WAAA,GACb,KAAA,EAAO,+BAAA,GACP,YAAA,KAAiB,UAAA,GACjB,KAAA,EAAO,8BAAA,GACP,YAAA,KAAiB,UAAA,GACjB,KAAA,EAAO,8BAAA,GACP,IAAA;AAAA,QACJ,UAAA,CAAW,SAAA;AAAA,QACX,CAAC,SAAA,IAAa,aAAA,CAAc,kBAAkB;AAAA,OAChD;AAAA,MACA,KAAA,EAAO,EAAE,GAAG,UAAA,CAAW,OAAO,WAAA,EAAY;AAAA,MAC1C,GAAA;AAAA,MACC,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM;AAAA,KAAA;AAAA,IAEzC;AAAA,GACH;AAEJ,CAAC"}