@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ec73d44

package/dist/elements/Collapsible/index.js

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 import { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -12,7 +12,7 @@ import { CollapsibleProvider, useCollapsible } from './provider.js';
 const baseClass = 'collapsible';
 export { CollapsibleProvider, useCollapsible };
 export const Collapsible = t0 => {
-  const $ = _c(25);
+  const $ = _c(29);
   const {
     actions,
     AfterCollapsible,
@@ -22,6 +22,7 @@ export const Collapsible = t0 => {
     disableHeaderToggle: t2,
     disableToggleIndicator: t3,
     dragHandleProps,
+    hasContentRegion: t4,
     header,
     initCollapsed,
     isCollapsed: collapsedFromProps,
@@ -30,6 +31,12 @@ export const Collapsible = t0 => {
   const collapsibleStyle = t1 === undefined ? "default" : t1;
   const disableHeaderToggle = t2 === undefined ? false : t2;
   const disableToggleIndicator = t3 === undefined ? false : t3;
+  const hasContentRegion = t4 === undefined ? false : t4;
+  const id = useId();
+  const dragLabelID = `${id}-drag-label`;
+  const headerID = `${id}-header`;
+  const toggleLabelID = `${id}-toggle-label`;
+  const contentID = `${id}-content`;
   const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
   const [hoveringToggle, setHoveringToggle] = useState(false);
   const {
@@ -39,9 +46,9 @@ export const Collapsible = t0 => {
     t
   } = useTranslation();
   const isCollapsed = typeof collapsedFromProps === "boolean" ? collapsedFromProps : collapsedLocal;
-  let t4;
+  let t5;
   if ($[0] !== isCollapsed || $[1] !== onToggle) {
-    t4 = () => {
+    t5 = () => {
       if (typeof onToggle === "function") {
         onToggle(!isCollapsed);
       }
@@ -49,68 +56,80 @@ export const Collapsible = t0 => {
     };
     $[0] = isCollapsed;
     $[1] = onToggle;
-    $[2] = t4;
+    $[2] = t5;
   } else {
-    t4 = $[2];
+    t5 = $[2];
   }
-  const toggleCollapsible = t4;
-  const t5 = dragHandleProps && `${baseClass}--has-drag-handle`;
-  const t6 = isCollapsed && `${baseClass}--collapsed`;
-  const t7 = isWithinCollapsible && `${baseClass}--nested`;
-  const t8 = hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`;
-  const t9 = `${baseClass}--style-${collapsibleStyle}`;
-  let t10;
-  if ($[3] !== className || $[4] !== t5 || $[5] !== t6 || $[6] !== t7 || $[7] !== t8 || $[8] !== t9) {
-    t10 = [baseClass, className, t5, t6, t7, t8, t9].filter(Boolean);
+  const toggleCollapsible = t5;
+  const t6 = dragHandleProps && `${baseClass}--has-drag-handle`;
+  const t7 = isCollapsed && `${baseClass}--collapsed`;
+  const t8 = isWithinCollapsible && `${baseClass}--nested`;
+  const t9 = hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`;
+  const t10 = `${baseClass}--style-${collapsibleStyle}`;
+  let t11;
+  if ($[3] !== className || $[4] !== t10 || $[5] !== t6 || $[6] !== t7 || $[7] !== t8 || $[8] !== t9) {
+    t11 = [baseClass, className, t6, t7, t8, t9, t10].filter(Boolean);
     $[3] = className;
-    $[4] = t5;
+    $[4] = t10;
     $[5] = t6;
     $[6] = t7;
     $[7] = t8;
     $[8] = t9;
-    $[9] = t10;
+    $[9] = t11;
   } else {
-    t10 = $[9];
+    t11 = $[9];
   }
-  const t11 = t10.join(" ");
-  const t12 = `${baseClass}__toggle-wrap${disableHeaderToggle ? " toggle-disabled" : ""}`;
+  const t12 = t11.join(" ");
   let t13;
-  let t14;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = () => setHoveringToggle(true);
-    t14 = () => setHoveringToggle(false);
-    $[10] = t13;
-    $[11] = t14;
-  } else {
-    t13 = $[10];
-    t14 = $[11];
-  }
-  let t15;
-  if ($[12] !== AfterCollapsible || $[13] !== actions || $[14] !== children || $[15] !== disableHeaderToggle || $[16] !== disableToggleIndicator || $[17] !== dragHandleProps || $[18] !== header || $[19] !== isCollapsed || $[20] !== t || $[21] !== t11 || $[22] !== t12 || $[23] !== toggleCollapsible) {
-    t15 = _jsx("div", {
-      className: t11,
+  if ($[10] !== AfterCollapsible || $[11] !== actions || $[12] !== children || $[13] !== contentID || $[14] !== disableHeaderToggle || $[15] !== disableToggleIndicator || $[16] !== dragHandleProps || $[17] !== dragLabelID || $[18] !== hasContentRegion || $[19] !== header || $[20] !== headerID || $[21] !== isCollapsed || $[22] !== t || $[23] !== t12 || $[24] !== toggleCollapsible || $[25] !== toggleLabelID) {
+    let t14;
+    let t15;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t14 = () => setHoveringToggle(true);
+      t15 = () => setHoveringToggle(false);
+      $[27] = t14;
+      $[28] = t15;
+    } else {
+      t14 = $[27];
+      t15 = $[28];
+    }
+    t13 = _jsx("div", {
+      className: t12,
       children: _jsxs(CollapsibleProvider, {
         isCollapsed,
         toggle: toggleCollapsible,
         children: [_jsxs("div", {
-          className: t12,
-          onMouseEnter: t13,
-          onMouseLeave: t14,
+          className: `${baseClass}__toggle-wrap${disableHeaderToggle ? " toggle-disabled" : ""}`,
+          onMouseEnter: t14,
+          onMouseLeave: t15,
           children: [!disableHeaderToggle && _jsx("button", {
+            "aria-controls": contentID,
+            "aria-expanded": !isCollapsed,
+            "aria-labelledby": header ? `${headerID} ${toggleLabelID}` : undefined,
             className: [`${baseClass}__toggle`, `${baseClass}__toggle--${isCollapsed ? "collapsed" : "open"}`].filter(Boolean).join(" "),
             onClick: toggleCollapsible,
             type: "button",
             children: _jsx("span", {
+              id: toggleLabelID,
               children: t("fields:toggleBlock")
             })
-          }), dragHandleProps && _jsx("div", {
+          }), dragHandleProps && _jsxs("button", {
             className: `${baseClass}__drag`,
             ...dragHandleProps.attributes,
             ...dragHandleProps.listeners,
-            "aria-label": t("general:dragToReorder"),
-            children: _jsx(AlignJustifiedIcon, {})
+            "aria-labelledby": header ? `${dragLabelID} ${headerID}` : dragLabelID,
+            "data-sortable-id": dragHandleProps.id,
+            draggable: dragHandleProps.draggable,
+            ref: dragHandleProps.setActivatorNodeRef,
+            type: "button",
+            children: [_jsx("span", {
+              className: "sr-only",
+              id: dragLabelID,
+              children: t("general:dragToReorder")
+            }), _jsx(AlignJustifiedIcon, {})]
           }), header ? _jsx("div", {
             className: [`${baseClass}__header-wrap`, dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`].filter(Boolean).join(" "),
+            id: headerID,
             children: header
           }) : null, _jsxs("div", {
             className: `${baseClass}__actions-wrap`,
@@ -118,6 +137,9 @@ export const Collapsible = t0 => {
               className: `${baseClass}__actions`,
               children: actions
             }) : null, !disableToggleIndicator && _jsx("button", {
+              "aria-controls": contentID,
+              "aria-describedby": header ? headerID : undefined,
+              "aria-expanded": !isCollapsed,
               "aria-label": t(isCollapsed ? "general:expand" : "general:collapse"),
               className: `${baseClass}__indicator`,
               onClick: toggleCollapsible,
@@ -131,28 +153,35 @@ export const Collapsible = t0 => {
         }), _jsx(AnimateHeight, {
           height: isCollapsed ? 0 : "auto",
           children: _jsx("div", {
+            "aria-labelledby": hasContentRegion && header ? headerID : undefined,
             className: `${baseClass}__content`,
+            id: contentID,
+            role: hasContentRegion && header ? "region" : undefined,
             children
           })
         }), AfterCollapsible]
       })
     });
-    $[12] = AfterCollapsible;
-    $[13] = actions;
-    $[14] = children;
-    $[15] = disableHeaderToggle;
-    $[16] = disableToggleIndicator;
-    $[17] = dragHandleProps;
-    $[18] = header;
-    $[19] = isCollapsed;
-    $[20] = t;
-    $[21] = t11;
-    $[22] = t12;
-    $[23] = toggleCollapsible;
-    $[24] = t15;
+    $[10] = AfterCollapsible;
+    $[11] = actions;
+    $[12] = children;
+    $[13] = contentID;
+    $[14] = disableHeaderToggle;
+    $[15] = disableToggleIndicator;
+    $[16] = dragHandleProps;
+    $[17] = dragLabelID;
+    $[18] = hasContentRegion;
+    $[19] = header;
+    $[20] = headerID;
+    $[21] = isCollapsed;
+    $[22] = t;
+    $[23] = t12;
+    $[24] = toggleCollapsible;
+    $[25] = toggleLabelID;
+    $[26] = t13;
   } else {
-    t15 = $[24];
+    t13 = $[26];
   }
-  return t15;
+  return t13;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","AlignJustifiedIcon","ChevronIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","AfterCollapsible","children","className","collapsibleStyle","t1","disableHeaderToggle","t2","disableToggleIndicator","t3","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t4","toggleCollapsible","t5","t6","t7","t8","t9","t10","filter","t11","join","t12","t13","t14","Symbol","for","t15","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","tabIndex","direction","height"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\n  dragHandleProps?: DragHandleProps\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => Promise<void> | void\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\n  dragHandleProps,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') {\n      void onToggle(!isCollapsed)\n    }\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\n            <button\n              className={[\n                `${baseClass}__toggle`,\n                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={toggleCollapsible}\n              type=\"button\"\n            >\n              <span>{t('fields:toggleBlock')}</span>\n            </button>\n          )}\n\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n              aria-label={t('general:dragToReorder')}\n            >\n              <AlignJustifiedIcon />\n            </div>\n          )}\n          {header ? (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {header}\n            </div>\n          ) : null}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n            {!disableToggleIndicator && (\n              <button\n                aria-label={t(isCollapsed ? 'general:expand' : 'general:collapse')}\n                className={`${baseClass}__indicator`}\n                onClick={toggleCollapsible}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </button>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useId","useState","AlignJustifiedIcon","ChevronIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","AfterCollapsible","children","className","collapsibleStyle","t1","disableHeaderToggle","t2","disableToggleIndicator","t3","dragHandleProps","hasContentRegion","t4","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","id","dragLabelID","headerID","toggleLabelID","contentID","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t5","toggleCollapsible","t6","t7","t8","t9","t10","t11","filter","t12","join","t13","t14","t15","Symbol","for","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","draggable","ref","setActivatorNodeRef","tabIndex","direction","height","role"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useId, useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\n  dragHandleProps?: DragHandleProps\n  /** Opt into a region named by the rendered header for significant sections, not individual rows. */\n  hasContentRegion?: boolean\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => Promise<void> | void\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\n  dragHandleProps,\n  hasContentRegion = false,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const id = useId()\n  const dragLabelID = `${id}-drag-label`\n  const headerID = `${id}-header`\n  const toggleLabelID = `${id}-toggle-label`\n  const contentID = `${id}-content`\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') {\n      void onToggle(!isCollapsed)\n    }\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\n            <button\n              aria-controls={contentID}\n              aria-expanded={!isCollapsed}\n              aria-labelledby={header ? `${headerID} ${toggleLabelID}` : undefined}\n              className={[\n                `${baseClass}__toggle`,\n                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={toggleCollapsible}\n              type=\"button\"\n            >\n              <span id={toggleLabelID}>{t('fields:toggleBlock')}</span>\n            </button>\n          )}\n\n          {dragHandleProps && (\n            <button\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n              aria-labelledby={header ? `${dragLabelID} ${headerID}` : dragLabelID}\n              data-sortable-id={dragHandleProps.id}\n              draggable={dragHandleProps.draggable}\n              ref={dragHandleProps.setActivatorNodeRef}\n              type=\"button\"\n            >\n              <span className=\"sr-only\" id={dragLabelID}>\n                {t('general:dragToReorder')}\n              </span>\n              <AlignJustifiedIcon />\n            </button>\n          )}\n          {header ? (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              id={headerID}\n            >\n              {header}\n            </div>\n          ) : null}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n            {!disableToggleIndicator && (\n              <button\n                aria-controls={contentID}\n                aria-describedby={header ? headerID : undefined}\n                aria-expanded={!isCollapsed}\n                aria-label={t(isCollapsed ? 'general:expand' : 'general:collapse')}\n                className={`${baseClass}__indicator`}\n                onClick={toggleCollapsible}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </button>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div\n            aria-labelledby={hasContentRegion && header ? headerID : undefined}\n            className={`${baseClass}__content`}\n            id={contentID}\n            role={hasContentRegion && header ? 'region' : undefined}\n          >\n            {children}\n          </div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Collapsible/provider.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, use } from 'react';
 const Context = /*#__PURE__*/createContext({
@@ -8,28 +9,50 @@ const Context = /*#__PURE__*/createContext({
   isWithinCollapsible: undefined,
   toggle: () => {}
 });
-export const CollapsibleProvider = ({
-  children,
-  isCollapsed,
-  isWithinCollapsible = true,
-  toggle
-}) => {
+export const CollapsibleProvider = t0 => {
+  const $ = _c(8);
+  const {
+    children,
+    isCollapsed,
+    isWithinCollapsible: t1,
+    toggle
+  } = t0;
+  const isWithinCollapsible = t1 === undefined ? true : t1;
   const {
     isCollapsed: parentIsCollapsed,
     isVisible
   } = useCollapsible();
-  const contextValue = React.useMemo(() => {
-    return {
+  const t2 = isVisible && !parentIsCollapsed;
+  let t3;
+  if ($[0] !== isCollapsed || $[1] !== isWithinCollapsible || $[2] !== t2 || $[3] !== toggle) {
+    t3 = {
       isCollapsed,
-      isVisible: isVisible && !parentIsCollapsed,
+      isVisible: t2,
       isWithinCollapsible,
       toggle
     };
-  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible]);
-  return /*#__PURE__*/_jsx(Context, {
-    value: contextValue,
-    children: children
-  });
+    $[0] = isCollapsed;
+    $[1] = isWithinCollapsible;
+    $[2] = t2;
+    $[3] = toggle;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const contextValue = t3;
+  let t4;
+  if ($[5] !== children || $[6] !== contextValue) {
+    t4 = _jsx(Context, {
+      value: contextValue,
+      children
+    });
+    $[5] = children;
+    $[6] = contextValue;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
 };
 export const useCollapsible = () => use(Context);
 //# sourceMappingURL=provider.js.map

package/dist/elements/Collapsible/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":["React","createContext","use","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","_jsx","value"],"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context value={contextValue}>{children}</Context>\n}\n\nexport const useCollapsible = (): ContextType => use(Context)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,aAAa,EAAEC,GAAG,QAAQ;AAS1C,MAAMC,OAAA,gBAAUF,aAAA,CAAc;EAC5BG,WAAA,EAAaC,SAAA;EACbC,SAAA,EAAWD,SAAA;EACXE,mBAAA,EAAqBF,SAAA;EACrBG,MAAA,EAAQA,CAAA,MAAO;AACjB;AAEA,OAAO,MAAMC,mBAAA,GAKRA,CAAC;EAAEC,QAAQ;EAAEN,WAAW;EAAEG,mBAAA,GAAsB,IAAI;EAAEC;AAAM,CAAE;EACjE,MAAM;IAAEJ,WAAA,EAAaO,iBAAiB;IAAEL;EAAS,CAAE,GAAGM,cAAA;EAEtD,MAAMC,YAAA,GAAeb,KAAA,CAAMc,OAAO,CAAC;IACjC,OAAO;MACLV,WAAA;MACAE,SAAA,EAAWA,SAAA,IAAa,CAACK,iBAAA;MACzBJ,mBAAA;MACAC;IACF;EACF,GAAG,CAACJ,WAAA,EAAaG,mBAAA,EAAqBC,MAAA,EAAQG,iBAAA,EAAmBL,SAAA,CAAU;EAE3E,oBAAOS,IAAA,CAACZ,OAAA;IAAQa,KAAA,EAAOH,YAAA;cAAeH;;AACxC;AAEA,OAAO,MAAME,cAAA,GAAiBA,CAAA,KAAmBV,GAAA,CAAIC,OAAA","ignoreList":[]}
+{"version":3,"file":"provider.js","names":["c","_c","React","createContext","use","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","t0","$","children","t1","parentIsCollapsed","useCollapsible","t2","t3","contextValue","t4","_jsx","value"],"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n})\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context value={contextValue}>{children}</Context>\n}\n\nexport const useCollapsible = (): ContextType => use(Context)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,aAAa,EAAEC,GAAG,QAAQ;AAS1C,MAAMC,OAAA,gBAAUF,aAAA,CAAc;EAC5BG,WAAA,EAAaC,SAAA;EACbC,SAAA,EAAWD,SAAA;EACXE,mBAAA,EAAqBF,SAAA;EACrBG,MAAA,EAAQA,CAAA,MAAO;AACjB;AAEA,OAAO,MAAMC,mBAAA,GAKRC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,QAAA;IAAAR,WAAA;IAAAG,mBAAA,EAAAM,EAAA;IAAAL;EAAA,IAAAE,EAA6D;EAApC,MAAAH,mBAAA,GAAAM,EAA0B,KAA1BR,SAA0B,GAA1B,IAA0B,GAA1BQ,EAA0B;EACvD;IAAAT,WAAA,EAAAU,iBAAA;IAAAR;EAAA,IAAsDS,cAAA;EAKvC,MAAAC,EAAA,GAAAV,SAAc,IAAd,CAAcQ,iBAAA;EAAA,IAAAG,EAAA;EAAA,IAAAN,CAAA,QAAAP,WAAA,IAAAO,CAAA,QAAAJ,mBAAA,IAAAI,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAH,MAAA;IAFpBS,EAAA;MAAAb,WAAA;MAAAE,SAAA,EAEMU,EAAc;MAAAT,mBAAA;MAAAC;IAG3B;IAAAG,CAAA,MAAAP,WAAA;IAAAO,CAAA,MAAAJ,mBAAA;IAAAI,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAH,MAAA;IAAAG,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EANF,MAAAO,YAAA,GACED,EAKA;EACyE,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAO,YAAA;IAEpEC,EAAA,GAAAC,IAAA,CAACjB,OAAA;MAAAkB,KAAA,EAAeH,YAAA;MAAAN;;;;;;;;SAAhBO,E;CACT;AAEA,OAAO,MAAMJ,cAAA,GAAiBA,CAAA,KAAmBb,GAAA,CAAIC,OAAA","ignoreList":[]}

package/dist/elements/ColumnSelection/Popup.css

@@ -32,11 +32,11 @@
   }
 
   .column-selector__title {
+    margin: 0;
     padding-inline-start: var(--spacer-2);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     color: var(--color-text);
   }
 
@@ -77,7 +77,6 @@
     padding: 0;
     background: transparent;
     border: none;
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -108,7 +107,6 @@
       var(--spacer-6) + var(--spacer-2)
     ); /* 48px total: 32px content + 8px top/bottom padding */
     padding-block: var(--spacer-2);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -127,14 +125,14 @@
   }
 
   .column-selector__section-header {
+    margin: 0;
     display: flex;
     align-items: center;
     height: var(--spacer-5);
     padding-inline: var(--spacer-3);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     color: var(--color-text-secondary);
   }
 
@@ -160,7 +158,6 @@
   .column-selector__item-label {
     flex: 1;
     min-width: 0;
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -189,6 +186,12 @@
     cursor: grab;
     opacity: 0;
 
+    &:focus-visible {
+      opacity: 1;
+      outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+      outline-offset: calc(-1 * var(--accessibility-outline-offset));
+    }
+
     &:active {
       cursor: grabbing;
     }
@@ -226,4 +229,8 @@
     background: var(--color-icon);
     margin-inline: var(--spacer-3);
   }
+
+  html[data-enhanced-contrast] .column-selector__search-bar {
+    outline: var(--stroke-width-small) solid var(--color-border-control);
+  }
 }

package/dist/elements/ColumnSelection/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAI7E,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAkDD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA+NpE,CAAA"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAI7E,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AA0DD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAiOpE,CAAA"}

package/dist/elements/ColumnSelection/Popup.js

@@ -10,11 +10,11 @@ import { SearchIcon } from '../../icons/Search/index.js';
 import { XIcon } from '../../icons/X/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { matchesSearchQuery } from '../../utilities/matchesSearchQuery.js';
 import { Button } from '../Button/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
 import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
 import { Switch } from '../Switch/index.js';
-import { matchesColumnSearch } from './matchesColumnSearch.js';
 import './Popup.css';
 const baseClass = 'column-selector';
 /**
@@ -51,7 +51,7 @@ const NestedLabel = ({
   });
 };
 const ColumnItem = t0 => {
-  const $ = _c(16);
+  const $ = _c(19);
   const {
     id,
     active,
@@ -77,6 +77,7 @@ const ColumnItem = t0 => {
     isOver,
     isSorting,
     listeners,
+    setActivatorNodeRef,
     setNodeRef,
     transform
   } = useDraggableSortable(t1);
@@ -96,19 +97,27 @@ const ColumnItem = t0 => {
   const t6 = t5.join(" ");
   const t7 = isDragging ? undefined : transform;
   let t8;
-  if ($[6] !== active || $[7] !== attributes || $[8] !== labelText || $[9] !== listeners || $[10] !== onToggle || $[11] !== setNodeRef || $[12] !== t || $[13] !== t6 || $[14] !== t7) {
+  if ($[6] !== active || $[7] !== attributes || $[8] !== labelText || $[9] !== listeners || $[10] !== onToggle || $[11] !== setActivatorNodeRef || $[12] !== setNodeRef || $[13] !== t || $[14] !== t6 || $[15] !== t7) {
+    let t9;
+    if ($[17] !== t) {
+      t9 = t("general:dragToReorder");
+      $[17] = t;
+      $[18] = t9;
+    } else {
+      t9 = $[18];
+    }
     t8 = _jsxs("div", {
-      "aria-label": labelText,
       className: t6,
       ref: setNodeRef,
       style: {
         transform: t7,
         ...attributes.style
       },
-      ...attributes,
       children: [_jsx("span", {
-        "aria-label": t("general:dragToReorder"),
+        ...attributes,
+        "aria-label": `${t9}: ${labelText}`,
         className: `${baseClass}__drag-handle`,
+        ref: setActivatorNodeRef,
         ...listeners,
         children: _jsx(AlignJustifiedIcon, {
           size: 16
@@ -119,6 +128,7 @@ const ColumnItem = t0 => {
           label: labelText
         })
       }), _jsx(Switch, {
+        ariaLabel: labelText,
         checked: active,
         onChange: onToggle
       })]
@@ -128,13 +138,14 @@ const ColumnItem = t0 => {
     $[8] = labelText;
     $[9] = listeners;
     $[10] = onToggle;
-    $[11] = setNodeRef;
-    $[12] = t;
-    $[13] = t6;
-    $[14] = t7;
-    $[15] = t8;
+    $[11] = setActivatorNodeRef;
+    $[12] = setNodeRef;
+    $[13] = t;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t8;
   } else {
-    t8 = $[15];
+    t8 = $[16];
   }
   return t8;
 };
@@ -208,8 +219,8 @@ export const ColumnSelectionPopup = ({
       };
     });
     // Filter by search query
-    const filtered = searchQuery ? items.filter(item => matchesColumnSearch({
-      labelText: item.labelText,
+    const filtered = searchQuery ? items.filter(item => matchesSearchQuery({
+      label: item.labelText,
       query: searchQuery
     })) : items;
     return {
@@ -264,7 +275,7 @@ export const ColumnSelectionPopup = ({
     style: containerStyle,
     children: [/*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__header`,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx("h2", {
         className: `${baseClass}__title`,
         children: t('general:editColumns')
       }), onClose && /*#__PURE__*/_jsx(Button, {
@@ -276,6 +287,10 @@ export const ColumnSelectionPopup = ({
         }),
         onClick: onClose
       })]
+    }), /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      id: `${uuid}-search-description`,
+      children: t('general:searchAutomatically')
     }), /*#__PURE__*/_jsx("div", {
       className: `${baseClass}__search`,
       children: /*#__PURE__*/_jsxs("div", {
@@ -283,6 +298,7 @@ export const ColumnSelectionPopup = ({
         children: [/*#__PURE__*/_jsx(SearchIcon, {
           size: 24
         }), /*#__PURE__*/_jsx("input", {
+          "aria-describedby": `${uuid}-search-description`,
           "aria-label": t('general:searchColumns'),
           className: `${baseClass}__search-input`,
           onChange: e => setSearchQuery(e.target.value),
@@ -301,7 +317,7 @@ export const ColumnSelectionPopup = ({
           children: t('general:noMatchesFound')
         }), columnItems.shown.length > 0 && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__section`,
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/_jsx("h3", {
             className: `${baseClass}__section-header`,
             children: t('general:shownInTable')
           }), columnItems.shown.map(item_3 => /*#__PURE__*/_jsx(ColumnItem, {
@@ -314,7 +330,7 @@ export const ColumnSelectionPopup = ({
           }, item_3.id))]
         }), columnItems.hidden.length > 0 && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__section`,
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/_jsx("h3", {
             className: `${baseClass}__section-header`,
             children: t('general:notShownInTable')
           }), columnItems.hidden.map(item_4 => /*#__PURE__*/_jsx(ColumnItem, {