@cleartrip/ct-design-chip-dropdown 4.0.0 → 5.0.0

package/src/ChipDropdown.tsx

@@ -0,0 +1,119 @@
+import { FC, useEffect, useRef, useState } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+import { Chip } from '@cleartrip/ct-design-chip';
+import { Dropdown, Item } from '@cleartrip/ct-design-dropdown';
+import { OutsideClickHandler } from '@cleartrip/ct-design-outside-click-handler';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { ChipArrowDownSmall } from '@cleartrip/ct-design-icons';
+import { IconPosition } from '@cleartrip/ct-design-types';
+
+import { IChipDropdownProps } from './type';
+import staticStyles, { getChipArrowRotationWeb } from './style';
+
+const ChipDropdown: FC<IChipDropdownProps> = ({
+  optionList,
+  isDefaultOptionSelected = true,
+  defaultChipLabel = '',
+  selectedOption = '',
+  showDropdown = false,
+  onClick,
+  dropdownHeight = 500,
+  chipArrowDownIconProps,
+  styleConfig,
+}) => {
+  const chipRef = useRef(false);
+  const [isActiveChip, setIsActiveChip] = useState(true);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(showDropdown);
+  const theme = useTheme();
+
+  const {
+    root: rootStyles = [],
+    chip: chipStyleConfig,
+    dropdownContainer: dropdownContainerStyles = [],
+    dropdown: dropdownStyleConfig,
+    chipArrowWrapper: chipArrowWrapperStyles = [],
+  } = styleConfig || {};
+
+  const dynamicStyles = useStyles(
+    () => ({
+      chipArrowWrapper: getChipArrowRotationWeb(isDropdownOpen),
+    }),
+    [isDropdownOpen],
+  );
+
+  const dropdownHandler = () => {
+    setIsDropdownOpen((open) => !open);
+  };
+  const closeHandler = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const getChipLabel = () => {
+    for (const optionItem of optionList) {
+      const { key, label } = optionItem;
+      if (key === selectedOption) return label;
+    }
+    return '';
+  };
+
+  const chipLabel = getChipLabel();
+  const isChipActive = isDefaultOptionSelected || isDropdownOpen || chipLabel !== '';
+
+  const onClickOfDropdown = (item: Item) => {
+    onClick?.(item.label);
+    setIsDropdownOpen((open) => !open);
+  };
+
+  useEffect(() => {
+    if (chipRef.current) {
+      setIsActiveChip(isChipActive);
+    } else {
+      setIsActiveChip(isDefaultOptionSelected);
+      chipRef.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDefaultOptionSelected, isDropdownOpen, chipLabel]);
+
+  return (
+    <Container styleConfig={{ root: [staticStyles.root, ...rootStyles] }}>
+      <OutsideClickHandler onOutsideClick={closeHandler}>
+        <Chip
+          showIcon
+          Icon={
+            <Container
+              styleConfig={{
+                root: [staticStyles.chipArrowWrapper, dynamicStyles.chipArrowWrapper, ...chipArrowWrapperStyles],
+              }}
+            >
+              <ChipArrowDownSmall
+                color={isActiveChip ? theme.color.background.link2 : theme.color.background.defaultDarkest}
+                {...(chipArrowDownIconProps || {})}
+              />
+            </Container>
+          }
+          iconPosition={IconPosition.RIGHT}
+          label={chipLabel || defaultChipLabel}
+          isSelected={isActiveChip}
+          onClick={dropdownHandler}
+          styleConfig={chipStyleConfig}
+        />
+        {isDropdownOpen && (
+          <Container styleConfig={{ root: [staticStyles.dropdownContainer, ...dropdownContainerStyles] }}>
+            <Dropdown
+              itemList={optionList}
+              dropDownValue={selectedOption}
+              onItemSelect={onClickOfDropdown}
+              height={dropdownHeight}
+              styleConfig={dropdownStyleConfig}
+            />
+          </Container>
+        )}
+      </OutsideClickHandler>
+    </Container>
+  );
+};
+
+ChipDropdown.displayName = 'ChipDropdown';
+export default ChipDropdown;

package/src/index.native.ts

@@ -0,0 +1,2 @@
+export { default as ChipDropdown } from './ChipDropdown.native';
+export type * from './type';

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as ChipDropdown } from './ChipDropdown';
+export type * from './type';

package/src/style.ts

@@ -0,0 +1,49 @@
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+/**
+ * Static, platform-agnostic styles for ChipDropdown's composable slots. The
+ * arrow-wrapper rotation depends on the open/closed state of the dropdown and
+ * is therefore computed at render time via `useStyles` rather than being
+ * baked into these static slots.
+ */
+const staticStyles = makeStyles(() => ({
+  root: {
+    position: 'relative',
+    //todo: add width
+    // width: 'fit-content',
+    alignSelf: 'flex-start',
+  },
+  dropdownContainer: {
+    position: 'absolute',
+    left: 0,
+    top: 40,
+    zIndex: 1,
+  },
+  chipArrowWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+/**
+ * Web rotation style for the arrow wrapper. Using a CSS transform string so
+ * the existing rotate(0deg)/rotate(180deg) visual is preserved.
+ */
+export function getChipArrowRotationWeb(isOpen: boolean) {
+  return {
+    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+  };
+}
+
+/**
+ * Native rotation style for the arrow wrapper. React Native requires
+ * transforms to be expressed as an array of individual transform objects.
+ */
+export function getChipArrowRotationNative(isOpen: boolean) {
+  return {
+    transform: [{ rotate: isOpen ? '180deg' : '0deg' }] as Array<{ rotate: string }>,
+  };
+}
+
+export default staticStyles;

package/src/type.ts

@@ -0,0 +1,59 @@
+import type { SVGProps } from 'react';
+
+import type { Styles } from '@cleartrip/ct-design-types';
+import type { IChipStyleConfig } from '@cleartrip/ct-design-chip';
+import type { DropdownProps } from '@cleartrip/ct-design-dropdown';
+
+export interface ChipDropdownOption {
+  key: string;
+  label: string;
+}
+
+/**
+ * Style configuration for the ChipDropdown's composable slots. Slot names
+ * mirror the previous surface; values are now `Styles[]` arrays aligned with
+ * the rest of the migrated components.
+ */
+export interface IChipDropdownStyleConfig {
+  /** Styles for the outer relative-positioning wrapper Container. */
+  root?: Styles[];
+  /** Style configuration forwarded to the inner `Chip`. */
+  chip?: IChipStyleConfig;
+  /** Styles for the absolutely-positioned dropdown wrapper Container. */
+  dropdownContainer?: Styles[];
+  /** Style configuration forwarded to the inner `Dropdown`. */
+  dropdown?: DropdownProps['styleConfig'];
+  /** Styles for the arrow icon wrapper (rotation is handled internally). */
+  chipArrowWrapper?: Styles[];
+}
+
+export interface IChipDropdownProps {
+  /** Width forwarded to the inner Dropdown. */
+  width: number;
+  /** If true, the chip is highlighted as the default-selected option. */
+  isDefaultOptionSelected?: boolean;
+  /** Fallback label rendered on the chip when no option is selected. */
+  defaultChipLabel?: string;
+  /** Options displayed inside the dropdown. */
+  optionList: DropdownProps['itemList'];
+  /** Currently selected option key. */
+  selectedOption?: string;
+  /** Initial dropdown open state. */
+  showDropdown?: boolean;
+  /** Callback fired when an option is selected. */
+  onClick?: (key: string) => void;
+  /** Height forwarded to the inner Dropdown. */
+  dropdownHeight?: number;
+  /** Props spread onto the chip arrow SVG. */
+  chipArrowDownIconProps?: SVGProps<SVGSVGElement>;
+  /** Style configuration for different parts of the ChipDropdown. */
+  styleConfig?: IChipDropdownStyleConfig;
+}
+
+/**
+ * @deprecated Use `IChipDropdownProps`. Kept as an alias for legacy consumers
+ * that imported `ChipDropdownProps` from `@cleartrip/ct-design-chip-dropdown`.
+ * The `styleConfig` slots have been migrated from `{ css, className }`
+ * objects to `Styles[]` arrays; legacy call sites will need to migrate.
+ */
+export type ChipDropdownProps = IChipDropdownProps;

package/dist/StyledChipArrow/StyledChipArrow.d.ts

@@ -1,9 +0,0 @@
-import { CSSObject, CSSProperties } from 'styled-components';
-import { StyledChipArrowProps } from './type';
-export declare const getStyledChipArrowStyles: ({ transform, ...rest }: CSSProperties) => CSSObject;
-declare const StyledChipArrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledChipArrowProps & {
-    css?: CSSProperties | undefined;
-    transform: CSSObject['transform'];
-}, never>;
-export default StyledChipArrow;
-//# sourceMappingURL=StyledChipArrow.d.ts.map

package/dist/StyledChipArrow/StyledChipArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledChipArrow.d.ts","sourceRoot":"","sources":["../../packages/components/ChipDropdown/src/StyledChipArrow/StyledChipArrow.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AAE9C,eAAO,MAAM,wBAAwB,2BAA4B,aAAa,KAAG,SAMhF,CAAC;AAEF,QAAA,MAAM,eAAe;;eAAuE,SAAS,CAAC,WAAW,CAAC;SAMjH,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/StyledChipArrow/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StyledChipArrow } from './StyledChipArrow';
-//# sourceMappingURL=index.d.ts.map

package/dist/StyledChipArrow/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/ChipDropdown/src/StyledChipArrow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/StyledChipArrow/type.d.ts

@@ -1,4 +0,0 @@
-export interface StyledChipArrowProps {
-    transform: string;
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/StyledChipArrow/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/ChipDropdown/src/StyledChipArrow/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;CACnB"}