@ynput/ayon-react-components 1.7.10 → 1.7.11

package/dist/Dropdowns/EnumDropdown/EnumDropdown.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
-import { DropdownProps, DropdownRef } from '../Dropdown';
+import { DefaultValueTemplateProps, DropdownProps, DropdownRef } from '../Dropdown';
 import { IconType } from '../../Icon';
-export interface EnumTemplateProps {
+export interface EnumTemplateProps extends Omit<DefaultValueTemplateProps, 'value'> {
     option: EnumDropdownOption | null | undefined;
     isSelected?: boolean;
+    isChanged?: boolean;
 }
+export declare const EnumTemplate: ({ option, isSelected, isChanged, ...props }: EnumTemplateProps) => import("react/jsx-runtime").JSX.Element;
 export type EnumDropdownOption = {
     value: string;
     label: string;

package/dist/ayon-react-components.es.js

@@ -11342,50 +11342,52 @@ const $o = rt(({
   multiSelect: t,
   featuredOnly: e,
   widthExpand: i = !1,
-  ...c
-}, u) => {
-  const d = Nt(() => {
-    const _ = [], h = e ? o : Object.keys(B1e);
-    for (const g of h)
-      _.push({
-        label: g,
-        value: g
+  sortBySelected: c = !0,
+  ...u
+}, d) => {
+  const p = Nt(() => {
+    const h = [], g = e ? o : Object.keys(B1e);
+    for (const k of g)
+      h.push({
+        label: k,
+        value: k
       });
-    return _;
-  }, []), p = o.map((_) => _);
-  return d.sort((_, h) => p.includes(_.value) && !p.includes(h.value) ? -1 : !p.includes(_.value) && p.includes(h.value) ? 1 : 0), /* @__PURE__ */ w($o, {
+    return h;
+  }, []), _ = o.map((h) => h);
+  return p.sort((h, g) => _.includes(h.value) && !_.includes(g.value) ? -1 : !_.includes(h.value) && _.includes(g.value) ? 1 : 0), /* @__PURE__ */ w($o, {
     value: n,
     multiSelect: t,
-    valueTemplate: (_, h, g) => /* @__PURE__ */ w(Va, {
-      value: (g ? h : _) || [],
-      isOpen: g,
+    valueTemplate: (h, g, k) => /* @__PURE__ */ w(Va, {
+      value: (k ? g : h) || [],
+      isOpen: k,
       children: /* @__PURE__ */ w(e_, {
-        value: (g ? h : _) || []
+        value: (k ? g : h) || []
       })
     }),
-    options: d,
+    options: p,
     itemTemplate: ({
-      value: _
-    }, h, g) => /* @__PURE__ */ w(e_, {
-      value: [_],
-      isActive: h,
-      isSelected: g
+      value: h
+    }, g, k) => /* @__PURE__ */ w(e_, {
+      value: [h],
+      isActive: g,
+      isSelected: k
     }),
     onChange: a,
     search: !0,
     valueStyle: {
       width: 150,
-      ...c.valueStyle
+      ...u.valueStyle
     },
     style: {
       maxWidth: 150,
-      ...c.style
+      ...u.style
     },
-    ref: u,
-    ...c,
-    maxOptionsShown: Math.max(c.maxOptionsShown || 25, o.length),
+    ref: d,
+    ...u,
+    maxOptionsShown: Math.max(u.maxOptionsShown || 25, o.length),
     minSelected: 1,
-    widthExpand: i
+    widthExpand: i,
+    sortBySelected: c
   });
 }), om = ({ $color: n }) => n ? ke`
       background: ${n};
@@ -11406,8 +11408,6 @@ const $o = rt(({
         color: var(--md-sys-color-on-primary-container);
       }
     `, Nbe = le(Va)`
-  padding-left: 0;
-
   &.inverse {
     ${({ $color: n }) => om({ $color: n })}
     border-color: ${({ $color: n }) => n && "transparent"};
@@ -11415,11 +11415,7 @@ const $o = rt(({
 `, Abe = le.div`
   display: flex;
   align-items: center;
-  /* justify-content: center; */
-
   gap: 8px;
-  padding-left: 0.5rem;
-
   height: 32px;
 
   span:last-child {
@@ -11438,27 +11434,38 @@ const $o = rt(({
   &.selected {
     ${({ $color: n }) => om({ $color: n })}
   }
+
+  &.isChanged {
+    .value-label,
+    .icon {
+      color: var(--color-on-changed);
+    }
+  }
 `, t_ = ({
   option: n,
-  isSelected: a
+  isSelected: a,
+  isChanged: o,
+  ...t
 }) => {
   const {
-    value: o,
-    label: t,
-    icon: e,
-    color: i
+    value: e,
+    label: i,
+    icon: c,
+    color: u
   } = n || {};
   return /* @__PURE__ */ ce(Abe, {
     className: Je({
-      selected: a
-    }),
-    id: o,
-    $color: i,
-    children: [e && /* @__PURE__ */ w(pt, {
-      icon: e
+      selected: a,
+      isChanged: o
+    }, t.className),
+    id: e,
+    $color: u,
+    ...t,
+    children: [c && /* @__PURE__ */ w(pt, {
+      icon: c
     }), /* @__PURE__ */ w("span", {
       className: "value-label",
-      children: t
+      children: i
     })]
   });
 }, vDe = rt(({
@@ -11471,18 +11478,22 @@ const $o = rt(({
     return /* @__PURE__ */ w(Nbe, {
       isOpen: i,
       ...a,
-      $color: c == null ? void 0 : c.color,
+      $color: a.isChanged || c == null ? void 0 : c.color,
       className: Je({
         inverse: n
       }),
       children: /* @__PURE__ */ w(t_, {
-        option: c
+        option: c,
+        isChanged: a.isChanged
       })
     });
   },
   itemTemplate: (t, e) => /* @__PURE__ */ w(t_, {
     option: t,
-    isSelected: e
+    isSelected: e,
+    style: {
+      paddingLeft: "0.5rem"
+    }
   }),
   ...a
 })), Rbe = le.div`

package/dist/ayon-react-components.umd.js

@@ -842,7 +842,7 @@ function print() { __p += __j.call(arguments, '') }
       background: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
     `}
-`,R_=({value:n,isSelected:a})=>ie(m1,{$isActive:a,children:[n==null?void 0:n.map(o=>w(ut,{icon:o},o)),n&&n.length<2&&w("span",{children:n})]}),g1=W.forwardRef(({value:n,onChange:a,featured:o=[],multiSelect:t,featuredOnly:e,widthExpand:i=!1,...c},u)=>{const d=W.useMemo(()=>{const f=[],h=e?o:Object.keys(Tg);for(const g of h)f.push({label:g,value:g});return f},[]),_=o.map(f=>f);return d.sort((f,h)=>_.includes(f.value)&&!_.includes(h.value)?-1:!_.includes(f.value)&&_.includes(h.value)?1:0),w(no,{value:n,multiSelect:t,valueTemplate:(f,h,g)=>w(Wo,{value:(g?h:f)||[],isOpen:g,children:w(R_,{value:(g?h:f)||[]})}),options:d,itemTemplate:({value:f},h,g)=>w(R_,{value:[f],isActive:h,isSelected:g}),onChange:a,search:!0,valueStyle:{width:150,...c.valueStyle},style:{maxWidth:150,...c.style},ref:u,...c,maxOptionsShown:Math.max(c.maxOptionsShown||25,o.length),minSelected:1,widthExpand:i})}),N_=({$color:n})=>n?he.css`
+`,R_=({value:n,isSelected:a})=>ie(m1,{$isActive:a,children:[n==null?void 0:n.map(o=>w(ut,{icon:o},o)),n&&n.length<2&&w("span",{children:n})]}),g1=W.forwardRef(({value:n,onChange:a,featured:o=[],multiSelect:t,featuredOnly:e,widthExpand:i=!1,sortBySelected:c=!0,...u},d)=>{const _=W.useMemo(()=>{const h=[],g=e?o:Object.keys(Tg);for(const k of g)h.push({label:k,value:k});return h},[]),f=o.map(h=>h);return _.sort((h,g)=>f.includes(h.value)&&!f.includes(g.value)?-1:!f.includes(h.value)&&f.includes(g.value)?1:0),w(no,{value:n,multiSelect:t,valueTemplate:(h,g,k)=>w(Wo,{value:(k?g:h)||[],isOpen:k,children:w(R_,{value:(k?g:h)||[]})}),options:_,itemTemplate:({value:h},g,k)=>w(R_,{value:[h],isActive:g,isSelected:k}),onChange:a,search:!0,valueStyle:{width:150,...u.valueStyle},style:{maxWidth:150,...u.style},ref:d,...u,maxOptionsShown:Math.max(u.maxOptionsShown||25,o.length),minSelected:1,widthExpand:i,sortBySelected:c})}),N_=({$color:n})=>n?he.css`
       background: ${n};
       &:hover {
         filter: brightness(1.1);
@@ -861,8 +861,6 @@ function print() { __p += __j.call(arguments, '') }
         color: var(--md-sys-color-on-primary-container);
       }
     `,v1=ue.default(Wo)`
-  padding-left: 0;
-
   &.inverse {
     ${({$color:n})=>N_({$color:n})}
     border-color: ${({$color:n})=>n&&"transparent"};
@@ -870,11 +868,7 @@ function print() { __p += __j.call(arguments, '') }
 `,y1=ue.default.div`
   display: flex;
   align-items: center;
-  /* justify-content: center; */
-
   gap: 8px;
-  padding-left: 0.5rem;
-
   height: 32px;
 
   span:last-child {
@@ -893,7 +887,14 @@ function print() { __p += __j.call(arguments, '') }
   &.selected {
     ${({$color:n})=>N_({$color:n})}
   }
-`,A_=({option:n,isSelected:a})=>{const{value:o,label:t,icon:e,color:i}=n||{};return ie(y1,{className:Xe({selected:a}),id:o,$color:i,children:[e&&w(ut,{icon:e}),w("span",{className:"value-label",children:t})]})},b1=W.forwardRef(({colorInverse:n,...a},o)=>w(no,{ref:o,valueTemplate:(t,e,i)=>{const c=a.options.find(u=>u.value===t[0]);return w(v1,{isOpen:i,...a,$color:c==null?void 0:c.color,className:Xe({inverse:n}),children:w(A_,{option:c})})},itemTemplate:(t,e)=>w(A_,{option:t,isSelected:e}),...a})),w1=ue.default.div`
+
+  &.isChanged {
+    .value-label,
+    .icon {
+      color: var(--color-on-changed);
+    }
+  }
+`,A_=({option:n,isSelected:a,isChanged:o,...t})=>{const{value:e,label:i,icon:c,color:u}=n||{};return ie(y1,{className:Xe({selected:a,isChanged:o},t.className),id:e,$color:u,...t,children:[c&&w(ut,{icon:c}),w("span",{className:"value-label",children:i})]})},b1=W.forwardRef(({colorInverse:n,...a},o)=>w(no,{ref:o,valueTemplate:(t,e,i)=>{const c=a.options.find(u=>u.value===t[0]);return w(v1,{isOpen:i,...a,$color:a.isChanged||c==null?void 0:c.color,className:Xe({inverse:n}),children:w(A_,{option:c,isChanged:a.isChanged})})},itemTemplate:(t,e)=>w(A_,{option:t,isSelected:e,style:{paddingLeft:"0.5rem"}}),...a})),w1=ue.default.div`
   height: 30px;
   display: flex;
   align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ynput/ayon-react-components",
   "private": false,
-  "version": "1.7.10",
+  "version": "1.7.11",
   "type": "module",
   "repository": {
     "type": "git",