@payloadcms/ui 3.0.0-canary.f83d96a → 3.0.0-canary.ff8c8fd

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fieldMap: FieldMap\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n  const { handleSearchChange } = useListQuery()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fieldMap)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !searchParams?.where) {\n      setVisibleDrawer(undefined)\n      hasWhereParam.current = false\n    } else if (searchParams?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, searchParams?.where])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchFilter\n          fieldLabel={\n            (titleField &&\n              getTranslation(\n                'label' in titleField.fieldComponentProps &&\n                  typeof titleField.fieldComponentProps.label === 'string'\n                  ? titleField.fieldComponentProps.label\n                  : titleField.name,\n                i18n,\n              )) ??\n            undefined\n          }\n          fieldName={titleField?.name}\n          handleChange={handleSearchChange}\n          listSearchableFields={getTextFieldsToBeSearched(\n            collectionConfig.admin.listSearchableFields,\n            fieldMap,\n          )}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<ChevronIcon />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<ChevronIcon />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<ChevronIcon />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          key={String(hasWhereParam.current && !searchParams?.where)}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["useWindowInfo","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","ChevronIcon","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","admin","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","String","p"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["useWindowInfo","getTranslation","React","Fragment","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","ChevronIcon","SearchIcon","useListInfo","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fields","handleSearchChange","beforeActions","collectionSlug","disableBulkDelete","disableBulkEdit","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","search","setSearch","searchLabel","label","name","listSearchableFields","admin","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","_jsxs","className","_jsx","fieldName","handleChange","initialParams","setValue","value","collection","icon","onClick","pillStyle","height","id","slug","collectionPluralLabel","labels","plural","String"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientField, Where } from 'payload'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListInfo } from '../../providers/ListInfo/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  readonly collectionConfig: ClientCollectionConfig\n  readonly enableColumns?: boolean\n  readonly enableSort?: boolean\n  readonly fields: ClientField[]\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const { collectionConfig, enableColumns = true, enableSort = false, fields } = props\n\n  const { handleSearchChange } = useListQuery()\n  const { beforeActions, collectionSlug, disableBulkDelete, disableBulkEdit } = useListInfo()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fields)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n  const [search, setSearch] = useState(\n    typeof searchParams?.search === 'string' ? searchParams?.search : '',\n  )\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField && typeof titleField.label === 'string'\n          ? titleField.label\n          : 'name' in titleField\n            ? titleField.name\n            : null,\n        i18n,\n      )) ??\n    'ID'\n\n  const listSearchableFields = getTextFieldsToBeSearched(\n    collectionConfig.admin.listSearchableFields,\n    fields,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !searchParams?.where) {\n      setVisibleDrawer(undefined)\n      hasWhereParam.current = false\n    } else if (searchParams?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, searchParams?.where])\n\n  useEffect(() => {\n    if (listSearchableFields?.length > 0) {\n      searchLabelTranslated.current = listSearchableFields.reduce(\n        (placeholderText: string, field, i: number) => {\n          const label =\n            'label' in field && field.label ? field.label : 'name' in field ? field.name : null\n\n          if (i === 0) {\n            return `${t('general:searchBy', {\n              label: getTranslation(label, i18n),\n            })}`\n          }\n\n          if (i === listSearchableFields.length - 1) {\n            return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n          }\n\n          return `${placeholderText}, ${getTranslation(label, i18n)}`\n        },\n        '',\n      )\n    } else {\n      searchLabelTranslated.current = t('general:searchBy', {\n        label: getTranslation(searchLabel, i18n),\n      })\n    }\n  }, [t, listSearchableFields, i18n, searchLabel])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchIcon />\n        <SearchFilter\n          fieldName={'name' in titleField ? titleField?.name : null}\n          handleChange={(search) => {\n            return void handleSearchChange(search)\n          }}\n          initialParams={searchParams}\n          key={collectionSlug}\n          label={searchLabelTranslated.current}\n          setValue={setSearch}\n          value={search}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                {beforeActions && beforeActions}\n                {!disableBulkEdit && (\n                  <Fragment>\n                    <EditMany collection={collectionConfig} fields={fields} />\n                    <PublishMany collection={collectionConfig} />\n                    <UnpublishMany collection={collectionConfig} />\n                  </Fragment>\n                )}\n                {!disableBulkDelete && <DeleteMany collection={collectionConfig} />}\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<ChevronIcon />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<ChevronIcon />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<ChevronIcon />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          fields={fields}\n          key={String(hasWhereParam.current && !searchParams?.where)}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListControls/index.scss

@@ -5,6 +5,9 @@
     display: flex;
     align-items: center;
     background-color: var(--theme-elevation-50);
+    border-radius: var(--style-radius-m);
+    padding: base(0.6);
+    gap: base(0.6);
   }
 
   .search-filter {
@@ -18,21 +21,13 @@
   &__buttons-wrap {
     display: flex;
     align-items: center;
-    gap: base(0.5);
-
-    [dir='ltr'] & {
-      margin-right: base(0.5);
-    }
-
-    [dir='rtl'] & {
-      margin-left: base(0.5);
-    }
+    gap: base(0.2);
 
     .pill {
-      background-color: var(--theme-elevation-200);
+      background-color: var(--theme-elevation-150);
 
       &:hover {
-        background-color: var(--theme-elevation-150);
+        background-color: var(--theme-elevation-100);
       }
     }
   }
@@ -53,11 +48,22 @@
     &__wrap {
       flex-wrap: wrap;
       background-color: unset;
+      padding: 0;
+      position: relative;
+    }
+
+    .icon--search {
+      position: absolute;
+      top: base(0.4);
+      inset-inline-start: base(0.4);
+      z-index: 1;
     }
 
     .search-filter {
-      margin-bottom: base(0.5);
       width: 100%;
+      input {
+        padding: base(0.4) base(2);
+      }
     }
 
     &__buttons-wrap {
@@ -70,11 +76,8 @@
       }
 
       .pill {
-        padding: base(0.5) base(1);
-
-        svg {
-          margin-left: auto;
-        }
+        padding: base(0.2) base(0.2) base(0.2) base(0.4);
+        justify-content: space-between;
       }
     }
 

package/dist/elements/ListDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAoCjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyQvD,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAqCjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4RvD,CAAA"}