@vectara/vectara-ui 0.0.2 → 0.0.4

package/.github/workflows/publish-on-version-change.yml

@@ -0,0 +1,51 @@
+name: publish-on-version-change
+on:
+  push:
+    branches:
+      - main
+jobs:
+  check-version-change:
+    name: check-version-change
+    runs-on: ubuntu-latest
+    outputs:
+      did-version-change: ${{ steps.check.outputs.changed }}
+      new-version: ${{ steps.check.outputs.version }}
+      type: ${{ steps.check.outputs.type }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Determine if version has changed
+      - name: Check version changes
+        uses: EndBug/version-check@v2
+        with:
+          diff-search: true
+        id: check
+
+  publish-to-npm:
+    name: publish-to-npm
+    runs-on: ubuntu-latest
+    needs: [check-version-change]
+    if: needs.check-version-change.outputs.did-version-change == 'true'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Draft a release if version name changed
+      - name: Draft release
+        run: 'gh release create v${{ needs.check-version-change.outputs.new-version }} -d --title "Release ${{ needs.check-version-change.outputs.new-version }}" --generate-notes'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Node.js for NPM
+        uses: actions/setup-node@v4
+        with:
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Build lib
+        run: "npm i && npm run buildLib"
+
+      - name: Publish package to NPM
+        run: npm publish --access=public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/lib/components/spinner/Spinner.js

@@ -11,5 +11,5 @@ const sizeToClassNameMap = {
 };
 export const VuiSpinner = ({ color = "accent", size = "m" }) => {
     const classes = classNames("vuiSpinner", sizeToClassNameMap[size], `vuiSpinner--${color}`);
-    return (_jsx("div", Object.assign({ className: classes }, { children: _jsx("svg", Object.assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 50 50" }, { children: _jsx("path", Object.assign({ fill: "#000", d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" }, { children: _jsx("animateTransform", { attributeType: "xml", attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "0.6s", repeatCount: "indefinite" }) })) })) })));
+    return (_jsx("span", Object.assign({ className: classes }, { children: _jsx("svg", Object.assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 50 50" }, { children: _jsx("path", Object.assign({ fill: "#000", d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" }, { children: _jsx("animateTransform", { attributeType: "xml", attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "0.6s", repeatCount: "indefinite" }) })) })) })));
 };

package/lib/components/spinner/_index.scss

@@ -1,5 +1,9 @@
 @use "sass:map";
 
+.vuiSpinner {
+  display: inline-block;
+}
+
 // Color
 $color: (
   accent: (

package/lib/components/summary/Summary.d.ts

@@ -1,7 +1,8 @@
 type Props = {
-    summary: string;
+    summary?: string;
     className?: string;
     SummaryCitation: React.ComponentType<any>;
+    statusIndicator?: React.ReactNode;
 };
-export declare const VuiSummary: ({ summary, className, SummaryCitation }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiSummary: ({ summary, className, SummaryCitation, statusIndicator }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/summary/Summary.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import Markdown from "markdown-to-jsx";
 import { extractCitations } from "../../utils/citations/extractCitations";
@@ -27,17 +27,16 @@ const markDownCitations = (summary) => {
     }, [])
         .join("");
 };
-export const VuiSummary = ({ summary, className, SummaryCitation }) => {
+export const VuiSummary = ({ summary, className, SummaryCitation, statusIndicator }) => {
     // Protect users' privacy in FullStory.
     // https://help.fullstory.com/hc/en-us/articles/360020623574-How-do-I-protect-my-users-privacy-in-FullStory-#01F5DPW1AJHZHR8TBM9YQEDRMH
     const classes = classNames("vuiSummary", "fs-mask", className);
-    const markdown = markDownCitations(summary);
-    return (_jsx("div", Object.assign({ className: classes, dir: "auto" }, { children: _jsx(VuiText, Object.assign({ size: "m" }, { children: _jsx(Markdown, { children: markdown, options: {
-                    forceBlock: true,
-                    overrides: {
-                        SummaryCitation: {
-                            component: SummaryCitation
-                        }
-                    }
-                } }) })) })));
+    const parsedSummary = summary && (_jsx(Markdown, { children: markDownCitations(summary), options: {
+            overrides: {
+                SummaryCitation: {
+                    component: SummaryCitation
+                }
+            }
+        } }));
+    return (_jsx("div", Object.assign({ className: classes, dir: "auto" }, { children: summary ? (_jsx(VuiText, Object.assign({ size: "m" }, { children: _jsxs("p", { children: [parsedSummary, statusIndicator] }) }))) : (statusIndicator) })));
 };

package/lib/components/summary/Summary.test.js

@@ -40,6 +40,7 @@ With some **bold** and _emphasized_ test. Here is a [link](https://www.vectara.c
             <div
               class="vuiText vuiText--m"
             >
+              <p />
               <div>
                 <h1
                   id="heres-a-heading-1"
@@ -133,6 +134,7 @@ With some **bold** and _emphasized_ test. Here is a [link](https://www.vectara.c
                   </tbody>
                 </table>
               </div>
+              <p />
             </div>
           </div>
         </DocumentFragment>
@@ -173,6 +175,7 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
             <div
               class="vuiText vuiText--m"
             >
+              <p />
               <div>
                 <h1
                   id="summarycitation-reference1--heres-a-heading-1"
@@ -386,6 +389,7 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
                   </tbody>
                 </table>
               </div>
+              <p />
             </div>
           </div>
         </DocumentFragment>
@@ -405,44 +409,45 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
             <div
               class="vuiText vuiText--m"
             >
-              <div>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  1
-                </button>
-                 Beginning of summary. 
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  2
-                </button>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  3
-                </button>
-                 Multiple at beginning of sentence, and before comma 
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  4
-                </button>
-                , single at middle 
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  5
-                </button>
-                 of sentence. At end of sentence 
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  6
-                </button>
-                .
-
-              </div>
+              <p>
+                <span>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    1
+                  </button>
+                   Beginning of summary. 
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    2
+                  </button>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    3
+                  </button>
+                   Multiple at beginning of sentence, and before comma 
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    4
+                  </button>
+                  , single at middle 
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    5
+                  </button>
+                   of sentence. At end of sentence 
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    6
+                  </button>
+                  .
+                </span>
+              </p>
             </div>
           </div>
         </DocumentFragment>
@@ -461,12 +466,14 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
               class="vuiText vuiText--m"
             >
               <p>
-                End of summary. 
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  1
-                </button>
+                <span>
+                  End of summary. 
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    1
+                  </button>
+                </span>
               </p>
             </div>
           </div>
@@ -486,54 +493,56 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
               class="vuiText vuiText--m"
             >
               <p>
-                Two citations 
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  1
-                </button>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  2
-                </button>
-                 and seven citations 
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  1
-                </button>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  2
-                </button>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  3
-                </button>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  4
-                </button>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  5
-                </button>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  6
-                </button>
-                <button
-                  class="vuiSummaryCitation"
-                >
-                  7
-                </button>
-                .
+                <span>
+                  Two citations 
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    1
+                  </button>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    2
+                  </button>
+                   and seven citations 
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    1
+                  </button>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    2
+                  </button>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    3
+                  </button>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    4
+                  </button>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    5
+                  </button>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    6
+                  </button>
+                  <button
+                    class="vuiSummaryCitation"
+                  >
+                    7
+                  </button>
+                  .
+                </span>
               </p>
             </div>
           </div>

package/lib/components/table/Table.d.ts

@@ -28,6 +28,7 @@ type Props<T> = {
     content?: React.ReactNode;
     className?: string;
     fluid?: boolean;
+    isDisabled?: boolean;
 };
 type Selection<T> = {
     bulkActions?: TableBulkActionProps<T[]>["actions"];
@@ -40,5 +41,5 @@ type Search = {
     onSearchChange?: (value: string) => void;
     "data-testid"?: string;
 };
-export declare const VuiTable: <T extends Row>({ isLoading, idField, columns, rows, actions, actionsTestIdProvider, pagination, selection, search, customControls, onSort, onReload, content, className, fluid, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTable: <T extends Row>({ isLoading, idField, columns, rows, actions, actionsTestIdProvider, pagination, selection, search, customControls, onSort, onReload, content, className, fluid, isDisabled, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/table/Table.js

@@ -36,7 +36,7 @@ const extractId = (row, idField) => {
 // https://github.com/typescript-eslint/typescript-eslint/issues/4062
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 export const VuiTable = (_a) => {
-    var { isLoading, idField, columns, rows, actions, actionsTestIdProvider, pagination, selection, search, customControls, onSort, onReload, content, className, fluid } = _a, rest = __rest(_a, ["isLoading", "idField", "columns", "rows", "actions", "actionsTestIdProvider", "pagination", "selection", "search", "customControls", "onSort", "onReload", "content", "className", "fluid"]);
+    var { isLoading, idField, columns, rows, actions, actionsTestIdProvider, pagination, selection, search, customControls, onSort, onReload, content, className, fluid, isDisabled = false } = _a, rest = __rest(_a, ["isLoading", "idField", "columns", "rows", "actions", "actionsTestIdProvider", "pagination", "selection", "search", "customControls", "onSort", "onReload", "content", "className", "fluid", "isDisabled"]);
     const [rowBeingActedUpon, setRowBeingActedUpon] = useState(undefined);
     const { bulkActions, onSelectRow, selectedRows } = selection || {};
     const { searchValue, searchPlaceholder, onSearchChange } = search || {};
@@ -94,10 +94,12 @@ export const VuiTable = (_a) => {
                             }, testId: (_b = actionsTestIdProvider === null || actionsTestIdProvider === void 0 ? void 0 : actionsTestIdProvider(row)) !== null && _b !== void 0 ? _b : undefined }) }))] }), rowId));
         });
     }
-    return (_jsxs(_Fragment, { children: [(hasSearch ||
+    return (
+    // @ts-expect-error React doesn't support inert yet
+    _jsxs("div", Object.assign({ className: "vuiTableWrapper", inert: isDisabled ? "" : null }, { children: [isDisabled && _jsx("div", { className: "vuiTableBlock" }), (hasSearch ||
                 customControls ||
                 (hasBulkActions && selectedRows && selectedRows.length > 0) ||
-                Boolean(onReload)) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ spacing: "s", justifyContent: "spaceBetween", alignItems: "center" }, { children: [selectedRows && selectedRows.length > 0 && hasBulkActions && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiTableBulkActions, { selectedRows: selectedRows, actions: bulkActions }) }))), hasSearch && (_jsx(VuiFlexItem, Object.assign({ grow: 1, shrink: false }, { children: _jsx(VuiTextInput, { placeholder: searchPlaceholder, fullWidth: true, value: searchValue, onChange: (event) => onSearchChange(event.target.value), "data-testid": search === null || search === void 0 ? void 0 : search["data-testid"] }) }))), customControls && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: customControls }))), onReload && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiButtonSecondary, Object.assign({ color: "neutral", onClick: () => onReload() }, { children: "Reload" })) })))] })), _jsx(VuiSpacer, { size: "s" })] })), _jsxs("table", Object.assign({ className: classes }, rest, { children: [_jsx("thead", { children: _jsxs("tr", { children: [onSelectRow && (_jsx("th", Object.assign({ className: "vuiTableHeaderSelect" }, { children: _jsx(VuiTableCell, { children: _jsx(VuiCheckbox, { disabled: !isInteractive, checked: isInteractive ? allRowsSelected : false, onChange: () => {
+                Boolean(onReload)) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ spacing: "s", alignItems: "center" }, { children: [selectedRows && selectedRows.length > 0 && hasBulkActions && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiTableBulkActions, { selectedRows: selectedRows, actions: bulkActions }) }))), hasSearch && (_jsx(VuiFlexItem, Object.assign({ grow: 1, shrink: false }, { children: _jsx(VuiTextInput, { placeholder: searchPlaceholder, fullWidth: true, value: searchValue, onChange: (event) => onSearchChange(event.target.value), "data-testid": search === null || search === void 0 ? void 0 : search["data-testid"] }) }))), customControls && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: customControls }))), onReload && (_jsx(VuiFlexItem, Object.assign({ grow: 1, shrink: false }, { children: _jsx(VuiFlexContainer, Object.assign({ justifyContent: "end" }, { children: _jsx(VuiButtonSecondary, Object.assign({ color: "neutral", onClick: () => onReload() }, { children: "Reload" })) })) })))] })), _jsx(VuiSpacer, { size: "s" })] })), _jsxs("table", Object.assign({ className: classes }, rest, { children: [_jsx("thead", { children: _jsxs("tr", { children: [onSelectRow && (_jsx("th", Object.assign({ className: "vuiTableHeaderSelect" }, { children: _jsx(VuiTableCell, { children: _jsx(VuiCheckbox, { disabled: !isInteractive, checked: isInteractive ? allRowsSelected : false, onChange: () => {
                                                 let newSelectedRows;
                                                 if (allRowsSelected) {
                                                     newSelectedRows = [];
@@ -113,5 +115,5 @@ export const VuiTable = (_a) => {
                                     const { name, header, width } = column;
                                     const styles = width ? { width } : undefined;
                                     return (_jsx("th", Object.assign({ style: styles }, { children: _jsx(VuiTableHeaderCell, { name: name, header: header, onSort: onSort }) }), name));
-                                }), actions && _jsx("th", { className: "vuiTableHeaderActions" })] }) }), _jsx("tbody", { children: tableContent })] })), !pagination ? undefined : isComplexPagination(pagination) ? (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiTablePagination, Object.assign({ isDisabled: !isInteractive }, pagination))] })) : (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiTablePager, Object.assign({ isDisabled: !isInteractive }, pagination))] }))] }));
+                                }), actions && _jsx("th", { className: "vuiTableHeaderActions" })] }) }), _jsx("tbody", { children: tableContent })] })), !pagination ? undefined : isComplexPagination(pagination) ? (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiTablePagination, Object.assign({ isDisabled: !isInteractive }, pagination))] })) : (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiTablePager, Object.assign({ isDisabled: !isInteractive }, pagination))] }))] })));
 };

package/lib/components/table/_index.scss

@@ -1,3 +1,17 @@
+.vuiTableWrapper {
+  position: relative;
+}
+
+.vuiTableBlock {
+  background-color: transparentize($colorEmptyShade, 0.6);
+  height: 100%;
+  left: 0;
+  padding: $sizeM;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
 .vuiTable {
   width: 100%;
   table-layout: fixed;

package/lib/components/toggle/Toggle.js

@@ -21,5 +21,5 @@ export const VuiToggle = (_a) => {
         labelId = createId();
         inputProps["aria-labelledby"] = labelId;
     }
-    return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs("label", Object.assign({ className: "vuiToggle" }, { children: [_jsx("input", Object.assign({ className: "vuiToggle__input", type: "checkbox", checked: checked, onChange: onChange, id: id }, inputProps, rest)), _jsx("span", { className: "vuiToggle__button" })] })) })), label && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ id: labelId }, { children: label })) })))] })));
+    return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs("label", Object.assign({ className: "vuiToggle" }, rest, { children: [_jsx("input", Object.assign({ className: "vuiToggle__input", type: "checkbox", checked: checked, onChange: onChange, id: id }, inputProps)), _jsx("span", { className: "vuiToggle__button" })] })) })), label && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ id: labelId }, { children: label })) })))] })));
 };

package/lib/styles/index.css

@@ -2566,6 +2566,10 @@ fieldset {
   height: 40px;
 }
 
+.vuiSpinner {
+  display: inline-block;
+}
+
 .vuiSpinner--accent svg path,
 .vuiSpinner--accent svg rect {
   fill: #551edf;
@@ -2669,6 +2673,20 @@ fieldset {
   color: #ffffff;
 }
 
+.vuiTableWrapper {
+  position: relative;
+}
+
+.vuiTableBlock {
+  background-color: rgba(255, 255, 255, 0.4);
+  height: 100%;
+  left: 0;
+  padding: 16px;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
 .vuiTable {
   width: 100%;
   table-layout: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "homepage": "https://vectara.github.io/vectara-ui/",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",