@telia/teddy 0.7.74 → 0.7.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/table/table-head.cjs +40 -19
  2. package/dist/components/table/table-head.d.ts +8 -0
  3. package/dist/components/table/table-head.js +41 -20
  4. package/dist/components/table/table-root.cjs +23 -20
  5. package/dist/components/table/table-root.js +23 -20
  6. package/dist/teddy.css +1 -1
  7. package/package.json +1 -1
package/dist/components/table/table-head.cjs CHANGED
@@ -5,6 +5,8 @@ const React = require("react");
5
5
  const clsx = require("clsx");
6
6
  const components_table_tableRoot = require("./table-root.cjs");
7
7
  const components_heading_heading = require("../heading/heading.cjs");
8
+ require("../../assets/sprite.e6f9b678-teddy.svg");
9
+ const components_icon_icon = require("../icon/icon.cjs");
8
10
  function _interopNamespaceDefault(e) {
9
11
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
10
12
  if (e) {
@@ -23,25 +25,44 @@ function _interopNamespaceDefault(e) {
23
25
  }
24
26
  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
25
27
  const Head = React__namespace.forwardRef(
26
- ({ className, stickyLeft, stickyRight, stickyTop, stickyBottom, numeric, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-100", asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
27
- "th",
28
- {
29
- ref,
30
- className: clsx(
31
- components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head`],
32
- {
33
- [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky`]]: stickyLeft || stickyRight || stickyTop || stickyBottom,
34
- [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-left`]]: stickyLeft,
35
- [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-right`]]: stickyRight,
36
- [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-top`]]: stickyTop,
37
- [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-bottom`]]: stickyBottom,
38
- [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--numeric`]]: numeric
39
- },
40
- className
41
- ),
42
- children
43
- }
44
- ) })
28
+ ({ className, stickyLeft, stickyRight, stickyTop, stickyBottom, numeric, sortable, sortDirection, children, ...props }, ref) => {
29
+ const isSortable = sortable || sortDirection != null;
30
+ let ariaSort;
31
+ if (sortDirection === "asc") ariaSort = "ascending";
32
+ else if (sortDirection === "desc") ariaSort = "descending";
33
+ else if (isSortable) ariaSort = "none";
34
+ return /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-100", asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
35
+ "th",
36
+ {
37
+ ref,
38
+ className: clsx(
39
+ components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head`],
40
+ {
41
+ [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky`]]: stickyLeft || stickyRight || stickyTop || stickyBottom,
42
+ [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-left`]]: stickyLeft,
43
+ [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-right`]]: stickyRight,
44
+ [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-top`]]: stickyTop,
45
+ [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-bottom`]]: stickyBottom,
46
+ [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--numeric`]]: numeric,
47
+ [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sortable`]]: isSortable
48
+ },
49
+ className
50
+ ),
51
+ "aria-sort": ariaSort,
52
+ children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head-inner`], children: [
53
+ children,
54
+ isSortable && /* @__PURE__ */ jsxRuntime.jsx(
55
+ components_icon_icon.Icon,
56
+ {
57
+ name: sortDirection === "asc" ? "arrow-up" : sortDirection === "desc" ? "arrow-down" : "sorter",
58
+ size: "xs",
59
+ className: components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head-sort-icon`]
60
+ }
61
+ )
62
+ ] })
63
+ }
64
+ ) });
65
+ }
45
66
  );
46
67
  Head.displayName = "Head";
47
68
  exports.Head = Head;
package/dist/components/table/table-head.d.ts CHANGED
@@ -6,6 +6,10 @@ export type HeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & ChildrenL
6
6
  stickyTop?: boolean;
7
7
  stickyBottom?: boolean;
8
8
  numeric?: boolean;
9
+ /** Whether this column is sortable. Shows a neutral sort icon when no direction is active. */
10
+ sortable?: boolean;
11
+ /** The current sort direction for this column. Shows a directional arrow when set. */
12
+ sortDirection?: 'asc' | 'desc' | null;
9
13
  };
10
14
  export declare const Head: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/radius').RadiusProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
11
15
  display?: import('../../utils/generate-styling').DisplayChildren;
@@ -15,4 +19,8 @@ export declare const Head: React.ForwardRefExoticComponent<React.ThHTMLAttribute
15
19
  stickyTop?: boolean;
16
20
  stickyBottom?: boolean;
17
21
  numeric?: boolean;
22
+ /** Whether this column is sortable. Shows a neutral sort icon when no direction is active. */
23
+ sortable?: boolean;
24
+ /** The current sort direction for this column. Shows a directional arrow when set. */
25
+ sortDirection?: "asc" | "desc" | null;
18
26
  } & React.RefAttributes<HTMLTableCellElement>>;
package/dist/components/table/table-head.js CHANGED
@@ -1,28 +1,49 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import clsx from "clsx";
4
4
  import { s as styles, rootClassName } from "./table-root.js";
5
5
  import { Heading } from "../heading/heading.js";
6
+ import "../../assets/sprite.e6f9b678-teddy.svg";
7
+ import { Icon } from "../icon/icon.js";
6
8
  const Head = React.forwardRef(
7
- ({ className, stickyLeft, stickyRight, stickyTop, stickyBottom, numeric, children, ...props }, ref) => /* @__PURE__ */ jsx(Heading, { variant: "title-100", asChild: true, ...props, children: /* @__PURE__ */ jsx(
8
- "th",
9
- {
10
- ref,
11
- className: clsx(
12
- styles[`${rootClassName}__head`],
13
- {
14
- [styles[`${rootClassName}__head--sticky`]]: stickyLeft || stickyRight || stickyTop || stickyBottom,
15
- [styles[`${rootClassName}__head--sticky-left`]]: stickyLeft,
16
- [styles[`${rootClassName}__head--sticky-right`]]: stickyRight,
17
- [styles[`${rootClassName}__head--sticky-top`]]: stickyTop,
18
- [styles[`${rootClassName}__head--sticky-bottom`]]: stickyBottom,
19
- [styles[`${rootClassName}__head--numeric`]]: numeric
20
- },
21
- className
22
- ),
23
- children
24
- }
25
- ) })
9
+ ({ className, stickyLeft, stickyRight, stickyTop, stickyBottom, numeric, sortable, sortDirection, children, ...props }, ref) => {
10
+ const isSortable = sortable || sortDirection != null;
11
+ let ariaSort;
12
+ if (sortDirection === "asc") ariaSort = "ascending";
13
+ else if (sortDirection === "desc") ariaSort = "descending";
14
+ else if (isSortable) ariaSort = "none";
15
+ return /* @__PURE__ */ jsx(Heading, { variant: "title-100", asChild: true, ...props, children: /* @__PURE__ */ jsx(
16
+ "th",
17
+ {
18
+ ref,
19
+ className: clsx(
20
+ styles[`${rootClassName}__head`],
21
+ {
22
+ [styles[`${rootClassName}__head--sticky`]]: stickyLeft || stickyRight || stickyTop || stickyBottom,
23
+ [styles[`${rootClassName}__head--sticky-left`]]: stickyLeft,
24
+ [styles[`${rootClassName}__head--sticky-right`]]: stickyRight,
25
+ [styles[`${rootClassName}__head--sticky-top`]]: stickyTop,
26
+ [styles[`${rootClassName}__head--sticky-bottom`]]: stickyBottom,
27
+ [styles[`${rootClassName}__head--numeric`]]: numeric,
28
+ [styles[`${rootClassName}__head--sortable`]]: isSortable
29
+ },
30
+ className
31
+ ),
32
+ "aria-sort": ariaSort,
33
+ children: /* @__PURE__ */ jsxs("span", { className: styles[`${rootClassName}__head-inner`], children: [
34
+ children,
35
+ isSortable && /* @__PURE__ */ jsx(
36
+ Icon,
37
+ {
38
+ name: sortDirection === "asc" ? "arrow-up" : sortDirection === "desc" ? "arrow-down" : "sorter",
39
+ size: "xs",
40
+ className: styles[`${rootClassName}__head-sort-icon`]
41
+ }
42
+ )
43
+ ] })
44
+ }
45
+ ) });
46
+ }
26
47
  );
27
48
  Head.displayName = "Head";
28
49
  export {
package/dist/components/table/table-root.cjs CHANGED
@@ -22,26 +22,29 @@ function _interopNamespaceDefault(e) {
22
22
  }
23
23
  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
24
24
  const styles = {
25
- "teddy-table-wrapper": "_teddy-table-wrapper_5obes_1",
26
- "teddy-table": "_teddy-table_5obes_1",
27
- "teddy-table__header": "_teddy-table__header_5obes_15",
28
- "teddy-table__body": "_teddy-table__body_5obes_22",
29
- "teddy-table__footer": "_teddy-table__footer_5obes_25",
30
- "teddy-table__row": "_teddy-table__row_5obes_28",
31
- "teddy-table__head": "_teddy-table__head_5obes_15",
32
- "teddy-table__head--numeric": "_teddy-table__head--numeric_5obes_46",
33
- "teddy-table__head--sticky": "_teddy-table__head--sticky_5obes_49",
34
- "teddy-table__head--sticky-left": "_teddy-table__head--sticky-left_5obes_53",
35
- "teddy-table__head--sticky-right": "_teddy-table__head--sticky-right_5obes_56",
36
- "teddy-table__head--sticky-top": "_teddy-table__head--sticky-top_5obes_59",
37
- "teddy-table__head--sticky-bottom": "_teddy-table__head--sticky-bottom_5obes_62",
38
- "teddy-table__cell": "_teddy-table__cell_5obes_65",
39
- "teddy-table__cell--numeric": "_teddy-table__cell--numeric_5obes_69",
40
- "teddy-table__cell--sticky": "_teddy-table__cell--sticky_5obes_72",
41
- "teddy-table__cell--sticky-left": "_teddy-table__cell--sticky-left_5obes_76",
42
- "teddy-table__cell--sticky-right": "_teddy-table__cell--sticky-right_5obes_79",
43
- "teddy-table__cell--sticky-top": "_teddy-table__cell--sticky-top_5obes_82",
44
- "teddy-table__cell--sticky-bottom": "_teddy-table__cell--sticky-bottom_5obes_85"
25
+ "teddy-table-wrapper": "_teddy-table-wrapper_18kkp_1",
26
+ "teddy-table": "_teddy-table_18kkp_1",
27
+ "teddy-table__header": "_teddy-table__header_18kkp_15",
28
+ "teddy-table__body": "_teddy-table__body_18kkp_22",
29
+ "teddy-table__footer": "_teddy-table__footer_18kkp_25",
30
+ "teddy-table__row": "_teddy-table__row_18kkp_28",
31
+ "teddy-table__head": "_teddy-table__head_18kkp_15",
32
+ "teddy-table__head--numeric": "_teddy-table__head--numeric_18kkp_46",
33
+ "teddy-table__head--sortable": "_teddy-table__head--sortable_18kkp_49",
34
+ "teddy-table__head-inner": "_teddy-table__head-inner_18kkp_56",
35
+ "teddy-table__head-sort-icon": "_teddy-table__head-sort-icon_18kkp_61",
36
+ "teddy-table__head--sticky": "_teddy-table__head--sticky_18kkp_65",
37
+ "teddy-table__head--sticky-left": "_teddy-table__head--sticky-left_18kkp_69",
38
+ "teddy-table__head--sticky-right": "_teddy-table__head--sticky-right_18kkp_72",
39
+ "teddy-table__head--sticky-top": "_teddy-table__head--sticky-top_18kkp_75",
40
+ "teddy-table__head--sticky-bottom": "_teddy-table__head--sticky-bottom_18kkp_78",
41
+ "teddy-table__cell": "_teddy-table__cell_18kkp_81",
42
+ "teddy-table__cell--numeric": "_teddy-table__cell--numeric_18kkp_85",
43
+ "teddy-table__cell--sticky": "_teddy-table__cell--sticky_18kkp_88",
44
+ "teddy-table__cell--sticky-left": "_teddy-table__cell--sticky-left_18kkp_92",
45
+ "teddy-table__cell--sticky-right": "_teddy-table__cell--sticky-right_18kkp_95",
46
+ "teddy-table__cell--sticky-top": "_teddy-table__cell--sticky-top_18kkp_98",
47
+ "teddy-table__cell--sticky-bottom": "_teddy-table__cell--sticky-bottom_18kkp_101"
45
48
  };
46
49
  const rootClassName = "teddy-table";
47
50
  const Root = React__namespace.forwardRef(({ className, height, width, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea, { className: styles[`${rootClassName}-wrapper`], style: { height, width }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: clsx(styles[rootClassName], className), ...props }) }));
package/dist/components/table/table-root.js CHANGED
@@ -3,26 +3,29 @@ import * as React from "react";
3
3
  import clsx from "clsx";
4
4
  import { ScrollArea } from "../scroll-area/index.js";
5
5
  const styles = {
6
- "teddy-table-wrapper": "_teddy-table-wrapper_5obes_1",
7
- "teddy-table": "_teddy-table_5obes_1",
8
- "teddy-table__header": "_teddy-table__header_5obes_15",
9
- "teddy-table__body": "_teddy-table__body_5obes_22",
10
- "teddy-table__footer": "_teddy-table__footer_5obes_25",
11
- "teddy-table__row": "_teddy-table__row_5obes_28",
12
- "teddy-table__head": "_teddy-table__head_5obes_15",
13
- "teddy-table__head--numeric": "_teddy-table__head--numeric_5obes_46",
14
- "teddy-table__head--sticky": "_teddy-table__head--sticky_5obes_49",
15
- "teddy-table__head--sticky-left": "_teddy-table__head--sticky-left_5obes_53",
16
- "teddy-table__head--sticky-right": "_teddy-table__head--sticky-right_5obes_56",
17
- "teddy-table__head--sticky-top": "_teddy-table__head--sticky-top_5obes_59",
18
- "teddy-table__head--sticky-bottom": "_teddy-table__head--sticky-bottom_5obes_62",
19
- "teddy-table__cell": "_teddy-table__cell_5obes_65",
20
- "teddy-table__cell--numeric": "_teddy-table__cell--numeric_5obes_69",
21
- "teddy-table__cell--sticky": "_teddy-table__cell--sticky_5obes_72",
22
- "teddy-table__cell--sticky-left": "_teddy-table__cell--sticky-left_5obes_76",
23
- "teddy-table__cell--sticky-right": "_teddy-table__cell--sticky-right_5obes_79",
24
- "teddy-table__cell--sticky-top": "_teddy-table__cell--sticky-top_5obes_82",
25
- "teddy-table__cell--sticky-bottom": "_teddy-table__cell--sticky-bottom_5obes_85"
6
+ "teddy-table-wrapper": "_teddy-table-wrapper_18kkp_1",
7
+ "teddy-table": "_teddy-table_18kkp_1",
8
+ "teddy-table__header": "_teddy-table__header_18kkp_15",
9
+ "teddy-table__body": "_teddy-table__body_18kkp_22",
10
+ "teddy-table__footer": "_teddy-table__footer_18kkp_25",
11
+ "teddy-table__row": "_teddy-table__row_18kkp_28",
12
+ "teddy-table__head": "_teddy-table__head_18kkp_15",
13
+ "teddy-table__head--numeric": "_teddy-table__head--numeric_18kkp_46",
14
+ "teddy-table__head--sortable": "_teddy-table__head--sortable_18kkp_49",
15
+ "teddy-table__head-inner": "_teddy-table__head-inner_18kkp_56",
16
+ "teddy-table__head-sort-icon": "_teddy-table__head-sort-icon_18kkp_61",
17
+ "teddy-table__head--sticky": "_teddy-table__head--sticky_18kkp_65",
18
+ "teddy-table__head--sticky-left": "_teddy-table__head--sticky-left_18kkp_69",
19
+ "teddy-table__head--sticky-right": "_teddy-table__head--sticky-right_18kkp_72",
20
+ "teddy-table__head--sticky-top": "_teddy-table__head--sticky-top_18kkp_75",
21
+ "teddy-table__head--sticky-bottom": "_teddy-table__head--sticky-bottom_18kkp_78",
22
+ "teddy-table__cell": "_teddy-table__cell_18kkp_81",
23
+ "teddy-table__cell--numeric": "_teddy-table__cell--numeric_18kkp_85",
24
+ "teddy-table__cell--sticky": "_teddy-table__cell--sticky_18kkp_88",
25
+ "teddy-table__cell--sticky-left": "_teddy-table__cell--sticky-left_18kkp_92",
26
+ "teddy-table__cell--sticky-right": "_teddy-table__cell--sticky-right_18kkp_95",
27
+ "teddy-table__cell--sticky-top": "_teddy-table__cell--sticky-top_18kkp_98",
28
+ "teddy-table__cell--sticky-bottom": "_teddy-table__cell--sticky-bottom_18kkp_101"
26
29
  };
27
30
  const rootClassName = "teddy-table";
28
31
  const Root = React.forwardRef(({ className, height, width, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea, { className: styles[`${rootClassName}-wrapper`], style: { height, width }, children: /* @__PURE__ */ jsx("table", { ref, className: clsx(styles[rootClassName], className), ...props }) }));