@k2b/ui 0.45.0 → 0.46.0

package/dist/browser/surfaces/ChangeList.js

@@ -0,0 +1,77 @@
+import { template as _$template } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<ul>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-change-list__detail>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<li class=k2b-change-list__item><i aria-hidden=true></i><span class=k2b-change-list__text><span></span><!$><!/>`);
+import { For, Show } from "solid-js";
+
+/** `add` gains something, `change` alters it, `remove` takes it away, `neutral` names a setting. */
+
+const DEFAULT_ICONS = {
+  add: "ti ti-plus",
+  change: "ti ti-arrows-exchange",
+  remove: "ti ti-minus",
+  neutral: "ti ti-point",
+  warning: "ti ti-alert-triangle"
+};
+
+/** Pending changes before they are saved, one line each, so a person can check them in one look. */
+export function ChangeList(props) {
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$insert(_el$, _$createComponent(For, {
+      get each() {
+        return props.items;
+      },
+      children: item => (() => {
+        var _el$2 = _$getNextElement(_tmpl$3),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$5 = _el$4.firstChild,
+          _el$7 = _el$5.nextSibling,
+          [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling);
+        _$insert(_el$5, () => item.content);
+        _$insert(_el$4, _$createComponent(Show, {
+          get when() {
+            return item.detail;
+          },
+          get children() {
+            var _el$6 = _$getNextElement(_tmpl$2);
+            _$insert(_el$6, () => item.detail);
+            return _el$6;
+          }
+        }), _el$8, _co$);
+        _$effect(_p$ => {
+          var _v$3 = item.tone,
+            _v$4 = `${item.icon ?? DEFAULT_ICONS[item.tone]} k2b-change-list__icon`;
+          _v$3 !== _p$.e && _$setAttribute(_el$2, "data-tone", _p$.e = _v$3);
+          _v$4 !== _p$.t && _$className(_el$3, _p$.t = _v$4);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$2;
+      })()
+    }));
+    _$effect(_p$ => {
+      var _v$ = `k2b-change-list ${props.class ?? ""}`,
+        _v$2 = props.label;
+      _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+export default ChangeList;
+//# sourceMappingURL=ChangeList.js.map

package/dist/browser/surfaces/ChangeList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["surfaces/ChangeList.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\n\n/** `add` gains something, `change` alters it, `remove` takes it away, `neutral` names a setting. */\nexport type ChangeTone = \"add\" | \"change\" | \"remove\" | \"neutral\" | \"warning\";\n\nexport type ChangeListItem = {\n  tone: ChangeTone;\n  /** A Tabler icon class; defaults to plus, arrows or minus by tone. */\n  icon?: string;\n  content: JSX.Element;\n  /** One quiet line under the content, such as what the change means for others. */\n  detail?: JSX.Element;\n};\n\nexport type ChangeListProps = {\n  items: readonly ChangeListItem[];\n  /** Names the list for assistive technology, such as \"What changes\". */\n  label: string;\n  class?: string;\n};\n\nconst DEFAULT_ICONS: Record<ChangeTone, string> = {\n  add: \"ti ti-plus\",\n  change: \"ti ti-arrows-exchange\",\n  remove: \"ti ti-minus\",\n  neutral: \"ti ti-point\",\n  warning: \"ti ti-alert-triangle\",\n};\n\n/** Pending changes before they are saved, one line each, so a person can check them in one look. */\nexport function ChangeList(props: ChangeListProps): JSX.Element {\n  return (\n    <ul class={`k2b-change-list ${props.class ?? \"\"}`} aria-label={props.label}>\n      <For each={props.items}>\n        {(item) => (\n          <li class=\"k2b-change-list__item\" data-tone={item.tone}>\n            <i class={`${item.icon ?? DEFAULT_ICONS[item.tone]} k2b-change-list__icon`} aria-hidden=\"true\" />\n            <span class=\"k2b-change-list__text\">\n              <span>{item.content}</span>\n              <Show when={item.detail}>\n                <span class=\"k2b-change-list__detail\">{item.detail}</span>\n              </Show>\n            </span>\n          </li>\n        )}\n      </For>\n    </ul>\n  );\n}\n\nexport default ChangeList;\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,QAAQ,UAAU;;AAE9C;;AAmBA,MAAM,aAAyC,GAAG;EAChD,GAAG,EAAE,YAAY;EACjB,MAAM,EAAE,uBAAuB;EAC/B,MAAM,EAAE,aAAa;EACrB,OAAO,EAAE,aAAa;EACtB,OAAO,EAAE;AACX,CAAC;;AAED;AACA,OAAO,SAAS,UAAU,CAAC,KAAsB,EAAe;EAC9D;IAAA;IAAA,iCAEK,GAAG;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK;MAAA;MAAA,UAClB,IAAI;QAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA,sBAIO,IAAI,CAAC,OAAO;QAAA,kCAClB,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,IAAI,CAAC,MAAM;UAAA;UAAA;YAAA;YAAA,sBACkB,IAAI,CAAC,MAAM;YAAA;UAAA;QAAA;QAAA;UAAA,WALX,IAAI,CAAC,IAAI;YAAA,OAC1C,GAAG,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB;UAAA;UAAA;UAAA;QAAA;UAAA;UAAA;QAAA;QAAA;MAAA;IAQ7E;IAAA;MAAA,UAZM,mBAAmB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OAAc,KAAK,CAAC,KAAK;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAgB9E;AAEA,eAAe,UAAU","ignoreList":[]}

package/dist/browser/surfaces/index.js

@@ -1,5 +1,6 @@
 export { Avatar } from "./Avatar";
-export { AvatarStack } from "./AvatarStack";
+export { AvatarFaces, AvatarStack } from "./AvatarStack";
+export { ChangeList } from "./ChangeList";
 export { DescriptionList } from "./DescriptionList";
 export { DotStrip } from "./DotStrip";
 export { LinkCard } from "./LinkCard";

package/dist/browser/surfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/index.ts"],"sourcesContent":["export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize } from \"./Avatar\";\nexport { Avatar } from \"./Avatar\";\nexport type { AvatarStackPerson, AvatarStackProps } from \"./AvatarStack\";\nexport { AvatarStack } from \"./AvatarStack\";\nexport type { DescriptionListItem, DescriptionListProps } from \"./DescriptionList\";\nexport { DescriptionList } from \"./DescriptionList\";\nexport type { DotStripProps, DotStripTone } from \"./DotStrip\";\nexport { DotStrip } from \"./DotStrip\";\nexport type { LinkCardColor, LinkCardProps } from \"./LinkCard\";\nexport { LinkCard } from \"./LinkCard\";\nexport type { NotFoundStateAction, NotFoundStateProps } from \"./NotFoundState\";\nexport { NotFoundState } from \"./NotFoundState\";\nexport type { NoticeCardProps, NoticeGridProps, NoticeTone } from \"./NoticeCard\";\nexport { NOTICE_CARD_CLASSES, NoticeCard } from \"./NoticeCard\";\nexport type { PaperProps, PaperTag } from \"./Paper\";\nexport { Paper } from \"./Paper\";\nexport type {\n  PlaceholderAlign,\n  PlaceholderProps,\n  PlaceholderState,\n  PlaceholderSurface,\n  PlaceholderVariant,\n} from \"./Placeholder\";\nexport { default as Placeholder } from \"./Placeholder\";\nexport type { ProgressBarProps, ProgressBarTone } from \"./ProgressBar\";\nexport { ProgressBar } from \"./ProgressBar\";\nexport type { ProgressRingProps, ProgressRingTone } from \"./ProgressRing\";\nexport { ProgressRing } from \"./ProgressRing\";\nexport { PERSON_COLORS, personColor } from \"./person-color\";\nexport type { ResourceCardColor, ResourceCardProps, ResourceCardState } from \"./ResourceCard\";\nexport { ResourceCard } from \"./ResourceCard\";\nexport { Skeleton, type SkeletonProps } from \"./Skeleton\";\nexport type { StatCellAccent, StatCellProps, StatCellTone } from \"./StatCell\";\nexport { StatCell } from \"./StatCell\";\nexport type {\n  StatGridAction,\n  StatGridColumns,\n  StatGridProps,\n  StatGridSize,\n  StatGridSurface,\n} from \"./StatGrid\";\nexport { StatGrid } from \"./StatGrid\";\nexport type { StatusBadgeProps, StatusTone } from \"./StatusBadge\";\nexport { StatusBadge } from \"./StatusBadge\";\nexport type { TagProps, TagSize } from \"./Tag\";\nexport { Tag } from \"./Tag\";\n"],"mappings":"AACA,SAAS,MAAM,QAAQ,UAAU;AAEjC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,eAAe,QAAQ,mBAAmB;AAEnD,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,aAAa,QAAQ,iBAAiB;AAE/C,SAAS,mBAAmB,EAAE,UAAU,QAAQ,cAAc;AAE9D,SAAS,KAAK,QAAQ,SAAS;AAQ/B,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,aAAa,EAAE,WAAW,QAAQ,gBAAgB;AAE3D,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,QAAQ,QAA4B,YAAY;AAEzD,SAAS,QAAQ,QAAQ,YAAY;AAQrC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,GAAG,QAAQ,OAAO","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/index.ts"],"sourcesContent":["export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize, AvatarTone } from \"./Avatar\";\nexport { Avatar } from \"./Avatar\";\nexport type { AvatarFacesPerson, AvatarFacesProps, AvatarStackPerson, AvatarStackProps } from \"./AvatarStack\";\nexport { AvatarFaces, AvatarStack } from \"./AvatarStack\";\nexport type { ChangeListItem, ChangeListProps, ChangeTone } from \"./ChangeList\";\nexport { ChangeList } from \"./ChangeList\";\nexport type { DescriptionListItem, DescriptionListProps } from \"./DescriptionList\";\nexport { DescriptionList } from \"./DescriptionList\";\nexport type { DotStripProps, DotStripTone } from \"./DotStrip\";\nexport { DotStrip } from \"./DotStrip\";\nexport type { LinkCardColor, LinkCardProps } from \"./LinkCard\";\nexport { LinkCard } from \"./LinkCard\";\nexport type { NotFoundStateAction, NotFoundStateProps } from \"./NotFoundState\";\nexport { NotFoundState } from \"./NotFoundState\";\nexport type { NoticeCardProps, NoticeGridProps, NoticeTone } from \"./NoticeCard\";\nexport { NOTICE_CARD_CLASSES, NoticeCard } from \"./NoticeCard\";\nexport type { PaperProps, PaperTag } from \"./Paper\";\nexport { Paper } from \"./Paper\";\nexport type {\n  PlaceholderAlign,\n  PlaceholderProps,\n  PlaceholderState,\n  PlaceholderSurface,\n  PlaceholderVariant,\n} from \"./Placeholder\";\nexport { default as Placeholder } from \"./Placeholder\";\nexport type { ProgressBarProps, ProgressBarTone } from \"./ProgressBar\";\nexport { ProgressBar } from \"./ProgressBar\";\nexport type { ProgressRingProps, ProgressRingTone } from \"./ProgressRing\";\nexport { ProgressRing } from \"./ProgressRing\";\nexport { PERSON_COLORS, personColor } from \"./person-color\";\nexport type { ResourceCardColor, ResourceCardProps, ResourceCardState } from \"./ResourceCard\";\nexport { ResourceCard } from \"./ResourceCard\";\nexport { Skeleton, type SkeletonProps } from \"./Skeleton\";\nexport type { StatCellAccent, StatCellProps, StatCellTone } from \"./StatCell\";\nexport { StatCell } from \"./StatCell\";\nexport type {\n  StatGridAction,\n  StatGridColumns,\n  StatGridProps,\n  StatGridSize,\n  StatGridSurface,\n} from \"./StatGrid\";\nexport { StatGrid } from \"./StatGrid\";\nexport type { StatusBadgeProps, StatusTone } from \"./StatusBadge\";\nexport { StatusBadge } from \"./StatusBadge\";\nexport type { TagProps, TagSize } from \"./Tag\";\nexport { Tag } from \"./Tag\";\n"],"mappings":"AACA,SAAS,MAAM,QAAQ,UAAU;AAEjC,SAAS,WAAW,EAAE,WAAW,QAAQ,eAAe;AAExD,SAAS,UAAU,QAAQ,cAAc;AAEzC,SAAS,eAAe,QAAQ,mBAAmB;AAEnD,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,aAAa,QAAQ,iBAAiB;AAE/C,SAAS,mBAAmB,EAAE,UAAU,QAAQ,cAAc;AAE9D,SAAS,KAAK,QAAQ,SAAS;AAQ/B,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,aAAa,EAAE,WAAW,QAAQ,gBAAgB;AAE3D,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,QAAQ,QAA4B,YAAY;AAEzD,SAAS,QAAQ,QAAQ,YAAY;AAQrC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,GAAG,QAAQ,OAAO","ignoreList":[]}

package/dist/browser/text-editor/TextEditor.js

@@ -506,11 +506,20 @@ export function TextEditor(props) {
       positionMenu();
     });
   };
-  const unavailable = () => !!props.host?.structure && !props.host.structure.available();
+  const unavailable = createMemo(() => !!props.host?.structure && !props.host.structure.available());
+  // Closed table menus keep their entries until they open again. A host may report another availability on every
+  // edit, and each entry rebuilt or re-enabled in a hidden menu restyles the whole page through the shared `:has()`
+  // rules, so typing would lag.
+  const [tableMenuShown, setTableMenuShown] = createSignal(false);
+  const whileMenuShown = read => createMemo(last => tableMenuShown() ? read() : last, untrack(read));
+  const menuRevision = whileMenuShown(documentRevision);
+  const menuUnavailable = whileMenuShown(unavailable);
   const actionDisabled = action => {
-    documentRevision();
+    menuRevision();
+    menuUnavailable();
     const wrap = cell()?.closest(".k2b-ste-table");
-    return blocked() || !editor || !wrap || !tableActionEnabled(editor.view, wrap, action);
+    const view = editor?.view;
+    return blocked() || !view || !wrap || untrack(() => !tableActionEnabled(view, wrap, action));
   };
   const isMove = action => action.startsWith("move");
   const runAction = action => {
@@ -551,11 +560,11 @@ export function TextEditor(props) {
     deleteCol: "menuDelete"
   };
   const menuRow = () => {
-    documentRevision();
+    menuRevision();
     return t().menuRow(Number(cell()?.dataset.r ?? 0));
   };
   const menuColumn = () => {
-    documentRevision();
+    menuRevision();
     const column = Number(cell()?.dataset.c ?? 0);
     const header = cell()?.closest(".k2b-ste-table")?.querySelector(`.k2b-ste-cell[data-r="0"][data-c="${column}"]`);
     return t().menuColumn(header?.dataset.raw || t().column(column + 1));
@@ -639,7 +648,7 @@ export function TextEditor(props) {
   const items = kind => {
     if (props.readOnly) return copyItems();
     const align = () => {
-      documentRevision();
+      menuRevision();
       return cell()?.parentElement?.style.textAlign || "left";
     };
     const row = [{
@@ -676,7 +685,7 @@ export function TextEditor(props) {
         choice: "checkbox",
         class: "k2b-ste-header-choice",
         checked: () => {
-          documentRevision();
+          menuRevision();
           return cell()?.closest(".k2b-ste-table")?.dataset.header === "true";
         }
       }), {
@@ -686,7 +695,7 @@ export function TextEditor(props) {
           const wrap = cell()?.closest(".k2b-ste-table");
           if (editor && wrap) editTableSource(editor.view, wrap);
         }
-      }, ...copyItems(), actionItem("deleteTable"), ...(unavailable() ? [{
+      }, ...copyItems(), actionItem("deleteTable"), ...(menuUnavailable() ? [{
         label: t().structureUnavailable,
         disabled: true
       }] : [])]
@@ -702,6 +711,7 @@ export function TextEditor(props) {
   const tableMenuChange = open => {
     menuOpen = open;
     tableMenuOpen = open && !phoneMenu();
+    setTableMenuShown(open);
   };
   let swallow;
   const pressBesideMenu = event => {
@@ -742,6 +752,7 @@ export function TextEditor(props) {
   const menuClose = () => {
     menuOpen = false;
     tableMenuOpen = false;
+    setTableMenuShown(false);
     setScope("cell");
     grip = undefined;
     schedulePosition();