@shoplflow/base 0.32.42 → 0.32.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -2815,9 +2815,30 @@ exports.CalloutTypes = {
2815
2815
  INFORMATION: "INFORMATION",
2816
2816
  ALERT: "ALERT"
2817
2817
  };
2818
+ var StyledDropdown = styled6__default.default.div`
2819
+ width: ${({ width }) => width};
2820
+ `;
2821
+ var StyledDropdownContent = styled6__default.default.div`
2822
+ display: flex;
2823
+ flex-direction: column;
2824
+ background: ${exports.colorTokens.neutral0};
2825
+ width: ${({ width }) => width != null ? width : "240px"};
2826
+ padding: 4px;
2827
+ border-radius: 6px;
2828
+ box-shadow: ${exports.boxShadowTokens.dropShadow};
2829
+ `;
2830
+ var DropdownContext = React3.createContext(null);
2831
+ var useDropdown = () => {
2832
+ const context = React3.useContext(DropdownContext);
2833
+ if (context === null) {
2834
+ throw new Error("useDropdown must be used within a DropdownProvider");
2835
+ }
2836
+ return context;
2837
+ };
2818
2838
  var getDropdownHeightBySizeVar = (size2) => {
2819
2839
  switch (size2) {
2820
2840
  case "M":
2841
+ case "L":
2821
2842
  return "40px";
2822
2843
  case "S":
2823
2844
  return "32px";
@@ -2827,6 +2848,8 @@ var getDropdownHeightBySizeVar = (size2) => {
2827
2848
  };
2828
2849
  var getDropdownFontSizeBySizeVar = (size2) => {
2829
2850
  switch (size2) {
2851
+ case "L":
2852
+ return "body2_700";
2830
2853
  case "M":
2831
2854
  return "body1_400";
2832
2855
  case "S":
@@ -2837,12 +2860,20 @@ var getDropdownFontSizeBySizeVar = (size2) => {
2837
2860
  };
2838
2861
  var getDropdownStyleBySizeVar = (size2) => {
2839
2862
  switch (size2) {
2863
+ case "L":
2864
+ return react$1.css`
2865
+ background-color: transparent;
2866
+ padding: 8px 4px 8px 12px;
2867
+ `;
2840
2868
  case "M":
2841
2869
  return react$1.css`
2870
+ background-color: ${exports.colorTokens.neutral0};
2871
+ gap: 4px;
2842
2872
  padding: 4px 4px 4px 12px;
2843
2873
  `;
2844
2874
  case "S":
2845
2875
  return react$1.css`
2876
+ background-color: ${exports.colorTokens.neutral0};
2846
2877
  padding: 4px 4px 4px 8px;
2847
2878
  gap: 4px;
2848
2879
  `;
@@ -2852,22 +2883,24 @@ var getDropdownStyleBySizeVar = (size2) => {
2852
2883
  `;
2853
2884
  }
2854
2885
  };
2886
+ var getDisabledStyle2 = (disabled) => {
2887
+ if (disabled) {
2888
+ return react$1.css`
2889
+ opacity: 50%;
2890
+ cursor: not-allowed;
2891
+ `;
2892
+ }
2893
+ };
2855
2894
  var getDropdownIconSizeBySizeVar = (size2) => {
2856
2895
  switch (size2) {
2857
2896
  case "S":
2897
+ case "L":
2858
2898
  return react$1.css`
2859
2899
  height: 24px;
2860
2900
  width: 24px;
2861
2901
  min-width: 24px;
2862
2902
  min-height: 24px;
2863
2903
  `;
2864
- case "M":
2865
- return react$1.css`
2866
- height: 32px;
2867
- width: 32px;
2868
- min-width: 32px;
2869
- min-height: 32px;
2870
- `;
2871
2904
  default:
2872
2905
  return react$1.css`
2873
2906
  height: 32px;
@@ -2877,49 +2910,6 @@ var getDropdownIconSizeBySizeVar = (size2) => {
2877
2910
  `;
2878
2911
  }
2879
2912
  };
2880
- var StyledDropdown = styled6__default.default.div`
2881
- width: ${({ width }) => width};
2882
- `;
2883
- var StyledDropdownContent = styled6__default.default.div`
2884
- display: flex;
2885
- flex-direction: column;
2886
- background: ${exports.colorTokens.neutral0};
2887
- width: ${({ width }) => width != null ? width : "240px"};
2888
- padding: 4px;
2889
- border-radius: 6px;
2890
- box-shadow: ${exports.boxShadowTokens.dropShadow};
2891
- `;
2892
- var StyledDropdownButton = styled6__default.default.button`
2893
- display: flex;
2894
- flex-direction: row;
2895
- align-items: center;
2896
- justify-content: space-between;
2897
- width: 100%;
2898
- height: 100%;
2899
- gap: 8px;
2900
- cursor: pointer;
2901
- background-color: ${exports.colorTokens.neutral0};
2902
- ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
2903
- ${({ disabled }) => disabled && react$1.css`
2904
- background-color: ${exports.colorTokens.neutral100};
2905
- cursor: not-allowed;
2906
- `}
2907
- `;
2908
- var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
2909
- display: flex;
2910
- align-items: center;
2911
- justify-content: center;
2912
-
2913
- ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
2914
- `;
2915
- var DropdownContext = React3.createContext(null);
2916
- var useDropdown = () => {
2917
- const context = React3.useContext(DropdownContext);
2918
- if (context === null) {
2919
- throw new Error("useDropdown must be used within a DropdownProvider");
2920
- }
2921
- return context;
2922
- };
2923
2913
  var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
2924
2914
  if (!disabled) {
2925
2915
  if (isError) {
@@ -2934,60 +2924,72 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
2934
2924
  }
2935
2925
  return exports.colorTokens.neutral300;
2936
2926
  };
2927
+ var getButtoWrapperStyleBySizeVar = (sizeVar) => {
2928
+ switch (sizeVar) {
2929
+ case "L":
2930
+ return react$1.css`
2931
+ background-color: transparent;
2932
+ border-width: 2px;
2933
+ border-radius: 12px;
2934
+ `;
2935
+ default:
2936
+ return react$1.css`
2937
+ background-color: ${exports.colorTokens.neutral0};
2938
+ border-width: 1px;
2939
+ border-radius: 6px;
2940
+ `;
2941
+ }
2942
+ };
2937
2943
  var getStyleByType = ({
2938
- type,
2939
2944
  height,
2940
- minHeight,
2941
- maxHeight,
2942
- width,
2943
- minWidth,
2944
- maxWidth,
2945
- borderRadius,
2946
- customNumberInputHeight
2945
+ width
2947
2946
  }) => {
2948
- if (type === "number") {
2949
- return react$1.css`
2950
- width: ${width || "64px"};
2951
- height: ${customNumberInputHeight || "32px"};
2952
- border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
2953
- `;
2954
- }
2955
2947
  return react$1.css`
2956
2948
  width: ${width || "100%"};
2957
- min-width: ${minWidth || "initial"};
2958
- max-width: ${maxWidth || "initial"};
2959
2949
  height: ${height || "initial"};
2960
- min-height: ${minHeight || "initial"};
2961
- max-height: ${maxHeight || "initial"};
2962
- border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
2963
2950
  `;
2964
2951
  };
2965
- var InputWrapper = styled6__default.default.label`
2952
+ var StyledDropdownButtonWrapper = styled6__default.default.label`
2966
2953
  position: relative;
2967
2954
  display: flex;
2968
2955
  align-items: center;
2969
- border-radius: 6px;
2970
- flex-direction: ${({ direction }) => direction || "row"};
2971
- ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType({
2972
- customNumberInputHeight,
2973
- type,
2956
+ flex-direction: row;
2957
+ min-height: initial;
2958
+ max-height: initial;
2959
+ min-width: initial;
2960
+ max-width: initial;
2961
+ ${({ height, width }) => getStyleByType({
2974
2962
  height,
2975
- minHeight,
2976
- maxHeight,
2977
- width,
2978
- maxWidth,
2979
- minWidth,
2980
- borderRadius
2963
+ width
2981
2964
  })};
2982
2965
  justify-content: space-between;
2983
- gap: ${({ gap }) => gap || "8px"};
2984
- border: 1px solid ${(props) => getBorderColorByStatus(props)};
2985
- background-color: ${exports.colorTokens.neutral0};
2966
+ border-color: ${(props) => getBorderColorByStatus(props)};
2967
+ border-style: solid;
2968
+ ${({ sizeVar }) => getButtoWrapperStyleBySizeVar(sizeVar)};
2969
+
2986
2970
  overflow: hidden;
2987
- ${({ disabled }) => disabled && react$1.css`
2988
- background-color: ${exports.colorTokens.neutral100};
2989
- cursor: not-allowed;
2990
- `};
2971
+ ${({ disabled }) => getDisabledStyle2(disabled)};
2972
+ `;
2973
+ var StyledDropdownButton = styled6__default.default.button`
2974
+ display: flex;
2975
+ flex-direction: row;
2976
+ align-items: center;
2977
+ justify-content: space-between;
2978
+ width: 100%;
2979
+ height: 100%;
2980
+
2981
+ cursor: pointer;
2982
+ ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
2983
+ ${({ disabled }) => getDisabledStyle2(disabled)};
2984
+ `;
2985
+ var DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
2986
+ display: flex;
2987
+ align-items: center;
2988
+ justify-content: center;
2989
+ flex-shrink: 0;
2990
+
2991
+ ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
2992
+ ${({ disabled }) => getDisabledStyle2(disabled)};
2991
2993
  `;
2992
2994
  var DropdownTriggerButton = React3.forwardRef(
2993
2995
  (_a, ref) => {
@@ -3015,8 +3017,9 @@ var DropdownTriggerButton = React3.forwardRef(
3015
3017
  }
3016
3018
  return "neutral700";
3017
3019
  };
3020
+ const LeftSourceClone = leftSource ? React3.cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
3018
3021
  return /* @__PURE__ */ jsxRuntime.jsx(
3019
- InputWrapper,
3022
+ StyledDropdownButtonWrapper,
3020
3023
  {
3021
3024
  onMouseEnter: handleOnMouseEnter,
3022
3025
  onMouseLeave: handleOnMouseLeave,
@@ -3025,19 +3028,22 @@ var DropdownTriggerButton = React3.forwardRef(
3025
3028
  disabled,
3026
3029
  width,
3027
3030
  isError,
3031
+ sizeVar,
3028
3032
  height: getDropdownHeightBySizeVar(sizeVar),
3029
3033
  children: /* @__PURE__ */ jsxRuntime.jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
3030
- leftSource && leftSource,
3031
- value || /* @__PURE__ */ jsxRuntime.jsx(
3032
- exports.Text,
3033
- {
3034
- typography: getDropdownFontSizeBySizeVar(sizeVar),
3035
- color: getTextColor({ value, disabled }),
3036
- textOverflow: "ellipsis",
3037
- lineClamp: 1,
3038
- children: placeholder
3039
- }
3040
- ),
3034
+ /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { width: "100%", spacing: sizeVar === "L" ? "spacing04" : void 0, align: "center", children: [
3035
+ LeftSourceClone && LeftSourceClone,
3036
+ value || /* @__PURE__ */ jsxRuntime.jsx(
3037
+ exports.Text,
3038
+ {
3039
+ typography: getDropdownFontSizeBySizeVar(sizeVar),
3040
+ color: getTextColor({ value, disabled }),
3041
+ textOverflow: "ellipsis",
3042
+ lineClamp: 1,
3043
+ children: placeholder
3044
+ }
3045
+ )
3046
+ ] }),
3041
3047
  /* @__PURE__ */ jsxRuntime.jsx(
3042
3048
  DropdownButtonIcon,
3043
3049
  {
@@ -3048,7 +3054,14 @@ var DropdownTriggerButton = React3.forwardRef(
3048
3054
  transition: {
3049
3055
  duration: 0.2
3050
3056
  },
3051
- children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "XS" })
3057
+ children: /* @__PURE__ */ jsxRuntime.jsx(
3058
+ exports.Icon,
3059
+ {
3060
+ iconSource: ShoplAssets.DownArrowSolidXsmallIcon,
3061
+ color: sizeVar === "L" ? "neutral700" : "neutral400",
3062
+ sizeVar: "XS"
3063
+ }
3064
+ )
3052
3065
  }
3053
3066
  )
3054
3067
  ] }))
@@ -3095,7 +3108,7 @@ var Dropdown = ({
3095
3108
  height: triggerRef.offsetHeight
3096
3109
  });
3097
3110
  }
3098
- }, [triggerRef]);
3111
+ }, [triggerRef, width]);
3099
3112
  React3.useEffect(() => {
3100
3113
  if (initialIsOpen === void 0) {
3101
3114
  return;
@@ -3119,6 +3132,13 @@ var Dropdown = ({
3119
3132
  Dropdown.Button = DropdownTriggerButton;
3120
3133
  Dropdown.Content = DropdownContent;
3121
3134
  exports.Dropdown = Dropdown;
3135
+
3136
+ // src/components/Dropdown/Dropdown.types.ts
3137
+ exports.DropdownOptionVariants = {
3138
+ CLICK: "CLICK",
3139
+ OUTSIDE_CLICK: "OUTSIDE_CLICK",
3140
+ NONE: "NONE"
3141
+ };
3122
3142
  var StyledList = styled6__default.default.li`
3123
3143
  display: flex;
3124
3144
  flex-direction: row;
@@ -3506,6 +3526,75 @@ var assetFunction = (iconName, domainProps) => {
3506
3526
  const ShoplIcon = ShoplAssets__namespace[iconName];
3507
3527
  return domain === "hada" ? HadaIcon : ShoplIcon;
3508
3528
  };
3529
+ var getBorderColorByStatus2 = ({ isFocused, isError, isHovered, disabled }) => {
3530
+ if (!disabled) {
3531
+ if (isError) {
3532
+ return exports.colorTokens.red300;
3533
+ }
3534
+ if (isFocused) {
3535
+ return exports.colorTokens.primary300;
3536
+ }
3537
+ if (isHovered) {
3538
+ return exports.colorTokens.neutral700;
3539
+ }
3540
+ }
3541
+ return exports.colorTokens.neutral300;
3542
+ };
3543
+ var getStyleByType2 = ({
3544
+ type,
3545
+ height,
3546
+ minHeight,
3547
+ maxHeight,
3548
+ width,
3549
+ minWidth,
3550
+ maxWidth,
3551
+ borderRadius,
3552
+ customNumberInputHeight
3553
+ }) => {
3554
+ if (type === "number") {
3555
+ return react$1.css`
3556
+ width: ${width || "64px"};
3557
+ height: ${customNumberInputHeight || "32px"};
3558
+ border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
3559
+ `;
3560
+ }
3561
+ return react$1.css`
3562
+ width: ${width || "100%"};
3563
+ min-width: ${minWidth || "initial"};
3564
+ max-width: ${maxWidth || "initial"};
3565
+ height: ${height || "initial"};
3566
+ min-height: ${minHeight || "initial"};
3567
+ max-height: ${maxHeight || "initial"};
3568
+ border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
3569
+ `;
3570
+ };
3571
+ var InputWrapper = styled6__default.default.label`
3572
+ position: relative;
3573
+ display: flex;
3574
+ align-items: center;
3575
+ border-radius: 6px;
3576
+ flex-direction: ${({ direction }) => direction || "row"};
3577
+ ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType2({
3578
+ customNumberInputHeight,
3579
+ type,
3580
+ height,
3581
+ minHeight,
3582
+ maxHeight,
3583
+ width,
3584
+ maxWidth,
3585
+ minWidth,
3586
+ borderRadius
3587
+ })};
3588
+ justify-content: space-between;
3589
+ gap: ${({ gap }) => gap || "8px"};
3590
+ border: 1px solid ${(props) => getBorderColorByStatus2(props)};
3591
+ background-color: ${exports.colorTokens.neutral0};
3592
+ overflow: hidden;
3593
+ ${({ disabled }) => disabled && react$1.css`
3594
+ background-color: ${exports.colorTokens.neutral100};
3595
+ cursor: not-allowed;
3596
+ `};
3597
+ `;
3509
3598
 
3510
3599
  // src/components/Inputs/Input/utils/getNumberLimiteRange.ts
3511
3600
  var getNumberLimitRange = (value, min, max) => {
package/dist/index.d.cts CHANGED
@@ -949,6 +949,7 @@ interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenP
949
949
  declare const dropdownSizeVariants: {
950
950
  readonly S: "S";
951
951
  readonly M: "M";
952
+ readonly L: "L";
952
953
  };
953
954
  declare type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
954
955
  interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
@@ -1530,4 +1531,4 @@ declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAtt
1530
1531
 
1531
1532
  declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, floatingZIndex, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
1532
1533
 
1533
- export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
1534
+ export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
package/dist/index.d.ts CHANGED
@@ -949,6 +949,7 @@ interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenP
949
949
  declare const dropdownSizeVariants: {
950
950
  readonly S: "S";
951
951
  readonly M: "M";
952
+ readonly L: "L";
952
953
  };
953
954
  declare type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
954
955
  interface DropdownTriggerButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
@@ -1530,4 +1531,4 @@ declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAtt
1530
1531
 
1531
1532
  declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, floatingZIndex, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
1532
1533
 
1533
- export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
1534
+ export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React3 from 'react';
2
- import React3__default, { forwardRef, createContext, useRef, useState, useCallback, useEffect, useId, useContext, useMemo, createElement } from 'react';
2
+ import React3__default, { forwardRef, createContext, useRef, useState, useCallback, useEffect, cloneElement, useId, useContext, useMemo, createElement } from 'react';
3
3
  import styled6 from '@emotion/styled';
4
4
  import { motion, AnimatePresence, LayoutGroup, LazyMotion, domAnimation } from 'framer-motion';
5
5
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -2788,9 +2788,30 @@ var CalloutTypes = {
2788
2788
  INFORMATION: "INFORMATION",
2789
2789
  ALERT: "ALERT"
2790
2790
  };
2791
+ var StyledDropdown = styled6.div`
2792
+ width: ${({ width }) => width};
2793
+ `;
2794
+ var StyledDropdownContent = styled6.div`
2795
+ display: flex;
2796
+ flex-direction: column;
2797
+ background: ${colorTokens.neutral0};
2798
+ width: ${({ width }) => width != null ? width : "240px"};
2799
+ padding: 4px;
2800
+ border-radius: 6px;
2801
+ box-shadow: ${boxShadowTokens.dropShadow};
2802
+ `;
2803
+ var DropdownContext = createContext(null);
2804
+ var useDropdown = () => {
2805
+ const context = useContext(DropdownContext);
2806
+ if (context === null) {
2807
+ throw new Error("useDropdown must be used within a DropdownProvider");
2808
+ }
2809
+ return context;
2810
+ };
2791
2811
  var getDropdownHeightBySizeVar = (size2) => {
2792
2812
  switch (size2) {
2793
2813
  case "M":
2814
+ case "L":
2794
2815
  return "40px";
2795
2816
  case "S":
2796
2817
  return "32px";
@@ -2800,6 +2821,8 @@ var getDropdownHeightBySizeVar = (size2) => {
2800
2821
  };
2801
2822
  var getDropdownFontSizeBySizeVar = (size2) => {
2802
2823
  switch (size2) {
2824
+ case "L":
2825
+ return "body2_700";
2803
2826
  case "M":
2804
2827
  return "body1_400";
2805
2828
  case "S":
@@ -2810,12 +2833,20 @@ var getDropdownFontSizeBySizeVar = (size2) => {
2810
2833
  };
2811
2834
  var getDropdownStyleBySizeVar = (size2) => {
2812
2835
  switch (size2) {
2836
+ case "L":
2837
+ return css`
2838
+ background-color: transparent;
2839
+ padding: 8px 4px 8px 12px;
2840
+ `;
2813
2841
  case "M":
2814
2842
  return css`
2843
+ background-color: ${colorTokens.neutral0};
2844
+ gap: 4px;
2815
2845
  padding: 4px 4px 4px 12px;
2816
2846
  `;
2817
2847
  case "S":
2818
2848
  return css`
2849
+ background-color: ${colorTokens.neutral0};
2819
2850
  padding: 4px 4px 4px 8px;
2820
2851
  gap: 4px;
2821
2852
  `;
@@ -2825,22 +2856,24 @@ var getDropdownStyleBySizeVar = (size2) => {
2825
2856
  `;
2826
2857
  }
2827
2858
  };
2859
+ var getDisabledStyle2 = (disabled) => {
2860
+ if (disabled) {
2861
+ return css`
2862
+ opacity: 50%;
2863
+ cursor: not-allowed;
2864
+ `;
2865
+ }
2866
+ };
2828
2867
  var getDropdownIconSizeBySizeVar = (size2) => {
2829
2868
  switch (size2) {
2830
2869
  case "S":
2870
+ case "L":
2831
2871
  return css`
2832
2872
  height: 24px;
2833
2873
  width: 24px;
2834
2874
  min-width: 24px;
2835
2875
  min-height: 24px;
2836
2876
  `;
2837
- case "M":
2838
- return css`
2839
- height: 32px;
2840
- width: 32px;
2841
- min-width: 32px;
2842
- min-height: 32px;
2843
- `;
2844
2877
  default:
2845
2878
  return css`
2846
2879
  height: 32px;
@@ -2850,49 +2883,6 @@ var getDropdownIconSizeBySizeVar = (size2) => {
2850
2883
  `;
2851
2884
  }
2852
2885
  };
2853
- var StyledDropdown = styled6.div`
2854
- width: ${({ width }) => width};
2855
- `;
2856
- var StyledDropdownContent = styled6.div`
2857
- display: flex;
2858
- flex-direction: column;
2859
- background: ${colorTokens.neutral0};
2860
- width: ${({ width }) => width != null ? width : "240px"};
2861
- padding: 4px;
2862
- border-radius: 6px;
2863
- box-shadow: ${boxShadowTokens.dropShadow};
2864
- `;
2865
- var StyledDropdownButton = styled6.button`
2866
- display: flex;
2867
- flex-direction: row;
2868
- align-items: center;
2869
- justify-content: space-between;
2870
- width: 100%;
2871
- height: 100%;
2872
- gap: 8px;
2873
- cursor: pointer;
2874
- background-color: ${colorTokens.neutral0};
2875
- ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
2876
- ${({ disabled }) => disabled && css`
2877
- background-color: ${colorTokens.neutral100};
2878
- cursor: not-allowed;
2879
- `}
2880
- `;
2881
- var DropdownButtonIcon = styled6(motion.div)`
2882
- display: flex;
2883
- align-items: center;
2884
- justify-content: center;
2885
-
2886
- ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
2887
- `;
2888
- var DropdownContext = createContext(null);
2889
- var useDropdown = () => {
2890
- const context = useContext(DropdownContext);
2891
- if (context === null) {
2892
- throw new Error("useDropdown must be used within a DropdownProvider");
2893
- }
2894
- return context;
2895
- };
2896
2886
  var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
2897
2887
  if (!disabled) {
2898
2888
  if (isError) {
@@ -2907,60 +2897,72 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
2907
2897
  }
2908
2898
  return colorTokens.neutral300;
2909
2899
  };
2900
+ var getButtoWrapperStyleBySizeVar = (sizeVar) => {
2901
+ switch (sizeVar) {
2902
+ case "L":
2903
+ return css`
2904
+ background-color: transparent;
2905
+ border-width: 2px;
2906
+ border-radius: 12px;
2907
+ `;
2908
+ default:
2909
+ return css`
2910
+ background-color: ${colorTokens.neutral0};
2911
+ border-width: 1px;
2912
+ border-radius: 6px;
2913
+ `;
2914
+ }
2915
+ };
2910
2916
  var getStyleByType = ({
2911
- type,
2912
2917
  height,
2913
- minHeight,
2914
- maxHeight,
2915
- width,
2916
- minWidth,
2917
- maxWidth,
2918
- borderRadius,
2919
- customNumberInputHeight
2918
+ width
2920
2919
  }) => {
2921
- if (type === "number") {
2922
- return css`
2923
- width: ${width || "64px"};
2924
- height: ${customNumberInputHeight || "32px"};
2925
- border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
2926
- `;
2927
- }
2928
2920
  return css`
2929
2921
  width: ${width || "100%"};
2930
- min-width: ${minWidth || "initial"};
2931
- max-width: ${maxWidth || "initial"};
2932
2922
  height: ${height || "initial"};
2933
- min-height: ${minHeight || "initial"};
2934
- max-height: ${maxHeight || "initial"};
2935
- border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
2936
2923
  `;
2937
2924
  };
2938
- var InputWrapper = styled6.label`
2925
+ var StyledDropdownButtonWrapper = styled6.label`
2939
2926
  position: relative;
2940
2927
  display: flex;
2941
2928
  align-items: center;
2942
- border-radius: 6px;
2943
- flex-direction: ${({ direction }) => direction || "row"};
2944
- ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType({
2945
- customNumberInputHeight,
2946
- type,
2929
+ flex-direction: row;
2930
+ min-height: initial;
2931
+ max-height: initial;
2932
+ min-width: initial;
2933
+ max-width: initial;
2934
+ ${({ height, width }) => getStyleByType({
2947
2935
  height,
2948
- minHeight,
2949
- maxHeight,
2950
- width,
2951
- maxWidth,
2952
- minWidth,
2953
- borderRadius
2936
+ width
2954
2937
  })};
2955
2938
  justify-content: space-between;
2956
- gap: ${({ gap }) => gap || "8px"};
2957
- border: 1px solid ${(props) => getBorderColorByStatus(props)};
2958
- background-color: ${colorTokens.neutral0};
2939
+ border-color: ${(props) => getBorderColorByStatus(props)};
2940
+ border-style: solid;
2941
+ ${({ sizeVar }) => getButtoWrapperStyleBySizeVar(sizeVar)};
2942
+
2959
2943
  overflow: hidden;
2960
- ${({ disabled }) => disabled && css`
2961
- background-color: ${colorTokens.neutral100};
2962
- cursor: not-allowed;
2963
- `};
2944
+ ${({ disabled }) => getDisabledStyle2(disabled)};
2945
+ `;
2946
+ var StyledDropdownButton = styled6.button`
2947
+ display: flex;
2948
+ flex-direction: row;
2949
+ align-items: center;
2950
+ justify-content: space-between;
2951
+ width: 100%;
2952
+ height: 100%;
2953
+
2954
+ cursor: pointer;
2955
+ ${({ sizeVar }) => sizeVar && getDropdownStyleBySizeVar(sizeVar)};
2956
+ ${({ disabled }) => getDisabledStyle2(disabled)};
2957
+ `;
2958
+ var DropdownButtonIcon = styled6(motion.div)`
2959
+ display: flex;
2960
+ align-items: center;
2961
+ justify-content: center;
2962
+ flex-shrink: 0;
2963
+
2964
+ ${({ sizeVar }) => sizeVar && getDropdownIconSizeBySizeVar(sizeVar)};
2965
+ ${({ disabled }) => getDisabledStyle2(disabled)};
2964
2966
  `;
2965
2967
  var DropdownTriggerButton = forwardRef(
2966
2968
  (_a, ref) => {
@@ -2988,8 +2990,9 @@ var DropdownTriggerButton = forwardRef(
2988
2990
  }
2989
2991
  return "neutral700";
2990
2992
  };
2993
+ const LeftSourceClone = leftSource ? cloneElement(leftSource, __spreadProps(__spreadValues({}, leftSource.props), { disabled })) : leftSource;
2991
2994
  return /* @__PURE__ */ jsx(
2992
- InputWrapper,
2995
+ StyledDropdownButtonWrapper,
2993
2996
  {
2994
2997
  onMouseEnter: handleOnMouseEnter,
2995
2998
  onMouseLeave: handleOnMouseLeave,
@@ -2998,19 +3001,22 @@ var DropdownTriggerButton = forwardRef(
2998
3001
  disabled,
2999
3002
  width,
3000
3003
  isError,
3004
+ sizeVar,
3001
3005
  height: getDropdownHeightBySizeVar(sizeVar),
3002
3006
  children: /* @__PURE__ */ jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
3003
- leftSource && leftSource,
3004
- value || /* @__PURE__ */ jsx(
3005
- Text_default,
3006
- {
3007
- typography: getDropdownFontSizeBySizeVar(sizeVar),
3008
- color: getTextColor({ value, disabled }),
3009
- textOverflow: "ellipsis",
3010
- lineClamp: 1,
3011
- children: placeholder
3012
- }
3013
- ),
3007
+ /* @__PURE__ */ jsxs(Stack_default.Horizontal, { width: "100%", spacing: sizeVar === "L" ? "spacing04" : void 0, align: "center", children: [
3008
+ LeftSourceClone && LeftSourceClone,
3009
+ value || /* @__PURE__ */ jsx(
3010
+ Text_default,
3011
+ {
3012
+ typography: getDropdownFontSizeBySizeVar(sizeVar),
3013
+ color: getTextColor({ value, disabled }),
3014
+ textOverflow: "ellipsis",
3015
+ lineClamp: 1,
3016
+ children: placeholder
3017
+ }
3018
+ )
3019
+ ] }),
3014
3020
  /* @__PURE__ */ jsx(
3015
3021
  DropdownButtonIcon,
3016
3022
  {
@@ -3021,7 +3027,14 @@ var DropdownTriggerButton = forwardRef(
3021
3027
  transition: {
3022
3028
  duration: 0.2
3023
3029
  },
3024
- children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "XS" })
3030
+ children: /* @__PURE__ */ jsx(
3031
+ Icon_default,
3032
+ {
3033
+ iconSource: DownArrowSolidXsmallIcon,
3034
+ color: sizeVar === "L" ? "neutral700" : "neutral400",
3035
+ sizeVar: "XS"
3036
+ }
3037
+ )
3025
3038
  }
3026
3039
  )
3027
3040
  ] }))
@@ -3068,7 +3081,7 @@ var Dropdown = ({
3068
3081
  height: triggerRef.offsetHeight
3069
3082
  });
3070
3083
  }
3071
- }, [triggerRef]);
3084
+ }, [triggerRef, width]);
3072
3085
  useEffect(() => {
3073
3086
  if (initialIsOpen === void 0) {
3074
3087
  return;
@@ -3092,6 +3105,13 @@ var Dropdown = ({
3092
3105
  Dropdown.Button = DropdownTriggerButton;
3093
3106
  Dropdown.Content = DropdownContent;
3094
3107
  var Dropdown_default = Dropdown;
3108
+
3109
+ // src/components/Dropdown/Dropdown.types.ts
3110
+ var DropdownOptionVariants = {
3111
+ CLICK: "CLICK",
3112
+ OUTSIDE_CLICK: "OUTSIDE_CLICK",
3113
+ NONE: "NONE"
3114
+ };
3095
3115
  var StyledList = styled6.li`
3096
3116
  display: flex;
3097
3117
  flex-direction: row;
@@ -3479,6 +3499,75 @@ var assetFunction = (iconName, domainProps) => {
3479
3499
  const ShoplIcon = ShoplAssets[iconName];
3480
3500
  return domain === "hada" ? HadaIcon : ShoplIcon;
3481
3501
  };
3502
+ var getBorderColorByStatus2 = ({ isFocused, isError, isHovered, disabled }) => {
3503
+ if (!disabled) {
3504
+ if (isError) {
3505
+ return colorTokens.red300;
3506
+ }
3507
+ if (isFocused) {
3508
+ return colorTokens.primary300;
3509
+ }
3510
+ if (isHovered) {
3511
+ return colorTokens.neutral700;
3512
+ }
3513
+ }
3514
+ return colorTokens.neutral300;
3515
+ };
3516
+ var getStyleByType2 = ({
3517
+ type,
3518
+ height,
3519
+ minHeight,
3520
+ maxHeight,
3521
+ width,
3522
+ minWidth,
3523
+ maxWidth,
3524
+ borderRadius,
3525
+ customNumberInputHeight
3526
+ }) => {
3527
+ if (type === "number") {
3528
+ return css`
3529
+ width: ${width || "64px"};
3530
+ height: ${customNumberInputHeight || "32px"};
3531
+ border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
3532
+ `;
3533
+ }
3534
+ return css`
3535
+ width: ${width || "100%"};
3536
+ min-width: ${minWidth || "initial"};
3537
+ max-width: ${maxWidth || "initial"};
3538
+ height: ${height || "initial"};
3539
+ min-height: ${minHeight || "initial"};
3540
+ max-height: ${maxHeight || "initial"};
3541
+ border-radius: ${borderRadius ? borderRadiusTokens[borderRadius] : "6px"};
3542
+ `;
3543
+ };
3544
+ var InputWrapper = styled6.label`
3545
+ position: relative;
3546
+ display: flex;
3547
+ align-items: center;
3548
+ border-radius: 6px;
3549
+ flex-direction: ${({ direction }) => direction || "row"};
3550
+ ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType2({
3551
+ customNumberInputHeight,
3552
+ type,
3553
+ height,
3554
+ minHeight,
3555
+ maxHeight,
3556
+ width,
3557
+ maxWidth,
3558
+ minWidth,
3559
+ borderRadius
3560
+ })};
3561
+ justify-content: space-between;
3562
+ gap: ${({ gap }) => gap || "8px"};
3563
+ border: 1px solid ${(props) => getBorderColorByStatus2(props)};
3564
+ background-color: ${colorTokens.neutral0};
3565
+ overflow: hidden;
3566
+ ${({ disabled }) => disabled && css`
3567
+ background-color: ${colorTokens.neutral100};
3568
+ cursor: not-allowed;
3569
+ `};
3570
+ `;
3482
3571
 
3483
3572
  // src/components/Inputs/Input/utils/getNumberLimiteRange.ts
3484
3573
  var getNumberLimitRange = (value, min, max) => {
@@ -6439,4 +6528,4 @@ classnames/index.js:
6439
6528
  *)
6440
6529
  */
6441
6530
 
6442
- export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
6531
+ export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shoplflow/base",
3
- "version": "0.32.42",
3
+ "version": "0.32.43",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.js",