@descope-ui/descope-multi-select-combo-box 3.9.0

package/src/theme.js

@@ -0,0 +1,90 @@
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+
+import themeGlobals from '@descope-ui/theme-globals';
+import { refs } from '@descope-ui/theme-input-wrapper';
+
+import { MultiSelectComboBoxClass } from '@descope-ui/descope-multi-select-combo-box/class';
+
+const globalRefs = getThemeRefs(themeGlobals);
+const vars = MultiSelectComboBoxClass.cssVarList;
+
+export const multiSelectComboBox = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelFontSize]: refs.labelFontSize,
+  [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars.inputBackgroundColor]: refs.backgroundColor,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputVerticalPadding]: refs.verticalPadding,
+  [vars.inputHeight]: refs.inputHeight,
+  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,
+  [vars.inputDropdownButtonCursor]: 'pointer',
+  [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
+  [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
+  [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
+  [vars.chipFontSize]: refs.chipFontSize,
+  [vars.chipTextColor]: globalRefs.colors.surface.contrast,
+  [vars.chipBackgroundColor]: globalRefs.colors.surface.light,
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelLeftPosition]: refs.labelLeftPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars.errorMessageFontSize]: refs.errorMessageFontSize,
+
+  labelType: {
+    floating: {
+      [vars.inputHorizontalPadding]: '0.25em',
+      _hasValue: {
+        [vars.inputHorizontalPadding]: '0.45em',
+      },
+    },
+  },
+
+  _readonly: {
+    [vars.inputDropdownButtonCursor]: 'default',
+  },
+
+  [vars.overlayFontSize]: refs.fontSize,
+  [vars.overlayFontFamily]: refs.fontFamily,
+  [vars.overlayCursor]: 'pointer',
+  [vars.overlayItemBoxShadow]: 'none',
+  [vars.overlayBackground]: refs.backgroundColor,
+  [vars.overlayTextColor]: refs.valueTextColor,
+
+  [vars.overlay.minHeight]: '400px',
+  [vars.overlay.margin]: '0',
+};
+
+export default multiSelectComboBox;
+export { vars };

package/stories/descope-multi-select-combo-box.stories.js

@@ -0,0 +1,192 @@
+import { componentName } from '../src/component';
+import {
+  toggleDefaultErrorMessageValueMissingDecorator,
+  withForm,
+} from '@descope-ui/common/sb-helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  minItemsSelectionControl,
+  maxItemsSelectionControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  overrideRenderItemControl,
+  itemsSourceControl,
+  inputLabelTypeControl,
+  errorPatternMismatchControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+} from '@descope-ui/common/sb-controls';
+
+const altRenderItem = ({ displayName, label, value }) =>
+  `<span data-name="${displayName}" data-id="${value}">${label}</span>`;
+
+const Template = ({
+  'allow-custom-value': allowCustomValue,
+  label,
+  placeholder,
+  size,
+  bordered,
+  'full-width': fullWidth,
+  readonly,
+  required,
+  direction,
+  disabled,
+  data,
+  itemsSource,
+  minItemsSelection,
+  maxItemsSelection,
+  pattern,
+  'default-values': defaultValues,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
+  'ignore-data': ignoreData,
+  'label-type': labelType,
+  errorMsgIcon,
+}) => {
+  let serializedData;
+  let serializedDefaultValues;
+
+  try {
+    serializedData = JSON.stringify(data);
+    serializedDefaultValues = JSON.stringify(defaultValues);
+  } catch {
+    // do nothing
+  }
+
+  if (ignoreData) {
+    serializedData = '[]';
+  }
+
+  return `
+    <descope-multi-select-combo-box
+      clear-button-visible
+      data='${(itemsSource === 'attr' && serializedData) || ''}'
+      size="${size}"
+      bordered="${bordered}"
+      item-label-path="data-name"
+      item-value-path="data-id"
+      label="${label || ''}"
+      placeholder="${placeholder || ''}"
+      default-values='${serializedDefaultValues || ''}'
+      required="${required || false}"
+      full-width="${fullWidth || false}"
+      readonly="${readonly || false}"
+      disabled="${disabled || false}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      data-errormessage-pattern-mismatch="${customErrorPatternMismatch || ''}"
+      st-host-direction="${direction ?? ''}"
+      allow-custom-value="${allowCustomValue || false}"
+      min-items-selection="${minItemsSelection || ''}"
+      max-items-selection="${maxItemsSelection || ''}"
+      label-type="${labelType || ''}"
+      pattern="${pattern || ''}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    >
+    ${
+      itemsSource === 'children'
+        ? `
+        <span data-name="ItemName1" data-id="itemId1">Trojan War Heroes' Valor</span>
+        <span data-name="ItemName2" data-id="itemId2">Achilles' Fateful Wrath</span>
+        <span data-name="ItemName3" data-id="itemId3">Epic Battle of Gods</span>
+        <span data-name="ItemName4" data-id="itemId4">Hector's Brave Sacrifice</span>
+        <span data-name="ItemName5" data-id="itemId5">Trojan Horse Deception</span>
+        <span data-name="ItemName6" data-id="itemId6">Agamemnon's Royal Command</span>
+        <span data-name="ItemName7" data-id="itemId7">Odysseus' Cunning Strategy</span>
+        <span data-name="ItemName8" data-id="itemId8">Helen's Beauty's Curse</span>
+        <span data-name="ItemName9" data-id="itemId9">Achilles' Heel Weakness</span>
+        <span data-name="ItemName10" data-id="itemId10">Epic Poem of Ancient</span>
+      `
+        : ''
+    }
+    </descope-multi-select-combo-box>
+  `;
+};
+
+const allowCustomValueControl = {
+  'allow-custom-value': {
+    name: 'Allow Custom Values',
+    control: { type: 'boolean' },
+  },
+};
+
+export default {
+  component: componentName,
+  title: 'descope-multi-select-combo-box',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const element = document.querySelector(
+          'descope-multi-select-combo-box',
+        );
+        if (!element) {
+          return;
+        }
+
+        if (args.itemsSource === 'prop') {
+          element.data = args.data;
+        }
+
+        if (args.overrideRenderItem) {
+          element.renderItem = altRenderItem;
+        }
+      });
+      return story();
+    },
+    toggleDefaultErrorMessageValueMissingDecorator,
+    withForm,
+  ],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...errorPatternMismatchControl,
+    ...overrideRenderItemControl,
+    ...itemsSourceControl,
+    ...allowCustomValueControl,
+    ...minItemsSelectionControl,
+    ...maxItemsSelectionControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    'default-values': {
+      name: 'Default Values',
+      control: { type: 'object' },
+    },
+    'ignore-data': {
+      name: 'Ignore Data Value',
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  itemsSource: 'children',
+  data: [
+    { displayName: 'Item1', value: '1', label: 'data item 1' },
+    { displayName: 'Item2', value: 'itemId2', label: 'data item 2' },
+    { displayName: 'Item3', value: '3', label: 'data item 3' },
+    { displayName: 'Item4', value: '4', label: 'data item 4' },
+  ],
+  pattern: '',
+  'data-errormessage-value-missing': 'Please fill out this field.',
+  'data-errormessage-pattern-mismatch': 'Please match the requested format.',
+};