@ynput/ayon-frontend-shared 0.4.2 → 0.4.4

package/dist/shared/src/components/AttributeEditor/components/EnumSourceField.es.js

@@ -0,0 +1,305 @@
+import { j as o } from "../../../../../_virtual/jsx-runtime.es.js";
+import { useState as P, useMemo as D } from "react";
+import { startCase as O } from "lodash";
+import m from "styled-components";
+import { Dropdown as T, Button as k } from "@ynput/ayon-react-components";
+import { EnumEditor as A } from "../../EnumEditor/EnumEditor.es.js";
+import { InfoMessage as F } from "../../InfoMessage/InfoMessage.es.js";
+import { SimpleForm as R } from "../../SimpleForm/SimpleForm.es.js";
+import "../../../api/base/client.es.js";
+import "../../../api/generated/graphql.es.js";
+import "../../../api/generated/graphqlLinks.es.js";
+import "../../../api/generated/access.es.js";
+import "../../../api/generated/actions.es.js";
+import "../../../api/generated/activityFeed.es.js";
+import "../../../api/generated/addons.es.js";
+import "../../../api/generated/anatomy.es.js";
+import "../../../api/generated/attributes.es.js";
+import "../../../api/generated/authentication.es.js";
+import "../../../api/generated/bundles.es.js";
+import "../../../api/generated/configuration.es.js";
+import "../../../api/generated/dataImport.es.js";
+import "../../../api/generated/desktop.es.js";
+import "../../../api/generated/entityLists.es.js";
+import "../../../api/generated/enums.es.js";
+import "../../../api/generated/events.es.js";
+import "../../../api/generated/files.es.js";
+import "../../../api/generated/folders.es.js";
+import "../../../api/generated/inbox.es.js";
+import "../../../api/generated/links.es.js";
+import "../../../api/generated/market.es.js";
+import "../../../api/generated/onboarding.es.js";
+import "../../../api/generated/operations.es.js";
+import "../../../api/generated/products.es.js";
+import "../../../api/generated/projectDashboard.es.js";
+import "../../../api/generated/projects.es.js";
+import "../../../api/generated/projectFolders.es.js";
+import "../../../api/generated/reviewables.es.js";
+import "../../../api/generated/services.es.js";
+import "../../../api/generated/system.es.js";
+import "../../../api/generated/tasks.es.js";
+import "../../../api/generated/teams.es.js";
+import "../../../api/generated/thumbnails.es.js";
+import "../../../api/generated/uRIs.es.js";
+import "../../../api/generated/users.es.js";
+import "../../../api/generated/versions.es.js";
+import "../../../api/generated/workfiles.es.js";
+import "../../../api/generated/ynputCloud.es.js";
+import "../../../api/generated/grouping.es.js";
+import "../../../api/generated/views.es.js";
+import "../../../api/queries/accessGroups/getAccessGroups.es.js";
+import "../../../api/queries/accessGroups/updateAccessGroups.es.js";
+import "../../../api/queries/actions/getActions.es.js";
+import "../../../api/queries/activities/getActivities.es.js";
+import "../../../api/queries/activities/updateReaction.es.js";
+import "../../../api/queries/activities/getMentions.es.js";
+import "../../../api/queries/activities/getCategories.es.js";
+import "../../../api/queries/addons/getAddons.es.js";
+import "../../../api/queries/addons/updateAddons.es.js";
+import "../../../api/queries/attributes/getAttributes.es.js";
+import "../../../api/queries/attributes/updateAttributes.es.js";
+import "../../../api/queries/authentication/getAuthentication.es.js";
+import "../../../api/queries/bundles/getBundles.es.js";
+import "../../../api/queries/bundles/updateBundles.es.js";
+import "../../../api/queries/cloud/cloud.es.js";
+import "../../../api/queries/columnStats/metricTargets.es.js";
+import "../../../api/queries/columnStats/groupCounts.es.js";
+import "../../../api/queries/config/getConfig.es.js";
+import "../../../api/queries/config/updateConfig.es.js";
+import "../../../api/queries/entities/getEntity.es.js";
+import "../../../api/queries/entities/getEntityPanel.es.js";
+import "../../../api/queries/overview/getOverview.es.js";
+import "../../../api/queries/overview/updateOverview.es.js";
+import "../../../api/queries/versions/getVersionsProducts.es.js";
+import "../../../api/queries/links/getEntityLinks.es.js";
+import "../../../api/queries/entities/updateEntity.es.js";
+import "../../../api/queries/entityLists/getLists.es.js";
+import "../../../api/queries/entityLists/updateLists.es.js";
+import "../../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../../api/queries/entityLists/listItemsColumnStats.es.js";
+import "../../../api/queries/entityLists/updateListsAttributes.es.js";
+import "../../../api/queries/entityLists/listFolders.es.js";
+import { useListEnumsQuery as L } from "../../../api/queries/enums/getEnums.es.js";
+import "../../../api/queries/folders/getFolders.es.js";
+import "../../../api/queries/folders/getFolderDeleteInfo.es.js";
+import "../../../api/queries/grouping/getGrouping.es.js";
+import "../../../api/queries/links/updateLinks.es.js";
+import "../../../api/queries/links/getLinks.es.js";
+import "../../../api/queries/permissions/getPermissions.es.js";
+import "../../../api/queries/products/createProduct.es.js";
+import "../../../api/queries/products/getFolderProducts.es.js";
+import "../../../api/queries/project/getProject.es.js";
+import "../../../api/queries/project/updateProject.es.js";
+import "../../../api/queries/projectFolders/projectFolders.es.js";
+import "../../../api/queries/review/getReview.es.js";
+import "../../../api/queries/review/updateReview.es.js";
+import "../../../api/queries/share/share.es.js";
+import "../../../api/queries/system/getSystem.es.js";
+import "../../../api/queries/tasks/getTasks.es.js";
+import "../../../api/queries/tasks/updateTasks.es.js";
+import "../../../api/queries/teams/getTeams.es.js";
+import "../../../api/queries/userDashboard/getUserDashboard.es.js";
+import "../../../api/queries/users/getUsers.es.js";
+import "../../../api/queries/users/updateUsers.es.js";
+import "../../../api/queries/users/guests.es.js";
+import "../../../api/queries/versions/updateVersions.es.js";
+import "../../../api/queries/views/getViews.es.js";
+import "../../../api/queries/views/updateViews.es.js";
+import "../../../api/queries/watchers/getWatchers.es.js";
+import "../../../api/queries/uris/getUris.es.js";
+import { useAttributeEnumOptions as N } from "../../../hooks/useAttributeEnumOptions.es.js";
+import { getEnumContextParams as _, getSelectableEnumItems as H, getEnumItemIcon as U } from "../../../util/attributeEnum.es.js";
+import { EnumItemRow as w, EnumItemIcon as B } from "./EnumItemRow.es.js";
+import { EnumDebugDialog as G } from "./EnumDebugDialog.es.js";
+const v = "__custom__", I = 5, V = [], W = "No preview items found.", Y = 5, $ = {
+  project_name: "The select options will change based on the project it is used in.",
+  user: "The select options will change based on the current user."
+}, q = m.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  flex: 1;
+`, j = m.span`
+  color: var(--md-sys-color-outline);
+  white-space: pre-line;
+`, E = m.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  padding: var(--padding-m);
+  border-radius: var(--border-radius-m);
+  background-color: var(--md-sys-color-surface-container);
+`, K = m.button`
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: var(--md-sys-color-outline);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--md-sys-color-on-surface);
+    text-decoration: underline;
+  }
+`, Q = m(F)`
+  cursor: pointer;
+  padding: var(--padding-s) var(--padding-m);
+
+  .content {
+    gap: var(--base-gap-small);
+  }
+
+  &:hover {
+    filter: brightness(1.15);
+  }
+`, X = m(w)`
+  &:nth-child(2n) {
+    width: 80%;
+  }
+
+  &:last-of-type {
+    width: 64px;
+  }
+`, z = ({
+  resolver: n,
+  acceptedParams: i,
+  settings: c,
+  onShowMore: d
+}) => {
+  const u = D(
+    () => ({ enumResolver: n, enumResolverSettings: c }),
+    [n, c]
+  ), { options: p, isLoading: g, isError: h, errorMessage: x } = N(u), a = H(p), l = _(i);
+  if (g)
+    return /* @__PURE__ */ o.jsx(E, { children: Array.from({ length: I + 1 }).map((t, s) => /* @__PURE__ */ o.jsx(X, { className: "loading" }, s)) });
+  if (h)
+    return /* @__PURE__ */ o.jsx(E, { children: /* @__PURE__ */ o.jsxs(j, { children: [
+      'Could not load options for "',
+      n,
+      '"',
+      x ? `: ${x}` : "."
+    ] }) });
+  if (!a.length)
+    return /* @__PURE__ */ o.jsx(E, { children: /* @__PURE__ */ o.jsxs(j, { children: [
+      W,
+      l.length > 0 && ` This could be because in context parameters (${l.join(
+        ", "
+      )}) are required to get the items.`
+    ] }) });
+  const e = a.length - I, f = a.slice(0, I).map((t) => ({ option: t, icon: U(t.icon) })), b = f.some(({ icon: t }) => !!t);
+  return /* @__PURE__ */ o.jsxs(E, { children: [
+    f.map(({ option: t, icon: s }) => /* @__PURE__ */ o.jsxs(w, { children: [
+      /* @__PURE__ */ o.jsx(B, { icon: s, color: t.color, reserveSpace: b }),
+      /* @__PURE__ */ o.jsx("span", { className: "label", children: t.label })
+    ] }, String(t.value))),
+    e > 0 && /* @__PURE__ */ o.jsxs(K, { type: "button", onClick: d, children: [
+      "+",
+      e,
+      " more"
+    ] })
+  ] });
+}, ir = ({
+  enumValues: n,
+  enumResolver: i,
+  enumResolverSettings: c,
+  onChangeEnum: d,
+  onChangeResolver: u,
+  onChangeResolverSettings: p
+}) => {
+  const { data: g = [], isLoading: h, isError: x } = L(), [a, l] = P(!1), e = () => l(!0), f = [
+    { value: v, label: "Custom" },
+    ...g.map((r) => ({
+      value: r.name,
+      label: r.label || O(r.name)
+    }))
+  ], b = i || v, t = g.find((r) => r.name === i), s = t?.settingsForm || V, S = c || {}, M = _(t?.acceptedParams).map((r) => $[r]).join(" "), C = (r) => {
+    const y = r[0];
+    !y || y === v ? (u(void 0), p(void 0)) : (u(y), p(void 0), d(void 0));
+  };
+  return /* @__PURE__ */ o.jsxs(q, { children: [
+    /* @__PURE__ */ o.jsx(
+      T,
+      {
+        value: [b],
+        options: f,
+        onChange: C,
+        disabled: h || x,
+        minSelected: 1,
+        searchOnNumber: Y,
+        widthExpand: !0
+      }
+    ),
+    b === v ? /* @__PURE__ */ o.jsx(
+      A,
+      {
+        values: n || [],
+        onChange: (r) => d(r?.length ? r : void 0)
+      }
+    ) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      !h && !t && /* @__PURE__ */ o.jsxs(j, { children: [
+        'Resolver "',
+        i,
+        '" is not available on this server. Options will be empty.'
+      ] }),
+      t?.description && /* @__PURE__ */ o.jsx(j, { children: t.description }),
+      M && /* @__PURE__ */ o.jsx(
+        Q,
+        {
+          message: M,
+          role: "button",
+          tabIndex: 0,
+          onClick: e,
+          onKeyDown: (r) => {
+            (r.key === "Enter" || r.key === " ") && (r.preventDefault(), e());
+          }
+        }
+      ),
+      s.length > 0 && /* @__PURE__ */ o.jsx(
+        R,
+        {
+          fields: s,
+          values: S,
+          onChange: p
+        },
+        i
+      ),
+      t && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        /* @__PURE__ */ o.jsx(
+          z,
+          {
+            resolver: t.name,
+            acceptedParams: t.acceptedParams,
+            settings: S,
+            onShowMore: e
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          k,
+          {
+            variant: "text",
+            icon: "bug_report",
+            label: "Debug",
+            onClick: e,
+            style: { alignSelf: "flex-start" }
+          }
+        )
+      ] }),
+      a && t && /* @__PURE__ */ o.jsx(
+        G,
+        {
+          resolver: t,
+          settings: S,
+          onClose: () => l(!1)
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ir as EnumSourceField
+};
+//# sourceMappingURL=EnumSourceField.es.js.map

package/dist/shared/src/components/AttributeEditor/components/EnumSourceField.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnumSourceField.es.js","sources":["../../../../../../src/components/AttributeEditor/components/EnumSourceField.tsx"],"sourcesContent":["import { FC, KeyboardEvent, useMemo, useState } from 'react'\nimport { startCase } from 'lodash'\nimport styled from 'styled-components'\nimport { Button, Dropdown } from '@ynput/ayon-react-components'\n\nimport { EnumEditor } from '@shared/components/EnumEditor/EnumEditor'\nimport type { NormalizedData } from '@shared/components/EnumEditor/EnumEditor'\nimport { InfoMessage } from '@shared/components/InfoMessage'\nimport { SimpleForm } from '@shared/components/SimpleForm'\nimport type { SimpleFormValueDict } from '@shared/components/SimpleForm'\nimport { useListEnumsQuery } from '@shared/api'\nimport type { AttributeData, EnumResolverInfo, SimpleFormField } from '@shared/api'\nimport { useAttributeEnumOptions } from '@shared/hooks/useAttributeEnumOptions'\nimport {\n  getEnumContextParams,\n  getEnumItemIcon,\n  getSelectableEnumItems,\n} from '@shared/util/attributeEnum'\nimport type { EnumContextParam } from '@shared/util/attributeEnum'\nimport { EnumItemIcon, EnumItemRow } from './EnumItemRow'\nimport { EnumDebugDialog } from './EnumDebugDialog'\n\nconst CUSTOM_ENUM_SOURCE = '__custom__'\nconst PREVIEW_LIMIT = 5\nconst EMPTY_FIELDS: SimpleFormField[] = []\nconst EMPTY_PREVIEW_MESSAGE = 'No preview items found.'\nconst SEARCH_THRESHOLD = 5\n\nconst CONTEXT_PARAM_MESSAGES: Record<EnumContextParam, string> = {\n  project_name: 'The select options will change based on the project it is used in.',\n  user: 'The select options will change based on the current user.',\n}\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  flex: 1;\n`\n\nconst Message = styled.span`\n  color: var(--md-sys-color-outline);\n  white-space: pre-line;\n`\n\nconst Preview = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: var(--padding-m);\n  border-radius: var(--border-radius-m);\n  background-color: var(--md-sys-color-surface-container);\n`\n\nconst MoreButton = styled.button`\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: none;\n  font: inherit;\n  color: var(--md-sys-color-outline);\n  cursor: pointer;\n\n  &:hover {\n    color: var(--md-sys-color-on-surface);\n    text-decoration: underline;\n  }\n`\n\nconst ClickableInfoMessage = styled(InfoMessage)`\n  cursor: pointer;\n  padding: var(--padding-s) var(--padding-m);\n\n  .content {\n    gap: var(--base-gap-small);\n  }\n\n  &:hover {\n    filter: brightness(1.15);\n  }\n`\n\nconst SkeletonItem = styled(EnumItemRow)`\n  &:nth-child(2n) {\n    width: 80%;\n  }\n\n  &:last-of-type {\n    width: 64px;\n  }\n`\n\ninterface EnumResolverPreviewProps {\n  resolver: string\n  acceptedParams: EnumResolverInfo['acceptedParams']\n  settings: Record<string, any>\n  onShowMore: () => void\n}\n\nconst EnumResolverPreview: FC<EnumResolverPreviewProps> = ({\n  resolver,\n  acceptedParams,\n  settings,\n  onShowMore,\n}) => {\n  const data = useMemo(\n    () => ({ enumResolver: resolver, enumResolverSettings: settings } as AttributeData),\n    [resolver, settings],\n  )\n  const { options: allOptions, isLoading, isError, errorMessage } = useAttributeEnumOptions(data)\n  const options = getSelectableEnumItems(allOptions)\n  const contextParams = getEnumContextParams(acceptedParams)\n\n  if (isLoading)\n    return (\n      <Preview>\n        {Array.from({ length: PREVIEW_LIMIT + 1 }).map((_, index) => (\n          <SkeletonItem key={index} className=\"loading\" />\n        ))}\n      </Preview>\n    )\n  if (isError)\n    return (\n      <Preview>\n        <Message>\n          Could not load options for \"{resolver}\"{errorMessage ? `: ${errorMessage}` : '.'}\n        </Message>\n      </Preview>\n    )\n  if (!options.length)\n    return (\n      <Preview>\n        <Message>\n          {EMPTY_PREVIEW_MESSAGE}\n          {contextParams.length > 0 &&\n            ` This could be because in context parameters (${contextParams.join(\n              ', ',\n            )}) are required to get the items.`}\n        </Message>\n      </Preview>\n    )\n\n  const remaining = options.length - PREVIEW_LIMIT\n  const preview = options\n    .slice(0, PREVIEW_LIMIT)\n    .map((option) => ({ option, icon: getEnumItemIcon(option.icon) }))\n  const hasIcons = preview.some(({ icon }) => !!icon)\n\n  return (\n    <Preview>\n      {preview.map(({ option, icon }) => (\n        <EnumItemRow key={String(option.value)}>\n          <EnumItemIcon icon={icon} color={option.color} reserveSpace={hasIcons} />\n          <span className=\"label\">{option.label}</span>\n        </EnumItemRow>\n      ))}\n      {remaining > 0 && (\n        <MoreButton type=\"button\" onClick={onShowMore}>\n          +{remaining} more\n        </MoreButton>\n      )}\n    </Preview>\n  )\n}\n\nexport interface EnumSourceFieldProps {\n  enumValues: NormalizedData[] | undefined\n  enumResolver: AttributeData['enumResolver']\n  enumResolverSettings: AttributeData['enumResolverSettings']\n  onChangeEnum: (value: NormalizedData[] | undefined) => void\n  onChangeResolver: (name: string | undefined) => void\n  onChangeResolverSettings: (settings: Record<string, any> | undefined) => void\n}\n\nexport const EnumSourceField: FC<EnumSourceFieldProps> = ({\n  enumValues,\n  enumResolver,\n  enumResolverSettings,\n  onChangeEnum,\n  onChangeResolver,\n  onChangeResolverSettings,\n}) => {\n  const { data: resolvers = [], isLoading, isError } = useListEnumsQuery()\n  const [isDebugOpen, setIsDebugOpen] = useState(false)\n  const openDebug = () => setIsDebugOpen(true)\n\n  const sourceOptions = [\n    { value: CUSTOM_ENUM_SOURCE, label: 'Custom' },\n    ...resolvers.map((resolver: EnumResolverInfo) => ({\n      value: resolver.name,\n      label: resolver.label || startCase(resolver.name),\n    })),\n  ]\n\n  const selectedSource = enumResolver || CUSTOM_ENUM_SOURCE\n  const selectedResolver = resolvers.find((resolver) => resolver.name === enumResolver)\n  const settingsFields = selectedResolver?.settingsForm || EMPTY_FIELDS\n  const settings = (enumResolverSettings as SimpleFormValueDict) || {}\n  const contextMessage = getEnumContextParams(selectedResolver?.acceptedParams)\n    .map((name) => CONTEXT_PARAM_MESSAGES[name])\n    .join(' ')\n\n  const handleSourceChange = (value: string[]) => {\n    const source = value[0]\n    if (!source || source === CUSTOM_ENUM_SOURCE) {\n      onChangeResolver(undefined)\n      onChangeResolverSettings(undefined)\n    } else {\n      onChangeResolver(source)\n      onChangeResolverSettings(undefined)\n      onChangeEnum(undefined)\n    }\n  }\n\n  return (\n    <Container>\n      <Dropdown\n        value={[selectedSource]}\n        options={sourceOptions}\n        onChange={handleSourceChange}\n        disabled={isLoading || isError}\n        minSelected={1}\n        searchOnNumber={SEARCH_THRESHOLD}\n        widthExpand\n      />\n      {selectedSource === CUSTOM_ENUM_SOURCE ? (\n        <EnumEditor\n          values={enumValues || []}\n          onChange={(v) => onChangeEnum(v?.length ? v : undefined)}\n        />\n      ) : (\n        <>\n          {!isLoading && !selectedResolver && (\n            <Message>\n              Resolver \"{enumResolver}\" is not available on this server. Options will be empty.\n            </Message>\n          )}\n          {selectedResolver?.description && <Message>{selectedResolver.description}</Message>}\n          {contextMessage && (\n            <ClickableInfoMessage\n              message={contextMessage}\n              role=\"button\"\n              tabIndex={0}\n              onClick={openDebug}\n              onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                  openDebug()\n                }\n              }}\n            />\n          )}\n          {settingsFields.length > 0 && (\n            <SimpleForm\n              key={enumResolver}\n              fields={settingsFields}\n              values={settings}\n              onChange={onChangeResolverSettings}\n            />\n          )}\n          {selectedResolver && (\n            <>\n              <EnumResolverPreview\n                resolver={selectedResolver.name}\n                acceptedParams={selectedResolver.acceptedParams}\n                settings={settings}\n                onShowMore={openDebug}\n              />\n              <Button\n                variant=\"text\"\n                icon=\"bug_report\"\n                label=\"Debug\"\n                onClick={openDebug}\n                style={{ alignSelf: 'flex-start' }}\n              />\n            </>\n          )}\n          {isDebugOpen && selectedResolver && (\n            <EnumDebugDialog\n              resolver={selectedResolver}\n              settings={settings}\n              onClose={() => setIsDebugOpen(false)}\n            />\n          )}\n        </>\n      )}\n    </Container>\n  )\n}\n"],"names":["CUSTOM_ENUM_SOURCE","PREVIEW_LIMIT","EMPTY_FIELDS","EMPTY_PREVIEW_MESSAGE","SEARCH_THRESHOLD","CONTEXT_PARAM_MESSAGES","Container","styled","Message","Preview","MoreButton","ClickableInfoMessage","InfoMessage","SkeletonItem","EnumItemRow","EnumResolverPreview","resolver","acceptedParams","settings","onShowMore","data","useMemo","allOptions","isLoading","isError","errorMessage","useAttributeEnumOptions","options","getSelectableEnumItems","contextParams","getEnumContextParams","jsx","_","index","jsxs","remaining","preview","option","getEnumItemIcon","hasIcons","icon","EnumItemIcon","EnumSourceField","enumValues","enumResolver","enumResolverSettings","onChangeEnum","onChangeResolver","onChangeResolverSettings","resolvers","useListEnumsQuery","isDebugOpen","setIsDebugOpen","useState","openDebug","sourceOptions","startCase","selectedSource","selectedResolver","settingsFields","contextMessage","name","handleSourceChange","value","source","Dropdown","EnumEditor","v","Fragment","e","SimpleForm","Button","EnumDebugDialog"],"mappings":"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"}

package/dist/shared/src/components/Chips/Chips.cjs.js

@@ -1,10 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../../_virtual/jsx-runtime.cjs.js"),s=require("react"),p=require("@ynput/ayon-react-components"),C=require("clsx"),a=require("styled-components"),N=a.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../../../_virtual/jsx-runtime.cjs.js"),a=require("react"),b=require("@ynput/ayon-react-components"),x=require("clsx"),u=require("styled-components"),z=u.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
+  align-self: stretch;
   width: 100%;
   overflow: hidden;
-`,m=a.div`
+
+  &.multi-row {
+    flex-wrap: wrap;
+    align-content: center;
+  }
+`,y=u.div`
   background-color: var(--md-sys-color-surface-container-high);
   border-radius: var(--border-radius-m);
   padding: 2px 4px;
@@ -27,18 +33,18 @@
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`,S=a(m)`
+`,N=u(y)`
   visibility: hidden;
   position: absolute;
   top: -9999px;
   left: -9999px;
   z-index: -100;
-`,W=a(m)`
+`,A=u(y)`
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-`,V=a(p.Icon)`
+`,H=u(b.Icon)`
   background-color: var(--md-sys-color-surface-container);
   border-radius: var(--border-radius-m);
   width: 24px;
@@ -51,5 +57,5 @@
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`,O=({values:t,disabled:y,pt:d})=>{const n=s.useRef(null),[x,j]=s.useState([]),[f,R]=s.useState(0),[u,w]=s.useState([]);return s.useLayoutEffect(()=>{w(t)},[t]),s.useLayoutEffect(()=>{const e=()=>{if(!n.current||u.length===0||u.length!==t.length)return;const g=n.current.offsetWidth,h=Array.from(n.current.querySelectorAll(".offscreen-chip")),v=n.current.querySelector(".more-chip");if(!h.length)return;let l=0;const i=[],E=v?.getBoundingClientRect().width||60;if(t.length>0){const o=h[0].getBoundingClientRect().width;i.push(t[0]),l+=o}for(let o=1;o<t.length;o++){const b=h[o].getBoundingClientRect().width;if(l+b<=g)l+=b,i.push(t[o]);else{if(l+E<=g)break;if(i.length>1){const q=h[i.length-1].getBoundingClientRect().width;l-=q,i.pop()}break}}const k=t.length-i.length;j(i),R(k)},r=new ResizeObserver(e);return n.current&&r.observe(n.current),e(),()=>{n.current&&r.unobserve(n.current)}},[t,u]),y?null:t.length?c.jsxRuntimeExports.jsxs(N,{ref:n,children:[x.map((e,r)=>s.createElement(m,{...d?.chip,key:e.label+r,"data-tooltip":e.tooltip,className:C("chip",{last:r===x.length-1&&f>0},d?.chip?.className)},e.prefix,e?.icon&&c.jsxRuntimeExports.jsx(p.Icon,{icon:e.icon}),e.label,e.suffix)),f>0&&c.jsxRuntimeExports.jsxs(W,{className:C("more-chip",d?.chip?.className),children:["+",f]}),u.map((e,r)=>c.jsxRuntimeExports.jsxs(S,{className:"offscreen-chip",children:[e.prefix,e?.icon&&c.jsxRuntimeExports.jsx(p.Icon,{icon:e.icon}),e.label,e.suffix]},e.label+r))]}):c.jsxRuntimeExports.jsx(V,{icon:"add",className:d?.chip?.className})};exports.Chips=O;
+`,W=({values:t,disabled:k,pt:d})=>{const w=a.useRef(null),[{visibleCount:C,rows:q},S]=a.useState({visibleCount:0,rows:1}),[c,O]=a.useState([]);if(a.useLayoutEffect(()=>{O(t)},[t]),a.useLayoutEffect(()=>{const e=w.current;if(!e||c.length===0||c.length!==t.length)return;const o=Array.from(e.querySelectorAll(".offscreen-chip"));if(o.length!==t.length)return;const f=parseFloat(getComputedStyle(e).rowGap)||0,B=o.map(l=>l.getBoundingClientRect().width),j=o[0].getBoundingClientRect().height,I=e.querySelector(".offscreen-more-chip")?.getBoundingClientRect().width||60,L=(l,p,h)=>{let n=1,r=0;const E=(s,M)=>{M?r=s:r+f+s<=h?r+=f+s:(n++,r=s)};for(let s=0;s<l;s++)E(B[s],s===0);return p&&E(p,l===0),n},R=()=>{const l=e.getBoundingClientRect().width,p=e.offsetHeight,h=j?Math.max(1,Math.floor((p+f)/(j+f))):1;let n=t.length;for(;n>1&&L(n,n<t.length?I:0,l)>h;)n--;S(r=>r.visibleCount===n&&r.rows===h?r:{visibleCount:n,rows:h})},v=new ResizeObserver(R);return v.observe(e),R(),()=>v.disconnect()},[t,c]),k)return null;if(!t.length)return i.jsxRuntimeExports.jsx(H,{icon:"add",className:d?.chip?.className});const g=t.slice(0,C),m=C?t.length-g.length:0;return i.jsxRuntimeExports.jsxs(z,{ref:w,className:x({"multi-row":q>1}),children:[g.map((e,o)=>a.createElement(y,{...d?.chip,key:e.label+o,"data-tooltip":e.tooltip,className:x("chip",{last:o===g.length-1&&m>0},d?.chip?.className)},e.prefix,e?.icon&&i.jsxRuntimeExports.jsx(b.Icon,{icon:e.icon}),e.label,e.suffix)),m>0&&i.jsxRuntimeExports.jsxs(A,{className:x("more-chip",d?.chip?.className),children:["+",m]}),c.map((e,o)=>i.jsxRuntimeExports.jsxs(N,{className:"offscreen-chip",children:[e.prefix,e?.icon&&i.jsxRuntimeExports.jsx(b.Icon,{icon:e.icon}),e.label,e.suffix]},e.label+o)),c.length>1&&i.jsxRuntimeExports.jsxs(N,{className:"offscreen-more-chip",children:["+",c.length-1]})]})};exports.Chips=W;
 //# sourceMappingURL=Chips.cjs.js.map

package/dist/shared/src/components/Chips/Chips.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.cjs.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport React, { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n  icon?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [visibleValues, setVisibleValues] = useState<ChipValue[]>([])\n  const [hiddenCount, setHiddenCount] = useState(0)\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const calculateVisibleChips = () => {\n      if (\n        !containerRef.current ||\n        offscreenChips.length === 0 ||\n        offscreenChips.length !== values.length\n      )\n        return\n\n      const containerWidth = containerRef.current.offsetWidth\n      const chipElements = Array.from(containerRef.current.querySelectorAll('.offscreen-chip'))\n      const moreChipElement = containerRef.current.querySelector('.more-chip')\n\n      if (!chipElements.length) return\n\n      let totalWidth = 0\n      const newVisibleValues: ChipValue[] = []\n\n      const moreChipWidth = moreChipElement?.getBoundingClientRect().width || 60\n\n      // Always show the first chip\n      if (values.length > 0) {\n        const firstChipWidth = chipElements[0].getBoundingClientRect().width\n        newVisibleValues.push(values[0])\n        totalWidth += firstChipWidth\n      }\n\n      // Add additional chips if they fit\n      for (let i = 1; i < values.length; i++) {\n        const chipWidth = chipElements[i].getBoundingClientRect().width\n\n        // Check if the next chip can fit completely\n        if (totalWidth + chipWidth <= containerWidth) {\n          totalWidth += chipWidth\n          newVisibleValues.push(values[i])\n        } else {\n          // Check if there's room for the more chip\n          if (totalWidth + moreChipWidth <= containerWidth) {\n            // Keep current visible chips and show more chip\n            break\n          } else {\n            // Remove the last chip if we need room for the more chip\n            if (newVisibleValues.length > 1) {\n              const lastChipWidth =\n                chipElements[newVisibleValues.length - 1].getBoundingClientRect().width\n              totalWidth -= lastChipWidth\n              newVisibleValues.pop()\n            }\n            break\n          }\n        }\n      }\n\n      const finalHiddenCount = values.length - newVisibleValues.length\n      setVisibleValues(newVisibleValues)\n      setHiddenCount(finalHiddenCount)\n    }\n\n    const resizeObserver = new ResizeObserver(calculateVisibleChips)\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    // Initial calculation\n    calculateVisibleChips()\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current)\n      }\n    }\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  return (\n    <ChipsContainer ref={containerRef}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </OffscreenChip>\n      ))}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleValues","setVisibleValues","useState","hiddenCount","setHiddenCount","offscreenChips","setOffscreenChips","useLayoutEffect","calculateVisibleChips","containerWidth","chipElements","moreChipElement","totalWidth","newVisibleValues","moreChipWidth","firstChipWidth","i","chipWidth","lastChipWidth","finalHiddenCount","resizeObserver","jsxs","chip","index","createElement","clsx","jsx"],"mappings":"yPAKMA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBC,EAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBdE,EAAgBF,EAAOC,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3BE,EAAWH,EAAOC,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtBG,EAAUJ,EAAOK,MAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+BdC,EAAwB,CAAC,CAAE,OAAAC,EAAQ,SAAAC,EAAU,GAAAC,KAAS,CACjE,MAAMC,EAAeC,EAAAA,OAAuB,IAAI,EAC1C,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAsB,CAAA,CAAE,EAC5D,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,CAAC,EAC1C,CAACG,EAAgBC,CAAiB,EAAIJ,EAAAA,SAAsB,CAAA,CAAE,EA+EpE,OA7EAK,EAAAA,gBAAgB,IAAM,CACpBD,EAAkBX,CAAM,CAC1B,EAAG,CAACA,CAAM,CAAC,EAEXY,EAAAA,gBAAgB,IAAM,CACpB,MAAMC,EAAwB,IAAM,CAClC,GACE,CAACV,EAAa,SACdO,EAAe,SAAW,GAC1BA,EAAe,SAAWV,EAAO,OAEjC,OAEF,MAAMc,EAAiBX,EAAa,QAAQ,YACtCY,EAAe,MAAM,KAAKZ,EAAa,QAAQ,iBAAiB,iBAAiB,CAAC,EAClFa,EAAkBb,EAAa,QAAQ,cAAc,YAAY,EAEvE,GAAI,CAACY,EAAa,OAAQ,OAE1B,IAAIE,EAAa,EACjB,MAAMC,EAAgC,CAAA,EAEhCC,EAAgBH,GAAiB,sBAAA,EAAwB,OAAS,GAGxE,GAAIhB,EAAO,OAAS,EAAG,CACrB,MAAMoB,EAAiBL,EAAa,CAAC,EAAE,wBAAwB,MAC/DG,EAAiB,KAAKlB,EAAO,CAAC,CAAC,EAC/BiB,GAAcG,CAChB,CAGA,QAASC,EAAI,EAAGA,EAAIrB,EAAO,OAAQqB,IAAK,CACtC,MAAMC,EAAYP,EAAaM,CAAC,EAAE,wBAAwB,MAG1D,GAAIJ,EAAaK,GAAaR,EAC5BG,GAAcK,EACdJ,EAAiB,KAAKlB,EAAOqB,CAAC,CAAC,MAC1B,CAEL,GAAIJ,EAAaE,GAAiBL,EAEhC,MAGA,GAAII,EAAiB,OAAS,EAAG,CAC/B,MAAMK,EACJR,EAAaG,EAAiB,OAAS,CAAC,EAAE,wBAAwB,MACpED,GAAcM,EACdL,EAAiB,IAAA,CACnB,CACA,KAEJ,CACF,CAEA,MAAMM,EAAmBxB,EAAO,OAASkB,EAAiB,OAC1DZ,EAAiBY,CAAgB,EACjCT,EAAee,CAAgB,CACjC,EAEMC,EAAiB,IAAI,eAAeZ,CAAqB,EAC/D,OAAIV,EAAa,SACfsB,EAAe,QAAQtB,EAAa,OAAO,EAI7CU,EAAA,EAEO,IAAM,CACPV,EAAa,SACfsB,EAAe,UAAUtB,EAAa,OAAO,CAEjD,CACF,EAAG,CAACH,EAAQU,CAAc,CAAC,EAEvBT,EAAiB,KAGhBD,EAAO,OAKV0B,EAAAA,kBAAAA,KAAClC,EAAA,CAAe,IAAKW,EAClB,SAAA,CAAAE,EAAc,IAAI,CAACsB,EAAMC,IACxBC,EAAAA,cAACnC,EAAA,CACE,GAAGQ,GAAI,KACR,IAAKyB,EAAK,MAAQC,EAClB,eAAcD,EAAK,QACnB,UAAWG,EACT,OACA,CAAE,KAAMF,IAAUvB,EAAc,OAAS,GAAKG,EAAc,CAAA,EAC5DN,GAAI,MAAM,SAAA,CACZ,EAECyB,EAAK,OACLA,GAAM,MAAQI,wBAACjC,EAAAA,KAAA,CAAK,KAAM6B,EAAK,KAAM,EACrCA,EAAK,MACLA,EAAK,MAAA,CAET,EACAnB,EAAc,GACbkB,yBAAC9B,EAAA,CAAS,UAAWkC,EAAK,YAAa5B,GAAI,MAAM,SAAS,EAAG,SAAA,CAAA,IAAEM,CAAA,EAAY,EAE5EE,EAAe,IAAI,CAACiB,EAAMC,IACzBF,yBAAC/B,EAAA,CAAuC,UAAU,iBAC/C,SAAA,CAAAgC,EAAK,OACLA,GAAM,MAAQI,wBAACjC,EAAAA,KAAA,CAAK,KAAM6B,EAAK,KAAM,EACrCA,EAAK,MACLA,EAAK,MAAA,GAJYA,EAAK,MAAQC,CAKjC,CACD,CAAA,EACH,0BAjCQ/B,EAAA,CAAQ,KAAK,MAAM,UAAWK,GAAI,MAAM,UAAW,CAmC/D"}
+{"version":3,"file":"Chips.cjs.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport React, { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  align-self: stretch;\n  width: 100%;\n  overflow: hidden;\n\n  &.multi-row {\n    flex-wrap: wrap;\n    align-content: center;\n  }\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n  icon?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\ntype ChipsLayout = {\n  visibleCount: number\n  rows: number\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [{ visibleCount, rows }, setLayout] = useState<ChipsLayout>({\n    visibleCount: 0,\n    rows: 1,\n  })\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const container = containerRef.current\n    if (!container || offscreenChips.length === 0 || offscreenChips.length !== values.length) return\n\n    const chipElements = Array.from(container.querySelectorAll('.offscreen-chip'))\n    if (chipElements.length !== values.length) return\n\n    const gap = parseFloat(getComputedStyle(container).rowGap) || 0\n    const chipWidths = chipElements.map((el) => el.getBoundingClientRect().width)\n    const chipHeight = chipElements[0].getBoundingClientRect().height\n    // measured offscreen at its widest label, so it does not depend on the +N chip being rendered\n    const moreChipWidth =\n      container.querySelector('.offscreen-more-chip')?.getBoundingClientRect().width || 60\n\n    const rowsNeeded = (count: number, extraWidth: number, containerWidth: number) => {\n      let used = 1\n      let rowWidth = 0\n      const place = (width: number, isFirst: boolean) => {\n        if (isFirst) rowWidth = width\n        else if (rowWidth + gap + width <= containerWidth) rowWidth += gap + width\n        else {\n          used++\n          rowWidth = width\n        }\n      }\n\n      for (let i = 0; i < count; i++) place(chipWidths[i], i === 0)\n      if (extraWidth) place(extraWidth, count === 0)\n      return used\n    }\n\n    const calculateLayout = () => {\n      const containerWidth = container.getBoundingClientRect().width\n      const containerHeight = container.offsetHeight\n      const rows = chipHeight\n        ? Math.max(1, Math.floor((containerHeight + gap) / (chipHeight + gap)))\n        : 1\n\n      // drop chips until they and the more chip fit the rows available\n      let visibleCount = values.length\n      while (\n        visibleCount > 1 &&\n        rowsNeeded(visibleCount, visibleCount < values.length ? moreChipWidth : 0, containerWidth) >\n          rows\n      ) {\n        visibleCount--\n      }\n\n      setLayout((prev) =>\n        prev.visibleCount === visibleCount && prev.rows === rows ? prev : { visibleCount, rows },\n      )\n    }\n\n    const resizeObserver = new ResizeObserver(calculateLayout)\n    resizeObserver.observe(container)\n\n    // Initial calculation\n    calculateLayout()\n\n    return () => resizeObserver.disconnect()\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  const visibleValues = values.slice(0, visibleCount)\n  const hiddenCount = visibleCount ? values.length - visibleValues.length : 0\n\n  return (\n    <ChipsContainer ref={containerRef} className={clsx({ 'multi-row': rows > 1 })}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </OffscreenChip>\n      ))}\n      {offscreenChips.length > 1 && (\n        <OffscreenChip className=\"offscreen-more-chip\">+{offscreenChips.length - 1}</OffscreenChip>\n      )}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleCount","rows","setLayout","useState","offscreenChips","setOffscreenChips","useLayoutEffect","container","chipElements","gap","chipWidths","el","chipHeight","moreChipWidth","rowsNeeded","count","extraWidth","containerWidth","used","rowWidth","place","width","isFirst","i","calculateLayout","containerHeight","prev","resizeObserver","visibleValues","hiddenCount","jsxs","clsx","chip","index","createElement","jsx"],"mappings":"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"}