@ruya.sa/ui 3.71.3

package/dist/elements/GroupByBuilder/index.js

@@ -0,0 +1,118 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
+import React, { useMemo } from 'react';
+import { SelectInput } from '../../fields/Select/Input.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
+import { ReactSelect } from '../ReactSelect/index.js';
+const baseClass = 'group-by-builder';
+/**
+ * Note: Some fields are already omitted from the list of fields:
+ * - fields with nested field, e.g. `tabs`, `groups`, etc.
+ * - fields that don't affect data, i.e. `row`, `collapsible`, `ui`, etc.
+ * So we don't technically need to omit them here, but do anyway.
+ * But some remaining fields still need an additional check, e.g. `richText`, etc.
+ */
+const supportedFieldTypes = ['text', 'textarea', 'number', 'select', 'relationship', 'date', 'checkbox', 'radio', 'email', 'number', 'upload'];
+export const GroupByBuilder = ({
+  collectionSlug,
+  fields
+}) => {
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
+  const reducedFields = useMemo(() => reduceFieldsToOptions({
+    fieldPermissions,
+    fields,
+    i18n
+  }), [fields, fieldPermissions, i18n]);
+  const {
+    query,
+    refineListData
+  } = useListQuery();
+  const groupByFieldName = query.groupBy?.replace(/^-/, '');
+  const groupByField = reducedFields.find(field => field.value === groupByFieldName);
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header`,
+      children: [/*#__PURE__*/_jsx("p", {
+        children: t('general:groupByLabel', {
+          label: ''
+        })
+      }), query.groupBy && /*#__PURE__*/_jsx("button", {
+        className: `${baseClass}__clear-button`,
+        id: "group-by--reset",
+        onClick: async () => {
+          await refineListData({
+            groupBy: ''
+          });
+        },
+        type: "button",
+        children: t('general:clear')
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__inputs`,
+      children: [/*#__PURE__*/_jsx(ReactSelect, {
+        filterOption: (option, inputValue) => (option?.data?.plainTextLabel || option.label).toLowerCase().includes(inputValue.toLowerCase()),
+        id: "group-by--field-select",
+        isClearable: true,
+        isMulti: false,
+        onChange: async v => {
+          const value = v === null ? undefined : v.value;
+          // value is being cleared
+          if (v === null) {
+            await refineListData({
+              groupBy: '',
+              page: 1
+            });
+          }
+          await refineListData({
+            groupBy: value ? query.groupBy?.startsWith('-') ? `-${value}` : value : undefined,
+            page: 1
+          });
+        },
+        options: reducedFields.filter(field_0 => !field_0.field.admin.disableGroupBy && field_0.value !== 'id' && supportedFieldTypes.includes(field_0.field.type)),
+        value: {
+          label: groupByField?.label || t('general:selectValue'),
+          value: groupByFieldName || ''
+        }
+      }), /*#__PURE__*/_jsx(SelectInput, {
+        id: "group-by--sort",
+        isClearable: false,
+        name: "direction",
+        onChange: async ({
+          value: value_0
+        }) => {
+          if (!groupByFieldName) {
+            return;
+          }
+          await refineListData({
+            groupBy: value_0 === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
+            page: 1
+          });
+        },
+        options: [{
+          label: t('general:ascending'),
+          value: 'asc'
+        }, {
+          label: t('general:descending'),
+          value: 'desc'
+        }],
+        path: "direction",
+        readOnly: !groupByFieldName,
+        value: !query.groupBy ? 'asc' : typeof query.groupBy === 'string' ? `${query.groupBy.startsWith('-') ? 'desc' : 'asc'}` : ''
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/GroupByBuilder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useMemo","SelectInput","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","ReactSelect","baseClass","supportedFieldTypes","GroupByBuilder","collectionSlug","fields","i18n","t","permissions","fieldPermissions","collections","reducedFields","query","refineListData","groupByFieldName","groupBy","replace","groupByField","find","field","value","_jsxs","className","_jsx","label","id","onClick","type","filterOption","option","inputValue","data","plainTextLabel","toLowerCase","includes","isClearable","isMulti","onChange","v","undefined","page","startsWith","options","filter","admin","disableGroupBy","name","path","readOnly"],"sources":["../../../src/elements/GroupByBuilder/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from '@ruya.sa/payload'\n\nimport './index.scss'\n\nimport React, { useMemo } from 'react'\n\nimport { SelectInput } from '../../fields/Select/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  fields: ClientField[]\n}\n\nconst baseClass = 'group-by-builder'\n\n/**\n * Note: Some fields are already omitted from the list of fields:\n * - fields with nested field, e.g. `tabs`, `groups`, etc.\n * - fields that don't affect data, i.e. `row`, `collapsible`, `ui`, etc.\n * So we don't technically need to omit them here, but do anyway.\n * But some remaining fields still need an additional check, e.g. `richText`, etc.\n */\nconst supportedFieldTypes: Field['type'][] = [\n  'text',\n  'textarea',\n  'number',\n  'select',\n  'relationship',\n  'date',\n  'checkbox',\n  'radio',\n  'email',\n  'number',\n  'upload',\n]\n\nexport const GroupByBuilder: React.FC<Props> = ({ collectionSlug, fields }) => {\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n\n  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields\n\n  const reducedFields = useMemo(\n    () =>\n      reduceFieldsToOptions({\n        fieldPermissions,\n        fields,\n        i18n,\n      }),\n    [fields, fieldPermissions, i18n],\n  )\n\n  const { query, refineListData } = useListQuery()\n\n  const groupByFieldName = query.groupBy?.replace(/^-/, '')\n\n  const groupByField = reducedFields.find((field) => field.value === groupByFieldName)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <p>\n          {t('general:groupByLabel', {\n            label: '',\n          })}\n        </p>\n        {query.groupBy && (\n          <button\n            className={`${baseClass}__clear-button`}\n            id=\"group-by--reset\"\n            onClick={async () => {\n              await refineListData({\n                groupBy: '',\n              })\n            }}\n            type=\"button\"\n          >\n            {t('general:clear')}\n          </button>\n        )}\n      </div>\n      <div className={`${baseClass}__inputs`}>\n        <ReactSelect\n          filterOption={(option, inputValue) =>\n            ((option?.data?.plainTextLabel as string) || option.label)\n              .toLowerCase()\n              .includes(inputValue.toLowerCase())\n          }\n          id=\"group-by--field-select\"\n          isClearable\n          isMulti={false}\n          onChange={async (v: { value: string } | null) => {\n            const value = v === null ? undefined : v.value\n\n            // value is being cleared\n            if (v === null) {\n              await refineListData({\n                groupBy: '',\n                page: 1,\n              })\n            }\n\n            await refineListData({\n              groupBy: value ? (query.groupBy?.startsWith('-') ? `-${value}` : value) : undefined,\n              page: 1,\n            })\n          }}\n          options={reducedFields.filter(\n            (field) =>\n              !field.field.admin.disableGroupBy &&\n              field.value !== 'id' &&\n              supportedFieldTypes.includes(field.field.type),\n          )}\n          value={{\n            label: groupByField?.label || t('general:selectValue'),\n            value: groupByFieldName || '',\n          }}\n        />\n        <SelectInput\n          id=\"group-by--sort\"\n          isClearable={false}\n          name=\"direction\"\n          onChange={async ({ value }: { value: string }) => {\n            if (!groupByFieldName) {\n              return\n            }\n\n            await refineListData({\n              groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n              page: 1,\n            })\n          }}\n          options={[\n            { label: t('general:ascending'), value: 'asc' },\n            { label: t('general:descending'), value: 'desc' },\n          ]}\n          path=\"direction\"\n          readOnly={!groupByFieldName}\n          value={\n            !query.groupBy\n              ? 'asc'\n              : typeof query.groupBy === 'string'\n                ? `${query.groupBy.startsWith('-') ? 'desc' : 'asc'}`\n                : ''\n          }\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/GroupByBuilder/index.scss

@@ -0,0 +1,39 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .group-by-builder {
+    background: var(--theme-elevation-50);
+    padding: var(--base);
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+
+    &__header {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__clear-button {
+      background: transparent;
+      border: none;
+      color: var(--theme-elevation-500);
+      line-height: inherit;
+      cursor: pointer;
+      font-size: inherit;
+      padding: 0;
+      text-decoration: underline;
+    }
+
+    &__inputs {
+      width: 100%;
+      display: flex;
+      gap: base(1);
+
+      & > * {
+        flex-grow: 1;
+        width: 50%;
+      }
+    }
+  }
+}

package/dist/elements/Gutter/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.scss';
+export type GutterProps = {
+    children: React.ReactNode;
+    className?: string;
+    left?: boolean;
+    negativeLeft?: boolean;
+    negativeRight?: boolean;
+    ref?: React.RefObject<HTMLDivElement>;
+    right?: boolean;
+};
+export declare const Gutter: React.FC<GutterProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Gutter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Gutter/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+BxC,CAAA"}

package/dist/elements/Gutter/index.js

@@ -0,0 +1,25 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'gutter';
+export const Gutter = props => {
+  const {
+    children,
+    className,
+    left = true,
+    negativeLeft = false,
+    negativeRight = false,
+    ref,
+    right = true
+  } = props;
+  const shouldPadLeft = left && !negativeLeft;
+  const shouldPadRight = right && !negativeRight;
+  return /*#__PURE__*/_jsx("div", {
+    className: [baseClass, shouldPadLeft && `${baseClass}--left`, shouldPadRight && `${baseClass}--right`, negativeLeft && `${baseClass}--negative-left`, negativeRight && `${baseClass}--negative-right`, className].filter(Boolean).join(' '),
+    ref: ref,
+    children: children
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Gutter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","_jsx","filter","Boolean","join"],"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAYP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAiCC,KAAA;EAC5C,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,IAAA,GAAO,IAAI;IACXC,YAAA,GAAe,KAAK;IACpBC,aAAA,GAAgB,KAAK;IACrBC,GAAG;IACHC,KAAA,GAAQ;EAAI,CACb,GAAGP,KAAA;EAEJ,MAAMQ,aAAA,GAAgBL,IAAA,IAAQ,CAACC,YAAA;EAC/B,MAAMK,cAAA,GAAiBF,KAAA,IAAS,CAACF,aAAA;EAEjC,oBACEK,IAAA,CAAC;IACCR,SAAA,EAAW,CACTJ,SAAA,EACAU,aAAA,IAAiB,GAAGV,SAAA,QAAiB,EACrCW,cAAA,IAAkB,GAAGX,SAAA,SAAkB,EACvCM,YAAA,IAAgB,GAAGN,SAAA,iBAA0B,EAC7CO,aAAA,IAAiB,GAAGP,SAAA,kBAA2B,EAC/CI,SAAA,CACD,CACES,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,GAAA,EAAKA,GAAA;cAEJL;;AAGP","ignoreList":[]}

package/dist/elements/Gutter/index.scss

@@ -0,0 +1,21 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .gutter {
+    &--left {
+      padding-left: var(--gutter-h);
+    }
+
+    &--right {
+      padding-right: var(--gutter-h);
+    }
+
+    &--negative-left {
+      margin-left: calc(-1 * var(--gutter-h));
+    }
+
+    &--negative-right {
+      margin-right: calc(-1 * var(--gutter-h));
+    }
+  }
+}

package/dist/elements/HTMLDiff/colors.scss

@@ -0,0 +1,35 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  :root {
+    --diff-delete-pill-bg: var(--theme-error-200);
+    --diff-delete-pill-color: var(--theme-error-600);
+    --diff-delete-pill-border: var(--theme-error-400);
+    --diff-delete-parent-bg: var(--theme-error-100);
+    --diff-delete-parent-color: var(--theme-error-800);
+    --diff-delete-link-color: var(--theme-error-600);
+
+    --diff-create-pill-bg: var(--theme-success-200);
+    --diff-create-pill-color: var(--theme-success-600);
+    --diff-create-pill-border: var(--theme-success-400);
+    --diff-create-parent-bg: var(--theme-success-100);
+    --diff-create-parent-color: var(--theme-success-800);
+    --diff-create-link-color: var(--theme-success-600);
+  }
+
+  html[data-theme='dark'] {
+    --diff-delete-pill-bg: var(--theme-error-200);
+    --diff-delete-pill-color: var(--theme-error-650);
+    --diff-delete-pill-border: var(--theme-error-400);
+    --diff-delete-parent-bg: var(--theme-error-100);
+    --diff-delete-parent-color: var(--theme-error-900);
+    --diff-delete-link-color: var(--theme-error-750);
+
+    --diff-create-pill-bg: var(--theme-success-200);
+    --diff-create-pill-color: var(--theme-success-650);
+    --diff-create-pill-border: var(--theme-success-400);
+    --diff-create-parent-bg: var(--theme-success-100);
+    --diff-create-parent-color: var(--theme-success-900);
+    --diff-create-link-color: var(--theme-success-750);
+  }
+}

package/dist/elements/HTMLDiff/diff/index.d.ts

@@ -0,0 +1,75 @@
+export interface HtmlDiffOptions {
+    /**
+     * The classNames for wrapper DOM.
+     * Use this to configure your own styles without importing the built-in CSS file
+     */
+    classNames?: Partial<{
+        createBlock?: string;
+        createInline?: string;
+        deleteBlock?: string;
+        deleteInline?: string;
+    }>;
+    /**
+     * @defaultValue 1000
+     */
+    greedyBoundary?: number;
+    /**
+     * When greedyMatch is enabled, if the length of the sub-tokens exceeds greedyBoundary,
+     * we will use the matched sub-tokens that are sufficiently good, even if they are not optimal, to enhance performance.
+     * @defaultValue true
+     */
+    greedyMatch?: boolean;
+    /**
+     * Determine the minimum threshold for calculating common sub-tokens.
+     * You may adjust it to a value larger than 2, but not lower, due to the potential inclusion of HTML tags in the count.
+     * @defaultValue 2
+     */
+    minMatchedSize?: number;
+    /**
+     * Whether to tokenize by character or by word.
+     * @defaultValue false
+     */
+    tokenizeByCharacter?: boolean;
+}
+export declare class HtmlDiff {
+    private readonly config;
+    private leastCommonLength;
+    private readonly matchedBlockList;
+    private readonly newTokens;
+    private readonly oldTokens;
+    private readonly operationList;
+    private sideBySideContents?;
+    private unifiedContent?;
+    constructor(oldHtml: string, newHtml: string, { classNames, greedyBoundary, greedyMatch, minMatchedSize, tokenizeByCharacter, }?: HtmlDiffOptions);
+    private computeBestMatchedBlock;
+    private computeMatchedBlockList;
+    private dressUpBlockTag;
+    private dressUpDiffContent;
+    private dressUpInlineTag;
+    private dressupMatchEnabledHtmlTag;
+    private dressUpText;
+    /**
+     * Generates a list of token entries that are matched between the old and new HTML. This list will not
+     * include token ranges that differ.
+     */
+    private getMatchedBlockList;
+    private getOperationList;
+    private slideBestMatchedBlock;
+    /**
+     * Convert HTML to tokens at character level, preserving HTML tags as complete tokens
+     * @example
+     * tokenize("<a> Hello World </a>")
+     * ["<a>", " ", "H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", " ", "</a>"]
+     */
+    private tokenizeByCharacter;
+    /**
+     * convert HTML to tokens
+     * @example
+     * tokenize("<a> Hello World </a>")
+     * ["<a>"," ", "Hello", " ", "World", " ", "</a>"]
+     */
+    private tokenizeByWord;
+    getSideBySideContents(): string[];
+    getUnifiedContent(): string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/HTMLDiff/diff/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/HTMLDiff/diff/index.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAWD,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAC,CAAkB;IAC7C,OAAO,CAAC,cAAc,CAAC,CAAQ;gBAG7B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,EACE,UAKC,EACD,cAAqB,EACrB,WAAkB,EAClB,cAAkB,EAClB,mBAA2B,GAC5B,GAAE,eAAoB;IA4CzB,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,uBAAuB;IAmC/B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAwD1B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAcnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA+D3B,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,qBAAqB;IA0B7B;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IASf,qBAAqB,IAAI,MAAM,EAAE;IAkEjC,iBAAiB,IAAI,MAAM;CA6HnC"}