@sps-woodland/sorting-header 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/sorting-header](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/sorting-header#readme)
+
+SPS Woodland Design System shorting-header and sorting-header cell components

package/lib/SortingHeader.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const SortingHeaderExamples: ComponentManifestEntry;

package/lib/caret/caret.css.d.ts

@@ -0,0 +1,20 @@
+export declare const headerCaret: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    up: {
+        true: {
+            ":after": {
+                borderBottomColor: string;
+                borderTopColor: "transparent";
+                top: string;
+            };
+        };
+    };
+    down: {
+        true: {
+            ":after": {
+                borderTopColor: string;
+                borderBottomColor: "transparent";
+                top: string;
+            };
+        };
+    };
+}>;

package/lib/index.cjs.js

@@ -0,0 +1,95 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("react"),a=require("@sps-woodland/core"),D=require("@spscommerce/utils");function H(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const f=H(O);function _(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function g(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,o)}return t}function b(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};r%2?g(Object(t),!0).forEach(function(o){_(e,o,t[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})}return e}var h=(e,r,t)=>{for(var o of Object.keys(e)){var n;if(e[o]!==((n=r[o])!==null&&n!==void 0?n:t[o]))return!1}return!0},v=e=>r=>{var t=e.defaultClassName,o=b(b({},e.defaultVariants),r);for(var n in o){var i,l=(i=o[n])!==null&&i!==void 0?i:e.defaultVariants[n];if(l!=null){var s=l;typeof s=="boolean"&&(s=s===!0?"true":"false");var c=e.variantClassNames[n][s];c&&(t+=" "+c)}}for(var[p,S]of e.compoundVariants)h(p,o,e.defaultVariants)&&(t+=" "+S);return t},E=v({defaultClassName:"_7ljhcs0",variantClassNames:{up:{true:"_7ljhcs1"},down:{true:"_7ljhcs2"}},defaultVariants:{},compoundVariants:[]});var I=v({defaultClassName:"_1crs4gl0",variantClassNames:{disabled:{true:"_1crs4gl1"},active:{true:"_1crs4gl2"}},defaultVariants:{disabled:!1,active:!1},compoundVariants:[]});function m({className:e,sortKey:r,sort:t,sortDisabled:o,onSortChange:n,onClick:i,children:l,style:s,widthPx:c,widthRem:p,...S}){const d=f.useMemo(()=>{const u=!!r&&!o&&Array.isArray(t)&&t.find(N=>N.key===r);return u?u.direction:void 0},[t,r,o]),C=c?c/16:p,w=C?{...s,width:`${C}rem`}:s;return f.createElement("div",{className:a.cl(e,I({disabled:o,active:!!d}),d&&E({up:d===a.SortDirection.ASCENDING,down:d===a.SortDirection.DESCENDING})),onClick:u=>{r&&!o&&n&&n([{key:r,direction:d===a.SortDirection.ASCENDING?a.SortDirection.DESCENDING:a.SortDirection.ASCENDING}]),i&&i(u)},style:w,...S},l)}a.Metadata.set(m,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var P="sk81640";function y({sort:e,onSortChange:r,children:t,className:o,...n}){const[i]=a.selectChildren(t,[{type:m}]),l=a.modChildren(i,()=>[{sort:e,onSortChange:r}]);return f.createElement("div",{className:a.cl(o,P),...n},l)}a.Metadata.set(y,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const R={components:[y,m],examples:{basic:{label:"Sorting Header",examples:{basic:{react:D.code`
+          import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
+          import { Icon } from "@sps-woodland/core";
+          import { ContentRow } from "@sps-woodland/content-row";
+          import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+          import { sprinkles, grid } from "@sps-woodland/tokens";
+          function MyComponent() {
+            const [sort, setSort] = React.useState([
+              { key: "id", direction: SortDirection.DESCENDING },
+            ]);
+          
+            const items = React.useMemo(
+              () =>
+                [
+                  {
+                    id: "9712323",
+                    icon: SpsIcon.STATUS_IN_PROCESS,
+                    color: "purple-medium",
+                    type: "850",
+                    timestamp: "July 21, 2021 @ 4:40 PM",
+                  },
+                  {
+                    id: "8712378",
+                    icon: SpsIcon.STATUS_OK,
+                    color: "green-medium",
+                    type: "810",
+                    timestamp: "May 24, 2021 @ 4:39 PM",
+                  },
+                  {
+                    id: "8912389",
+                    icon: SpsIcon.STATUS_REJECTED,
+                    color: "red-medium",
+                    type: "850",
+                    timestamp: "May 23, 2021 @ 4:38 PM",
+                  },
+                ].sort((a, b) => {
+                  if (!sort.length) {
+                    return 0;
+                  }
+          
+                  const [{ key, direction }] = sort;
+                  if (a[key] < b[key]) {
+                    return direction === SortDirection.ASCENDING ? -1 : 1;
+                  } else if (a[key] > b[key]) {
+                    return direction === SortDirection.ASCENDING ? 1 : -1;
+                  } else {
+                    return 0;
+                  }
+                }),
+              [sort]
+            );
+          
+            return (
+              <div className={grid.root}>
+                <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
+                  <SortingHeaderCell sortKey="id">ID</SortingHeaderCell>
+                  <SortingHeaderCell sortKey="type">Type</SortingHeaderCell>
+                  <SortingHeaderCell sortKey="timestamp" widthPx={150}>
+                    Timestamp
+                  </SortingHeaderCell>
+                </SortingHeader>
+          
+                {items.map((item) => {
+                  return (
+                    <ContentRow key={item.id} className={grid[12]}>
+                      <ContentRowCol>
+                        <Icon
+                          icon={item.icon}
+                          color={item.color}
+                          size={SpsIconSize.LARGE}
+                          className={sprinkles({ mr: "sm" })}
+                        />
+                        <a href="#">
+                          {item.id}
+                        </a>
+                      </ContentRowCol>
+                      <ContentRowCol>
+                        <KeyValueSet>
+                          <KeyValueSetItem itemKey="Type">{item.type}</KeyValueSetItem>
+                        </KeyValueSet>
+                      </ContentRowCol>
+                      <ContentRowCol widthPx={250}>
+                        <KeyValueSet>
+                          <KeyValueSetItem itemKey="Timestamp">
+                            {item.timestamp}
+                          </KeyValueSetItem>
+                        </KeyValueSet>
+                      </ContentRowCol>
+                    </ContentRow>
+                  );
+                })}
+              </>
+            );
+          }
+          `}}}}},V={"Sorting Header":R};exports.MANIFEST=V;exports.SortingHeader=y;exports.SortingHeaderCell=m;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./sorting-header-cell/SortingHeaderCell";
+export * from "./sorting-header/SortingHeader";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,243 @@
+import * as S from "react";
+import { Metadata as v, cl as w, SortDirection as m, selectChildren as H, modChildren as I } from "@sps-woodland/core";
+import { code as D } from "@spscommerce/utils";
+function O(e, o, t) {
+  return o in e ? Object.defineProperty(e, o, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[o] = t, e;
+}
+function C(e, o) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(e);
+    o && (r = r.filter(function(n) {
+      return Object.getOwnPropertyDescriptor(e, n).enumerable;
+    })), t.push.apply(t, r);
+  }
+  return t;
+}
+function g(e) {
+  for (var o = 1; o < arguments.length; o++) {
+    var t = arguments[o] != null ? arguments[o] : {};
+    o % 2 ? C(Object(t), !0).forEach(function(r) {
+      O(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : C(Object(t)).forEach(function(r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+var V = (e, o, t) => {
+  for (var r of Object.keys(e)) {
+    var n;
+    if (e[r] !== ((n = o[r]) !== null && n !== void 0 ? n : t[r]))
+      return !1;
+  }
+  return !0;
+}, N = (e) => (o) => {
+  var t = e.defaultClassName, r = g(g({}, e.defaultVariants), o);
+  for (var n in r) {
+    var a, s = (a = r[n]) !== null && a !== void 0 ? a : e.defaultVariants[n];
+    if (s != null) {
+      var i = s;
+      typeof i == "boolean" && (i = i === !0 ? "true" : "false");
+      var l = e.variantClassNames[n][i];
+      l && (t += " " + l);
+    }
+  }
+  for (var [p, u] of e.compoundVariants)
+    V(p, r, e.defaultVariants) && (t += " " + u);
+  return t;
+}, R = N({ defaultClassName: "_7ljhcs0", variantClassNames: { up: { true: "_7ljhcs1" }, down: { true: "_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] });
+var _ = N({ defaultClassName: "_1crs4gl0", variantClassNames: { disabled: { true: "_1crs4gl1" }, active: { true: "_1crs4gl2" } }, defaultVariants: { disabled: !1, active: !1 }, compoundVariants: [] });
+function f({
+  className: e,
+  sortKey: o,
+  sort: t,
+  sortDisabled: r,
+  onSortChange: n,
+  onClick: a,
+  children: s,
+  style: i,
+  widthPx: l,
+  widthRem: p,
+  ...u
+}) {
+  const d = S.useMemo(() => {
+    const c = !!o && !r && Array.isArray(t) && t.find((E) => E.key === o);
+    return c ? c.direction : void 0;
+  }, [
+    t,
+    o,
+    r
+  ]), y = l ? l / 16 : p, h = y ? { ...i, width: `${y}rem` } : i;
+  return /* @__PURE__ */ S.createElement("div", {
+    className: w(
+      e,
+      _({ disabled: r, active: !!d }),
+      d && R({
+        up: d === m.ASCENDING,
+        down: d === m.DESCENDING
+      })
+    ),
+    onClick: (c) => {
+      o && !r && n && n([
+        {
+          key: o,
+          direction: d === m.ASCENDING ? m.DESCENDING : m.ASCENDING
+        }
+      ]), a && a(c);
+    },
+    style: h,
+    ...u
+  }, s);
+}
+v.set(f, {
+  name: "Sorting Header Cell",
+  props: {
+    sortKey: { type: "string" },
+    sort: { type: "SortedColumn[]" },
+    sortDisabled: { type: "boolean" },
+    onSortChange: { type: "SortChangeHandler" },
+    widthPx: { type: "number" },
+    widthRem: { type: "number" }
+  }
+});
+var P = "sk81640";
+function b({
+  sort: e,
+  onSortChange: o,
+  children: t,
+  className: r,
+  ...n
+}) {
+  const [a] = H(t, [{ type: f }]), s = I(a, () => [{ sort: e, onSortChange: o }]);
+  return /* @__PURE__ */ S.createElement("div", {
+    className: w(r, P),
+    ...n
+  }, s);
+}
+v.set(b, {
+  name: "Sorting Header",
+  props: {
+    sort: { type: "SortedColumn[]" },
+    onSortChange: { type: "SortChangeHandler" }
+  }
+});
+const K = {
+  components: [b, f],
+  examples: {
+    basic: {
+      label: "Sorting Header",
+      examples: {
+        basic: {
+          react: D`
+          import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
+          import { Icon } from "@sps-woodland/core";
+          import { ContentRow } from "@sps-woodland/content-row";
+          import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+          import { sprinkles, grid } from "@sps-woodland/tokens";
+          function MyComponent() {
+            const [sort, setSort] = React.useState([
+              { key: "id", direction: SortDirection.DESCENDING },
+            ]);
+          
+            const items = React.useMemo(
+              () =>
+                [
+                  {
+                    id: "9712323",
+                    icon: SpsIcon.STATUS_IN_PROCESS,
+                    color: "purple-medium",
+                    type: "850",
+                    timestamp: "July 21, 2021 @ 4:40 PM",
+                  },
+                  {
+                    id: "8712378",
+                    icon: SpsIcon.STATUS_OK,
+                    color: "green-medium",
+                    type: "810",
+                    timestamp: "May 24, 2021 @ 4:39 PM",
+                  },
+                  {
+                    id: "8912389",
+                    icon: SpsIcon.STATUS_REJECTED,
+                    color: "red-medium",
+                    type: "850",
+                    timestamp: "May 23, 2021 @ 4:38 PM",
+                  },
+                ].sort((a, b) => {
+                  if (!sort.length) {
+                    return 0;
+                  }
+          
+                  const [{ key, direction }] = sort;
+                  if (a[key] < b[key]) {
+                    return direction === SortDirection.ASCENDING ? -1 : 1;
+                  } else if (a[key] > b[key]) {
+                    return direction === SortDirection.ASCENDING ? 1 : -1;
+                  } else {
+                    return 0;
+                  }
+                }),
+              [sort]
+            );
+          
+            return (
+              <div className={grid.root}>
+                <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
+                  <SortingHeaderCell sortKey="id">ID</SortingHeaderCell>
+                  <SortingHeaderCell sortKey="type">Type</SortingHeaderCell>
+                  <SortingHeaderCell sortKey="timestamp" widthPx={150}>
+                    Timestamp
+                  </SortingHeaderCell>
+                </SortingHeader>
+          
+                {items.map((item) => {
+                  return (
+                    <ContentRow key={item.id} className={grid[12]}>
+                      <ContentRowCol>
+                        <Icon
+                          icon={item.icon}
+                          color={item.color}
+                          size={SpsIconSize.LARGE}
+                          className={sprinkles({ mr: "sm" })}
+                        />
+                        <a href="#">
+                          {item.id}
+                        </a>
+                      </ContentRowCol>
+                      <ContentRowCol>
+                        <KeyValueSet>
+                          <KeyValueSetItem itemKey="Type">{item.type}</KeyValueSetItem>
+                        </KeyValueSet>
+                      </ContentRowCol>
+                      <ContentRowCol widthPx={250}>
+                        <KeyValueSet>
+                          <KeyValueSetItem itemKey="Timestamp">
+                            {item.timestamp}
+                          </KeyValueSetItem>
+                        </KeyValueSet>
+                      </ContentRowCol>
+                    </ContentRow>
+                  );
+                })}
+              </>
+            );
+          }
+          `
+        }
+      }
+    }
+  }
+}, T = {
+  "Sorting Header": K
+};
+export {
+  T as MANIFEST,
+  b as SortingHeader,
+  f as SortingHeaderCell
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/sorting-header/SortingHeader.css.d.ts

@@ -0,0 +1 @@
+export declare const sortingHeader: string;

package/lib/sorting-header/SortingHeader.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { ComponentProps, SortChangeHandler, SortedColumn } from "@sps-woodland/core";
+export declare function SortingHeader({ sort, onSortChange, children, className, ...rest }: ComponentProps<{
+    sort: SortedColumn[];
+    onSortChange: SortChangeHandler;
+}, HTMLDivElement>): React.ReactElement;

package/lib/sorting-header-cell/SortingHeaderCell.css.d.ts

@@ -0,0 +1,13 @@
+export declare const headerCell: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    disabled: {
+        true: {
+            cursor: "default";
+        };
+    };
+    active: {
+        true: {
+            color: string;
+            backgroundColor: string;
+        };
+    };
+}>;

package/lib/sorting-header-cell/SortingHeaderCell.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { SortedColumn, SortChangeHandler, ComponentProps } from "@sps-woodland/core";
+export declare function SortingHeaderCell({ className, sortKey, sort, sortDisabled, onSortChange, onClick, children, style, widthPx, widthRem, ...rest }: ComponentProps<{
+    sortKey?: string;
+    sortDisabled?: boolean;
+    sort?: SortedColumn[];
+    onSortChange?: SortChangeHandler;
+    widthPx?: number;
+    widthRem?: number;
+}, HTMLDivElement>): React.ReactElement;

package/lib/style.css

@@ -0,0 +1 @@
+._7ljhcs0:after{content:"";border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:.375rem .25rem;height:0;position:absolute;right:.5rem}._7ljhcs1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}._7ljhcs2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}._1crs4gl0{display:table-cell;vertical-align:middle;color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.25rem;padding:.5rem;position:relative}._1crs4gl0:hover{background-color:#f3f4f4}._1crs4gl1{cursor:default}._1crs4gl2{color:#1f282c;background-color:#d2d4d4}.sk81640{display:table;table-layout:fixed;width:100%;padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@sps-woodland/sorting-header",
+  "description": "SPS Woodland Design System sorting-header and sorting-header cell components",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/sorting-header",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/sorting-header#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css": "^1.9.1",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});