@carbon/web-components 2.0.0-alpha.0 → 2.0.0-beta.1

package/lib/components-react-node/slider/slider-input.js

@@ -11,14 +11,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-Object.defineProperty(exports, 'SLIDER_INPUT_COLOR_SCHEME', {
-  enumerable: true,
-  get: function () {
-    return _defs.SLIDER_INPUT_COLOR_SCHEME;
-  },
-});
 exports.propTypes = exports.descriptor = exports.default = void 0;
-var _defs = require('././defs.js');
 var _createReactCustomElementType = _interopRequireDefault(
   require('../../globals/wrappers/createReactCustomElementType.js')
 );

package/lib/components-react-node/tag/tag.js

@@ -36,9 +36,19 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 var prefix = _settings.default.prefix;
-var descriptor = {};
+var descriptor = {
+  onBeforeClose: {
+    event: ''.concat(prefix, '-tag-beingclosed'),
+  },
+  onClose: {
+    event: ''.concat(prefix, '-tag-closed'),
+  },
+};
 exports.descriptor = descriptor;
-var propTypes = {};
+var propTypes = {
+  onBeforeClose: _propTypes.default.func,
+  onClose: _propTypes.default.func,
+};
 exports.propTypes = propTypes;
 const Component = (0, _createReactCustomElementType.default)(
   ''.concat(prefix, '-tag'),

package/lib/components-react-node/{tooltip → text-input}/defs.js

@@ -11,7 +11,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-var _defs = require('../../components/tooltip/defs.js');
+var _defs = require('../../components/text-input/defs.js');
 Object.keys(_defs).forEach(function (key) {
   if (key === 'default' || key === '__esModule') return;
   if (key in exports && exports[key] === _defs[key]) return;

package/lib/components-react-node/text-input/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';

package/lib/components-react-node/text-input/text-input-skeleton.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = {};
+exports.descriptor = descriptor;
+var propTypes = {};
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-text-input-skeleton'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/lib/components-react-node/{tag/filter-tag.js → text-input/text-input.js}

@@ -11,16 +11,22 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-Object.defineProperty(exports, 'TAG_SIZE', {
+Object.defineProperty(exports, 'INPUT_COLOR_SCHEME', {
   enumerable: true,
   get: function () {
-    return _defs.TAG_SIZE;
+    return _defs.INPUT_COLOR_SCHEME;
   },
 });
-Object.defineProperty(exports, 'TAG_TYPE', {
+Object.defineProperty(exports, 'INPUT_SIZE', {
   enumerable: true,
   get: function () {
-    return _defs.TAG_TYPE;
+    return _defs.INPUT_SIZE;
+  },
+});
+Object.defineProperty(exports, 'INPUT_TYPE', {
+  enumerable: true,
+  get: function () {
+    return _defs.INPUT_TYPE;
   },
 });
 exports.propTypes = exports.descriptor = exports.default = void 0;
@@ -36,22 +42,12 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 var prefix = _settings.default.prefix;
-var descriptor = {
-  onBeforeClose: {
-    event: ''.concat(prefix, '-filter-tag-beingclosed'),
-  },
-  onClose: {
-    event: ''.concat(prefix, '-filter-tag-closed'),
-  },
-};
+var descriptor = {};
 exports.descriptor = descriptor;
-var propTypes = {
-  onBeforeClose: _propTypes.default.func,
-  onClose: _propTypes.default.func,
-};
+var propTypes = {};
 exports.propTypes = propTypes;
 const Component = (0, _createReactCustomElementType.default)(
-  ''.concat(prefix, '-filter-tag'),
+  ''.concat(prefix, '-text-input'),
   descriptor
 );
 Component.propTypes = propTypes;

package/lib/components-react-node/textarea/textarea.js

@@ -11,14 +11,8 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-Object.defineProperty(exports, 'TEXTAREA_COLOR_SCHEME', {
-  enumerable: true,
-  get: function () {
-    return _defs.TEXTAREA_COLOR_SCHEME;
-  },
-});
 exports.propTypes = exports.descriptor = exports.default = void 0;
-var _defs = require('././defs.js');
+var _textInput = require('../text-input/text-input.js');
 var _createReactCustomElementType = _interopRequireDefault(
   require('../../globals/wrappers/createReactCustomElementType.js')
 );
@@ -30,9 +24,9 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 var prefix = _settings.default.prefix;
-var descriptor = {};
+var descriptor = Object.assign({}, _textInput.descriptor, {});
 exports.descriptor = descriptor;
-var propTypes = {};
+var propTypes = Object.assign({}, _textInput.propTypes, {});
 exports.propTypes = propTypes;
 const Component = (0, _createReactCustomElementType.default)(
   ''.concat(prefix, '-textarea'),

package/lib/components-react-node/tile/radio-tile.js

@@ -24,9 +24,15 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 var prefix = _settings.default.prefix;
-var descriptor = Object.assign({}, _selectableTile.descriptor, {});
+var descriptor = Object.assign({}, _selectableTile.descriptor, {
+  onRadioChange: {
+    event: ''.concat(prefix, '-radio-tile-selected'),
+  },
+});
 exports.descriptor = descriptor;
-var propTypes = Object.assign({}, _selectableTile.propTypes, {});
+var propTypes = Object.assign({}, _selectableTile.propTypes, {
+  onRadioChange: _propTypes.default.func,
+});
 exports.propTypes = propTypes;
 const Component = (0, _createReactCustomElementType.default)(
   ''.concat(prefix, '-radio-tile'),

package/lib/components-react-node/tile/tile-group.js

@@ -23,9 +23,19 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 var prefix = _settings.default.prefix;
-var descriptor = {};
+var descriptor = {
+  onCurrentRadioTileSelection: {
+    event: ''.concat(prefix, '-current-radio-tile-selection'),
+  },
+  onCurrentSelectableTilesSelection: {
+    event: ''.concat(prefix, '-current-selectable-tile-selections'),
+  },
+};
 exports.descriptor = descriptor;
-var propTypes = {};
+var propTypes = {
+  onCurrentRadioTileSelection: _propTypes.default.func,
+  onCurrentSelectableTilesSelection: _propTypes.default.func,
+};
 exports.propTypes = propTypes;
 const Component = (0, _createReactCustomElementType.default)(
   ''.concat(prefix, '-tile-group'),

package/lib/components-react-node/tooltip/tooltip-content.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.propTypes = exports.descriptor = exports.default = void 0;
+var _popoverContent = require('../popover/popover-content.js');
+var _createReactCustomElementType = _interopRequireDefault(
+  require('../../globals/wrappers/createReactCustomElementType.js')
+);
+var _propTypes = _interopRequireDefault(require('prop-types'));
+var _settings = _interopRequireDefault(
+  require('carbon-components/umd/globals/js/settings.js')
+);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+var prefix = _settings.default.prefix;
+var descriptor = Object.assign({}, _popoverContent.descriptor, {});
+exports.descriptor = descriptor;
+var propTypes = Object.assign({}, _popoverContent.propTypes, {});
+exports.propTypes = propTypes;
+const Component = (0, _createReactCustomElementType.default)(
+  ''.concat(prefix, '-tooltip-content'),
+  descriptor
+);
+Component.propTypes = propTypes;
+var _default = Component;
+exports.default = _default;

package/lib/components-react-node/tooltip/tooltip.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', {
   value: true,
 });
 exports.propTypes = exports.descriptor = exports.default = void 0;
+var _popover = require('../popover/popover.js');
 var _createReactCustomElementType = _interopRequireDefault(
   require('../../globals/wrappers/createReactCustomElementType.js')
 );
@@ -23,9 +24,9 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 var prefix = _settings.default.prefix;
-var descriptor = {};
+var descriptor = Object.assign({}, _popover.descriptor, {});
 exports.descriptor = descriptor;
-var propTypes = {};
+var propTypes = Object.assign({}, _popover.propTypes, {});
 exports.propTypes = propTypes;
 const Component = (0, _createReactCustomElementType.default)(
   ''.concat(prefix, '-tooltip'),

package/lib/globals/settings.js

@@ -26,7 +26,7 @@ const selectorTabbable = `
   textarea:not([disabled]):not([tabindex='-1']),
   iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true],
   ${prefix}-accordion-item,
-  ${prefix}-btn,
+  ${prefix}-button,
   ${prefix}-breadcrumb-link,
   ${prefix}-checkbox,
   ${prefix}-code-snippet,

package/lib/globals/settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.js","names":["prefix","exports","selectorTabbable"],"sources":["globals/settings.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst prefix = 'cds';\n\n/**\n * A selector selecting tabbable nodes.\n * Borrowed from `carbon-angular`. tabbable === focusable.\n */\nconst selectorTabbable = `\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true],\n  ${prefix}-accordion-item,\n  ${prefix}-btn,\n  ${prefix}-breadcrumb-link,\n  ${prefix}-checkbox,\n  ${prefix}-code-snippet,\n  ${prefix}-combo-box,\n  ${prefix}-content-switcher-item,\n  ${prefix}-copy-button,\n  ${prefix}-table-header-row,\n  ${prefix}-table-row,\n  ${prefix}-table-toolbar-search,\n  ${prefix}-date-picker-input,\n  ${prefix}-dropdown,\n  ${prefix}-input,\n  ${prefix}-link,\n  ${prefix}-number-input,\n  ${prefix}-modal,\n  ${prefix}-modal-close-button,\n  ${prefix}-multi-select,\n  ${prefix}-inline-notification,\n  ${prefix}-toast-notification,\n  ${prefix}-overflow-menu,\n  ${prefix}-overflow-menu-item,\n  ${prefix}-page-sizes-select,\n  ${prefix}-pages-select,\n  ${prefix}-progress-step,\n  ${prefix}-radio-button,\n  ${prefix}-search,\n  ${prefix}-slider,\n  ${prefix}-slider-input,\n  ${prefix}-structured-list,\n  ${prefix}-tab,\n  ${prefix}-filter-tag,\n  ${prefix}-textarea,\n  ${prefix}-clickable-tile,\n  ${prefix}-expandable-tile,\n  ${prefix}-radio-tile,\n  ${prefix}-selectable-tile,\n  ${prefix}-toggle,\n  ${prefix}-tooltip,\n  ${prefix}-tooltip-definition,\n  ${prefix}-tooltip-icon,\n  ${prefix}-header-menu,\n  ${prefix}-header-menu-button,\n  ${prefix}-header-menu-item,\n  ${prefix}-header-name,\n  ${prefix}-header-nav-item,\n  ${prefix}-side-nav-link,\n  ${prefix}-side-nav-menu,\n  ${prefix}-side-nav-menu-item\n`;\n\n// Because we're going to have a bunch of exports\nexport { prefix, selectorTabbable };\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMA,MAAM,GAAG,KAAK;;AAEpB;AACA;AACA;AACA;AAHAC,OAAA,CAAAD,MAAA,GAAAA,MAAA;AAIA,MAAME,gBAAgB,GAAI;AAC1B;AACA;AACA;AACA;AACA,IAAIF,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,CAAC;;AAED;AAAAC,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}
+{"version":3,"file":"settings.js","names":["prefix","exports","selectorTabbable"],"sources":["globals/settings.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst prefix = 'cds';\n\n/**\n * A selector selecting tabbable nodes.\n * Borrowed from `carbon-angular`. tabbable === focusable.\n */\nconst selectorTabbable = `\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true],\n  ${prefix}-accordion-item,\n  ${prefix}-button,\n  ${prefix}-breadcrumb-link,\n  ${prefix}-checkbox,\n  ${prefix}-code-snippet,\n  ${prefix}-combo-box,\n  ${prefix}-content-switcher-item,\n  ${prefix}-copy-button,\n  ${prefix}-table-header-row,\n  ${prefix}-table-row,\n  ${prefix}-table-toolbar-search,\n  ${prefix}-date-picker-input,\n  ${prefix}-dropdown,\n  ${prefix}-input,\n  ${prefix}-link,\n  ${prefix}-number-input,\n  ${prefix}-modal,\n  ${prefix}-modal-close-button,\n  ${prefix}-multi-select,\n  ${prefix}-inline-notification,\n  ${prefix}-toast-notification,\n  ${prefix}-overflow-menu,\n  ${prefix}-overflow-menu-item,\n  ${prefix}-page-sizes-select,\n  ${prefix}-pages-select,\n  ${prefix}-progress-step,\n  ${prefix}-radio-button,\n  ${prefix}-search,\n  ${prefix}-slider,\n  ${prefix}-slider-input,\n  ${prefix}-structured-list,\n  ${prefix}-tab,\n  ${prefix}-filter-tag,\n  ${prefix}-textarea,\n  ${prefix}-clickable-tile,\n  ${prefix}-expandable-tile,\n  ${prefix}-radio-tile,\n  ${prefix}-selectable-tile,\n  ${prefix}-toggle,\n  ${prefix}-tooltip,\n  ${prefix}-tooltip-definition,\n  ${prefix}-tooltip-icon,\n  ${prefix}-header-menu,\n  ${prefix}-header-menu-button,\n  ${prefix}-header-menu-item,\n  ${prefix}-header-name,\n  ${prefix}-header-nav-item,\n  ${prefix}-side-nav-link,\n  ${prefix}-side-nav-menu,\n  ${prefix}-side-nav-menu-item\n`;\n\n// Because we're going to have a bunch of exports\nexport { prefix, selectorTabbable };\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMA,MAAM,GAAG,KAAK;;AAEpB;AACA;AACA;AACA;AAHAC,OAAA,CAAAD,MAAA,GAAAA,MAAA;AAIA,MAAME,gBAAgB,GAAI;AAC1B;AACA;AACA;AACA;AACA,IAAIF,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,CAAC;;AAED;AAAAC,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}

package/lib/globals/wrappers/createReactCustomElementType.js

@@ -116,7 +116,7 @@ const attachEventListeners = (elem, descriptor, callback) => {
  * import { render } from 'react-dom';
  * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType';
  *
- * const BXDropdown = createCustomElementType(`${prefix}-dropdown`, {
+ * const CDSDropdown = createCustomElementType(`${prefix}-dropdown`, {
  *   disabled: {
  *     // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise
  *     serialize: booleanSerializer,
@@ -133,14 +133,14 @@ const attachEventListeners = (elem, descriptor, callback) => {
  *
  * render(
  *   (
- *     <BXDropdown
+ *     <CDSDropdown
  *       disabled={true}
  *       helperText="some-helper-text"
  *       onBeforeSelect={event => { console.log(`${prefix}-dropdown-beingselected is fired!`, event); }}>
  *       <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
  *       <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
  *       <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
- *     </BXDropdown>
+ *     </CDSDropdown>
  *   )
  *   document.body
  * );

package/lib/globals/wrappers/createReactCustomElementType.js.map

@@ -1 +1 @@
-{"version":3,"file":"createReactCustomElementType.js","names":["_react","require","_on","_interopRequireDefault","mergeRefs","refs","el","forEach","ref","Object","current","convertProp","prop","descriptor","event","serialize","undefined","convertProps","props","keys","reduce","acc","propName","descriptorItem","converted","attribute","_objectSpread2","default","attachEventListeners","elem","callback","handles","Set","eventDescriptor","name","options","add","on","release","handle","delete","createReactCustomElementType","nonAttributeProps","filter","CustomElementType","Component","constructor","args","_defineProperty2","listener","call","currentTarget","_elem","_eventListenersHandle","_handleEvent","updateProps","prevProps","prevValue","value","componentDidMount","componentDidUpdate","render","_this$props","children","innerRef","_objectWithoutProperties2","mergedRef","_handleElemRef","createElement","forwardRef","booleanSerializer","exports","numberSerializer","String","objectSerializer","JSON","stringify","_default"],"sources":["globals/wrappers/createReactCustomElementType.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React, { Component, createElement, forwardRef } from 'react';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport Handle from '../internal/handle';\n\n/**\n * A descriptor for a React event prop of a custom element.\n */\ninterface CustomElementEventDescriptor {\n  /**\n   * The event name.\n   */\n  name: string;\n\n  /**\n   * A boolean to detemine usage of capture mode or the event options.\n   */\n  options?: boolean | EventListenerOptions;\n}\n\n/**\n * A descriptor for a React prop for an attribute of a custom element.\n */\ninterface CustomElementPropDescriptor {\n  /**\n   * The attribute name for the prop.\n   */\n  attribute?: string | false;\n\n  /**\n   * The event name (or descriptor) for the prop.\n   */\n  event?: string | CustomElementEventDescriptor;\n\n  /**\n   * A function that takes a property value and returns the corresponding attribute value.\n   */\n  serialize?: (value: any) => string | void;\n}\n\n/**\n * A descriptor for a set of React props for attributes of a custom element.\n */\ninterface CustomElementPropsDescriptor {\n  [propName: string]: CustomElementPropDescriptor;\n}\n\n/**\n * React props for the component `createCustomElementType()` generates.\n */\ninterface CustomElementTypeProps {\n  /**\n   * Ordinal prop.\n   */\n  [propName: string]: any;\n\n  /**\n   * Child nodes.\n   */\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: React.ReactNode;\n}\n\n/**\n * @param refs List of React refs to merge.\n * @returns Merged React ref.\n */\nconst mergeRefs =\n  <T>(...refs: React.Ref<T>[]) =>\n  (el) => {\n    refs.forEach((ref) => {\n      // https://github.com/facebook/react/issues/13029#issuecomment-410002316\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (Object(ref) === ref) {\n        // `React.Ref.current` is read-only for regular use case, but we update it here\n        (ref as { current: T }).current = el;\n      }\n    });\n  };\n\n/**\n * @param prop A prop value.\n * @param descriptor A React prop descriptor.\n * @returns The corresponding attribute value for the given prop value.\n */\nconst convertProp = (prop: any, descriptor: CustomElementPropDescriptor) => {\n  if (!descriptor) {\n    return prop;\n  }\n  const { event, serialize } = descriptor;\n  if (event) {\n    // Events are not set as props, we use DOM `addEventListener()` instead\n    return undefined;\n  }\n  return !serialize ? prop : serialize(prop);\n};\n\n/**\n * @param props A set of React props.\n * @param descriptor A set of React prop desciptor.\n * @returns The set of React props to set to a custom element, corresponding to the given React props.\n */\nconst convertProps = (\n  props: CustomElementTypeProps,\n  descriptor: CustomElementPropsDescriptor\n) =>\n  Object.keys(props).reduce((acc, propName) => {\n    const { [propName]: descriptorItem } = descriptor;\n    const converted = convertProp(props[propName], descriptorItem);\n    const { attribute } = descriptorItem ?? {};\n    return attribute === false\n      ? acc\n      : {\n          ...acc,\n          [attribute || propName]: converted,\n        };\n  }, {});\n\n/**\n * Attaches listeners of custom events, to a custom element.\n *\n * @param elem The custom element.\n * @param descriptor An object, keyed by prop name, of data that may have custom event names.\n * @param callback A callback function that runs as the custom events fire.\n * @returns A handle that allows to release all event listeners attached.\n */\nconst attachEventListeners = (\n  elem: HTMLElement,\n  descriptor: CustomElementPropsDescriptor,\n  callback: (name: string, event: Event) => void\n): Handle => {\n  const handles = new Set<Handle>();\n  Object.keys(descriptor).forEach((propName) => {\n    if (descriptor[propName]) {\n      const { event: eventDescriptor } = descriptor[propName];\n      const name =\n        Object(eventDescriptor) !== eventDescriptor\n          ? (eventDescriptor as string)\n          : (eventDescriptor as CustomElementEventDescriptor).name;\n      const options =\n        Object(eventDescriptor) !== eventDescriptor\n          ? undefined\n          : (eventDescriptor as CustomElementEventDescriptor).options;\n      if (name) {\n        handles.add(\n          on(\n            elem,\n            name,\n            (event) => {\n              callback(propName, event);\n            },\n            options\n          )\n        );\n      }\n    }\n  });\n  return {\n    release() {\n      handles.forEach((handle) => {\n        handle.release();\n        handles.delete(handle);\n      });\n      return null;\n    },\n  };\n};\n\n/**\n * @param name The tag name of the custom element.\n * @param descriptor A descriptor for a set of React props for attributes of a custom element.\n * @returns A React component working as a wrapper for the given custom element.\n * @example\n * import { render } from 'react-dom';\n * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType';\n *\n * const BXDropdown = createCustomElementType(`${prefix}-dropdown`, {\n *   disabled: {\n *     // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise\n *     serialize: booleanSerializer,\n *   },\n *   helperText: {\n *     // Maps `helperText` React prop to `helper-text` attribute\n *     attribute: 'helper-text',\n *   },\n *   onBeforeSelect: {\n *     // Sets `onBeforeSelect` React prop value as a listener of `cds-dropdown-beingselected` custom event\n *     event: `${prefix}-dropdown-beingselected`,\n *   },\n * });\n *\n * render(\n *   (\n *     <BXDropdown\n *       disabled={true}\n *       helperText=\"some-helper-text\"\n *       onBeforeSelect={event => { console.log(`${prefix}-dropdown-beingselected is fired!`, event); }}>\n *       <cds-dropdown-item value=\"all\">Option 1</cds-dropdown-item>\n *       <cds-dropdown-item value=\"cloudFoundry\">Option 2</cds-dropdown-item>\n *       <cds-dropdown-item value=\"staging\">Option 3</cds-dropdown-item>\n *     </BXDropdown>\n *   )\n *   document.body\n * );\n */\nconst createReactCustomElementType = (\n  name: string,\n  descriptor: CustomElementPropsDescriptor\n) => {\n  /**\n   * Array of React prop names that should be mapped to DOM properties instead of attributes.\n   */\n  const nonAttributeProps = Object.keys(descriptor).filter((propName) => {\n    const { [propName]: descriptorItem } = descriptor;\n    const { attribute } = descriptorItem ?? {};\n    return attribute === false;\n  });\n\n  /**\n   * A React component working as a wrapper for the custom element.\n   */\n  class CustomElementType extends Component<CustomElementTypeProps> {\n    /**\n     * The element.\n     */\n    private _elem: HTMLElement | null = null;\n\n    /**\n     * The handle that allows to release all event listeners attached to this custom element.\n     */\n    private _eventListenersHandle: Handle | null = null;\n\n    /**\n     * The callback function that runs as the custom events fire.\n     *\n     * @param propName The React prop name associated with the event listener.\n     * @param event The event.\n     */\n    private _handleEvent = (propName: string, event: Event) => {\n      const { [propName]: listener } = this.props;\n      if (listener) {\n        listener.call(event.currentTarget, event);\n      }\n    };\n\n    /**\n     * Handles getting/losing the React `ref` object of this custom element.\n     *\n     * @param elem The custom element.\n     */\n    private _handleElemRef = (elem: HTMLElement) => {\n      this._elem = elem;\n      if (this._eventListenersHandle) {\n        this._eventListenersHandle.release();\n        this._eventListenersHandle = null;\n      }\n      if (elem) {\n        this._eventListenersHandle = attachEventListeners(\n          elem,\n          descriptor,\n          this._handleEvent\n        );\n      }\n    };\n\n    /**\n     * Reflects change in React props to DOM properties.\n     *\n     * @param prevProps The previous props.\n     */\n    updateProps(prevProps: { [key: string]: any } = {}) {\n      const { props, _elem: elem } = this;\n      nonAttributeProps.forEach((propName) => {\n        const { [propName]: prevValue } = prevProps;\n        const { [propName]: value } = props;\n        if (prevValue !== value) {\n          elem![propName] = value;\n        }\n      });\n    }\n\n    componentDidMount() {\n      this.updateProps();\n    }\n\n    componentDidUpdate(prevProps) {\n      this.updateProps(prevProps);\n    }\n\n    render() {\n      // eslint-disable-next-line react/prop-types\n      const { children, innerRef, ...props } = this.props;\n      const mergedRef = mergeRefs<HTMLElement>(innerRef, this._handleElemRef);\n      return createElement(\n        name,\n        { ref: mergedRef, ...convertProps(props, descriptor) },\n        children\n      );\n    }\n  }\n\n  return forwardRef<HTMLElement, CustomElementTypeProps>((props, ref) =>\n    createElement(CustomElementType, { ...props, innerRef: ref })\n  );\n};\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a boolean attribute in a custom element.\n */\nexport const booleanSerializer = (value) => (!value ? undefined : '');\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a number attribute in a custom element.\n */\nexport const numberSerializer = (value) =>\n  value == null ? value : String(value);\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a object attribute in a custom element.\n */\nexport const objectSerializer = (value) =>\n  value == null ? value : JSON.stringify(value);\n\nexport default createReactCustomElementType;\n"],"mappings":"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"}
+{"version":3,"file":"createReactCustomElementType.js","names":["_react","require","_on","_interopRequireDefault","mergeRefs","refs","el","forEach","ref","Object","current","convertProp","prop","descriptor","event","serialize","undefined","convertProps","props","keys","reduce","acc","propName","descriptorItem","converted","attribute","_objectSpread2","default","attachEventListeners","elem","callback","handles","Set","eventDescriptor","name","options","add","on","release","handle","delete","createReactCustomElementType","nonAttributeProps","filter","CustomElementType","Component","constructor","args","_defineProperty2","listener","call","currentTarget","_elem","_eventListenersHandle","_handleEvent","updateProps","prevProps","prevValue","value","componentDidMount","componentDidUpdate","render","_this$props","children","innerRef","_objectWithoutProperties2","mergedRef","_handleElemRef","createElement","forwardRef","booleanSerializer","exports","numberSerializer","String","objectSerializer","JSON","stringify","_default"],"sources":["globals/wrappers/createReactCustomElementType.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React, { Component, createElement, forwardRef } from 'react';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport Handle from '../internal/handle';\n\n/**\n * A descriptor for a React event prop of a custom element.\n */\ninterface CustomElementEventDescriptor {\n  /**\n   * The event name.\n   */\n  name: string;\n\n  /**\n   * A boolean to detemine usage of capture mode or the event options.\n   */\n  options?: boolean | EventListenerOptions;\n}\n\n/**\n * A descriptor for a React prop for an attribute of a custom element.\n */\ninterface CustomElementPropDescriptor {\n  /**\n   * The attribute name for the prop.\n   */\n  attribute?: string | false;\n\n  /**\n   * The event name (or descriptor) for the prop.\n   */\n  event?: string | CustomElementEventDescriptor;\n\n  /**\n   * A function that takes a property value and returns the corresponding attribute value.\n   */\n  serialize?: (value: any) => string | void;\n}\n\n/**\n * A descriptor for a set of React props for attributes of a custom element.\n */\ninterface CustomElementPropsDescriptor {\n  [propName: string]: CustomElementPropDescriptor;\n}\n\n/**\n * React props for the component `createCustomElementType()` generates.\n */\ninterface CustomElementTypeProps {\n  /**\n   * Ordinal prop.\n   */\n  [propName: string]: any;\n\n  /**\n   * Child nodes.\n   */\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: React.ReactNode;\n}\n\n/**\n * @param refs List of React refs to merge.\n * @returns Merged React ref.\n */\nconst mergeRefs =\n  <T>(...refs: React.Ref<T>[]) =>\n  (el) => {\n    refs.forEach((ref) => {\n      // https://github.com/facebook/react/issues/13029#issuecomment-410002316\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (Object(ref) === ref) {\n        // `React.Ref.current` is read-only for regular use case, but we update it here\n        (ref as { current: T }).current = el;\n      }\n    });\n  };\n\n/**\n * @param prop A prop value.\n * @param descriptor A React prop descriptor.\n * @returns The corresponding attribute value for the given prop value.\n */\nconst convertProp = (prop: any, descriptor: CustomElementPropDescriptor) => {\n  if (!descriptor) {\n    return prop;\n  }\n  const { event, serialize } = descriptor;\n  if (event) {\n    // Events are not set as props, we use DOM `addEventListener()` instead\n    return undefined;\n  }\n  return !serialize ? prop : serialize(prop);\n};\n\n/**\n * @param props A set of React props.\n * @param descriptor A set of React prop desciptor.\n * @returns The set of React props to set to a custom element, corresponding to the given React props.\n */\nconst convertProps = (\n  props: CustomElementTypeProps,\n  descriptor: CustomElementPropsDescriptor\n) =>\n  Object.keys(props).reduce((acc, propName) => {\n    const { [propName]: descriptorItem } = descriptor;\n    const converted = convertProp(props[propName], descriptorItem);\n    const { attribute } = descriptorItem ?? {};\n    return attribute === false\n      ? acc\n      : {\n          ...acc,\n          [attribute || propName]: converted,\n        };\n  }, {});\n\n/**\n * Attaches listeners of custom events, to a custom element.\n *\n * @param elem The custom element.\n * @param descriptor An object, keyed by prop name, of data that may have custom event names.\n * @param callback A callback function that runs as the custom events fire.\n * @returns A handle that allows to release all event listeners attached.\n */\nconst attachEventListeners = (\n  elem: HTMLElement,\n  descriptor: CustomElementPropsDescriptor,\n  callback: (name: string, event: Event) => void\n): Handle => {\n  const handles = new Set<Handle>();\n  Object.keys(descriptor).forEach((propName) => {\n    if (descriptor[propName]) {\n      const { event: eventDescriptor } = descriptor[propName];\n      const name =\n        Object(eventDescriptor) !== eventDescriptor\n          ? (eventDescriptor as string)\n          : (eventDescriptor as CustomElementEventDescriptor).name;\n      const options =\n        Object(eventDescriptor) !== eventDescriptor\n          ? undefined\n          : (eventDescriptor as CustomElementEventDescriptor).options;\n      if (name) {\n        handles.add(\n          on(\n            elem,\n            name,\n            (event) => {\n              callback(propName, event);\n            },\n            options\n          )\n        );\n      }\n    }\n  });\n  return {\n    release() {\n      handles.forEach((handle) => {\n        handle.release();\n        handles.delete(handle);\n      });\n      return null;\n    },\n  };\n};\n\n/**\n * @param name The tag name of the custom element.\n * @param descriptor A descriptor for a set of React props for attributes of a custom element.\n * @returns A React component working as a wrapper for the given custom element.\n * @example\n * import { render } from 'react-dom';\n * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType';\n *\n * const CDSDropdown = createCustomElementType(`${prefix}-dropdown`, {\n *   disabled: {\n *     // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise\n *     serialize: booleanSerializer,\n *   },\n *   helperText: {\n *     // Maps `helperText` React prop to `helper-text` attribute\n *     attribute: 'helper-text',\n *   },\n *   onBeforeSelect: {\n *     // Sets `onBeforeSelect` React prop value as a listener of `cds-dropdown-beingselected` custom event\n *     event: `${prefix}-dropdown-beingselected`,\n *   },\n * });\n *\n * render(\n *   (\n *     <CDSDropdown\n *       disabled={true}\n *       helperText=\"some-helper-text\"\n *       onBeforeSelect={event => { console.log(`${prefix}-dropdown-beingselected is fired!`, event); }}>\n *       <cds-dropdown-item value=\"all\">Option 1</cds-dropdown-item>\n *       <cds-dropdown-item value=\"cloudFoundry\">Option 2</cds-dropdown-item>\n *       <cds-dropdown-item value=\"staging\">Option 3</cds-dropdown-item>\n *     </CDSDropdown>\n *   )\n *   document.body\n * );\n */\nconst createReactCustomElementType = (\n  name: string,\n  descriptor: CustomElementPropsDescriptor\n) => {\n  /**\n   * Array of React prop names that should be mapped to DOM properties instead of attributes.\n   */\n  const nonAttributeProps = Object.keys(descriptor).filter((propName) => {\n    const { [propName]: descriptorItem } = descriptor;\n    const { attribute } = descriptorItem ?? {};\n    return attribute === false;\n  });\n\n  /**\n   * A React component working as a wrapper for the custom element.\n   */\n  class CustomElementType extends Component<CustomElementTypeProps> {\n    /**\n     * The element.\n     */\n    private _elem: HTMLElement | null = null;\n\n    /**\n     * The handle that allows to release all event listeners attached to this custom element.\n     */\n    private _eventListenersHandle: Handle | null = null;\n\n    /**\n     * The callback function that runs as the custom events fire.\n     *\n     * @param propName The React prop name associated with the event listener.\n     * @param event The event.\n     */\n    private _handleEvent = (propName: string, event: Event) => {\n      const { [propName]: listener } = this.props;\n      if (listener) {\n        listener.call(event.currentTarget, event);\n      }\n    };\n\n    /**\n     * Handles getting/losing the React `ref` object of this custom element.\n     *\n     * @param elem The custom element.\n     */\n    private _handleElemRef = (elem: HTMLElement) => {\n      this._elem = elem;\n      if (this._eventListenersHandle) {\n        this._eventListenersHandle.release();\n        this._eventListenersHandle = null;\n      }\n      if (elem) {\n        this._eventListenersHandle = attachEventListeners(\n          elem,\n          descriptor,\n          this._handleEvent\n        );\n      }\n    };\n\n    /**\n     * Reflects change in React props to DOM properties.\n     *\n     * @param prevProps The previous props.\n     */\n    updateProps(prevProps: { [key: string]: any } = {}) {\n      const { props, _elem: elem } = this;\n      nonAttributeProps.forEach((propName) => {\n        const { [propName]: prevValue } = prevProps;\n        const { [propName]: value } = props;\n        if (prevValue !== value) {\n          elem![propName] = value;\n        }\n      });\n    }\n\n    componentDidMount() {\n      this.updateProps();\n    }\n\n    componentDidUpdate(prevProps) {\n      this.updateProps(prevProps);\n    }\n\n    render() {\n      // eslint-disable-next-line react/prop-types\n      const { children, innerRef, ...props } = this.props;\n      const mergedRef = mergeRefs<HTMLElement>(innerRef, this._handleElemRef);\n      return createElement(\n        name,\n        { ref: mergedRef, ...convertProps(props, descriptor) },\n        children\n      );\n    }\n  }\n\n  return forwardRef<HTMLElement, CustomElementTypeProps>((props, ref) =>\n    createElement(CustomElementType, { ...props, innerRef: ref })\n  );\n};\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a boolean attribute in a custom element.\n */\nexport const booleanSerializer = (value) => (!value ? undefined : '');\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a number attribute in a custom element.\n */\nexport const numberSerializer = (value) =>\n  value == null ? value : String(value);\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a object attribute in a custom element.\n */\nexport const objectSerializer = (value) =>\n  value == null ? value : JSON.stringify(value);\n\nexport default createReactCustomElementType;\n"],"mappings":";;;;;;;;;;AASA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,GAAA,GAAAC,sBAAA,CAAAF,OAAA;AAVA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgEA;AACA;AACA;AACA;AACA,MAAMG,SAAS,GACbA,CAAI,GAAGC,IAAoB,KAC1BC,EAAE,IAAK;EACND,IAAI,CAACE,OAAO,CAAEC,GAAG,IAAK;IACpB;IACA,IAAI,OAAOA,GAAG,KAAK,UAAU,EAAE;MAC7BA,GAAG,CAACF,EAAE,CAAC;IACT,CAAC,MAAM,IAAIG,MAAM,CAACD,GAAG,CAAC,KAAKA,GAAG,EAAE;MAC9B;MACCA,GAAG,CAAoBE,OAAO,GAAGJ,EAAE;IACtC;EACF,CAAC,CAAC;AACJ,CAAC;;AAEH;AACA;AACA;AACA;AACA;AACA,MAAMK,WAAW,GAAGA,CAACC,IAAS,EAAEC,UAAuC,KAAK;EAC1E,IAAI,CAACA,UAAU,EAAE;IACf,OAAOD,IAAI;EACb;EACA,MAAM;IAAEE,KAAK;IAAEC;EAAU,CAAC,GAAGF,UAAU;EACvC,IAAIC,KAAK,EAAE;IACT;IACA,OAAOE,SAAS;EAClB;EACA,OAAO,CAACD,SAAS,GAAGH,IAAI,GAAGG,SAAS,CAACH,IAAI,CAAC;AAC5C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMK,YAAY,GAAGA,CACnBC,KAA6B,EAC7BL,UAAwC,KAExCJ,MAAM,CAACU,IAAI,CAACD,KAAK,CAAC,CAACE,MAAM,CAAC,CAACC,GAAG,EAAEC,QAAQ,KAAK;EAC3C,MAAM;IAAE,CAACA,QAAQ,GAAGC;EAAe,CAAC,GAAGV,UAAU;EACjD,MAAMW,SAAS,GAAGb,WAAW,CAACO,KAAK,CAACI,QAAQ,CAAC,EAAEC,cAAc,CAAC;EAC9D,MAAM;IAAEE;EAAU,CAAC,GAAGF,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,CAAC,CAAC;EAC1C,OAAOE,SAAS,KAAK,KAAK,GACtBJ,GAAG,OAAAK,cAAA,CAAAC,OAAA,MAAAD,cAAA,CAAAC,OAAA,MAEEN,GAAG;IACN,CAACI,SAAS,IAAIH,QAAQ,GAAGE;EAAS,EACnC;AACP,CAAC,EAAE,CAAC,CAAC,CAAC;;AAER;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,oBAAoB,GAAGA,CAC3BC,IAAiB,EACjBhB,UAAwC,EACxCiB,QAA8C,KACnC;EACX,MAAMC,OAAO,GAAG,IAAIC,GAAG,EAAU;EACjCvB,MAAM,CAACU,IAAI,CAACN,UAAU,CAAC,CAACN,OAAO,CAAEe,QAAQ,IAAK;IAC5C,IAAIT,UAAU,CAACS,QAAQ,CAAC,EAAE;MACxB,MAAM;QAAER,KAAK,EAAEmB;MAAgB,CAAC,GAAGpB,UAAU,CAACS,QAAQ,CAAC;MACvD,MAAMY,IAAI,GACRzB,MAAM,CAACwB,eAAe,CAAC,KAAKA,eAAe,GACtCA,eAAe,GACfA,eAAe,CAAkCC,IAAI;MAC5D,MAAMC,OAAO,GACX1B,MAAM,CAACwB,eAAe,CAAC,KAAKA,eAAe,GACvCjB,SAAS,GACRiB,eAAe,CAAkCE,OAAO;MAC/D,IAAID,IAAI,EAAE;QACRH,OAAO,CAACK,GAAG,CACT,IAAAC,WAAE,EACAR,IAAI,EACJK,IAAI,EACHpB,KAAK,IAAK;UACTgB,QAAQ,CAACR,QAAQ,EAAER,KAAK,CAAC;QAC3B,CAAC,EACDqB,OAAO,CACR,CACF;MACH;IACF;EACF,CAAC,CAAC;EACF,OAAO;IACLG,OAAOA,CAAA,EAAG;MACRP,OAAO,CAACxB,OAAO,CAAEgC,MAAM,IAAK;QAC1BA,MAAM,CAACD,OAAO,EAAE;QAChBP,OAAO,CAACS,MAAM,CAACD,MAAM,CAAC;MACxB,CAAC,CAAC;MACF,OAAO,IAAI;IACb;EACF,CAAC;AACH,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,4BAA4B,GAAGA,CACnCP,IAAY,EACZrB,UAAwC,KACrC;EACH;AACF;AACA;EACE,MAAM6B,iBAAiB,GAAGjC,MAAM,CAACU,IAAI,CAACN,UAAU,CAAC,CAAC8B,MAAM,CAAErB,QAAQ,IAAK;IACrE,MAAM;MAAE,CAACA,QAAQ,GAAGC;IAAe,CAAC,GAAGV,UAAU;IACjD,MAAM;MAAEY;IAAU,CAAC,GAAGF,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,CAAC,CAAC;IAC1C,OAAOE,SAAS,KAAK,KAAK;EAC5B,CAAC,CAAC;;EAEF;AACF;AACA;EACE,MAAMmB,iBAAiB,SAASC,gBAAS,CAAyB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAChE;AACJ;AACA;MAFI,IAAAC,gBAAA,CAAArB,OAAA,iBAGoC,IAAI;MAExC;AACJ;AACA;MAFI,IAAAqB,gBAAA,CAAArB,OAAA,iCAG+C,IAAI;MAEnD;AACJ;AACA;AACA;AACA;AACA;MALI,IAAAqB,gBAAA,CAAArB,OAAA,wBAMuB,CAACL,QAAgB,EAAER,KAAY,KAAK;QACzD,MAAM;UAAE,CAACQ,QAAQ,GAAG2B;QAAS,CAAC,GAAG,IAAI,CAAC/B,KAAK;QAC3C,IAAI+B,QAAQ,EAAE;UACZA,QAAQ,CAACC,IAAI,CAACpC,KAAK,CAACqC,aAAa,EAAErC,KAAK,CAAC;QAC3C;MACF,CAAC;MAED;AACJ;AACA;AACA;AACA;MAJI,IAAAkC,gBAAA,CAAArB,OAAA,0BAK0BE,IAAiB,IAAK;QAC9C,IAAI,CAACuB,KAAK,GAAGvB,IAAI;QACjB,IAAI,IAAI,CAACwB,qBAAqB,EAAE;UAC9B,IAAI,CAACA,qBAAqB,CAACf,OAAO,EAAE;UACpC,IAAI,CAACe,qBAAqB,GAAG,IAAI;QACnC;QACA,IAAIxB,IAAI,EAAE;UACR,IAAI,CAACwB,qBAAqB,GAAGzB,oBAAoB,CAC/CC,IAAI,EACJhB,UAAU,EACV,IAAI,CAACyC,YAAY,CAClB;QACH;MACF,CAAC;IAAA;IAED;AACJ;AACA;AACA;AACA;IACIC,WAAWA,CAACC,SAAiC,GAAG,CAAC,CAAC,EAAE;MAClD,MAAM;QAAEtC,KAAK;QAAEkC,KAAK,EAAEvB;MAAK,CAAC,GAAG,IAAI;MACnCa,iBAAiB,CAACnC,OAAO,CAAEe,QAAQ,IAAK;QACtC,MAAM;UAAE,CAACA,QAAQ,GAAGmC;QAAU,CAAC,GAAGD,SAAS;QAC3C,MAAM;UAAE,CAAClC,QAAQ,GAAGoC;QAAM,CAAC,GAAGxC,KAAK;QACnC,IAAIuC,SAAS,KAAKC,KAAK,EAAE;UACvB7B,IAAI,CAAEP,QAAQ,CAAC,GAAGoC,KAAK;QACzB;MACF,CAAC,CAAC;IACJ;IAEAC,iBAAiBA,CAAA,EAAG;MAClB,IAAI,CAACJ,WAAW,EAAE;IACpB;IAEAK,kBAAkBA,CAACJ,SAAS,EAAE;MAC5B,IAAI,CAACD,WAAW,CAACC,SAAS,CAAC;IAC7B;IAEAK,MAAMA,CAAA,EAAG;MACP;MACA,MAAAC,WAAA,GAAyC,IAAI,CAAC5C,KAAK;QAA7C;UAAE6C,QAAQ;UAAEC;QAAmB,CAAC,GAAAF,WAAA;QAAP5C,KAAK,OAAA+C,yBAAA,CAAAtC,OAAA,EAAAmC,WAAA;MACpC,MAAMI,SAAS,GAAG9D,SAAS,CAAc4D,QAAQ,EAAE,IAAI,CAACG,cAAc,CAAC;MACvE,OAAO,IAAAC,oBAAa,EAClBlC,IAAI,MAAAR,cAAA,CAAAC,OAAA;QACFnB,GAAG,EAAE0D;MAAS,GAAKjD,YAAY,CAACC,KAAK,EAAEL,UAAU,CAAC,GACpDkD,QAAQ,CACT;IACH;EACF;EAEA,OAAO,IAAAM,iBAAU,EAAsC,CAACnD,KAAK,EAAEV,GAAG,KAChE,IAAA4D,oBAAa,EAACxB,iBAAiB,MAAAlB,cAAA,CAAAC,OAAA,MAAAD,cAAA,CAAAC,OAAA,MAAOT,KAAK;IAAE8C,QAAQ,EAAExD;EAAG,GAAG,CAC9D;AACH,CAAC;;AAED;AACA;AACA;AACA;AACO,MAAM8D,iBAAiB,GAAIZ,KAAK,IAAM,CAACA,KAAK,GAAG1C,SAAS,GAAG,EAAG;;AAErE;AACA;AACA;AACA;AAHAuD,OAAA,CAAAD,iBAAA,GAAAA,iBAAA;AAIO,MAAME,gBAAgB,GAAId,KAAK,IACpCA,KAAK,IAAI,IAAI,GAAGA,KAAK,GAAGe,MAAM,CAACf,KAAK,CAAC;;AAEvC;AACA;AACA;AACA;AAHAa,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AAIO,MAAME,gBAAgB,GAAIhB,KAAK,IACpCA,KAAK,IAAI,IAAI,GAAGA,KAAK,GAAGiB,IAAI,CAACC,SAAS,CAAClB,KAAK,CAAC;AAACa,OAAA,CAAAG,gBAAA,GAAAA,gBAAA;AAAA,IAAAG,QAAA,GAEjCpC,4BAA4B;AAAA8B,OAAA,CAAA5C,OAAA,GAAAkD,QAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -34,17 +34,18 @@
     "build": "gulp build && yarn wca",
     "build:dist": "gulp build:dist",
     "build:dist:dev": "gulp build:dist:dev",
+    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider BABEL_ENV=es build-storybook",
     "ci-check": "yarn wca && yarn typecheck && yarn build && yarn test:unit",
     "clean": "gulp clean",
     "reset": "yarn cache clean && yarn clean && rimraf node_modules && yarn install && yarn build",
     "start": "yarn storybook",
-    "storybook": "start-storybook -p 9000",
+    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9000",
     "test": "gulp test && yarn test:integration",
     "test:integration": "yarn test:integration:build && yarn test:integration:ui",
     "test:integration:build": "jest -c tests/integration/build/jest.config.js --runInBand",
     "test:integration:ui": "jest -c tests/integration/ui/jest.config.js --runInBand",
-    "test:unit": "gulp test:unit",
-    "test:unit:updateSnapshot": "gulp test:unit --update-snapshot",
+    "test:unit": "cross-env NODE_OPTIONS=--openssl-legacy-provider gulp test:unit",
+    "test:unit:updateSnapshot": "NODE_OPTIONS=--openssl-legacy-provider gulp test:unit --update-snapshot",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "visual-snapshot": "yarn build-storybook && percy storybook ./storybook-static",
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
@@ -68,8 +69,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "^1.19.0",
-    "flatpickr": "4.6.13",
+    "@carbon/styles": "^1.27.0",
+    "flatpickr": "4.6.1",
     "lit": "^2.6.0",
     "lodash-es": "^4.17.21"
   },
@@ -89,8 +90,8 @@
     "@babel/preset-modules": "~0.1.5",
     "@babel/template": "~7.12.0",
     "@babel/traverse": "~7.12.0",
-    "@carbon/icon-helpers": "^10.28.0",
-    "@carbon/icons": "^10.48.0",
+    "@carbon/icon-helpers": "^10.39.0",
+    "@carbon/icons": "^11.18.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.8.1",
@@ -101,13 +102,12 @@
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/pluginutils": "^4.2.0",
+    "@storybook/addon-a11y": "^6.5.15",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-docs": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.15",
     "@storybook/addon-storysource": "^6.5.15",
-    "@storybook/source-loader": "^6.5.15",
     "@storybook/web-components": "^6.5.15",
     "@types/bluebird": "^3.5.36",
     "@types/jasmine": "^3.10.2",
@@ -154,7 +154,6 @@
     "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-typescript": "^5.0.1",
-    "http-server": "~14.1.0",
     "is-plain-obj": "^2.1.0",
     "is-port-reachable": "^3.1.0",
     "istanbul-instrumenter-loader": "^3.0.1",

package/scss/components/accordion/accordion.scss

@@ -13,28 +13,24 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/accordion';
 
-:host(#{$prefix}-accordion) {
+:host(#{$prefix}-accordion),
+:host(#{$prefix}-accordion-skeleton) {
   @extend .#{$prefix}--accordion;
 }
 
-:host(#{$prefix}-accordion-item) {
+:host(#{$prefix}-accordion-item),
+:host(#{$prefix}-accordion-item-skeleton) {
   @extend .#{$prefix}--accordion__item;
 
   display: block;
   outline: none;
-
-  .#{$prefix}--accordion__heading {
-    padding-top: calc(
-      (#{$spacing-08} - #{map-get($body-long-01, 'line-height')}rem) / 2
-    );
-    min-height: $spacing-08;
-  }
-
   .#{$prefix}--accordion__content {
     @extend .#{$prefix}--accordion__content;
 
     ::slotted(p) {
       @include type-style('body-01');
+
+      margin: 0;
     }
   }
 
@@ -55,6 +51,14 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-accordion-item[expanding]) {
+  @extend .#{$prefix}--accordion__item--expanding;
+}
+
+:host(#{$prefix}-accordion-item[collapsing]) {
+  @extend .#{$prefix}--accordion__item--collapsing;
+}
+
 :host(#{$prefix}-accordion-item[open]:not([disabled])) {
   @extend .#{$prefix}--accordion__item--active;
 
@@ -70,3 +74,13 @@ $css--plex: true !default;
     padding-right: 25%;
   }
 }
+
+:host(#{$prefix}-accordion-skeleton),
+:host(#{$prefix}-accordion-item-skeleton) {
+  .#{$prefix}--accordion__heading {
+    cursor: default;
+    &:hover::before {
+      background: transparent;
+    }
+  }
+}

package/scss/components/breadcrumb/breadcrumb.scss

@@ -14,11 +14,13 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/breadcrumb';
 @import '../overflow-menu/overflow-menu';
 
-:host(#{$prefix}-breadcrumb) {
+:host(#{$prefix}-breadcrumb),
+:host(#{$prefix}-breadcrumb-skeleton) {
   @extend .#{$prefix}--breadcrumb;
 }
 
-:host(#{$prefix}-breadcrumb-item) {
+:host(#{$prefix}-breadcrumb-item),
+:host(#{$prefix}-breadcrumb-item-skeleton) {
   @extend .#{$prefix}--breadcrumb-item;
 }
 
@@ -66,7 +68,8 @@ $css--plex: true !default;
   fill: $link-primary-hover;
 }
 
-:host(#{$prefix}-breadcrumb-item:last-of-type)::after {
+:host(#{$prefix}-breadcrumb[no-trailing-slash])
+  ::slotted(#{$prefix}-breadcrumb-item:last-of-type)::after {
   content: '';
 }
 

package/scss/components/button/button.scss

@@ -10,52 +10,34 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/popover/index';
+@use '@carbon/styles/scss/components/tooltip';
 
-:host(#{$prefix}-btn),
+:host(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
   display: inline-flex;
-  max-width: rem(320px);
-  outline: none;
-
-  .#{$prefix}--btn {
-    flex-grow: 1;
-    max-width: 100%;
-  }
-
-  ::slotted([slot='icon']) {
-    fill: currentColor;
-    position: absolute;
-    right: rem(16px);
-    flex-shrink: 0;
-  }
 
   &[isExpressive] ::slotted([slot='icon']) {
     width: rem(20px);
     height: rem(20px);
   }
+}
 
-  &[icon-layout='condensed'] .#{$prefix}--btn {
-    padding-right: rem(39px);
-  }
-
-  .#{$prefix}--btn--icon-only ::slotted([slot='icon']) {
-    position: static;
-  }
+:host(#{$prefix}-button[kind='ghost']:hover) .#{$prefix}--btn--ghost,
+:host(#{$prefix}-button[kind='ghost']) .#{$prefix}--btn--ghost:active {
+  outline: none;
+}
 
-  &[kind='ghost'],
-  &[kind='danger-ghost'] {
-    ::slotted([slot='icon']) {
-      position: static;
-      margin-left: rem(8px);
-    }
+:host(#{$prefix}-button-set) {
+  @extend .#{$prefix}--btn-set;
 
-    &[icon-layout='condensed'] .#{$prefix}--btn {
-      padding-right: rem(16px);
-    }
+  ::slotted(#{$prefix}-button) {
+    width: 100%;
+    // 196px from design kit
+    max-width: rem(196px);
   }
-}
 
-:host(#{$prefix}-btn[kind='ghost']:hover) .#{$prefix}--btn--ghost,
-:host(#{$prefix}-btn[kind='ghost']) .#{$prefix}--btn--ghost:active {
-  outline: none;
+  &[stacked] {
+    @extend .#{$prefix}--btn-set--stacked;
+  }
 }