@sps-woodland/list-bar 8.0.0-rc1

package/lib/list-bar/InputGroupWrapper.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function InputGroupWrapper({ children, }: ComponentProps<unknown, HTMLElement>): React.ReactElement;

package/lib/list-bar/ListBar.css.d.ts

@@ -0,0 +1,38 @@
+export declare const listBarWrapper: string;
+export declare const listBar: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    pinned: {
+        true: {
+            width: string;
+            borderRadius: number;
+            marginLeft: `calc(-${string} / 4)`;
+            position: "fixed";
+            top: string;
+            zIndex: number;
+            selectors: {
+                "&:after": {
+                    background: "linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent)";
+                    content: "";
+                    display: "block";
+                    height: string;
+                    left: `-${string}`;
+                    position: "absolute";
+                    top: "calc(100% + 1px)";
+                    width: string;
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export declare const listBarContent: string;
+export declare const listBarSelectionControls: string;
+export declare const listBarSearchControls: string;
+export declare const listBarAdvSearchToggle: string;
+export declare const listBarAdvSearchToggleWrapper: string;
+export declare const listBarAdvSearchEnteredFields: string;
+export declare const listBarAdvSearchTitle: string;
+export declare const listBarHeaderContent: string;
+export declare const listBarSearchForm: string;
+export declare const listBarSearchField: string;
+export declare const inputGroupIconButton: string;
+export declare const listBarSortBy: string;

package/lib/list-bar/ListBar.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title, onToolbarPinned, selectable, isSelected, isIndeterminate, onSelectionChange, pinResultsBar, pinToolbar, children, className, ...rest }: ComponentProps<{
+    advancedSearch?: {
+        isOpen: boolean;
+        enteredFields?: number;
+    };
+    onToggleAdvancedSearch?: (arg: boolean) => void;
+    title?: string;
+    onToolbarPinned?: (arg: boolean) => void;
+    selectable?: boolean;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    onSelectionChange?: (arg: boolean) => void;
+    pinResultsBar?: boolean;
+    pinToolbar?: boolean;
+}, HTMLDivElement>): React.ReactElement;

package/lib/list-bar/ListBar.examples.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare function ContentOrderExample(): JSX.Element;
+export declare const ListBarExamples: ComponentManifestEntry;

package/lib/list-bar/ListBarSearch.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function ListBarSearch({ onSubmit, children, }: ComponentProps<{
+    onSubmit?: React.FormEventHandler;
+}, HTMLElement>): React.ReactElement;

package/lib/list-bar/ListBarSearchInfo.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function ListBarSearchInfo({ children, }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/list-bar/ListBarSortBy.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { ComponentProps, SortDirection } from "@sps-woodland/core";
+import { SpsIcon } from "@spscommerce/ds-shared";
+export interface SortOption {
+    label: string;
+    key: string;
+    direction: SortDirection;
+    icon: SpsIcon;
+}
+export declare function ListBarSortBy({ options, activeOption, onSortChange, defaultOption, className, ...rest }: ComponentProps<{
+    options?: SortOption[];
+    activeOption?: SortOption;
+    onSortChange?: (option: SortOption) => void;
+    defaultOption?: SortOption;
+}, HTMLElement>): React.ReactElement;

package/lib/manifest.d.ts

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

package/lib/search-results-bar/SearchResultsBar.css.d.ts

@@ -0,0 +1,9 @@
+export declare const searchResultsBarWrapper: string;
+export declare const searchResultsBar: string;
+export declare const searchResultsBarResults: string;
+export declare const searchResutlsBarResultsTag: string;
+export declare const searchResultsBarSelections: string;
+export declare const searchResultsBarSelection: string;
+export declare const searchResultsBarSelectionTag: string;
+export declare const searchResultsBarButtons: string;
+export declare const searchResultsBarButton: string;

package/lib/search-results-bar/SearchResultsBar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function SearchResultsBar({ results, selections, zeroStateText, onClear, className, children, ...rest }: ComponentProps<{
+    results?: number | null;
+    selections?: {
+        [key: string]: string[];
+    };
+    zeroStateText?: string;
+    onClear?: () => void;
+}, HTMLDivElement>): React.ReactElement;

package/lib/search-results-bar/SearchResultsBar.examples.d.ts

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

package/lib/style.css

@@ -0,0 +1 @@
+._9h4p701{background:#ffffff;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}._9h4p702{width:75rem;border-radius:0;margin-left:-18.75rem;position:fixed;top:3.75rem;z-index:999}._9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;left:-.0625rem;position:absolute;top:calc(100% + 1px);width:75rem}._9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}._9h4p705{display:flex;align-items:center;border-right-color:#d2d4d4;border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}._9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}._9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}._9h4p708{display:inline-block;position:relative}._9h4p709{margin-left:.25rem}._9h4p70a{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}._9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}._9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}._9h4p70e{background-color:#e9e9ea;border-color:#717779;border-width:.0625rem;border-style:solid;border-bottom-left-radius:0;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-top-right-radius:.25rem;border-left-width:0}._9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}._9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}._9h4p70f>.sps-button>button{padding:.25rem}._9h4p70e>button{height:1.875rem}._9h4p70a>i{font-size:.875rem;margin-right:.25rem}._9h4p70d>.sps-autocomplete{flex:1}._9h4p70d>.sps-input-group>.sps-select{min-width:30%}._9h4p70d>.sps-input-group>.sps-select:not(:last-child)>.sps-select__dropctrl{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:first-child):not(:only-child)>.sps-form-control{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}._1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}._9h4p701>._1gxdcgc0>._1gxdcgc1{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem;border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0}._1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}._1gxdcgc3{margin-left:.25rem}._1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}._1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}._1gxdcgc5:first-child{margin-left:0}._1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}._1gxdcgc6:last-child{margin-right:0}._1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}._1gxdcgc7:hover{background:#d2d4d4}._1gxdcgc8{padding:.5rem;width:5.25rem}.q4fj410{background:#ffffff;border-color:#d2d4d4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:none;margin-top:-.625rem;margin-right:0;margin-bottom:1rem;margin-left:0}.q4fj411{display:block}.q4fj413{padding:1rem}.q4fj414{background:#f3f4f4;border-top-left-radius:undefined;border-top-right-radius:undefined;border-bottom-left-radius:undefined;border-bottom-right-radius:undefined;display:flex;padding:.5rem}.q4fj415{text-align:right}.q4fj414>*{flex:1}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@sps-woodland/list-bar",
+  "description": "SPS Woodland Design System list bar components",
+  "version": "8.0.0-rc1",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/list-bar",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/list-bar#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1",
+    "@sps-woodland/tabs": "8.0.0-rc1",
+    "@sps-woodland/buttons": "8.0.0-rc1",
+    "@sps-woodland/tags": "8.0.0-rc1",
+    "@spscommerce/ds-react": "8.0.0-rc1"
+  },
+  "devDependencies": {
+    "@react-stately/collections": "^3.3.3",
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css": "^1.9.3",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1",
+    "@sps-woodland/buttons": "8.0.0-rc1",
+    "@spscommerce/ds-react": "8.0.0-rc1",
+    "@spscommerce/ds-shared": "8.0.0-rc1",
+    "@sps-woodland/tabs": "8.0.0-rc1",
+    "@sps-woodland/tags": "8.0.0-rc1"
+  },
+  "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) : [],
+    },
+  },
+});