@gooddata/sdk-ui-ext 11.47.0-alpha.1 → 11.47.0-alpha.3

package/esm/share/useAccessList.js

@@ -6,7 +6,7 @@ import { useToastMessage } from "@gooddata/sdk-ui-kit";
 import { isPermissionsNotAvailable } from "./accessErrors.js";
 import { deriveGeneralAccess, deriveWorkspacePermissionLevel } from "./accessSummary.js";
 import { objectShareMessages } from "./messages.js";
-import { assigneeMatchesQuery, granteeId, granteeNameUnresolved, granteesFromAccessList, } from "./objectShareController.helpers.js";
+import { assigneeIdentityFacts, assigneeMatchesQuery, granteeId, granteesFromAccessList, userDisplayPair, userIdentityFacts, } from "./objectShareController.helpers.js";
 /**
  * Owns the backend access list. It is fetched once (per target) then seeded into
  * local state, which is authoritative while the dialog/summary is mounted:
@@ -35,37 +35,25 @@ export function useAccessList(target, onSaved, dialogOpen) {
     // `targetKey` — a target switch makes the old state stale until the re-seed.
     const [seededTarget, setSeededTarget] = useState(undefined);
     const [loadError, setLoadError] = useState(undefined);
-    // Display names learned from the picker; used to give a fetched row a human
-    // name when its grant carried only a raw id.
-    const [knownNames, setKnownNames] = useState({});
-    // Original ObjRef per grantee id, learned from the picker (the access-list id
-    // is a serialized `kind:identifier`, which loses Uri-vs-Id). Reused for writes.
-    const [knownRefs, setKnownRefs] = useState({});
-    // Memoized current-user-ref fetch — the profile doesn't change while mounted,
+    // Assignee identities from the listing (picker + on-open resolve), keyed by
+    // grantee id: de-collapsed facts + the original ObjRef (the serialized id
+    // loses Uri-vs-Id). The signed-in user is absent from the listing; their
+    // facts derive from the profile instead.
+    const [knownAssignees, setKnownAssignees] = useState({});
+    // Memoized current-user fetch — the profile doesn't change while mounted,
     // so resolve it at most once and share the promise across callers.
-    const currentUserRefCache = useRef(undefined);
+    const currentUserCache = useRef(undefined);
     const targetKey = target ? objRefToString(target.ref) : undefined;
-    // Learn each assignee's real name + ref into the caches, keyed by the same
-    // grantee id the rows use. Written from both the picker (loadOptions) and the
-    // eager resolve below, so a granted row can show a human name even when its
-    // access-list grant carried only a raw id. Must not depend on the caches it
-    // writes, or it would re-trigger loadOptions' fetch.
+    // Written from both the picker (loadOptions) and the on-open resolve. Must not
+    // depend on the cache it writes, or it would re-trigger loadOptions' fetch.
     const cacheAssignees = useCallback((assignees) => {
-        const withIds = assignees.map((a) => ({
-            assignee: a,
-            id: granteeId(a.type === "user" ? "user" : "group", a.ref),
-        }));
-        setKnownNames((prev) => {
-            const next = { ...prev };
-            for (const { assignee, id } of withIds) {
-                next[id] = assignee.name;
-            }
-            return next;
-        });
-        setKnownRefs((prev) => {
+        setKnownAssignees((prev) => {
             const next = { ...prev };
-            for (const { assignee, id } of withIds) {
-                next[id] = assignee.ref;
+            for (const assignee of assignees) {
+                next[granteeId(assignee.type === "user" ? "user" : "group", assignee.ref)] = {
+                    facts: assigneeIdentityFacts(assignee),
+                    ref: assignee.ref,
+                };
             }
             return next;
         });
@@ -107,35 +95,62 @@ export function useAccessList(target, onSaved, dialogOpen) {
             setSeededTarget(undefined);
         }
     }, [fetchStatus, fetchedList, fetchError, targetKey]);
-    // The current target's rows, with a human name backfilled from the picker
-    // cache where the grant returned only a raw id. Empty until the current
-    // target's list is seeded, so a stale previous target's rows never show
-    // through the switch window. Derivation, not state — re-applies as the cache grows.
-    const namedGrantees = useMemo(() => hasList
-        ? grantees.map((g) => {
-            const known = knownNames[g.id];
-            return known && granteeNameUnresolved(g) ? { ...g, name: known } : g;
-        })
-        : [], [hasList, grantees, knownNames]);
-    // Eagerly resolve display names when a fetched grant carried only a raw id.
-    // The permissions endpoint returns grants without user/group names, so after a
-    // page reload a row would show the raw id until the picker is opened. Fetch the
-    // available assignees (the same source the picker uses) to fill the name cache,
-    // but only when something is actually unresolved — a backend that does return
-    // names skips the extra request entirely. Keyed on the serialized targetKey, not
-    // the target object, so an inline-ref consumer re-rendering mid-fetch doesn't
-    // cancel it. Once the cache lands, `needsNameResolve` flips false and the promise
-    // is withdrawn, so it never refetches — an id the listing can't name just stays.
-    const needsNameResolve = hasList && grantees.some((g) => granteeNameUnresolved(g) && !knownNames[g.id]);
+    const getCurrentUser = useCallback(() => {
+        if (!currentUserCache.current) {
+            currentUserCache.current = backend
+                .currentUser()
+                .getUser()
+                .catch((error) => {
+                // Don't cache a rejected promise, or a transient profile-read
+                // failure would make every later transfer fail immediately.
+                currentUserCache.current = undefined;
+                throw error;
+            });
+        }
+        return currentUserCache.current;
+    }, [backend]);
+    // Resolve the current user only while the dialog is open — keeps the summary-only
+    // path free of a profile request (the transfer gate and self-row facts it feeds
+    // aren't shown there).
+    const { result: currentUser } = useCancelablePromise({
+        promise: dialogOpen && targetKey ? () => getCurrentUser() : undefined,
+        onError: () => { },
+    }, 
+    // Key on target presence, not identity — the resolved user is
+    // target-independent, so a target switch must not reset it.
+    [getCurrentUser, targetKey !== undefined, dialogOpen]);
+    const selfId = currentUser ? granteeId("user", idRef(currentUser.login)) : undefined;
+    // Rows with identity facts backfilled from the assignee cache — or, for the
+    // signed-in user's own row (absent from the listing by design), from the
+    // profile. Empty until the current target's list is seeded; a derivation, so
+    // it re-applies as the caches grow.
+    const namedGrantees = useMemo(() => {
+        if (!hasList) {
+            return [];
+        }
+        // De-collapsed like every listing fact — on tiger the user id is often the email.
+        const selfFacts = currentUser
+            ? userIdentityFacts(idRef(currentUser.login), currentUser.fullName, currentUser.email)
+            : undefined;
+        return grantees.map((g) => {
+            const known = knownAssignees[g.id]?.facts ?? (g.id === selfId ? selfFacts : undefined);
+            return known ? { ...g, name: g.name ?? known.name, email: g.email ?? known.email } : g;
+        });
+    }, [hasList, grantees, knownAssignees, currentUser, selfId]);
+    // Resolve identity facts on dialog open — grants often carry only raw ids
+    // (the post-reload state). Unconditional: no missing-facts gate to keep in
+    // sync with the cache, and summary-only consumers never fetch. Keyed on the
+    // serialized targetKey so an inline-ref consumer re-rendering mid-fetch
+    // doesn't cancel it.
     useCancelablePromise({
-        promise: target && needsNameResolve
+        promise: target && dialogOpen
             ? () => backend.workspace(workspace).objectPermissions().getAvailableAssignees(target)
             : undefined,
         onSuccess: cacheAssignees,
         // Best-effort backfill: on error the raw id stays (pre-fix behavior, no
         // regression) and the picker can still resolve it on demand. No toast.
         onError: () => { },
-    }, [backend, workspace, targetKey, needsNameResolve]);
+    }, [backend, workspace, targetKey, dialogOpen]);
     // Stable sorted key of the currently-granted ids — drives the picker's
     // "exclude already-granted" filter. Keyed on ids only (not names), so the
     // picker's own name-cache writes can't change loadOptions' identity and
@@ -227,8 +242,8 @@ export function useAccessList(target, onSaved, dialogOpen) {
                 .map(({ assignee, id }) => ({
                 id,
                 kind: "user",
-                name: assignee.name,
-                email: assignee.type === "user" ? assignee.email : undefined,
+                // Same fallback pairs as the grantee rows.
+                ...userDisplayPair(assigneeIdentityFacts(assignee), objRefToString(assignee.ref)),
             })),
             groups: selectable
                 .filter(({ assignee }) => assignee.type !== "user")
@@ -237,36 +252,13 @@ export function useAccessList(target, onSaved, dialogOpen) {
     }, [backend, workspace, target, excludedIdsKey, cacheAssignees]);
     // Reuse the picker's original ref (preserves UriRef vs IdentifierRef);
     // fall back to the serialized id only if it wasn't cached.
-    const refForId = useCallback((id) => knownRefs[id] ?? { identifier: id.split(":", 2)[1] }, [knownRefs]);
-    const getCurrentUserRef = useCallback(async () => {
-        if (!currentUserRefCache.current) {
-            currentUserRefCache.current = backend
-                .currentUser()
-                .getUser()
-                // Not `user.ref`: the profile resolves it as a uriRef while access-list
-                // grantee refs are idRefs keyed by user id (= profile login), and
-                // areObjRefsEqual never matches mixed shapes — self-row matching and
-                // the self grant write need the permission API's id space.
-                .then((user) => idRef(user.login))
-                .catch((error) => {
-                // Don't cache a rejected promise, or a transient profile-read
-                // failure would make every later transfer fail immediately.
-                currentUserRefCache.current = undefined;
-                throw error;
-            });
-        }
-        return currentUserRefCache.current;
-    }, [backend]);
-    // Resolve the current user only while the dialog is open — keeps the summary-only
-    // path free of a profile request (the transfer gate it feeds isn't shown there).
-    const { result: currentUserRef } = useCancelablePromise({
-        promise: dialogOpen && targetKey ? () => getCurrentUserRef() : undefined,
-        onError: () => { },
-    }, 
-    // Key on target presence, not identity — the resolved user is
-    // target-independent, so a target switch must not reset it.
-    [getCurrentUserRef, targetKey !== undefined, dialogOpen]);
-    const selfId = currentUserRef ? granteeId("user", currentUserRef) : undefined;
+    const refForId = useCallback((id) => knownAssignees[id]?.ref ?? { identifier: id.split(":", 2)[1] }, [knownAssignees]);
+    const getCurrentUserRef = useCallback(
+    // Not `user.ref`: the profile resolves it as a uriRef while access-list
+    // grantee refs are idRefs keyed by user id (= profile login), and
+    // areObjRefsEqual never matches mixed shapes — self-row matching and
+    // the self grant write need the permission API's id space.
+    () => getCurrentUser().then((user) => idRef(user.login)), [getCurrentUser]);
     const canTransferOwnership = selfId !== undefined && namedGrantees.some((g) => g.id === selfId && g.level === "EDIT");
     return {
         targetKey,
@@ -286,6 +278,5 @@ export function useAccessList(target, onSaved, dialogOpen) {
         setGrantees,
         setGeneralAccess,
         setWorkspaceLevel,
-        setKnownNames,
     };
 }

package/esm/share/useObjectShareController.d.ts

@@ -19,7 +19,9 @@ import { type IObjectShareController, type IUseObjectShareOptions } from "./obje
  * plain props and it owns its controller. Call this (exported as `useObjectShare`)
  * only to share a single access-list fetch between the dialog and an inline summary
  * row: call it once, read `state.summary` for the row, and pass the controller into
- * the dialog.
+ * the dialog. Grantee rows carry identity facts only (`name`/`email` are undefined
+ * when unknown); the display fallback order is not exposed, so {@link ObjectShareDialog}
+ * is the only sanctioned row renderer.
  *
  * @internal
  */

package/esm/share/useObjectShareController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useObjectShareController.d.ts","sourceRoot":"","sources":["../../src/share/useObjectShareController.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAkB1E,OAAO,EACH,KAAK,sBAAsB,EAI3B,KAAK,sBAAsB,EAE9B,MAAM,kCAAkC,CAAC;AAI1C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,wBAAwB,CACpC,MAAM,EAAE,wBAAwB,GAAG,SAAS,EAC5C,OAAO,CAAC,EAAE,sBAAsB,GACjC,sBAAsB,CAizBxB"}
+{"version":3,"file":"useObjectShareController.d.ts","sourceRoot":"","sources":["../../src/share/useObjectShareController.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAkB1E,OAAO,EACH,KAAK,sBAAsB,EAI3B,KAAK,sBAAsB,EAE9B,MAAM,kCAAkC,CAAC;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,wBAAwB,CACpC,MAAM,EAAE,wBAAwB,GAAG,SAAS,EAC5C,OAAO,CAAC,EAAE,sBAAsB,GACjC,sBAAsB,CAuyBxB"}

package/esm/share/useObjectShareController.js

@@ -25,7 +25,9 @@ import { useLabelScope } from "./useLabelScope.js";
  * plain props and it owns its controller. Call this (exported as `useObjectShare`)
  * only to share a single access-list fetch between the dialog and an inline summary
  * row: call it once, read `state.summary` for the row, and pass the controller into
- * the dialog.
+ * the dialog. Grantee rows carry identity facts only (`name`/`email` are undefined
+ * when unknown); the display fallback order is not exposed, so {@link ObjectShareDialog}
+ * is the only sanctioned row renderer.
  *
  * @internal
  */
@@ -47,7 +49,7 @@ export function useObjectShareController(target, options) {
     const [workspaceLevelSaving, setWorkspaceLevelSaving] = useState(false);
     // The backend access list, seeded into local state (rows, general access,
     // summary, the commit/picker primitives) lives in its own hook.
-    const { targetKey, hasList, grantees, generalAccess, workspaceLevel, summary, status, loadError, accessUnavailable, commit, loadOptions, refForId, getCurrentUserRef, canTransferOwnership, setGrantees, setGeneralAccess, setWorkspaceLevel, setKnownNames, } = useAccessList(target, onSaved, isOpen);
+    const { targetKey, hasList, grantees, generalAccess, workspaceLevel, summary, status, loadError, accessUnavailable, commit, loadOptions, refForId, getCurrentUserRef, canTransferOwnership, setGrantees, setGeneralAccess, setWorkspaceLevel, } = useAccessList(target, onSaved, isOpen);
     // Always-current target key, read inside async mutation finalizers that captured
     // an older one. A write started for object A resolves after the user navigated to
     // object B; because local state is authoritative (no refetch), applying A's
@@ -129,14 +131,14 @@ export function useObjectShareController(target, options) {
             return;
         }
         const startedFor = targetKey;
-        // Insert the picked grantees as pending rows, carrying the picker's display
-        // name so the new row never renders a raw id.
+        // Insert the picked grantees as pending rows. Identity facts are not copied
+        // from the picker option (its name/email are display fallbacks, not facts) —
+        // rows render from the facts cache the picker fetch already populated.
         const addedIds = pendingGrantees.map((g) => g.id);
         const addedRows = pendingGrantees.map((g) => ({
             id: g.id,
             kind: g.kind,
             granteeRef: refForId(g.id),
-            name: g.name,
             level: g.permissionLevel,
             pending: "saving",
         }));
@@ -147,13 +149,6 @@ export function useObjectShareController(target, options) {
         const allLabelIds = effectiveLabels.map((l) => l.id);
         const allLabelIdSet = new Set(allLabelIds);
         setGrantees((prev) => [...prev.filter((g) => !addedIds.includes(g.id)), ...addedRows]);
-        setKnownNames((prev) => {
-            const next = { ...prev };
-            for (const g of pendingGrantees) {
-                next[g.id] = g.name;
-            }
-            return next;
-        });
         setSelectedLabelIdsByGrantee((prev) => {
             const next = { ...prev };
             for (const id of addedIds) {
@@ -214,7 +209,6 @@ export function useObjectShareController(target, options) {
         refForId,
         toast,
         setGrantees,
-        setKnownNames,
         setSelectedLabelIdsByGrantee,
     ]);
     const changePermissionLevel = useCallback(async (granteeId, level) => {
@@ -457,14 +451,14 @@ export function useObjectShareController(target, options) {
     // EDIT — then there's nothing to transfer (the dialog offers to remove the
     // current user's own access instead).
     const transferTargetIsOwner = useMemo(() => transferTarget ? grantees.some((g) => g.id === transferTarget.id && g.level === "EDIT") : false, [transferTarget, grantees]);
-    // Insert a brand-new grantee row with its label scope and display name — the
-    // shared seed for a freshly-granted principal (used when a transfer promotes a
-    // user who wasn't already a grantee; the same row shape the add flow creates).
+    // Insert a brand-new grantee row with its label scope — the shared seed for a
+    // freshly-granted principal (used when a transfer promotes a user who wasn't
+    // already a grantee; the same row shape the add flow creates). Identity
+    // renders from the facts cache.
     const seedNewGranteeRow = useCallback((row, labelIds) => {
         setGrantees((prev) => [...prev, row]);
-        setKnownNames((prev) => ({ ...prev, [row.id]: row.name }));
         setSelectedLabelIdsByGrantee((prev) => ({ ...prev, [row.id]: labelIds }));
-    }, [setGrantees, setKnownNames, setSelectedLabelIdsByGrantee]);
+    }, [setGrantees, setSelectedLabelIdsByGrantee]);
     const confirmTransferOwnership = useCallback(async () => {
         if (!transferTarget || transferSaving) {
             return;
@@ -563,7 +557,6 @@ export function useObjectShareController(target, options) {
                     id: transferTarget.id,
                     kind: "user",
                     granteeRef: ownerRef,
-                    name: transferTarget.name,
                     level: "EDIT",
                     effectivePermission: nextEffective,
                 }, allLabelIds);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-ext",
-  "version": "11.47.0-alpha.1",
+  "version": "11.47.0-alpha.3",
   "description": "GoodData.UI SDK - Extensions",
   "license": "LicenseRef-LICENSE",
   "author": "GoodData Corporation",
@@ -63,20 +63,20 @@
     "ts-invariant": "0.10.3",
     "tslib": "2.8.1",
     "uuid": "11.1.1",
-    "@gooddata/sdk-backend-base": "11.47.0-alpha.1",
-    "@gooddata/sdk-embedding": "11.47.0-alpha.1",
-    "@gooddata/sdk-backend-spi": "11.47.0-alpha.1",
-    "@gooddata/sdk-model": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui-charts": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui-filters": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui-geo": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui-pivot": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui-semantic-search": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui-kit": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui-theme-provider": "11.47.0-alpha.1",
-    "@gooddata/sdk-ui-vis-commons": "11.47.0-alpha.1",
-    "@gooddata/util": "11.47.0-alpha.1"
+    "@gooddata/sdk-backend-base": "11.47.0-alpha.3",
+    "@gooddata/sdk-backend-spi": "11.47.0-alpha.3",
+    "@gooddata/sdk-embedding": "11.47.0-alpha.3",
+    "@gooddata/sdk-model": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui-filters": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui-charts": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui-geo": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui-kit": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui-pivot": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui-semantic-search": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui-theme-provider": "11.47.0-alpha.3",
+    "@gooddata/sdk-ui-vis-commons": "11.47.0-alpha.3",
+    "@gooddata/util": "11.47.0-alpha.3"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -124,12 +124,12 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.47.0-alpha.1",
-    "@gooddata/i18n-toolkit": "11.47.0-alpha.1",
-    "@gooddata/oxlint-config": "11.47.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.47.0-alpha.1",
-    "@gooddata/reference-workspace": "11.47.0-alpha.1",
-    "@gooddata/stylelint-config": "11.47.0-alpha.1"
+    "@gooddata/eslint-config": "11.47.0-alpha.3",
+    "@gooddata/i18n-toolkit": "11.47.0-alpha.3",
+    "@gooddata/oxlint-config": "11.47.0-alpha.3",
+    "@gooddata/reference-workspace": "11.47.0-alpha.3",
+    "@gooddata/sdk-backend-mockingbird": "11.47.0-alpha.3",
+    "@gooddata/stylelint-config": "11.47.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/styles/internal/css/config_panel.css

@@ -573,4 +573,86 @@
   padding-left: 20px;
 }
 
+.gd-line-style-item-trigger {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.gd-line-style-item-trigger:disabled {
+  cursor: not-allowed;
+}
+
+.gd-line-style-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: var(--gd-palette-complementary-0, #fff);
+  border: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+  border-radius: 3px;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+}
+.gd-line-style-toolbar.is-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.gd-line-style-toolbar__divider {
+  width: 1px;
+  height: 28px;
+  background: var(--gd-palette-complementary-3, #dde4eb);
+  flex-shrink: 0;
+}
+.gd-line-style-toolbar__btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 4px;
+  cursor: pointer;
+  color: var(--gd-palette-complementary-8, #464e56);
+  border-radius: 2px;
+  border: none;
+  background: transparent;
+  font: inherit;
+}
+.gd-line-style-toolbar__btn:focus-visible {
+  outline: 2px solid #14b2e2;
+  outline-offset: 1px;
+}
+.gd-line-style-toolbar__btn:hover {
+  background: var(--gd-palette-complementary-2, #ebeff4);
+}
+.gd-line-style-toolbar__btn.is-open {
+  background: var(--gd-palette-complementary-2, #ebeff4);
+  color: #14b2e2;
+}
+.gd-line-style-toolbar__btn.is-disabled, .gd-line-style-toolbar__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.gd-line-style-toolbar__btn .gd-icon-navigatedown {
+  font-size: 10px;
+  color: var(--gd-palette-complementary-7, #6d7680);
+}
+.gd-line-style-toolbar__color-swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.gd-line-style-toolbar__weight-text {
+  font-size: 14px;
+  color: var(--gd-palette-complementary-7, #6d7680);
+  white-space: nowrap;
+  min-width: 28px;
+  text-align: center;
+}
+
 /*# sourceMappingURL=config_panel.css.map */

package/styles/internal/css/config_panel.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../node_modules/@gooddata/sdk-ui-kit/styles/scss/colorPicker.scss","../../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/config_panel.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EAGI;EACA;EACA;;AAIA;EACI;;AAGJ;EACI;;AAGJ;EAGI;;;AAKZ;EACI;EACA,OC3BY;ED4BZ;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AEhHR;EACI,QAHmB;;;AAOnB;EACI,OD2BQ;EC1BR,YDsGgB;;ACjGhB;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;;AAKZ;EACI;EACA,OAjCqB;EAkCrB,QAlCqB;EAmCrB;EACA;EACA,aArCqB;EAsCrB;;AAEA;EACI;EACA;EACA,OD1BS;EC2BT;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI,OAlEqB;EAmErB,QAnEqB;EAoErB,QAnEmB;EAoEnB;EACA;EACA;EACA;;AAEA;EAII,cD7DS;EC8DT;;;AAIR;EACI;;;AASJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,KA1Ge;EA2Gf;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;;AAIA;EACI;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA,OD5HgB;;;AC+HpB;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAIR;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI,kBD3HgB;EC4HhB;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,MDxPQ;;AC2PhB;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI,ODvPmB;;;AC0PvB;EACI;;;AAGJ;EACI;EACA;;;AAIA;EACI;;;AAKJ;AAAA;EAEI;;AAIA;AAAA;EAEI;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA,ODvOQ;;AC0OZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AASJ;EACI,ODnWe;ECoWf;EACA;;AAGJ;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,kBDnSgB;ECoShB;;AAEA;EACI,ODhYW;ECiYX;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,ODzZQ;EC0ZR;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,OD3ae;EC4af;;AAEA;EACI;EACA;;AAIR;EACI;EACA,ODtbe;ECubf;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI,YD/WY;;ACiXZ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA,ODjeY;;;AC0ehB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA,YD5fS;;AC8fT;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA,ODxgBQ;ECygBR;EACA;;AAIA;EACI;EACA;EACA;EACA","file":"config_panel.css"}
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/@gooddata/sdk-ui-kit/styles/scss/colorPicker.scss","../../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/config_panel.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EAGI;EACA;EACA;;AAIA;EACI;;AAGJ;EACI;;AAGJ;EAGI;;;AAKZ;EACI;EACA,OC3BY;ED4BZ;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AEhHR;EACI,QAHmB;;;AAOnB;EACI,OD2BQ;EC1BR,YDsGgB;;ACjGhB;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;;AAKZ;EACI;EACA,OAjCqB;EAkCrB,QAlCqB;EAmCrB;EACA;EACA,aArCqB;EAsCrB;;AAEA;EACI;EACA;EACA,OD1BS;EC2BT;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI,OAlEqB;EAmErB,QAnEqB;EAoErB,QAnEmB;EAoEnB;EACA;EACA;EACA;;AAEA;EAII,cD7DS;EC8DT;;;AAIR;EACI;;;AASJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,KA1Ge;EA2Gf;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;;AAIA;EACI;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA,OD5HgB;;;AC+HpB;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAIR;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI,kBD3HgB;EC4HhB;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,MDxPQ;;AC2PhB;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI,ODvPmB;;;AC0PvB;EACI;;;AAGJ;EACI;EACA;;;AAIA;EACI;;;AAKJ;AAAA;EAEI;;AAIA;AAAA;EAEI;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA,ODvOQ;;AC0OZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AASJ;EACI,ODnWe;ECoWf;EACA;;AAGJ;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,kBDnSgB;ECoShB;;AAEA;EACI,ODhYW;ECiYX;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,ODzZQ;EC0ZR;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,OD3ae;EC4af;;AAEA;EACI;EACA;;AAIR;EACI;EACA,ODtbe;ECubf;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI,YD/WY;;ACiXZ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA,ODjeY;;;AC0ehB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA,YD5fS;;AC8fT;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA,ODxgBQ;ECygBR;EACA;;AAIA;EACI;EACA;EACA;EACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA,YDxjBa;ECyjBb;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA,YD/iBU;ECgjBV;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,ODnkBQ;ECokBR;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI,YD7fY;;ACggBhB;EACI,YDjgBY;ECkgBZ,OD/mBS;;ACknBb;EAEI;EACA;EACA;;AAGJ;EACI;EACA,ODpmBI;;ACwmBZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA,ODlnBQ;ECmnBR;EACA;EACA","file":"config_panel.css"}

package/styles/internal/scss/config_panel.scss

@@ -568,3 +568,97 @@ $color-picker-spacing: 5px;
         }
     }
 }
+
+.gd-line-style-item-trigger {
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+}
+
+.gd-line-style-toolbar {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    background: kit-variables.$gd-color-white;
+    border: 1px solid kit-variables.$gd-border-color;
+    border-radius: 3px;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+
+    &.is-disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    &__divider {
+        width: 1px;
+        height: 28px;
+        background: kit-variables.$gd-border-color;
+        flex-shrink: 0;
+    }
+
+    &__btn {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        height: 28px;
+        padding: 0 4px;
+        cursor: pointer;
+        color: kit-variables.$gd-color-text;
+        border-radius: 2px;
+        border: none;
+        background: transparent;
+        font: inherit;
+
+        &:focus-visible {
+            outline: 2px solid kit-variables.$gd-color-highlight;
+            outline-offset: 1px;
+        }
+
+        &:hover {
+            background: kit-variables.$is-focused-background;
+        }
+
+        &.is-open {
+            background: kit-variables.$is-focused-background;
+            color: kit-variables.$gd-color-highlight;
+        }
+
+        &.is-disabled,
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        .gd-icon-navigatedown {
+            font-size: 10px;
+            color: kit-variables.$gd-color-label;
+        }
+    }
+
+    &__color-swatch {
+        width: 20px;
+        height: 20px;
+        border-radius: 2px;
+        flex-shrink: 0;
+        overflow: hidden;
+    }
+
+    &__weight-text {
+        font-size: 14px;
+        color: kit-variables.$gd-color-label;
+        white-space: nowrap;
+        min-width: 28px;
+        text-align: center;
+    }
+}