@ruya.sa/ui 3.71.3

package/dist/elements/SortColumn/index.js

@@ -0,0 +1,120 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
+const baseClass = 'sort-column';
+export const SortColumn = props => {
+  const $ = _c(19);
+  const {
+    name,
+    appearance,
+    disable: t0,
+    Label,
+    label
+  } = props;
+  const disable = t0 === undefined ? false : t0;
+  const {
+    handleSortChange,
+    query
+  } = useListQuery();
+  const {
+    t
+  } = useTranslation();
+  const {
+    sort
+  } = query;
+  const desc = `-${name}`;
+  const asc = name;
+  let ascClasses;
+  if ($[0] !== asc || $[1] !== sort) {
+    ascClasses = [`${baseClass}__asc`];
+    if (sort === asc) {
+      ascClasses.push(`${baseClass}--active`);
+    }
+    $[0] = asc;
+    $[1] = sort;
+    $[2] = ascClasses;
+  } else {
+    ascClasses = $[2];
+  }
+  let descClasses;
+  if ($[3] !== desc || $[4] !== sort) {
+    descClasses = [`${baseClass}__desc`];
+    if (sort === desc) {
+      descClasses.push(`${baseClass}--active`);
+    }
+    $[3] = desc;
+    $[4] = sort;
+    $[5] = descClasses;
+  } else {
+    descClasses = $[5];
+  }
+  const t1 = appearance && `${baseClass}--appearance-${appearance}`;
+  let t2;
+  if ($[6] !== t1) {
+    t2 = [baseClass, t1].filter(Boolean);
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const t3 = t2.join(" ");
+  let t4;
+  if ($[8] !== Label || $[9] !== asc || $[10] !== ascClasses || $[11] !== desc || $[12] !== descClasses || $[13] !== disable || $[14] !== handleSortChange || $[15] !== label || $[16] !== t || $[17] !== t3) {
+    t4 = _jsxs("div", {
+      className: t3,
+      children: [_jsx("span", {
+        className: `${baseClass}__label`,
+        children: Label ?? _jsx(FieldLabel, {
+          hideLocale: true,
+          label,
+          unstyled: true
+        })
+      }), !disable && _jsxs("div", {
+        className: `${baseClass}__buttons`,
+        children: [_jsx("button", {
+          "aria-label": t("general:sortByLabelDirection", {
+            direction: t("general:ascending"),
+            label
+          }),
+          className: [...ascClasses, `${baseClass}__button`].filter(Boolean).join(" "),
+          onClick: () => void handleSortChange(asc),
+          type: "button",
+          children: _jsx(ChevronIcon, {
+            direction: "up"
+          })
+        }), _jsx("button", {
+          "aria-label": t("general:sortByLabelDirection", {
+            direction: t("general:descending"),
+            label
+          }),
+          className: [...descClasses, `${baseClass}__button`].filter(Boolean).join(" "),
+          onClick: () => void handleSortChange(desc),
+          type: "button",
+          children: _jsx(ChevronIcon, {})
+        })]
+      })]
+    });
+    $[8] = Label;
+    $[9] = asc;
+    $[10] = ascClasses;
+    $[11] = desc;
+    $[12] = descClasses;
+    $[13] = disable;
+    $[14] = handleSortChange;
+    $[15] = label;
+    $[16] = t;
+    $[17] = t3;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  return t4;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","FieldLabel","ChevronIcon","useListQuery","useTranslation","baseClass","SortColumn","props","$","name","appearance","disable","t0","Label","label","undefined","handleSortChange","query","t","sort","desc","asc","ascClasses","push","descClasses","t1","t2","filter","Boolean","t3","join","t4","_jsxs","className","children","_jsx","hideLocale","unstyled","direction","onClick","type"],"sources":["../../../src/elements/SortColumn/index.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from '@ruya.sa/payload'\n\nimport React from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type SortColumnProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n  readonly Label: React.ReactNode\n  readonly label?: StaticLabel\n  readonly name: string\n}\n\nconst baseClass = 'sort-column'\n\nexport const SortColumn: React.FC<SortColumnProps> = (props) => {\n  const { name, appearance, disable = false, Label, label } = props\n  const { handleSortChange, query } = useListQuery()\n  const { t } = useTranslation()\n\n  const { sort } = query\n\n  const desc = `-${name}`\n  const asc = name\n\n  const ascClasses = [`${baseClass}__asc`]\n  if (sort === asc) {\n    ascClasses.push(`${baseClass}--active`)\n  }\n\n  const descClasses = [`${baseClass}__desc`]\n  if (sort === desc) {\n    descClasses.push(`${baseClass}--active`)\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span className={`${baseClass}__label`}>\n        {Label ?? <FieldLabel hideLocale label={label} unstyled />}\n      </span>\n      {!disable && (\n        <div className={`${baseClass}__buttons`}>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:ascending'),\n              label,\n            })}\n            className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(asc)}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"up\" />\n          </button>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:descending'),\n              label,\n            })}\n            className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(desc)}\n            type=\"button\"\n          >\n            <ChevronIcon />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/SortColumn/index.scss

@@ -0,0 +1,67 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .sort-column {
+    display: flex;
+    gap: calc(var(--base) / 2);
+    align-items: center;
+
+    &__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__label,
+    .btn {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    &__label {
+      cursor: default;
+    }
+
+    &__buttons {
+      display: flex;
+      align-items: center;
+      gap: 0;
+    }
+
+    &__button {
+      margin: 0;
+      opacity: 0.3;
+      padding: calc(var(--base) / 4) 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+
+      &.sort-column--active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    &:hover {
+      .btn {
+        opacity: 0.4;
+        visibility: visible;
+      }
+    }
+
+    &--appearance-condensed {
+      gap: calc(var(--base) / 4);
+
+      .sort-column__buttons {
+        gap: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import type { SanitizedCollectionConfig } from '@ruya.sa/payload';
+import React from 'react';
+export type SortComplexProps = {
+    collection: SanitizedCollectionConfig;
+    handleChange?: (sort: string) => void;
+    modifySearchQuery?: boolean;
+    sort?: string;
+};
+import './index.scss';
+export declare const SortComplex: React.FC<SortComplexProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortComplex/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,yBAAyB,EAAE,MAAM,kBAAkB,CAAA;AAQ/E,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,EAAE,yBAAyB,CAAA;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAMD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4ElD,CAAA"}

package/dist/elements/SortComplex/index.js

@@ -0,0 +1,178 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@ruya.sa/translations';
+// TODO: abstract the `next/navigation` dependency out from this component
+import { usePathname, useRouter, useSearchParams } from 'next/navigation.js';
+import { sortableFieldTypes } from '@ruya.sa/payload';
+import { fieldAffectsData } from '@ruya.sa/payload/shared';
+import * as qs from 'qs-esm';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { ReactSelect } from '../ReactSelect/index.js';
+import './index.scss';
+const baseClass = 'sort-complex';
+export const SortComplex = props => {
+  const $ = _c(28);
+  const {
+    collection,
+    handleChange,
+    modifySearchQuery: t0
+  } = props;
+  const modifySearchQuery = t0 === undefined ? true : t0;
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const [sortOptions, setSortOptions] = useState();
+  let t1;
+  if ($[0] !== collection.fields || $[1] !== i18n) {
+    t1 = () => collection.fields.reduce((fields, field) => {
+      if (fieldAffectsData(field) && sortableFieldTypes.indexOf(field.type) > -1) {
+        return [...fields, {
+          label: getTranslation(field.label || field.name, i18n),
+          value: field.name
+        }];
+      }
+      return fields;
+    }, []);
+    $[0] = collection.fields;
+    $[1] = i18n;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const [sortFields] = useState(t1);
+  const [sortField, setSortField] = useState(sortFields[0]);
+  let t2;
+  if ($[3] !== t) {
+    t2 = () => ({
+      label: t("general:descending"),
+      value: "-"
+    });
+    $[3] = t;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const [initialSort] = useState(t2);
+  const [sortOrder, setSortOrder] = useState(initialSort);
+  let t3;
+  let t4;
+  if ($[5] !== handleChange || $[6] !== modifySearchQuery || $[7] !== pathname || $[8] !== router || $[9] !== searchParams || $[10] !== sortField || $[11] !== sortOrder) {
+    t3 = () => {
+      if (sortField?.value) {
+        const newSortValue = `${sortOrder.value}${sortField.value}`;
+        if (handleChange) {
+          handleChange(newSortValue);
+        }
+        if (searchParams.get("sort") !== newSortValue && modifySearchQuery) {
+          const search = qs.stringify({
+            ...searchParams,
+            sort: newSortValue
+          }, {
+            addQueryPrefix: true
+          });
+          router.replace(`${pathname}${search}`);
+        }
+      }
+    };
+    t4 = [pathname, router, searchParams, sortField, sortOrder, modifySearchQuery, handleChange];
+    $[5] = handleChange;
+    $[6] = modifySearchQuery;
+    $[7] = pathname;
+    $[8] = router;
+    $[9] = searchParams;
+    $[10] = sortField;
+    $[11] = sortOrder;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t3 = $[12];
+    t4 = $[13];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[14] !== t) {
+    t5 = () => {
+      setSortOptions([{
+        label: t("general:ascending"),
+        value: ""
+      }, {
+        label: t("general:descending"),
+        value: "-"
+      }]);
+    };
+    $[14] = t;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== i18n || $[17] !== t) {
+    t6 = [i18n, t];
+    $[16] = i18n;
+    $[17] = t;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[19] !== initialSort || $[20] !== sortField || $[21] !== sortFields || $[22] !== sortOptions || $[23] !== sortOrder || $[24] !== t) {
+    let t8;
+    if ($[26] !== initialSort) {
+      t8 = incomingSort => {
+        setSortOrder(incomingSort || initialSort);
+      };
+      $[26] = initialSort;
+      $[27] = t8;
+    } else {
+      t8 = $[27];
+    }
+    t7 = _jsx("div", {
+      className: baseClass,
+      children: _jsx(React.Fragment, {
+        children: _jsxs("div", {
+          className: `${baseClass}__wrap`,
+          children: [_jsxs("div", {
+            className: `${baseClass}__select`,
+            children: [_jsx("div", {
+              className: `${baseClass}__label`,
+              children: t("general:columnToSort")
+            }), _jsx(ReactSelect, {
+              onChange: setSortField,
+              options: sortFields,
+              value: sortField
+            })]
+          }), _jsxs("div", {
+            className: `${baseClass}__select`,
+            children: [_jsx("div", {
+              className: `${baseClass}__label`,
+              children: t("general:order")
+            }), _jsx(ReactSelect, {
+              onChange: t8,
+              options: sortOptions,
+              value: sortOrder
+            })]
+          })]
+        })
+      })
+    });
+    $[19] = initialSort;
+    $[20] = sortField;
+    $[21] = sortFields;
+    $[22] = sortOptions;
+    $[23] = sortOrder;
+    $[24] = t;
+    $[25] = t7;
+  } else {
+    t7 = $[25];
+  }
+  return t7;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","usePathname","useRouter","useSearchParams","sortableFieldTypes","fieldAffectsData","qs","React","useEffect","useState","useTranslation","ReactSelect","baseClass","SortComplex","props","$","collection","handleChange","modifySearchQuery","t0","undefined","router","pathname","searchParams","i18n","t","sortOptions","setSortOptions","t1","fields","reduce","field","indexOf","type","label","name","value","sortFields","sortField","setSortField","t2","initialSort","sortOrder","setSortOrder","t3","t4","newSortValue","get","search","stringify","sort","addQueryPrefix","replace","t5","t6","t7","t8","incomingSort","_jsx","className","children","Fragment","_jsxs","onChange","options"],"sources":["../../../src/elements/SortComplex/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionObject, SanitizedCollectionConfig } from '@ruya.sa/payload'\n\nimport { getTranslation } from '@ruya.sa/translations'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport { sortableFieldTypes } from '@ruya.sa/payload'\nimport { fieldAffectsData } from '@ruya.sa/payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useEffect, useState } from 'react'\n\nexport type SortComplexProps = {\n  collection: SanitizedCollectionConfig\n  handleChange?: (sort: string) => void\n  modifySearchQuery?: boolean\n  sort?: string\n}\n\nimport type { Option } from '../ReactSelect/index.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-complex'\n\nexport const SortComplex: React.FC<SortComplexProps> = (props) => {\n  const { collection, handleChange, modifySearchQuery = true } = props\n\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const { i18n, t } = useTranslation()\n  const [sortOptions, setSortOptions] = useState<OptionObject[]>()\n\n  const [sortFields] = useState(() =>\n    collection.fields.reduce((fields, field) => {\n      if (fieldAffectsData(field) && sortableFieldTypes.indexOf(field.type) > -1) {\n        return [\n          ...fields,\n          { label: getTranslation(field.label || field.name, i18n), value: field.name },\n        ]\n      }\n      return fields\n    }, []),\n  )\n\n  const [sortField, setSortField] = useState(sortFields[0])\n  const [initialSort] = useState<Option>(() => ({ label: t('general:descending'), value: '-' }))\n  const [sortOrder, setSortOrder] = useState(initialSort)\n\n  useEffect(() => {\n    if (sortField?.value) {\n      const newSortValue = `${sortOrder.value}${sortField.value}`\n\n      if (handleChange) {\n        handleChange(newSortValue)\n      }\n\n      if (searchParams.get('sort') !== newSortValue && modifySearchQuery) {\n        const search = qs.stringify(\n          {\n            ...searchParams,\n            sort: newSortValue,\n          },\n          { addQueryPrefix: true },\n        )\n\n        router.replace(`${pathname}${search}`)\n      }\n    }\n  }, [pathname, router, searchParams, sortField, sortOrder, modifySearchQuery, handleChange])\n\n  useEffect(() => {\n    setSortOptions([\n      { label: t('general:ascending'), value: '' },\n      { label: t('general:descending'), value: '-' },\n    ])\n  }, [i18n, t])\n\n  return (\n    <div className={baseClass}>\n      <React.Fragment>\n        <div className={`${baseClass}__wrap`}>\n          <div className={`${baseClass}__select`}>\n            <div className={`${baseClass}__label`}>{t('general:columnToSort')}</div>\n            <ReactSelect onChange={setSortField} options={sortFields} value={sortField} />\n          </div>\n          <div className={`${baseClass}__select`}>\n            <div className={`${baseClass}__label`}>{t('general:order')}</div>\n            <ReactSelect\n              onChange={(incomingSort: Option) => {\n                setSortOrder(incomingSort || initialSort)\n              }}\n              options={sortOptions}\n              value={sortOrder}\n            />\n          </div>\n        </div>\n      </React.Fragment>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/SortComplex/index.scss

@@ -0,0 +1,38 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .sort-complex {
+    background: var(--theme-elevation-100);
+    padding: base(0.5);
+    display: flex;
+
+    &__wrap {
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    &__select {
+      width: 50%;
+      margin-bottom: base(0.5);
+      padding: 0 base(0.5);
+      flex-grow: 1;
+    }
+
+    &__label {
+      color: var(--theme-elevation-400);
+      margin: base(0.5) 0;
+    }
+
+    @include mid-break {
+      &__wrap {
+        display: block;
+      }
+
+      &__select {
+        margin: 0 0 base(0.5);
+        width: 100%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+export type SortHeaderProps = {
+    readonly appearance?: 'condensed' | 'default';
+    readonly disable?: boolean;
+};
+export declare const SortHeader: React.FC<SortHeaderProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAGrB,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAqBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0BhD,CAAA"}

package/dist/elements/SortHeader/index.js

@@ -0,0 +1,100 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { SortDownIcon } from '../../icons/Sort/index.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import './index.scss';
+import { useTranslation } from '../../providers/Translation/index.js';
+const baseClass = 'sort-header';
+function useSort() {
+  const $ = _c(7);
+  const {
+    handleSortChange,
+    orderableFieldName,
+    query
+  } = useListQuery();
+  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort;
+  const isActive = querySort === orderableFieldName;
+  let t0;
+  if ($[0] !== handleSortChange || $[1] !== isActive || $[2] !== orderableFieldName) {
+    t0 = () => {
+      if (isActive) {
+        return;
+      }
+      handleSortChange(orderableFieldName);
+    };
+    $[0] = handleSortChange;
+    $[1] = isActive;
+    $[2] = orderableFieldName;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const handleSortPress = t0;
+  let t1;
+  if ($[4] !== handleSortPress || $[5] !== isActive) {
+    t1 = {
+      handleSortPress,
+      isActive
+    };
+    $[4] = handleSortPress;
+    $[5] = isActive;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
+export const SortHeader = props => {
+  const $ = _c(7);
+  const {
+    appearance
+  } = props;
+  const {
+    handleSortPress,
+    isActive
+  } = useSort();
+  const {
+    t
+  } = useTranslation();
+  const t0 = appearance && `${baseClass}--appearance-${appearance}`;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = [baseClass, t0].filter(Boolean);
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = t1.join(" ");
+  let t3;
+  if ($[2] !== handleSortPress || $[3] !== isActive || $[4] !== t || $[5] !== t2) {
+    t3 = _jsx("div", {
+      className: t2,
+      children: _jsx("div", {
+        className: `${baseClass}__buttons`,
+        children: _jsx("button", {
+          "aria-label": t("general:sortByLabelDirection", {
+            direction: t("general:ascending"),
+            label: "Order"
+          }),
+          className: `${baseClass}__button ${isActive ? `${baseClass}--active` : ""}`,
+          onClick: handleSortPress,
+          type: "button",
+          children: _jsx(SortDownIcon, {})
+        })
+      })
+    });
+    $[2] = handleSortPress;
+    $[3] = isActive;
+    $[4] = t;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","SortDownIcon","useListQuery","useTranslation","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","filter","Boolean","t2","join","t3","_jsx","className","children","direction","label","onClick","type"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { SortDownIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport './index.scss'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isActive = querySort === orderableFieldName\n\n  const handleSortPress = () => {\n    // If it's already sorted by the \"_order\" field, do nothing\n    if (isActive) {\n      return\n    }\n    // If NOT sorted by the \"_order\" field, sort by that field.\n    void handleSortChange(orderableFieldName)\n  }\n\n  return { handleSortPress, isActive }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive } = useSort()\n  const { t } = useTranslation()\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__buttons`}>\n        <button\n          aria-label={t('general:sortByLabelDirection', {\n            direction: t('general:ascending'),\n            label: 'Order',\n          })}\n          className={`${baseClass}__button ${isActive ? `${baseClass}--active` : ''}`}\n          onClick={handleSortPress}\n          type=\"button\"\n        >\n          <SortDownIcon />\n        </button>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,YAAY,QAAQ;AAC7B,OAAO;AACP,SAASC,cAAc,QAAQ;AAO/B,MAAMC,SAAA,GAAY;AAElB,SAAAC,QAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACE;IAAAQ,gBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAwDP,YAAA;EACxD,MAAAQ,SAAA,GAAkBC,KAAA,CAAAC,OAAA,CAAcH,KAAA,CAAAI,IAAU,IAAIJ,KAAA,CAAAI,IAAA,MAAgBJ,KAAA,CAAAI,IAAU;EACxE,MAAAC,QAAA,GAAiBJ,SAAA,KAAcF,kBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAT,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAE,kBAAA;IAEPO,EAAA,GAAAA,CAAA;MAAA,IAElBD,QAAA;QAAA;MAAA;MAICP,gBAAA,CAAiBC,kBAAA;IAAA;IACxBF,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAPA,MAAAU,eAAA,GAAwBD,EAOxB;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA;IAEOG,EAAA;MAAAD,eAAA;MAAAF;IAAA;IAA4BR,CAAA,MAAAU,eAAA;IAAAV,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAA,OAA5BW,EAA4B;AAAA;AAGrC,OAAO,MAAMC,UAAA,GAAwCC,KAAA;EAAA,MAAAb,CAAA,GAAAP,EAAA;EACnD;IAAAqB;EAAA,IAAuBD,KAAA;EACvB;IAAAH,eAAA;IAAAF;EAAA,IAAsCT,OAAA;EACtC;IAAAgB;EAAA,IAAclB,cAAA;EAIa,MAAAY,EAAA,GAAAK,UAAA,IAAc,GAAAhB,SAAA,gBAA4BgB,UAAA,EAAY;EAAA,IAAAH,EAAA;EAAA,IAAAX,CAAA,QAAAS,EAAA;IAAlEE,EAAA,IAAAb,SAAA,EAAYW,EAAsD,EAAAO,MAAA,CAAAC,OACnE;IAAAjB,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EADC,MAAAkB,EAAA,GAAAP,EACD,CAAAQ,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAe,CAAA,IAAAf,CAAA,QAAAkB,EAAA;IAHVE,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EACYJ,EAEH;MAAAK,QAAA,EAERF,IAAA,CAAC;QAAAC,SAAA,EAAe,GAAAxB,SAAA,WAAuB;QAAAyB,QAAA,EACrCF,IAAA,CAAC;UAAA,cACaN,CAAA,CAAE;YAAAS,SAAA,EACDT,CAAA,CAAE;YAAAU,KAAA,EACN;UAAA,CACT;UAAAH,SAAA,EACW,GAAAxB,SAAA,YAAwBU,QAAA,GAAW,GAAAV,SAAA,UAAsB,GAAG,IAAI;UAAA4B,OAAA,EAClEhB,eAAA;UAAAiB,IAAA,EACJ;UAAAJ,QAAA,EAELF,IAAA,CAAA1B,YAAA,IAAC;QAAA,C;;;;;;;;;;;SAfPyB,E;CAoBJ","ignoreList":[]}

package/dist/elements/SortHeader/index.scss

@@ -0,0 +1,52 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .sort-header {
+    display: flex;
+    gap: calc(var(--base) / 2);
+    align-items: center;
+
+    &__buttons {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 4);
+    }
+
+    &__button {
+      margin: 0;
+      padding: 0 !important;
+      opacity: 0.3;
+      padding: calc(var(--base) / 4);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+
+      &.sort-header--active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    &:hover {
+      .btn {
+        opacity: 0.4;
+        visibility: visible;
+      }
+    }
+
+    &--appearance-condensed {
+      gap: calc(var(--base) / 4);
+
+      .sort-header__buttons {
+        gap: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+export declare const SortRow: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortRow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,OAAO,yBASnB,CAAA"}

package/dist/elements/SortRow/index.js

@@ -0,0 +1,35 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { DragHandleIcon } from '../../icons/DragHandle/index.js';
+import './index.scss';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+const baseClass = 'sort-row';
+export const SortRow = () => {
+  const $ = _c(2);
+  const {
+    orderableFieldName,
+    query
+  } = useListQuery();
+  const isActive = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`;
+  const t0 = `${baseClass} ${isActive ? "active" : ""}`;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = _jsx("div", {
+      className: t0,
+      role: "button",
+      tabIndex: 0,
+      children: _jsx(DragHandleIcon, {
+        className: `${baseClass}__icon`
+      })
+    });
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map