@vuu-ui/vuu-ui-controls 0.0.26

package/esm/instrument-search/InstrumentSearch.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerComponent } from '@vuu-ui/vuu-layout';
+import { useControlledTableNavigation, Table } from '@vuu-ui/vuu-table';
+import { Input } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { useCallback } from 'react';
+import { SearchCell } from './SearchCell.js';
+import { useInstrumentSearch } from './useInstrumentSearch.js';
+import instrumentSearchCss from './InstrumentSearch.css.js';
+
+const classBase = "vuuInstrumentSearch";
+if (typeof SearchCell !== "function") {
+  console.warn("Instrument Search: SearchCell module not loaded ");
+}
+const defaultTableConfig = {
+  columns: [
+    { name: "bbg", hidden: true },
+    {
+      name: "description",
+      width: 200,
+      type: {
+        name: "string",
+        renderer: {
+          name: "search-cell"
+        }
+      }
+    }
+  ],
+  rowSeparators: true
+};
+const searchIcon = /* @__PURE__ */ jsx("span", { "data-icon": "search" });
+const InstrumentSearch = ({
+  TableProps: TableProps2,
+  autoFocus = false,
+  className,
+  dataSource: dataSourceProp,
+  placeHolder,
+  searchColumns,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-instrument-search",
+    css: instrumentSearchCss,
+    window: targetWindow
+  });
+  const { dataSource, onChange, searchState } = useInstrumentSearch({
+    dataSource: dataSourceProp,
+    searchColumns
+  });
+  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = useControlledTableNavigation(-1, dataSource?.size ?? 0);
+  const searchCallbackRef = useCallback((el) => {
+    setTimeout(() => {
+      el?.querySelector("input")?.focus();
+    }, 100);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-inputField`, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputProps: { onKeyDown },
+        endAdornment: searchIcon,
+        placeholder: placeHolder,
+        ref: autoFocus ? searchCallbackRef : null,
+        value: searchState.searchText,
+        onChange
+      }
+    ) }),
+    dataSource ? /* @__PURE__ */ jsx(
+      Table,
+      {
+        disableFocus: true,
+        id: "instrument-search",
+        rowHeight: 25,
+        config: defaultTableConfig,
+        highlightedIndex: highlightedIndexRef.current,
+        renderBufferSize: 100,
+        ...TableProps2,
+        className: `${classBase}-list`,
+        dataSource,
+        navigationStyle: "row",
+        onHighlight,
+        ref: tableRef,
+        showColumnHeaders: false
+      }
+    ) : null
+  ] });
+};
+registerComponent?.("InstrumentSearch", InstrumentSearch, "view");
+
+export { InstrumentSearch };
+//# sourceMappingURL=InstrumentSearch.js.map

package/esm/instrument-search/InstrumentSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstrumentSearch.js","sources":["../../src/instrument-search/InstrumentSearch.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-layout\";\nimport {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, useCallback } from \"react\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useInstrumentSearch } from \"./useInstrumentSearch\";\n\nimport instrumentSearchCss from \"./InstrumentSearch.css\";\n\nconst classBase = \"vuuInstrumentSearch\";\n\nif (typeof SearchCell !== \"function\") {\n  console.warn(\"Instrument Search: SearchCell module not loaded \");\n}\n\nconst defaultTableConfig: TableConfig = {\n  columns: [\n    { name: \"bbg\", hidden: true },\n    {\n      name: \"description\",\n      width: 200,\n      type: {\n        name: \"string\",\n        renderer: {\n          name: \"search-cell\",\n        },\n      },\n    },\n  ],\n  rowSeparators: true,\n};\n\nexport interface InstrumentSearchProps extends HTMLAttributes<HTMLDivElement> {\n  TableProps?: Partial<TableProps>;\n  autoFocus?: boolean;\n  dataSource: DataSource;\n  placeHolder?: string;\n  searchColumns?: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const InstrumentSearch = ({\n  TableProps,\n  autoFocus = false,\n  className,\n  dataSource: dataSourceProp,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: InstrumentSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-instrument-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, onChange, searchState } = useInstrumentSearch({\n    dataSource: dataSourceProp,\n    searchColumns,\n  });\n\n  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource?.size ?? 0);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-inputField`}>\n        <Input\n          inputProps={{ onKeyDown }}\n          endAdornment={searchIcon}\n          placeholder={placeHolder}\n          ref={autoFocus ? searchCallbackRef : null}\n          value={searchState.searchText}\n          onChange={onChange}\n        />\n      </div>\n\n      {dataSource ? (\n        <Table\n          disableFocus\n          id=\"instrument-search\"\n          rowHeight={25}\n          config={defaultTableConfig}\n          highlightedIndex={highlightedIndexRef.current}\n          renderBufferSize={100}\n          {...TableProps}\n          className={`${classBase}-list`}\n          dataSource={dataSource}\n          navigationStyle=\"row\"\n          onHighlight={onHighlight}\n          ref={tableRef}\n          showColumnHeaders={false}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nregisterComponent?.(\"InstrumentSearch\", InstrumentSearch, \"view\");\n"],"names":["TableProps"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAElB,IAAI,OAAO,eAAe,UAAY,EAAA;AACpC,EAAA,OAAA,CAAQ,KAAK,kDAAkD,CAAA,CAAA;AACjE,CAAA;AAEA,MAAM,kBAAkC,GAAA;AAAA,EACtC,OAAS,EAAA;AAAA,IACP,EAAE,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,IAAK,EAAA;AAAA,IAC5B;AAAA,MACE,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA,GAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,QAAA;AAAA,QACN,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,aAAA;AAAA,SACR;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAAA,EACA,aAAe,EAAA,IAAA;AACjB,CAAA,CAAA;AAUA,MAAM,UAAa,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA,CAAA;AAErC,MAAM,mBAAmB,CAAC;AAAA,EAC/B,UAAAA,EAAAA,WAAAA;AAAA,EACA,SAAY,GAAA,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,WAAA;AAAA,EACA,aAAA;AAAA,EACA,GAAG,cAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,QAAU,EAAA,WAAA,KAAgB,mBAAoB,CAAA;AAAA,IAChE,UAAY,EAAA,cAAA;AAAA,IACZ,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,mBAAqB,EAAA,WAAA,EAAa,SAAW,EAAA,QAAA,KACnD,4BAA6B,CAAA,CAAA,CAAA,EAAI,UAAY,EAAA,IAAA,IAAQ,CAAC,CAAA,CAAA;AAExD,EAAM,MAAA,iBAAA,GAAoB,WAAsC,CAAA,CAAC,EAAO,KAAA;AACtE,IAAA,UAAA,CAAW,MAAM;AACf,MAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA,CAAA;AAAA,OACjC,GAAG,CAAA,CAAA;AAAA,GACR,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACzD,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,WAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,EAAE,SAAU,EAAA;AAAA,QACxB,YAAc,EAAA,UAAA;AAAA,QACd,WAAa,EAAA,WAAA;AAAA,QACb,GAAA,EAAK,YAAY,iBAAoB,GAAA,IAAA;AAAA,QACrC,OAAO,WAAY,CAAA,UAAA;AAAA,QACnB,QAAA;AAAA,OAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,IAEC,UACC,mBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,IAAA;AAAA,QACZ,EAAG,EAAA,mBAAA;AAAA,QACH,SAAW,EAAA,EAAA;AAAA,QACX,MAAQ,EAAA,kBAAA;AAAA,QACR,kBAAkB,mBAAoB,CAAA,OAAA;AAAA,QACtC,gBAAkB,EAAA,GAAA;AAAA,QACjB,GAAGA,WAAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,QACvB,UAAA;AAAA,QACA,eAAgB,EAAA,KAAA;AAAA,QAChB,WAAA;AAAA,QACA,GAAK,EAAA,QAAA;AAAA,QACL,iBAAmB,EAAA,KAAA;AAAA,OAAA;AAAA,KAEnB,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,iBAAoB,GAAA,kBAAA,EAAoB,kBAAkB,MAAM,CAAA;;;;"}

package/esm/instrument-search/SearchCell.css.js

@@ -0,0 +1,4 @@
+var searchCellCss = "\n.vuuSearchCell {\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 16px;\n  --vuu-icon-top: 0px;\n  align-items: center;\n  color: var(--background-cell-color);\n  display: flex;\n  gap: 4px;\n  padding: 0 8px 0 8px;\n  position: relative;\n  z-index: -1;\n}\n\n";
+
+export { searchCellCss as default };
+//# sourceMappingURL=SearchCell.css.js.map

package/esm/instrument-search/SearchCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/instrument-search/SearchCell.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import searchCellCss from './SearchCell.css.js';
+
+const classBase = "vuuSearchCell";
+const SearchCell = ({
+  column,
+  columnMap,
+  row
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-search-cell",
+    css: searchCellCss,
+    window: targetWindow
+  });
+  const key = columnMap[column.name];
+  const value = row[key];
+  return /* @__PURE__ */ jsxs("div", { className: classBase, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx("span", { "data-icon": "draggable" }),
+    value
+  ] });
+};
+registerComponent("search-cell", SearchCell, "cell-renderer", {
+  serverDataType: "private"
+});
+
+export { SearchCell };
+//# sourceMappingURL=SearchCell.js.map

package/esm/instrument-search/SearchCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.js","sources":["../../src/instrument-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\n// export to avoid tree shaking, component is not consumed directly\nexport const SearchCell = ({\n  column,\n  columnMap,\n  row,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-search-cell\",\n    css: searchCellCss,\n    window: targetWindow,\n  });\n\n  //TODO what about click handling\n\n  const key = columnMap[column.name];\n  const value = row[key];\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {value}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,eAAA,CAAA;AAGX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACjC,EAAM,MAAA,KAAA,GAAQ,IAAI,GAAG,CAAA,CAAA;AAErB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B,KAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,cAAgB,EAAA,SAAA;AAClB,CAAC,CAAA;;;;"}

package/esm/instrument-search/useInstrumentSearch.js

@@ -0,0 +1,37 @@
+import { useState, useMemo, useCallback } from 'react';
+
+const useInstrumentSearch = ({
+  dataSource,
+  searchColumns = ["description"]
+}) => {
+  const [searchState, setSearchState] = useState({ searchText: "", filter: "" });
+  const baseFilterPattern = useMemo(
+    // TODO make this contains once server supports it
+    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    [searchColumns]
+  );
+  const handleChange = useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      const filter = baseFilterPattern.replaceAll("__VALUE__", value);
+      setSearchState({
+        searchText: value,
+        filter
+      });
+      if (dataSource) {
+        dataSource.filter = {
+          filter
+        };
+      }
+    },
+    [baseFilterPattern, dataSource]
+  );
+  return {
+    dataSource,
+    onChange: handleChange,
+    searchState
+  };
+};
+
+export { useInstrumentSearch };
+//# sourceMappingURL=useInstrumentSearch.js.map

package/esm/instrument-search/useInstrumentSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstrumentSearch.js","sources":["../../src/instrument-search/useInstrumentSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { InstrumentSearchProps } from \"./InstrumentSearch\";\n\nexport interface InstrumentSearchHookProps\n  extends Pick<InstrumentSearchProps, \"dataSource\" | \"searchColumns\"> {\n  label?: string;\n}\n\nexport const useInstrumentSearch = ({\n  dataSource,\n  searchColumns = [\"description\"],\n}: InstrumentSearchHookProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n    filter: string;\n  }>({ searchText: \"\", filter: \"\" });\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns]\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n      setSearchState({\n        searchText: value,\n        filter,\n      });\n      if (dataSource) {\n        dataSource.filter = {\n          filter,\n        };\n      }\n    },\n    [baseFilterPattern, dataSource]\n  );\n\n  return {\n    dataSource,\n    onChange: handleChange,\n    searchState,\n  };\n};\n"],"names":[],"mappings":";;AAQO,MAAM,sBAAsB,CAAC;AAAA,EAClC,UAAA;AAAA,EACA,aAAA,GAAgB,CAAC,aAAa,CAAA;AAChC,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAA,OAAA;AAAA;AAAA,IAExB,MAAM,aAAc,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAG,GAAG,CAAA,mBAAA,CAAqB,CAAE,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACzE,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,MAAM,MAAS,GAAA,iBAAA,CAAkB,UAAW,CAAA,WAAA,EAAa,KAAK,CAAA,CAAA;AAC9D,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA,KAAA;AAAA,QACZ,MAAA;AAAA,OACD,CAAA,CAAA;AACD,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB,MAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAmB,UAAU,CAAA;AAAA,GAChC,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/list/CheckboxIcon.css.js

@@ -0,0 +1,4 @@
+var checkboxIconCss = ".vuuCheckboxIcon {\n  --vuu-icon-size: 12px;\n  --vuu-icon-left: -1px;\n  --vuu-icon-top: -1px;\n  --vuu-icon-svg: var(--vuu-svg-tick);\n  background: var(--salt-editable-primary-background);\n  border-style: solid;\n  border-color: var(\n    --vuuCheckboxIcon-borderColor,\n    var(--salt-selectable-borderColor)\n  );\n  border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n  border-width: 1px;\n  display: inline-block;\n  height: var(--vuuCheckboxIcon-size, 12px);\n  position: relative;\n  width: var(--vuuCheckboxIcon-size, 12px);\n}\n\n.vuuCheckboxIcon-checked-enabled {\n  background-color: var(\n    --vuuCheckboxIcon-background-checked-enabled,\n    var(--vuu-color-purple-10)\n  );\n  border-color: var(\n    --vuuCheckboxIcon-borderColor-checked-enabled,\n    var(--vuu-color-purple-10)\n  );\n}\n\n.vuuCheckboxIcon-checked-disabled {\n  background-color: var(\n    --vuuCheckboxIcon-background-checked-disabled,\n    var(--vuu-color-gray-35)\n  );\n  border-color: var(\n    --vuuCheckboxIcon-borderColor-checked-disabled,\n    var(--vuu-color-gray-35)\n  );\n}\n\n.vuuCheckboxIcon-checked-enabled::after,\n.vuuCheckboxIcon-checked-disabled::after {\n  content: \"\";\n  background-color: white;\n  left: var(--vuu-icon-left, auto);\n  height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n  -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)\n    var(--vuu-icon-size);\n  mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)\n    var(--vuu-icon-size);\n  mask-repeat: no-repeat;\n  -webkit-mask-repeat: no-repeat;\n  position: absolute;\n  top: var(--vuu-icon-top, auto);\n  width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuCheckboxIcon-checked-disabled::after {\n  background-color: var(\n    --vuuCheckboxIcon-tick-checked-disabled,\n    var(--vuu-color-gray-30)\n  );\n}\n";
+
+export { checkboxIconCss as default };
+//# sourceMappingURL=CheckboxIcon.css.js.map

package/esm/list/CheckboxIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/list/CheckboxIcon.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import checkboxIconCss from './CheckboxIcon.css.js';
+
+const classBase = "vuuCheckboxIcon";
+const CheckboxIcon = ({
+  checked = false,
+  disabled = false,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-checkbox-icon",
+    css: checkboxIconCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, {
+        [`${classBase}-checked-${disabled ? "disabled" : "enabled"}`]: checked
+      })
+    }
+  );
+};
+
+export { CheckboxIcon };
+//# sourceMappingURL=CheckboxIcon.js.map

package/esm/list/CheckboxIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIcon.js","sources":["../../src/list/CheckboxIcon.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nconst classBase = \"vuuCheckboxIcon\";\n\nexport interface CheckboxIconProps extends HTMLAttributes<HTMLSpanElement> {\n  checked?: boolean;\n  disabled?: boolean;\n}\nexport const CheckboxIcon = ({\n  checked = false,\n  disabled = false,\n  ...htmlAttributes\n}: CheckboxIconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <span\n      {...htmlAttributes}\n      className={cx(classBase, {\n        [`${classBase}-checked-${disabled ? \"disabled\" : \"enabled\"}`]: checked,\n      })}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAMX,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,QAAW,GAAA,KAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,GAAG,SAAS,CAAA,SAAA,EAAY,WAAW,UAAa,GAAA,SAAS,EAAE,GAAG,OAAA;AAAA,OAChE,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/esm/list/ChevronIcon.css.js

@@ -0,0 +1,4 @@
+var chevronIconCss = ".vuuChevronIcon {\n    --vuu-icon-size: 14px;\n    --vuu-icon-left: -1px;\n    --vuu-icon-top: -1px;\n    height: var(--vuuChevronIcon-size, 14px);\n    position: relative;\n    width: var(--vuuChevronIcon-size, 14px);\n    cursor: pointer;\n}\n\n.vuuChevronIcon:after {\n    content: \"\";\n    background-color: #777C94;\n    left: var(--vuu-icon-left, auto);\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    top: var(--vuu-icon-top, auto);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuChevronIcon.up {\n  --vuu-icon-svg: var(--vuu-svg-chevron-up);\n}\n\n.vuuChevronIcon.down {\n  --vuu-icon-svg: var(--vuu-svg-chevron-down);\n}\n\n.vuuChevronIcon.left {\n  --vuu-icon-svg: var(--vuu-svg-chevron-left);\n}\n\n.vuuChevronIcon.right {\n  --vuu-icon-svg: var(--vuu-svg-chevron-right);\n}\n";
+
+export { chevronIconCss as default };
+//# sourceMappingURL=ChevronIcon.css.js.map

package/esm/list/ChevronIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/list/ChevronIcon.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import chevronIconCss from './ChevronIcon.css.js';
+
+const classBase = "vuuChevronIcon";
+const ChevronIcon = (props) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-checron-icon",
+    css: chevronIconCss,
+    window: targetWindow
+  });
+  const { direction, ...htmlAttributes } = props;
+  return /* @__PURE__ */ jsx("span", { ...htmlAttributes, className: cx(classBase, direction) });
+};
+
+export { ChevronIcon };
+//# sourceMappingURL=ChevronIcon.js.map

package/esm/list/ChevronIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronIcon.js","sources":["../../src/list/ChevronIcon.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\n\nimport chevronIconCss from \"./ChevronIcon.css\";\n\nconst classBase = \"vuuChevronIcon\";\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\";\n\ninterface ChevronProps extends HTMLAttributes<HTMLSpanElement> {\n  direction: Direction;\n}\n\nexport const ChevronIcon = (props: ChevronProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checron-icon\",\n    css: chevronIconCss,\n    window: targetWindow,\n  });\n\n  const { direction, ...htmlAttributes } = props;\n  return <span {...htmlAttributes} className={cx(classBase, direction)} />;\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAQL,MAAA,WAAA,GAAc,CAAC,KAAwB,KAAA;AAClD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,cAAA,EAAmB,GAAA,KAAA,CAAA;AACzC,EAAO,uBAAA,GAAA,CAAC,UAAM,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAG,EAAA,CAAA,CAAA;AACxE;;;;"}

package/esm/list/Highlighter.css.js

@@ -0,0 +1,4 @@
+var highlighterCss = ".saltHighlighter-highlight {\n  font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n";
+
+export { highlighterCss as default };
+//# sourceMappingURL=Highlighter.css.js.map

package/esm/list/Highlighter.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlighter.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/list/Highlighter.js

@@ -0,0 +1,34 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { escapeRegExp } from '../utils/escapeRegExp.js';
+import highlighterCss from './Highlighter.css.js';
+
+const withBaseName = makePrefixer("saltHighlighter");
+const Highlighter = (props) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-highlighter",
+    css: highlighterCss,
+    window: targetWindow
+  });
+  const { matchPattern, text = "" } = props;
+  const matchRegex = typeof matchPattern === "string" ? new RegExp(`(${escapeRegExp(matchPattern)})`, "gi") : matchPattern;
+  if (matchRegex === void 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: text });
+  }
+  return /* @__PURE__ */ jsx("span", { children: text.split(matchRegex).map(
+    (part, index) => part.match(matchRegex) ? /* @__PURE__ */ jsx(
+      "strong",
+      {
+        className: withBaseName("highlight"),
+        children: part
+      },
+      `${index}-${part}`
+    ) : part
+  ) });
+};
+
+export { Highlighter };
+//# sourceMappingURL=Highlighter.js.map

package/esm/list/Highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlighter.js","sources":["../../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport highlighterCss from \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n  matchPattern?: RegExp | string;\n  text?: string;\n}\n\nexport const Highlighter = (\n  props: HighlighterProps\n): ReactElement<HighlighterProps> => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-highlighter\",\n    css: highlighterCss,\n    window: targetWindow,\n  });\n\n  const { matchPattern, text = \"\" } = props;\n\n  const matchRegex =\n    typeof matchPattern === \"string\"\n      ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n      : matchPattern;\n\n  if (matchRegex === undefined) {\n    return <>{text}</>;\n  }\n  return (\n    <span>\n      {text.split(matchRegex).map((part, index) =>\n        part.match(matchRegex) ? (\n          <strong\n            className={withBaseName(\"highlight\")}\n            key={`${index}-${part}`}\n          >\n            {part}\n          </strong>\n        ) : (\n          part\n        )\n      )}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAOtC,MAAA,WAAA,GAAc,CACzB,KACmC,KAAA;AACnC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AAEpC,EAAA,MAAM,UACJ,GAAA,OAAO,YAAiB,KAAA,QAAA,GACpB,IAAI,MAAA,CAAO,CAAI,CAAA,EAAA,YAAA,CAAa,YAAY,CAAC,CAAK,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AAEN,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAA,uCAAU,QAAK,EAAA,IAAA,EAAA,CAAA,CAAA;AAAA,GACjB;AACA,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,UAAU,CAAE,CAAA,GAAA;AAAA,IAAI,CAAC,IAAM,EAAA,KAAA,KACjC,IAAK,CAAA,KAAA,CAAM,UAAU,CACnB,mBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QAGlC,QAAA,EAAA,IAAA;AAAA,OAAA;AAAA,MAFI,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA;AAAA,KAKvB,GAAA,IAAA;AAAA,GAGN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/list/List.css.js

@@ -0,0 +1,4 @@
+var listCss = ".vuuList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--vuuList-borderStyle,var(--salt-container-borderStyle));\n  --list-borderWidth: var(--salt-size-border);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n  --vuuDraggable-display: block;\n  --vuuDraggable-spacer-height: 0;\n  --vuuDraggable-spacer-width: 100%;\n  --vuuDraggable-transitionProp: height;\n  --vuuMeasuredContainer-height: var(--computed-list-height);\n\n  background: var(--list-background);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n  padding: 0 1px;\n}\n\n.vuuDraggable-list-item {\n  --vuuList-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuList-contentSized {\n  box-sizing: content-box;\n}\n\n.vuuList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n  height: var(--computed-list-height, var(--measured-px-height));\n  overflow: auto;\n}\n\n.vuuListHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n  font-weight: 600;\n}\n\n.vuuListHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
+
+export { listCss as default };
+//# sourceMappingURL=List.css.js.map

package/esm/list/List.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}