@vygruppen/spor-react 12.22.2 → 12.24.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.22.2 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.24.0 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/index.mjs           326.79 KB
+ESM dist/index.mjs           330.53 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       691.91 KB
+ESM dist/index.mjs.map       700.07 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2623ms
-CJS dist/index.cjs           350.69 KB
+ESM ⚡️ Build success in 2926ms
+CJS dist/index.cjs           354.42 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       691.91 KB
+CJS dist/index.cjs.map       700.07 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2626ms
-DTS ⚡️ Build success in 20971ms
+CJS ⚡️ Build success in 2927ms
+DTS ⚡️ Build success in 22676ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        146.71 KB
+DTS dist/index.d.ts        147.69 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       146.71 KB
+DTS dist/index.d.cts       147.69 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@12.22.2 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.24.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.2.3] injecting env (0) from .env -- tip: ⚙️  load multiple .env files with { path: ['.env.local', '.env'] }
+[dotenv@17.2.3] injecting env (0) from .env -- tip: ⚙️  override existing env vars with { override: true }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @vygruppen/spor-react
 
+## 12.24.0
+
+### Minor Changes
+
+- 5afeedd: Updated the Table sortable styling
+
+### Patch Changes
+
+- @vygruppen/spor-icon-react@4.5.1
+
+## 12.23.0
+
+### Minor Changes
+
+- b179f2f: Added a props `sortable` to Table that lets you sort columns by clicking on them.
+
+### Patch Changes
+
+- a8cfc72: UU fixes on input, phonenumber input, and textarea components. Fix double announcement of labels, order when navigating with voiceover, and connect textarea-id to textarea-label.
+  - @vygruppen/spor-icon-react@4.5.1
+
 ## 12.22.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -3237,6 +3237,7 @@ var Input = React20.forwardRef(
     const recipe = react.useRecipe({ key: "input" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
+    const labelId = React20.useId();
     const inputRef = React20.useRef(null);
     React20.useImperativeHandle(ref, () => inputRef.current, []);
     const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } = useFloatingInputState({
@@ -3257,7 +3258,7 @@ var Input = React20.forwardRef(
         errorText,
         id: props.id,
         labelAsChild,
-        label: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { children: [
+        label: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { id: labelId, children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Box, { visibility: "hidden", children: startElement }),
           label
         ] }),
@@ -3291,7 +3292,8 @@ var Input = React20.forwardRef(
               onChange: handleChange,
               placeholder: "",
               css: styles,
-              fontSize: fontSize ?? "mobile.md"
+              fontSize: fontSize ?? "mobile.md",
+              "aria-labelledby": labelId
             }
           ),
           endElement && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4309,6 +4311,7 @@ var CountryCodeSelect = React20.forwardRef((props, ref) => {
       lazyMount: true,
       "aria-label": t(texts17.countryCode),
       sideRadiusVariant: "rightSideSquare",
+      role: "combobox",
       children: filteredCallingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item: code, children: code.label }, code.label))
     }
   );
@@ -4663,7 +4666,7 @@ var Textarea = React20.forwardRef(
       errorText,
       readOnly,
       helperText,
-      floatingLabel,
+      floatingLabel = true,
       ...restProps
     } = props;
     const recipe = react.useRecipe({ key: "textarea" });
@@ -4679,7 +4682,8 @@ var Textarea = React20.forwardRef(
       onChange: props.onChange,
       inputRef
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const labelId = React20.useId();
+    return /* @__PURE__ */ jsxRuntime.jsx(
       Field3,
       {
         errorText,
@@ -4690,31 +4694,24 @@ var Textarea = React20.forwardRef(
         floatingLabel,
         shouldFloat,
         position: "relative",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.Textarea,
-            {
-              ...restProps,
-              css: styles,
-              className: "peer",
-              ref: inputRef,
-              value: isControlled ? props.value : void 0,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onChange: handleChange,
-              style: { "--label-height": `${labelHeight}px` },
-              placeholder: " "
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FloatingLabel,
-            {
-              ref: labelRef,
-              "data-float": shouldFloat ? true : void 0,
-              children: label
-            }
-          )
-        ]
+        label: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { id: labelId, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("label", { ref: labelRef, children: label }) }),
+        id: restProps.id,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.Textarea,
+          {
+            ...restProps,
+            css: styles,
+            className: "peer",
+            ref: inputRef,
+            value: isControlled ? props.value : void 0,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onChange: handleChange,
+            style: { "--label-height": `${labelHeight}px` },
+            placeholder: " ",
+            "aria-labelledby": labelId
+          }
+        )
       }
     );
   }
@@ -6284,24 +6281,130 @@ var TabsList = react.Tabs.List;
 var TabsTrigger = react.Tabs.Trigger;
 var TabsIndicator = react.Tabs.Indicator;
 var TabsContent = react.Tabs.Content;
-var Table = React20.forwardRef((props, ref) => {
-  const { variant = "ghost", size, colorPalette = "green", children } = props;
-  const recipe = react.useSlotRecipe({ key: "table" });
-  const styles = recipe({ variant, size });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.Table.Root,
-    {
-      variant,
-      size,
-      colorPalette,
-      css: styles,
-      ref,
-      ...props,
-      children
-    }
+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;
+  return Array.prototype.indexOf.call((_a5 = element.parentElement) == null ? void 0 : _a5.children, element);
+};
+var getCellText = (row, columnIndex) => {
+  const cell = React20.Children.toArray(
+    row.props.children
+  )[columnIndex];
+  if (!React20.isValidElement(cell))
+    return "";
+  const props = cell.props;
+  return typeof props["data-sort"] === "string" && props["data-sort"] || typeof props.children === "string" && props.children.trim() || "";
+};
+var sortRows = (children, columnIndex, direction) => React20.Children.toArray(children).toSorted((a, b) => {
+  if (!React20.isValidElement(a) || !React20.isValidElement(b))
+    return 0;
+  const cmp = getCellText(a, columnIndex).localeCompare(
+    getCellText(b, columnIndex)
   );
+  return direction === "asc" ? cmp : -cmp;
+});
+var SortContext = React20.createContext({
+  enabled: false,
+  sortState: { key: null, direction: "asc", columnIndex: null },
+  onSort: () => {
+  }
 });
+var useTableSort = () => React20.useContext(SortContext);
+var Table = React20.forwardRef(
+  ({
+    variant = "ghost",
+    size,
+    colorPalette = "green",
+    children,
+    sortable = false,
+    ...rest
+  }, ref) => {
+    const [sortState, setSortState] = React20.useState({
+      key: null,
+      direction: "asc",
+      columnIndex: null
+    });
+    const handleSort = (key, columnIndex) => {
+      if (!sortable)
+        return;
+      setSortState(getNextSortState(sortState, key, columnIndex));
+    };
+    const recipe = react.useSlotRecipe({ key: "table" });
+    const styles = recipe({ variant, size });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.Table.Root,
+      {
+        variant,
+        size,
+        colorPalette,
+        css: styles,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SortContext.Provider,
+          {
+            value: { enabled: sortable, sortState, onSort: handleSort },
+            children
+          }
+        )
+      }
+    );
+  }
+);
 Table.displayName = "Table";
+var TableColumnHeader = React20.forwardRef(({ children, ...rest }, ref) => {
+  const { enabled, sortState, onSort } = useTableSort();
+  const key = getSortKey(children);
+  const props = rest;
+  const columnSortable = enabled && key != null && !("data-nosort" in props);
+  const isActive = columnSortable && key === sortState.key;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Table.ColumnHeader, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { children: [
+    children,
+    columnSortable && /* @__PURE__ */ jsxRuntime.jsx(
+      react.Button,
+      {
+        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__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowUpFill18Icon, { color: "outline.focus" }) : /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.ArrowDownFill18Icon, { color: "outline.focus" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          spor_icon_react_star.ChangeDirectionFill18Icon,
+          {
+            transform: "rotate(90deg)",
+            color: "icon.disabled"
+          }
+        )
+      }
+    )
+  ] }) });
+});
+TableColumnHeader.displayName = "ColumnHeader";
+var TableRow = React20.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(react.Table.Row, { ref, ...props })
+);
+TableRow.displayName = "TableRow";
+var TableBody = React20.forwardRef(
+  ({ children, ...rest }, ref) => {
+    const { sortState } = useTableSort();
+    const sorted = React20.useMemo(
+      () => sortState.columnIndex == null ? children : sortRows(children, sortState.columnIndex, sortState.direction),
+      [children, sortState]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Table.Body, { ref, ...rest, children: sorted });
+  }
+);
+TableBody.displayName = "TableBody";
 var attachedInputsRecipe = react.defineRecipe({
   base: {
     display: "flex",
@@ -11869,10 +11972,6 @@ Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function () { return react.Stack; }
 });
-Object.defineProperty(exports, "TableBody", {
-  enumerable: true,
-  get: function () { return react.TableBody; }
-});
 Object.defineProperty(exports, "TableCaption", {
   enumerable: true,
   get: function () { return react.TableCaption; }
@@ -11889,10 +11988,6 @@ Object.defineProperty(exports, "TableColumnGroup", {
   enumerable: true,
   get: function () { return react.TableColumnGroup; }
 });
-Object.defineProperty(exports, "TableColumnHeader", {
-  enumerable: true,
-  get: function () { return react.TableColumnHeader; }
-});
 Object.defineProperty(exports, "TableFooter", {
   enumerable: true,
   get: function () { return react.TableFooter; }
@@ -11905,10 +12000,6 @@ Object.defineProperty(exports, "TableRoot", {
   enumerable: true,
   get: function () { return react.TableRoot; }
 });
-Object.defineProperty(exports, "TableRow", {
-  enumerable: true,
-  get: function () { return react.TableRow; }
-});
 Object.defineProperty(exports, "VStack", {
   enumerable: true,
   get: function () { return react.VStack; }
@@ -12160,6 +12251,9 @@ exports.StepperStep = StepperStep;
 exports.SvgBox = SvgBox;
 exports.Switch = Switch;
 exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableColumnHeader = TableColumnHeader;
+exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsIndicator = TabsIndicator;
@@ -12184,6 +12278,7 @@ exports.themes = themes;
 exports.useCalendar = useCalendar;
 exports.useColorMode = useColorMode;
 exports.useColorModeValue = useColorModeValue;
+exports.useTableSort = useTableSort;
 exports.useTranslation = useTranslation;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map