smarthr-ui 43.1.1 → 43.2.0

package/esm/components/AppNavi/AppNaviDropdown.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { useTheme } from '../../hooks/useTheme';
+import { UnstyledButton } from '../Button';
 import { Dropdown, DropdownContent, DropdownTrigger } from '../Dropdown';
 import { FaCaretDownIcon } from '../Icon';
 import { getIconComponent, getItemStyle } from './appNaviHelper';
@@ -8,17 +9,14 @@ export const AppNaviDropdown = ({ children, dropdownContent, icon, current = fal
     const theme = useTheme();
     const iconComponent = getIconComponent(theme, { icon, current });
     return (React.createElement(Dropdown, null,
-        React.createElement(StyledDropdownTrigger, null,
-            React.createElement(TriggerButton, { "$themes": theme, "aria-current": current ? 'page' : undefined, disabled: isUnclickable, type: "button", "$displayCaret": displayCaret, "$isActive": current, "$isUnclickable": isUnclickable },
+        React.createElement(DropdownTrigger, null,
+            React.createElement(TriggerButton, { "$themes": theme, "aria-current": current ? 'page' : undefined, disabled: isUnclickable, "$displayCaret": displayCaret, "$isActive": current, "$isUnclickable": isUnclickable },
                 iconComponent,
                 children,
                 displayCaret && React.createElement(FaCaretDownIcon, null))),
         React.createElement(DropdownContent, null, dropdownContent)));
 };
-const StyledDropdownTrigger = styled(DropdownTrigger) `
-  height: 100%;
-`;
-const TriggerButton = styled.button(({ $displayCaret, ...props }) => css `
+const TriggerButton = styled(UnstyledButton)(({ $displayCaret, ...props }) => css `
     ${getItemStyle(props)}
 
     ${$displayCaret &&

package/esm/components/AppNavi/AppNaviDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNaviDropdown.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AACxE,OAAO,EAAE,eAAe,EAA+B,MAAM,SAAS,CAAA;AAEtE,OAAO,EAAkB,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAkBhF,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,EAC/C,QAAQ,EACR,eAAe,EACf,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,YAAY,GACb,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;IAEhE,OAAO,CACL,oBAAC,QAAQ;QACP,oBAAC,qBAAqB;YACpB,oBAAC,aAAa,eACH,KAAK,kBACA,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,QAAQ,mBACE,YAAY,eAChB,OAAO,oBACF,aAAa;gBAE5B,aAAa;gBACb,QAAQ;gBACR,YAAY,IAAI,oBAAC,eAAe,OAAG,CACtB,CACM;QAExB,oBAAC,eAAe,QAAE,eAAe,CAAmB,CAC3C,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAG,MAAM,CAAC,eAAe,CAAC,CAAA;;CAEpD,CAAA;AACD,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAKjC,CAAC,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAChC,YAAY,CAAC,KAAK,CAAC;;MAEnB,aAAa;IACf,GAAG,CAAA;;;;;;KAMF;GACF,CACF,CAAA"}
+{"version":3,"file":"AppNaviDropdown.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AACxE,OAAO,EAAE,eAAe,EAA+B,MAAM,SAAS,CAAA;AAEtE,OAAO,EAAkB,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAkBhF,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,EAC/C,QAAQ,EACR,eAAe,EACf,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,YAAY,GACb,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;IAEhE,OAAO,CACL,oBAAC,QAAQ;QACP,oBAAC,eAAe;YACd,oBAAC,aAAa,eACH,KAAK,kBACA,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,aAAa,mBACR,YAAY,eAChB,OAAO,oBACF,aAAa;gBAE5B,aAAa;gBACb,QAAQ;gBACR,YAAY,IAAI,oBAAC,eAAe,OAAG,CACtB,CACA;QAElB,oBAAC,eAAe,QAAE,eAAe,CAAmB,CAC3C,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,cAAc,CAAC,CAK1C,CAAC,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAChC,YAAY,CAAC,KAAK,CAAC;;MAEnB,aAAa;IACf,GAAG,CAAA;;;;;;KAMF;GACF,CACF,CAAA"}

package/esm/components/AppNavi/appNaviHelper.js

@@ -19,11 +19,7 @@ export const getItemStyle = ({ $themes: { color: { hoverColor, MAIN, TEXT_BLACK,
   display: flex;
   align-items: center;
   gap: ${spacingByChar(0.5)};
-  height: 100%;
   box-sizing: border-box;
-  margin: 0;
-  border: none;
-  background-color: transparent;
   padding: ${spacingByChar(0.75)} ${spacingByChar(0.5)};
   text-decoration: none;
   font-size: ${fontSize.M};

package/esm/components/AppNavi/appNaviHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"appNaviHelper.js","sourceRoot":"","sources":["../../../src/components/AppNavi/appNaviHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAKvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,KAAY,EACZ,OAAsE,EACtE,EAAE;IACF,MAAM,IAAI,GAAG;QACX,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,KAAK;QACd,GAAG,OAAO;KACX,CAAA;IACD,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,KAAK,CAAA;IAE7C,IAAI,CAAC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAE3B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;IAEtB,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;KAC7C,CAAA;IAED,OAAO,oBAAC,IAAI,OAAK,SAAS,GAAI,CAAA;AAChC,CAAC,CAAA;AAOD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,EAAE,EACP,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EACzD,QAAQ,EACR,OAAO,EACP,aAAa,GACd,EACD,SAAS,EACT,cAAc,GACC,EAAE,EAAE,CAAC,GAAG,CAAA;;;SAGhB,aAAa,CAAC,GAAG,CAAC;;;;;;aAMd,aAAa,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,GAAG,CAAC;;eAEvC,QAAQ,CAAC,CAAC;;iBAER,OAAO,CAAC,IAAI;WAClB,SAAS;;;IAGhB,SAAS;IACX,GAAG,CAAA;aACQ,UAAU;;;;;;;;;0BASG,IAAI;gBACd,aAAa,CAAC,IAAI,CAAC;;GAEhC;IACC,CAAC,cAAc;IACjB,GAAG,CAAA;;;0BAGqB,UAAU,CAAC,KAAK,CAAC;;GAExC;CACF,CAAA"}
+{"version":3,"file":"appNaviHelper.js","sourceRoot":"","sources":["../../../src/components/AppNavi/appNaviHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAKvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,KAAY,EACZ,OAAsE,EACtE,EAAE;IACF,MAAM,IAAI,GAAG;QACX,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,KAAK;QACd,GAAG,OAAO;KACX,CAAA;IACD,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,KAAK,CAAA;IAE7C,IAAI,CAAC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAE3B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;IAEtB,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;KAC7C,CAAA;IAED,OAAO,oBAAC,IAAI,OAAK,SAAS,GAAI,CAAA;AAChC,CAAC,CAAA;AAOD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,EAAE,EACP,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EACzD,QAAQ,EACR,OAAO,EACP,aAAa,GACd,EACD,SAAS,EACT,cAAc,GACC,EAAE,EAAE,CAAC,GAAG,CAAA;;;SAGhB,aAAa,CAAC,GAAG,CAAC;;aAEd,aAAa,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,GAAG,CAAC;;eAEvC,QAAQ,CAAC,CAAC;;iBAER,OAAO,CAAC,IAAI;WAClB,SAAS;;;IAGhB,SAAS;IACX,GAAG,CAAA;aACQ,UAAU;;;;;;;;;0BASG,IAAI;gBACd,aAAa,CAAC,IAAI,CAAC;;GAEhC;IACC,CAAC,cAAc;IACjB,GAAG,CAAA;;;0BAGqB,UAAU,CAAC,KAAK,CAAC;;GAExC;CACF,CAAA"}

package/esm/components/ComboBox/MultiComboBox.d.ts

@@ -50,104 +50,10 @@ type Props<T> = BaseProps<T> & {
     inputAttributes?: Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'disabled' | 'required' | 'type' | 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-disabled' | 'aria-expanded' | 'aria-haspopup' | 'aria-invalid' | 'autoComplete' | 'className' | 'onChange' | 'onCompositionEnd' | 'onCompositionStart' | 'onFocus' | 'onKeyDown' | 'ref' | 'role' | 'tabIndex' | 'value'>;
 };
 type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props<unknown>>;
-declare const ActualMultiComboBox: <T>({ items, selectedItems, name, disabled, required, error, creatable, placeholder, dropdownHelpMessage, isLoading, selectedItemEllipsis, width, dropdownWidth, inputValue: controlledInputValue, className, onChange, onChangeInput, onAdd, onDelete, onSelect, onChangeSelected, onFocus, onBlur, onKeyPress, decorators, isItemSelected, inputAttributes, style, ...props }: BaseProps<T> & {
-    /**
-     * 選択されているアイテムのリスト
-     */
-    selectedItems: (ComboBoxItem<T> & {
-        deletable?: boolean | undefined;
-    })[];
-    /**
-     * 選択されているアイテムのラベルを省略表示するかどうか
-     */
-    selectedItemEllipsis?: boolean | undefined;
-    /**
-     * テキストボックスの `value` 属性の値。
-     * `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。
-     */
-    inputValue?: string | undefined;
-    /**
-     * 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数
-     */
-    onDelete?: ((item: ComboBoxItem<T>) => void) | undefined;
-    /**
-     * 選択されているアイテムのリストが変わった時に発火するコールバック関数
-     */
-    onChangeSelected?: ((selectedItems: ComboBoxItem<T>[]) => void) | undefined;
-    /**
-     * コンポーネントがフォーカスされたときに発火するコールバック関数
-     */
-    onFocus?: (() => void) | undefined;
-    /**
-     * コンポーネントからフォーカスが外れた時に発火するコールバック関数
-     */
-    onBlur?: (() => void) | undefined;
-    /**
-     * コンポーネント内のテキストを変更する関数/
-     */
-    decorators?: (DecoratorsType<"noResultText"> & {
-        destroyButtonIconAlt?: ((text: string) => string) | undefined;
-        selectedListAriaLabel?: ((text: string) => string) | undefined;
-    }) | undefined;
-    /**
-     * アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/
-     */
-    isItemSelected?: ((targetItem: ComboBoxItem<T>, selectedItems: ComboBoxItem<T>[]) => boolean) | undefined;
-    /**
-     * input 要素の属性
-     */
-    inputAttributes?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "required" | "type" | "name" | "value" | "className" | "role" | "tabIndex" | "disabled" | "ref" | "autoComplete" | "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-disabled" | "aria-expanded" | "aria-haspopup" | "aria-invalid" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onChange" | "onKeyDown"> | undefined;
-} & ElementProps, ref: Ref<HTMLInputElement>) => React.JSX.Element;
-export declare const MultiComboBox: (<T>(props: BaseProps<T> & {
-    /**
-     * 選択されているアイテムのリスト
-     */
-    selectedItems: (ComboBoxItem<T> & {
-        deletable?: boolean | undefined;
-    })[];
-    /**
-     * 選択されているアイテムのラベルを省略表示するかどうか
-     */
-    selectedItemEllipsis?: boolean | undefined;
-    /**
-     * テキストボックスの `value` 属性の値。
-     * `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。
-     */
-    inputValue?: string | undefined;
-    /**
-     * 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数
-     */
-    onDelete?: ((item: ComboBoxItem<T>) => void) | undefined;
-    /**
-     * 選択されているアイテムのリストが変わった時に発火するコールバック関数
-     */
-    onChangeSelected?: ((selectedItems: ComboBoxItem<T>[]) => void) | undefined;
-    /**
-     * コンポーネントがフォーカスされたときに発火するコールバック関数
-     */
-    onFocus?: (() => void) | undefined;
-    /**
-     * コンポーネントからフォーカスが外れた時に発火するコールバック関数
-     */
-    onBlur?: (() => void) | undefined;
-    /**
-     * コンポーネント内のテキストを変更する関数/
-     */
-    decorators?: (DecoratorsType<"noResultText"> & {
-        destroyButtonIconAlt?: ((text: string) => string) | undefined;
-        selectedListAriaLabel?: ((text: string) => string) | undefined;
-    }) | undefined;
-    /**
-     * アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/
-     */
-    isItemSelected?: ((targetItem: ComboBoxItem<T>, selectedItems: ComboBoxItem<T>[]) => boolean) | undefined;
-    /**
-     * input 要素の属性
-     */
-    inputAttributes?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "required" | "type" | "name" | "value" | "className" | "role" | "tabIndex" | "disabled" | "ref" | "autoComplete" | "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-disabled" | "aria-expanded" | "aria-haspopup" | "aria-invalid" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onChange" | "onKeyDown"> | undefined;
-} & ElementProps & {
-    ref?: React.Ref<HTMLInputElement> | undefined;
-}) => React.JSX.Element) & {
+declare const ActualMultiComboBox: <T>({ items, selectedItems, name, disabled, required, error, creatable, placeholder, dropdownHelpMessage, isLoading, selectedItemEllipsis, width, dropdownWidth, inputValue: controlledInputValue, className, onChange, onChangeInput, onAdd, onDelete, onSelect, onChangeSelected, onFocus, onBlur, onKeyPress, decorators, isItemSelected, inputAttributes, style, ...props }: Props<T> & ElementProps, ref: Ref<HTMLInputElement>) => React.JSX.Element;
+export declare const MultiComboBox: (<T>(props: ComponentPropsWithoutRef<typeof ActualMultiComboBox<T>> & {
+    ref?: Ref<HTMLInputElement>;
+}) => ReturnType<typeof ActualMultiComboBox<T>>) & {
     displayName: string;
 };
 export {};