@commercetools-frontend/experimental-components 7.2.3 → 8.0.0

package/dist/declarations/src/components/buttons/button/button.d.ts

@@ -12,5 +12,8 @@ declare namespace Button {
         isDisabled: any;
         children: any;
         'aria-label': any;
+        variant: any;
+        fullWidth: any;
+        isAlt: any;
     };
 }

package/dist/declarations/src/components/carousel/carousel.d.ts

@@ -5,24 +5,27 @@ export type CarouselItem = {
     /** An identifier used to create keys */
     id: string;
     /** The source URL for the main image content. Should be 384px x 200px. */
-    imgSrc: string;
+    imgSrc?: string;
     /** An alt message for image accessibility */
-    imgAlt: MessageDescriptor;
+    imgAlt?: MessageDescriptor;
     /** The label of the header stamp */
-    stampLabel: MessageDescriptor;
+    stampLabel?: MessageDescriptor;
     /** UI-Kit-compatible color for the header stamp */
-    stampTone: React.ComponentProps<typeof Stamp>['tone'];
+    stampTone?: React.ComponentProps<typeof Stamp>['tone'];
     /** Text of the carousel slide. Shouldn't exceed ~70 characters. */
     textContent: MessageDescriptor;
     /** Where the content should redirect to on user click */
-    linkTo: (projectKey?: string) => string;
+    linkTo?: (projectKey?: string) => string;
     /** Governs whether the redirection happens outside of the Merchant Center. */
-    isExternal: boolean;
+    isExternal?: boolean;
     /** Feature flag to control visibility of the item */
     flag?: string;
 };
 type CarouselProps = {
     items: CarouselItem[];
+    fullWidth?: boolean;
+    borderless?: boolean;
+    hasPadding?: boolean;
 };
-declare const Carousel: ({ items }: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Carousel: ({ items, fullWidth, borderless, hasPadding, }: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Carousel;

package/dist/declarations/src/fields/search-input/search-input.d.ts

@@ -12,7 +12,6 @@ export class SearchInput extends Component<any, any, any> {
         throttleMS: any;
         onChange: any;
         disabled: any;
-        enableDisabledStyle: any;
         isGranular: any;
         shouldClearOnSubmit: any;
         inputRef: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/experimental-components",
-  "version": "7.2.3",
+  "version": "8.0.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,10 +33,10 @@
     "@commercetools-frontend/l10n": "24.2.1",
     "@commercetools-frontend/sdk": "24.2.1",
     "@commercetools-frontend/sentry": "24.2.1",
-    "@commercetools-frontend/ui-kit": "20.2.1",
-    "@commercetools-uikit/design-system": "20.2.1",
-    "@commercetools-uikit/select-utils": "20.2.1",
-    "@commercetools-uikit/utils": "20.2.1",
+    "@commercetools-frontend/ui-kit": "20.2.2",
+    "@commercetools-uikit/design-system": "20.2.2",
+    "@commercetools-uikit/select-utils": "20.2.2",
+    "@commercetools-uikit/utils": "20.2.2",
     "@emotion/react": "11.14.0",
     "@hello-pangea/dnd": "^18.0.1",
     "classnames": "2.5.1",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@apollo/client": "3.12.4",
-    "@commercetools/composable-commerce-test-data": "13.0.0",
+    "@commercetools/composable-commerce-test-data": "13.2.0",
     "@testing-library/react": "16.1.0",
     "@types/debounce-promise": "3.1.9",
     "@types/jest": "^29.5.2",
@@ -80,8 +80,8 @@
     "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "typescript": "5.2.2",
-    "@commercetools-local/test-utils": "1.2.22",
-    "@commercetools-local/test-data": "1.2.22"
+    "@commercetools-local/test-data": "1.2.22",
+    "@commercetools-local/test-utils": "1.2.22"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",

package/dist/styles.css

@@ -1,612 +0,0 @@
-/*  imported from selectable-field-search-input.module.css  */
-
-.selectable-field-search-input-module__container___z2ltR {
-  width: 100%;
-  position: relative;
-  display: flex;
-  z-index: 3;
-  max-width: var(--constraint-15);
-}
-
-.selectable-field-search-input-module__search-mode-menu___Od6Le {
-  border-radius: var(--border-radius-6);
-  border: 1px solid var(--color-primary);
-  margin-top: 2px;
-  position: absolute;
-}
-/*  imported from required-indicator.module.css  */
-
-.required-indicator-module__colored____YUFm {
-  color: var(--color-warning);
-}
-
-.required-indicator-module__indicatorAsterisk___3lEdX {
-  font-style: normal;
-  margin-left: 2px;
-}
-/*  imported from validated-input.module.css  */
-
-.validated-input-module__invalid___380EL {
-  /* this needs !important because react-select has a :focus style that
-    stops the border colour being set unless the element is blurred */
-  border-color: var(--color-error) !important;
-}
-
-.validated-input-module__container___3L2KB {
-  display: inline;
-}
-/*  imported from store-select-input.module.css  */
-
-.store-select-input-module__customOption___2SC00 {
-  margin-top: 10px;
-}
-/*  imported from label-range.module.css  */
-
-.label-range-module__label___3Tb0p {
-  font-size: 0.9rem;
-  font-weight: bold;
-}
-/*  imported from multi-value-search-input.module.css  */
-
-.multi-value-search-input-module__container___2u64d {
-  position: relative;
-}
-
-.multi-value-search-input-module__searchInput___363nj input {
-  border-color: var(--border-color-for-input);
-}
-
-.multi-value-search-input-module__searchInput___363nj input::placeholder {
-  color: var(--font-color-for-input-when-disabled);
-}
-
-.multi-value-search-input-module__submittingTip___2339U {
-  margin-top: var(--spacing-xs);
-  background: var(--background-color-for-input);
-  border: solid 1px var(--border-color-for-input-when-focused);
-  border-radius: var(--border-radius-for-input);
-  position: relative;
-  cursor: default;
-}
-
-.multi-value-search-input-module__submitting-tip-single___1LcNy {
-  padding: var(--spacing-s);
-  color: var(--font-color-for-input-when-disabled);
-}
-
-.multi-value-search-input-module__submitting-tip-content___IyuVb {
-  padding: var(--spacing-s);
-}
-
-.multi-value-search-input-module__submitting-tip-content-separate___3Y_CI {
-  padding-top: var(--spacing-s);
-}
-
-.multi-value-search-input-module__submitting-tip-content-hoverable___2TK6S:hover {
-  background-color: var(--color-neutral-95);
-  border-radius: var(--border-radius-for-input);
-}
-
-.multi-value-search-input-module__submitting-tip-content-separate-hoverable___3VUnV:hover {
-  background-color: var(--color-neutral-95);
-  border-bottom-left-radius: var(--border-radius-for-input);
-  border-bottom-right-radius: var(--border-radius-for-input);
-}
-/*  imported from numeric-format-input.module.css  */
-
-.numeric-format-input-module__invalid___3LcyE {
-  /* this needs !important because react-select has a :focus style that
-    stops the border colour being set unless the element is blurred */
-  border-color: var(--color-error) !important;
-  border: 1px solid;
-}
-
-.numeric-format-input-module__disabled___hb6h4 {
-  cursor: not-allowed;
-}
-/*  imported from search-input.module.css  */
-
-.search-input-module__block___1uM-y {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  max-width: 800px;
-}
-
-.search-input-module__container___9u6if {
-  position: relative;
-  flex-grow: 1;
-}
-
-.search-input-module__input-container___mJnyZ {
-  border-color: var(--border-color-for-input);
-  height: var(--height-for-input);
-}
-
-.search-input-module__input-container___mJnyZ > input::placeholder {
-  font-weight: var(--font-weight-400);
-  font-size: 1rem;
-  font-family: var(--font-family);
-  color: var(--color-neutral-60);
-}
-
-.search-input-module__input-container___mJnyZ > input {
-  padding-right: calc(var(--spacing-xl) * 2);
-}
-
-.search-input-module__input-container-disabled___23jR8 > input {
-  border-color: var(--color-neutral);
-}
-
-.search-input-module__input-container-hoverable___1xjqn > input:hover {
-  border: 1px solid var(--border-color-for-input);
-  background-color: var(--background-color-for-input-when-hovered);
-}
-.search-input-module__input-container-hoverable___1xjqn > input:focus {
-  box-shadow: var(
-    --shadow-for-input-when-focused,
-    inset 0 0 0 1px var(--color-primary)
-  );
-  border-color: var(--border-color-for-input-when-focused);
-}
-
-.search-input-module__input-container-granular___33Pm- {
-  border-color: var(--color-primary);
-  position: relative;
-  right: 3px;
-}
-
-.search-input-module__search-icon-container___cbHQY {
-  background-color: transparent;
-  border-color: transparent;
-  position: absolute;
-  right: 9px;
-  top: 8px;
-}
-
-.search-input-module__clear-icon-container___3RQvu {
-  background-color: transparent;
-  border-color: transparent;
-  position: absolute;
-  right: 36px;
-  top: 11px;
-  z-index: 2;
-}
-
-.search-input-module__clear-icon-container-granular___1mbin {
-  right: 41px;
-}
-
-.search-input-module__search-icon-container-hoverable___1kTwJ {
-  cursor: pointer;
-}
-
-.search-input-module__search-icon-container-granular___3fAsR {
-  right: 15px;
-}
-
-.search-input-module__hidden___z07GX {
-  display: none !important;
-}
-
-.search-input-module__action___1GqGT {
-  flex-shrink: 1;
-  margin-left: var(--spacing-s);
-}
-/*  imported from throttled-field.module.css  */
-
-.throttled-field-module__size___324jx {
-  width: 100%;
-}
-
-.throttled-field-module__size___324jx {
-  min-height: var(--height-for-input);
-}
-
-.throttled-field-module__input-text___3zFFp {
-  transition: 0.2s ease;
-  border-radius: 6px;
-  border-style: solid;
-  border-width: 1px;
-  color: var(--color-solid);
-  font-weight: 500;
-  font-size: 1rem;
-  font-family: 'Open Sans', sans-serif !important;
-  padding: 7.5px 10px;
-  outline: none;
-  box-shadow: none;
-  appearance: none;
-}
-
-.throttled-field-module__input-secondary___cFo9e {
-  background-color: var(--color-neutral-95);
-  border-color: var(--color-surface);
-  width: 100%;
-}
-
-.throttled-field-module__input-primary___26G3R {
-  border-color: var(--color-neutral);
-  background-color: var(--color-surface);
-}
-
-.throttled-field-module__textarea___3ZNEs {
-  width: 100%;
-  min-height: 36px;
-  resize: vertical;
-}
-
-.throttled-field-module__textarea-primary___24Wwt {
-  border-color: var(--color-neutral);
-  background-color: var(--color-surface);
-}
-
-.throttled-field-module__textarea-secondary___2rmFG {
-  background-color: var(--color-neutral-95);
-  border-color: var(--color-surface);
-  width: 100%;
-}
-
-.throttled-field-module__invalid___1yZLW {
-  /* this needs !important because react-select has a :focus style that
-    stops the border colour being set unless the element is blurred */
-  border-color: var(--color-error) !important;
-  border: 1px solid;
-}
-
-.throttled-field-module__disabled___qVj79 {
-  cursor: not-allowed;
-  background-color: var(--color-accent-98);
-  color: var(--color-solid);
-  opacity: 1; /* fix for mobile safari */
-}
-
-.throttled-field-module__granular___2LXJf {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  margin-left: 0;
-}
-/*  imported from button.module.css  */
-
-/* Generic button */
-
-.button-module__button___1OzVf {
-  background: var(--color-neutral);
-  border: none;
-  border-radius: 6px;
-  color: var(--color-solid);
-  cursor: pointer;
-  display: inline-block;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 1rem;
-  padding: 7px 15px;
-  transition: background-color var(--transition-linear-80ms);
-  vertical-align: middle;
-  min-height: 32px;
-}
-
-/* Specific types of buttons */
-
-.button-module__cancel___1-jYL {
-  background: var(--color-surface);
-  border: 1px solid var(--color-neutral);
-}
-
-.button-module__confirm___-W92x {
-  background: var(--color-primary);
-  color: var(--color-surface);
-}
-
-.button-module__save___1-KXp {
-  color: var(--color-surface) !important;
-}
-
-.button-module__add___1fbPS {
-  background: var(--color-surface);
-  border: 1px solid var(--color-neutral);
-  color: var(--color-solid);
-  padding: 5.5px 15px 5.5px 10px;
-}
-
-.button-module__add-url___1e6xE {
-}
-
-.button-module__icon-add___2X7fc {
-  color: var(--color-neutral-60);
-  float: left;
-  font-size: 1rem;
-  margin: 3px 10px 0 0;
-}
-
-.button-module__icon-chain___1pvWT {
-  color: var(--color-neutral-60);
-  float: left;
-  font-size: 1.4rem;
-  margin: 0 10px 0 0;
-}
-
-.button-module__add___1fbPS:hover .button-module__icon-add___2X7fc,
-.button-module__add-url___1e6xE:hover .button-module__icon-chain___1pvWT {
-  color: var(--color-surface);
-}
-
-/* Base of switch buttons */
-
-.button-module__switch___2bt5z {
-  background: var(--color-surface);
-  border: 1px var(--color-neutral) solid;
-  color: var(--color-solid);
-  font-weight: 100;
-  position: relative;
-}
-
-.button-module__switch___2bt5z .button-module__icon___wuw4Z {
-  color: var(--color-neutral-60);
-}
-
-.button-module__switch___2bt5z:disabled {
-  color: var(--color-neutral-60);
-  border-color: var(--color-neutral);
-}
-
-.button-module__switch___2bt5z:hover {
-  color: var(--color-surface);
-  border-color: var(--color-info);
-  background: var(--color-info);
-}
-
-.button-module__switch___2bt5z:hover .button-module__icon___wuw4Z {
-  color: var(--color-surface);
-}
-
-.button-module__switch--active___1s4ZM {
-}
-
-.button-module__switch___2bt5z:disabled {
-  background: transparent;
-  color: var(--color-neutral-60);
-}
-
-.button-module__switch___2bt5z:disabled .button-module__icon___wuw4Z {
-  color: var(--color-neutral-60);
-}
-
-.button-module__switch___2bt5z:disabled,
-.button-module__switch--active___1s4ZM:disabled {
-  opacity: 1; /* exception for disabled switch button */
-  user-select: none;
-  cursor: default;
-}
-
-.button-module__switch--active___1s4ZM:disabled .button-module__icon___wuw4Z,
-.button-module__switch--active___1s4ZM .button-module__icon___wuw4Z {
-  color: var(--color-info);
-}
-
-.button-module__switch--active___1s4ZM:disabled {
-  color: var(--color-info);
-  border-color: var(--color-info);
-}
-
-/* Switch type squared */
-
-.button-module__switch-squared___QnrOG {
-  padding: 4.5px 15px 4.5px 40px;
-}
-
-.button-module__switch-squared--active___2ZbEC {
-}
-
-/* Switch type rounded */
-
-/* When the button has no text but icon */
-
-.button-module__switch-rounded___1CBs_ {
-  padding: 0;
-  border-width: 1px;
-  width: 36px;
-  height: 36px;
-  border-radius: 36px;
-}
-
-.button-module__switch-rounded--active___2Ckga {
-}
-
-.button-module__switch-rounded___1CBs_ .button-module__switch-label___2FAdy {
-  display: none;
-}
-
-/* States */
-
-.button-module__cancel___1-jYL:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.button-module__confirm___-W92x:hover {
-  background: var(--color-primary-25);
-}
-
-.button-module__add___1fbPS:hover {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: var(--color-surface);
-}
-
-/* Variations */
-
-.button-module__disabled___2Azpu {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.button-module__full___264Zw {
-  width: 100%;
-}
-
-.button-module__alt___Z6PWx {
-  color: var(--color-surface);
-  border-radius: 20px;
-  border: 2px var(--color-surface) solid;
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-.button-module__confirm-alt___2Zcqz {
-  border-color: transparent;
-}
-
-.button-module__cancel-alt___u5EAw {
-  background: none;
-}
-
-.button-module__save-alt___6iHMF {
-  border-color: transparent;
-}
-
-/* Add Button */
-
-.button-module__add-button___1f093 {
-  min-height: 32px;
-}
-/* imported from file-input.module.css  */
-
-/** Button */
-
-.file-input-module__button___2KypN {
-  display: inline-flex;
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-neutral);
-  box-shadow: none;
-  border-radius: var(--border-radius-4);
-  color: var(--color-solid);
-  height: var(--height-for-button-as-big);
-  font-size: var(--font-size-20);
-  font-weight: var(--font-weight-500);
-  align-items: center;
-  transition: background-color var(--transition-linear-80ms);
-  padding: 0 var(--spacing-m);
-}
-
-.file-input-module__button___2KypN:hover,
-.file-input-module__button___2KypN:focus {
-  cursor: pointer;
-  background-color: var(--background-color-for-button-when-hovered);
-  box-shadow: none;
-}
-
-.file-input-module__button___2KypN:active {
-  box-shadow: var(--shadow-9);
-  background-color: var(--color-surface);
-}
-
-.file-input-module__input___3MP4D {
-  visibility: hidden;
-  width: 1px;
-  height: 1px;
-}
-/*  imported from custom-money-input.module.css  */
-
-.custom-money-input-module__container___1fdO2 {
-  width: 100%;
-}
-/*  imported from centered-loading-spinner.module.css  */
-
-.centered-loading-spinner-module__loading-container___3_9-h {
-  height: 100%;
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
-}
-/*  imported from divider.module.css  */
-
-.divider-module__divider___4-vdy {
-  box-sizing: border-box;
-  margin: 0;
-  border: 0;
-  border-color: var(--color-neutral-90);
-}
-
-.divider-module__divider-horizontal___RuUcj {
-  width: 100%;
-  border-top-width: 1px;
-}
-
-.divider-module__divider-vertical___32kJG {
-  width: 1px;
-  height: 2vmax;
-  border-left-width: 1px;
-}
-
-.divider-module__divider-solid___3Fs4q {
-  border-style: solid;
-}
-
-.divider-module__divider-dashed___2Em8A {
-  border-style: dashed;
-}
-/*  imported from reference-search.module.css  */
-
-.reference-search-module__container___3-iK3 {
-  width: 100%;
-}
-
-.reference-search-module__container___3-iK3 > div {
-  width: 100%;
-}
-
-.reference-search-module__missing-label___az9AO {
-  color: var(--color-warning);
-  font-size: 0.9rem;
-  margin-left: var(--spacing-xs);
-}
-/*  imported from set-buttons.module.css  */
-
-.set-buttons-module__topAlign___3AZwc {
-  padding-top: var(--spacing-xs);
-}
-
-.set-buttons-module__gap___38Qr0 {
-  padding: 20px;
-}
-/*  imported from stores-search-selector.module.css  */
-
-.stores-search-selector-module__renderLabelContainer___3_PBc {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.stores-search-selector-module__customLabel___1Xse8 > div {
-  border-bottom: 1px solid var(--color-neutral-90) !important;
-  padding-bottom: 4px;
-}
-
-.stores-search-selector-module__renderLabelContainer___3_PBc div:nth-of-type(2) {
-  margin-top: 25px;
-}
-
-.stores-search-selector-module__renderLabelContainer___3_PBc div:nth-of-type(1) {
-  margin-top: -4px;
-}
-/*  imported from platform-limits-customers-status.module.css  */
-
-.platform-limits-customers-status-module__status___3rXYM {
-  min-width: max-content;
-}
-/*  imported from platform-limits-customers-combined.module.css  */
-
-.platform-limits-customers-combined-module__combined___OszDd {
-  margin-bottom: var(--spacing-s);
-}
-/*  imported from platform-limits-customer-groups-status.module.css  */
-
-.platform-limits-customer-groups-status-module__status___6099G {
-  min-width: max-content;
-}
-/*  imported from platform-limits-customer-groups-combined.module.css  */
-
-.platform-limits-customer-groups-combined-module__combined___WjRoI {
-  margin-bottom: var(--spacing-s);
-}