@useblu/ocean-core 1.113.0 → 1.114.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.114.0](https://github.com/ocean-ds/ocean-web/compare/v1.113.2...v1.114.0) (2025-12-04)
+
+### Features
+
+- create internal list actions ([#1194](https://github.com/ocean-ds/ocean-web/issues/1194)) ([dafce53](https://github.com/ocean-ds/ocean-web/commit/dafce530677eacd471f91af2d2a936042b14f2f5))
+
+## [1.113.2](https://github.com/ocean-ds/ocean-web/compare/v1.113.1...v1.113.2) (2025-12-03)
+
+### Bug Fixes
+
+- chip multi select ([#1203](https://github.com/ocean-ds/ocean-web/issues/1203)) ([9943a81](https://github.com/ocean-ds/ocean-web/commit/9943a8160f8ab40eb8d325475c080d3ad7e32ffb))
+
 # [1.113.0](https://github.com/ocean-ds/ocean-web/compare/v1.112.1...v1.113.0) (2025-10-22)
 
 ### Features

package/ocean.css

@@ -2578,6 +2578,348 @@
   color: #ced1e1;
 }
 
+.ods-internal-list-actions {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+.ods-internal-list-actions__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  color: #aaadc0;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+}
+.ods-internal-list-actions__trigger:hover:not(:disabled, .ods-internal-list-actions__trigger--swipe-gesture), .ods-internal-list-actions__trigger:active:not(:disabled, .ods-internal-list-actions__trigger--swipe-gesture), .ods-internal-list-actions__trigger--active:not(:disabled, .ods-internal-list-actions__trigger--swipe-gesture) {
+  background: #f3f5fe;
+  color: #0025e0;
+}
+.ods-internal-list-actions__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.ods-internal-list-actions__trigger svg {
+  flex-shrink: 0;
+}
+.ods-internal-list-actions__menu {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  list-style: none;
+  margin: 0;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  padding: 4px 0;
+  position: absolute;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  z-index: 1000;
+}
+.ods-internal-list-actions__menu--bottom-left {
+  right: 0;
+  top: calc(100% + 4px);
+}
+.ods-internal-list-actions__menu--bottom-right {
+  left: 0;
+  top: calc(100% + 4px);
+}
+.ods-internal-list-actions__menu--top-left {
+  bottom: calc(100% + 4px);
+  right: 0;
+}
+.ods-internal-list-actions__menu--top-right {
+  bottom: calc(100% + 4px);
+  left: 0;
+}
+.ods-internal-list-actions__menu--portal {
+  inset: auto;
+}
+.ods-internal-list-actions__menu-item {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: #393b47;
+  cursor: pointer;
+  display: flex;
+  font-family: "Nunito Sans";
+  font-size: 16px;
+  gap: 16px;
+  line-height: 1.5;
+  padding: 8px 12px;
+  text-align: left;
+  transition: background-color 200ms;
+  width: 100%;
+}
+.ods-internal-list-actions__menu-item:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #f3f5fe;
+}
+.ods-internal-list-actions__menu-item--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.ods-internal-list-actions__menu-item--positive {
+  color: #2da94f;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.ods-internal-list-actions__menu-item--positive:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #f2fdf5;
+}
+.ods-internal-list-actions__menu-item--positive .ods-internal-list-actions__menu-item-icon {
+  color: #2da94f;
+}
+.ods-internal-list-actions__menu-item--warning {
+  color: #ff8a14;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.ods-internal-list-actions__menu-item--warning:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #fff7f0;
+}
+.ods-internal-list-actions__menu-item--warning .ods-internal-list-actions__menu-item-icon {
+  color: #ff8a14;
+}
+.ods-internal-list-actions__menu-item--negative {
+  color: #f5456e;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.ods-internal-list-actions__menu-item--negative:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #fff1f4;
+}
+.ods-internal-list-actions__menu-item--negative .ods-internal-list-actions__menu-item-icon {
+  color: #f5456e;
+}
+.ods-internal-list-actions__menu-item--neutral {
+  color: #aaadc0;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.ods-internal-list-actions__menu-item--neutral:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #f3f5fe;
+}
+.ods-internal-list-actions__menu-item--neutral .ods-internal-list-actions__menu-item-icon {
+  color: #aaadc0;
+}
+.ods-internal-list-actions__menu-item-icon {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: 16px;
+  justify-content: center;
+  width: 16px;
+}
+.ods-internal-list-actions__menu-item-label {
+  flex: 1;
+  white-space: nowrap;
+}
+.ods-internal-list-actions--force-swipe {
+  inset: 0;
+  position: absolute;
+  z-index: 100;
+  /* stylelint-disable max-nesting-depth */
+  /* stylelint-enable max-nesting-depth */
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__trigger {
+  height: 100%;
+  padding: 0 8px;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: auto;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__backdrop {
+  background: transparent;
+  inset: 0;
+  position: absolute;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__drag-handle {
+  align-items: center;
+  background: white;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  margin: 0;
+  padding: 0 16px;
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__drag-handle-button {
+  align-items: center;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  margin: 0;
+  padding: 0 8px;
+  width: 100%;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__drag-handle-icon {
+  display: block;
+  height: 24px;
+  width: 5px;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu {
+  align-items: stretch;
+  -webkit-animation: slideInFromRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+          animation: slideInFromRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  bottom: 0;
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  left: 0;
+  margin: 0;
+  max-height: none;
+  min-width: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: 102;
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
+  -webkit-overflow-scrolling: touch;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--closing {
+  -webkit-animation: slideOutToRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+          animation: slideOutToRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--bottom-left, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--bottom-right, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--top-left, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--top-right {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu li {
+  display: flex;
+  flex-shrink: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu li:first-of-type {
+  margin-left: auto;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item {
+  align-items: center;
+  border-radius: 0;
+  flex-direction: column;
+  gap: 4px;
+  height: 100%;
+  justify-content: center;
+  padding: 16px 16px;
+  white-space: nowrap;
+  width: auto;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item-icon {
+  flex: 1;
+  height: 20px;
+  width: 20px;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item-label {
+  align-items: center;
+  display: flex;
+  flex: 1;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--positive {
+  background: #2da94f;
+  color: white;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--positive .ods-internal-list-actions__menu-item-icon {
+  color: white;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--warning {
+  background: #ff8a14;
+  color: white;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--warning .ods-internal-list-actions__menu-item-icon {
+  color: white;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--negative {
+  background: #f5456e;
+  color: white;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--negative .ods-internal-list-actions__menu-item-icon {
+  color: white;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--neutral {
+  background: #aaadc0;
+  color: white;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--neutral .ods-internal-list-actions__menu-item-icon {
+  color: white;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--default, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item:not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--positive):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--warning):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--negative):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--neutral) {
+  background: #f3f5fe;
+  color: #393b47;
+}
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--default .ods-internal-list-actions__menu-item-icon, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item:not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--positive):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--warning):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--negative):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--neutral).ods-internal-list-actions__menu-item-icon {
+  color: #393b47;
+}
+
+@-webkit-keyframes slideInFromRight {
+  from {
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: right center;
+  }
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+    transform-origin: right center;
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: right center;
+  }
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+    transform-origin: right center;
+  }
+}
+@-webkit-keyframes slideOutToRight {
+  from {
+    opacity: 1;
+    transform: scaleX(1);
+    transform-origin: right center;
+  }
+  to {
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: right center;
+  }
+}
+@keyframes slideOutToRight {
+  from {
+    opacity: 1;
+    transform: scaleX(1);
+    transform-origin: right center;
+  }
+  to {
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: right center;
+  }
+}
 .ods-link {
   cursor: pointer;
   font-family: "Nunito Sans";
@@ -5074,6 +5416,19 @@
   padding: 16px 16px 16px 8px;
 }
 
+.ods-chips__options--option-container {
+  min-height: 0;
+  padding: 0;
+  width: 100%;
+}
+.ods-chips__options--option-container .ods-checkbox__root-container {
+  width: 100%;
+}
+.ods-chips__options--option-container .ods-checkbox__root {
+  padding: 16px;
+  width: 100%;
+}
+
 .ods-unordered-list-item {
   align-items: flex-start;
   display: flex;