@vygruppen/spor-react 12.23.0 → 12.24.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, RadioCard as RadioCard$1, Separator as Separator$1, ClientOnly, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, useDialogContext, Drawer as Drawer$1, InputElement, Input as Input$1, Combobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden as VisuallyHidden$1, defineConfig, useFilter, useListCollection, useCombobox, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHeader, TableRoot, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import * as spor_icon_react_star from '@vygruppen/spor-icon-react';
-import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, InformationFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, ChangeDirectionOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, DropdownUpFill18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon } from '@vygruppen/spor-icon-react';
+import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, InformationFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, ChangeDirectionOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React20 from 'react';
 import React20__default, { forwardRef, createContext, useId, cloneElement, useRef, useImperativeHandle, useMemo, isValidElement, useState, useEffect, useContext, Children, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -6261,11 +6261,13 @@ var TabsList = Tabs$1.List;
 var TabsTrigger = Tabs$1.Trigger;
 var TabsIndicator = Tabs$1.Indicator;
 var TabsContent = Tabs$1.Content;
-var getNextSortState = (current, key, columnIndex) => ({
-  key,
-  columnIndex,
-  direction: current.key === key && current.direction === "asc" ? "desc" : "asc"
-});
+var getNextSortState = (current, key, columnIndex) => {
+  if (current.key !== key)
+    return { key, columnIndex, direction: "asc" };
+  if (current.direction === "asc")
+    return { key, columnIndex, direction: "desc" };
+  return { key: null, direction: "asc", columnIndex: null };
+};
 var getSortKey = (children) => typeof children === "string" ? children.trim() : null;
 var getColumnIndex = (element) => {
   var _a5;
@@ -6337,28 +6339,35 @@ var Table = forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableColumnHeader = forwardRef(({ children, onClick, ...rest }, ref) => {
+var TableColumnHeader = forwardRef(({ children, ...rest }, ref) => {
   const { enabled, sortState, onSort } = useTableSort();
   const key = getSortKey(children);
-  const isActive = enabled && key != null && key === sortState.key;
-  return /* @__PURE__ */ jsx(
-    Table$1.ColumnHeader,
-    {
-      ref,
-      onClick: (event) => {
-        if (enabled && key) {
-          onSort(key, getColumnIndex(event.currentTarget));
-        }
-        onClick == null ? void 0 : onClick(event);
-      },
-      cursor: enabled && key ? "pointer" : void 0,
-      ...rest,
-      children: /* @__PURE__ */ jsxs(HStack, { children: [
-        children,
-        isActive && (sortState.direction === "asc" ? /* @__PURE__ */ jsx(DropdownUpFill18Icon, {}) : /* @__PURE__ */ jsx(DropdownDownFill18Icon, {}))
-      ] })
-    }
-  );
+  const props = rest;
+  const columnSortable = enabled && key != null && !("data-nosort" in props);
+  const isActive = columnSortable && key === sortState.key;
+  return /* @__PURE__ */ jsx(Table$1.ColumnHeader, { ref, ...rest, children: /* @__PURE__ */ jsxs(HStack, { children: [
+    children,
+    columnSortable && /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        variant: "ghost",
+        onClick: (event) => {
+          const th = event.currentTarget.closest("th");
+          if (th)
+            onSort(key, getColumnIndex(th));
+        },
+        p: "0px !important",
+        size: "xs",
+        children: isActive ? sortState.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpFill18Icon, { color: "outline.focus" }) : /* @__PURE__ */ jsx(ArrowDownFill18Icon, { color: "outline.focus" }) : /* @__PURE__ */ jsx(
+          ChangeDirectionFill18Icon,
+          {
+            transform: "rotate(90deg)",
+            color: "icon.disabled"
+          }
+        )
+      }
+    )
+  ] }) });
 });
 TableColumnHeader.displayName = "ColumnHeader";
 var TableRow = forwardRef(