amotify 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",
@@ -21,43 +21,48 @@
     "UI Component",
     "React"
   ],
-  "author": "",
+  "author": "IkkoKoyama <mingoo.master@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/IkkoKoyama/amotify/issues"
   },
   "homepage": "https://github.com/IkkoKoyama/amotify#readme",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/pro-regular-svg-icons": "^6.4.2",
+    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "jsmin-front": "^0.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.19.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@types/express": "^4.17.13",
-    "@types/google.maps": "^3.50.0",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/express": "^4.17.21",
+    "@types/google.maps": "^3.54.8",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^9.1.3",
     "babel-preset-preact": "^2.0.0",
     "browser-sync-webpack-plugin": "^2.3.0",
-    "css-loader": "^6.6.0",
-    "dotenv": "^16.0.3",
-    "express": "^4.17.2",
-    "jsmin-front": "^0.0.5",
+    "css-loader": "^6.8.1",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.8.1",
-    "sass": "^1.49.8",
-    "sass-loader": "^12.6.0",
-    "terser-webpack-plugin": "^5.3.1",
-    "ts-loader": "^9.2.8",
-    "webpack": "^5.69.1",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-remove-empty-scripts": "^0.7.3"
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-loader": "^9.5.1",
+    "webpack": "^5.89.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-remove-empty-scripts": "^1.0.4"
   }
-}
+}

package/src/@atoms.tsx

@@ -9,7 +9,9 @@ import {
   Placeholder
 } from './atoms/Various/parts';
 
-import { FAIcon } from './atoms/FAIcon/parts';
+import {
+  FAI
+} from './atoms/FAI/parts';
 
 import { Logo } from './atoms/Logo/parts';
 
@@ -17,7 +19,7 @@ export {
   Flex,
   FlexBr,
 
-  FAIcon,
+  FAI,
 
   Placeholder,
 

package/src/@global.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as ReactRouterDOM from 'react-router-dom';
+import { baseElements } from './launch';
 
 import { LaunchReactApplication } from './global/LaunchReactApplication';
 
+export { baseElements }
 const Inmemory: {
   [ key: string ]: {
     privateKey?: string
@@ -128,6 +130,9 @@ const StyleConverter = {
   ToClassName
 }
 
+if ( !global.React ) global.React = React;
+if ( !global.ReactDOM ) global.ReactDOM = ReactDOM;
+
 export {
   React,
   ReactDOM,

package/src/@jsminAmotifyExtension/fetch.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const fetcher = async ( params: JsminExtension.Fetch.Input & {
   method: string
 },callback?: JsminExtension.Fetch.callback ) => {

package/src/@jsminAmotifyExtension/variables.tsx

@@ -1,3 +1,7 @@
+import {
+  React
+} from '@global';
+
 $.NoticeHttpStatus = ( params ) => {
   let {
     status,

package/src/@organisms.tsx

@@ -1,5 +1 @@
-import { DisplayStyleInput } from './organisms/DisplayStyleInput/_';
-
-export {
-  DisplayStyleInput
-}
+export {}

package/src/@styles/init.scss

@@ -56,7 +56,7 @@ body {
   caret-color: $color-theme;
   transition: opacity $animation-time-middle;
   background-color: $color-dark;
-  #ROOT {
+  .amotify_base_element_root {
     max-width: 200rem;
     min-height: $viewHeight;
     background-color: $color-base;

package/src/@variables.tsx

@@ -0,0 +1,70 @@
+export const launchID = $.uuidGen();
+
+export const ColorKeys: amotify.ThemeColorTypes[] = [
+  'comun',
+  'leaf',
+  'heart',
+  'droplet',
+  'brick',
+  'flower',
+  'lip',
+  'wine',
+  'theater',
+  'bat',
+  'poizon',
+  'eggplant',
+  'ufo',
+  'alien',
+  'tombstone',
+  'ninja',
+  'moon',
+  'rain',
+  'unicorn',
+  'axe',
+  'gem',
+  'soap',
+  'drizzle',
+  'building',
+  'fish',
+  'icicles',
+  'water',
+  'tree1',
+  'tree2',
+  'tree3',
+  'battery',
+  'seedle',
+  'greenTea',
+  'oak',
+  'salad',
+  'cloudy',
+  'lemon',
+  'angel',
+  'parasol',
+  'pizza',
+  'thunder',
+  'latte',
+  'island',
+  'shovel',
+  'coffee',
+  'carrot',
+  'cactus',
+  'volcano',
+  'choco',
+  'industry',
+  'gun',
+  'galaxy',
+  'line',
+  'twitter',
+  'amazon',
+  'facebook',
+  'android',
+  'slackBlue',
+  'slackGreen',
+  'slackRed',
+  'slackYellow',
+  'slackBase',
+  'googleBlue',
+  'googleGreen',
+  'googleYellow',
+  'googleRed'
+];

package/src/atoms/FAI/parts.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  Box
+} from '../Various/parts';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { faUser } from '@fortawesome/pro-solid-svg-icons/faUser';
+import { faTimes } from '@fortawesome/pro-solid-svg-icons/faTimes';
+import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight';
+import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft';
+import { faAngleUp } from '@fortawesome/pro-solid-svg-icons/faAngleUp';
+import { faAngleDown } from '@fortawesome/pro-solid-svg-icons/faAngleDown';
+import { faChevronLeft } from '@fortawesome/pro-solid-svg-icons/faChevronLeft';
+import { faChevronRight } from '@fortawesome/pro-solid-svg-icons/faChevronRight';
+import { faChevronUp } from '@fortawesome/pro-solid-svg-icons/faChevronUp';
+import { faChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown';
+import { faCaretLeft } from '@fortawesome/pro-solid-svg-icons/faCaretLeft';
+import { faCaretRight } from '@fortawesome/pro-solid-svg-icons/faCaretRight';
+import { faCaretUp } from '@fortawesome/pro-solid-svg-icons/faCaretUp';
+import { faCaretDown } from '@fortawesome/pro-solid-svg-icons/faCaretDown';
+import { faArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
+import { faArrowRight } from '@fortawesome/pro-solid-svg-icons/faArrowRight';
+import { faArrowUp } from '@fortawesome/pro-solid-svg-icons/faArrowUp';
+import { faArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowDown';
+import { faRotate } from '@fortawesome/pro-solid-svg-icons/faRotate';
+import { faRedo } from '@fortawesome/pro-solid-svg-icons/faRedo';
+import { faCheck } from '@fortawesome/pro-solid-svg-icons/faCheck';
+import { faCheckCircle } from '@fortawesome/pro-solid-svg-icons/faCheckCircle';
+import { faQuestion } from '@fortawesome/pro-solid-svg-icons/faQuestion';
+import { faQuestionCircle } from '@fortawesome/pro-solid-svg-icons/faQuestionCircle';
+import { faExclamation } from '@fortawesome/pro-solid-svg-icons/faExclamation';
+import { faExclamationTriangle } from '@fortawesome/pro-solid-svg-icons/faExclamationTriangle';
+import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
+import { faShare } from '@fortawesome/pro-solid-svg-icons/faShare';
+import { faSearch } from '@fortawesome/pro-solid-svg-icons/faSearch';
+import { faYenSign } from '@fortawesome/pro-solid-svg-icons/faYenSign';
+import { faHeart } from '@fortawesome/pro-solid-svg-icons/faHeart';
+import { faStar } from '@fortawesome/pro-solid-svg-icons/faStar';
+import { faEdit } from '@fortawesome/pro-solid-svg-icons/faEdit';
+import { faPen } from '@fortawesome/pro-solid-svg-icons/faPen';
+import { faCopy } from '@fortawesome/pro-solid-svg-icons/faCopy';
+import { faFile } from '@fortawesome/pro-solid-svg-icons/faFile';
+import { faTrashAlt } from '@fortawesome/pro-solid-svg-icons/faTrashAlt';
+import { faBars } from '@fortawesome/pro-solid-svg-icons/faBars';
+import { faDownload } from '@fortawesome/pro-solid-svg-icons/faDownload';
+import { faLink } from '@fortawesome/pro-solid-svg-icons/faLink';
+import { faLinkSlash } from '@fortawesome/pro-solid-svg-icons/faLinkSlash';
+import { faExternalLinkAlt } from '@fortawesome/pro-solid-svg-icons/faExternalLinkAlt';
+import { faGear } from '@fortawesome/pro-solid-svg-icons/faGear';
+import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
+import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus';
+import { faEllipsisH } from '@fortawesome/pro-solid-svg-icons/faEllipsisH';
+import { faEllipsisV } from '@fortawesome/pro-solid-svg-icons/faEllipsisV';
+import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
+import { faImage } from '@fortawesome/pro-solid-svg-icons/faImage';
+
+const FAIComps: React.FC<amotify.atoms.FAI.FAIParams> = ( params ) => {
+  let {
+    icon,
+    iconParams,
+    ...others
+  } = params;
+
+  return <Box
+    verticalAlign='center'
+    horizontalAlign='center'
+    { ...others }
+    freeCSS={ {
+      display: 'inline-flex',
+      ...others.freeCSS
+    } }
+  >
+    <FontAwesomeIcon
+      icon={ icon }
+      fixedWidth
+      { ...iconParams }
+    />
+  </Box>;
+}
+
+const FAI: amotify.atoms.FAI.Method = FAIComps as any;
+
+FAI.User = ( params ) => ( <FAI { ...params } icon={ faUser } /> );
+FAI.Times = ( params ) => ( <FAI { ...params } icon={ faTimes } /> );
+FAI.AngleRight = ( params ) => ( <FAI { ...params } icon={ faAngleRight } /> );
+FAI.AngleLeft = ( params ) => ( <FAI { ...params } icon={ faAngleLeft } /> );
+FAI.AngleUp = ( params ) => ( <FAI { ...params } icon={ faAngleUp } /> );
+FAI.AngleDown = ( params ) => ( <FAI { ...params } icon={ faAngleDown } /> );
+FAI.ChevronLeft = ( params ) => ( <FAI { ...params } icon={ faChevronLeft } /> );
+FAI.ChevronRight = ( params ) => ( <FAI { ...params } icon={ faChevronRight } /> );
+FAI.ChevronUp = ( params ) => ( <FAI { ...params } icon={ faChevronUp } /> );
+FAI.ChevronDown = ( params ) => ( <FAI { ...params } icon={ faChevronDown } /> );
+FAI.CaretLeft = ( params ) => ( <FAI { ...params } icon={ faCaretLeft } /> );
+FAI.CaretRight = ( params ) => ( <FAI { ...params } icon={ faCaretRight } /> );
+FAI.CaretUp = ( params ) => ( <FAI { ...params } icon={ faCaretUp } /> );
+FAI.CaretDown = ( params ) => ( <FAI { ...params } icon={ faCaretDown } /> );
+FAI.ArrowLeft = ( params ) => ( <FAI { ...params } icon={ faArrowLeft } /> );
+FAI.ArrowRight = ( params ) => ( <FAI { ...params } icon={ faArrowRight } /> );
+FAI.ArrowUp = ( params ) => ( <FAI { ...params } icon={ faArrowUp } /> );
+FAI.ArrowDown = ( params ) => ( <FAI { ...params } icon={ faArrowDown } /> );
+FAI.Rotate = ( params ) => ( <FAI { ...params } icon={ faRotate } /> );
+FAI.Redo = ( params ) => ( <FAI { ...params } icon={ faRedo } /> );
+FAI.Check = ( params ) => ( <FAI { ...params } icon={ faCheck } /> );
+FAI.CheckCircle = ( params ) => ( <FAI { ...params } icon={ faCheckCircle } /> );
+FAI.Question = ( params ) => ( <FAI { ...params } icon={ faQuestion } /> );
+FAI.QuestionCircle = ( params ) => ( <FAI { ...params } icon={ faQuestionCircle } /> );
+FAI.Exclamation = ( params ) => ( <FAI { ...params } icon={ faExclamation } /> );
+FAI.ExclamationTriangle = ( params ) => ( <FAI { ...params } icon={ faExclamationTriangle } /> );
+FAI.Home = ( params ) => ( <FAI { ...params } icon={ faHome } /> );
+FAI.Share = ( params ) => ( <FAI { ...params } icon={ faShare } /> );
+FAI.Search = ( params ) => ( <FAI { ...params } icon={ faSearch } /> );
+FAI.YenSign = ( params ) => ( <FAI { ...params } icon={ faYenSign } /> );
+FAI.Heart = ( params ) => ( <FAI { ...params } icon={ faHeart } /> );
+FAI.Star = ( params ) => ( <FAI { ...params } icon={ faStar } /> );
+FAI.Edit = ( params ) => ( <FAI { ...params } icon={ faEdit } /> );
+FAI.Pen = ( params ) => ( <FAI { ...params } icon={ faPen } /> );
+FAI.Copy = ( params ) => ( <FAI { ...params } icon={ faCopy } /> );
+FAI.File = ( params ) => ( <FAI { ...params } icon={ faFile } /> );
+FAI.TrashAlt = ( params ) => ( <FAI { ...params } icon={ faTrashAlt } /> );
+FAI.Bars = ( params ) => ( <FAI { ...params } icon={ faBars } /> );
+FAI.Download = ( params ) => ( <FAI { ...params } icon={ faDownload } /> );
+FAI.Link = ( params ) => ( <FAI { ...params } icon={ faLink } /> );
+FAI.LinkSlash = ( params ) => ( <FAI { ...params } icon={ faLinkSlash } /> );
+FAI.ExternalLinkAlt = ( params ) => ( <FAI { ...params } icon={ faExternalLinkAlt } /> );
+FAI.Gear = ( params ) => ( <FAI { ...params } icon={ faGear } /> );
+FAI.Plus = ( params ) => ( <FAI { ...params } icon={ faPlus } /> );
+FAI.Minus = ( params ) => ( <FAI { ...params } icon={ faMinus } /> );
+FAI.EllipsisH = ( params ) => ( <FAI { ...params } icon={ faEllipsisH } /> );
+FAI.EllipsisV = ( params ) => ( <FAI { ...params } icon={ faEllipsisV } /> );
+FAI.PaperPlane = ( params ) => ( <FAI { ...params } icon={ faPaperPlane } /> );
+FAI.Image = ( params ) => ( <FAI { ...params } icon={ faImage } /> );
+
+export { FAI }

package/src/config.tsx

@@ -27,6 +27,9 @@ export const deviceIdentifier = () => {
   return info;
 }
 
+
+import { ColorKeys } from './@variables';
+
 export const SetThemeColorTag = () => {
   let hex = '#45515c';
   let meta = $( '#ThemeColorMetaTag' );
@@ -34,6 +37,29 @@ export const SetThemeColorTag = () => {
   meta.setAttribute( 'content',hex );
 }
 
+const DarkmodeColors: {
+  light: string
+  dark: string
+  dim: string
+  auto(): string
+} = {
+  light: '#FFF',
+  dark: '#333',
+  dim: '#666',
+  auto: () => {
+    return amotify.config.device.isSystemDarkmode() ? '#333' : '#FFF';
+  }
+}
+
+const ThemeColors: {
+  [ key in amotify.ThemeColorTypes ]: {
+    ( alfa?: number ): string
+  }
+} = {} as any;
+ColorKeys.forEach( ( key ) => {
+  ThemeColors[ key ] = ( alfa?: number ) => ( `hsla( var( --cH_${ key } ),var( --cS_${ key } ),var( --cL_${ key } ),${ alfa ?? 1 } ) ` );
+} );
+
 export const defaultConfig: amotify.config.Methods = {
   version: Version,
   tone: 'default',
@@ -61,11 +87,7 @@ export const defaultConfig: amotify.config.Methods = {
       amotify.global.useRecycle.do( 'RootViewController' );
     },
     themeColor: ( value ) => {
-      if ( ![
-        'comun','leaf','heart','droplet',
-        'brick','flower','lip','wine','theater','bat','poizon','eggplant','ufo','alien','tombstone','ninja','moon','rain','unicorn','axe','gem','soap','drizzle','building','fish','icicles','water','tree1','tree2','tree3','battery','seedle','greenTea','oak','salad','cloudy','lemon','angel','parasol','pizza','thunder','latte','island','shovel','coffee','carrot','cactus','volcano','choco','industry','gun','galaxy',
-        'line','twitter','amazon','facebook','android','slackBlue','slackGreen','slackRed','slackYellow','slackBase','googleBlue','googleGreen','googleYellow','googleRed'
-      ].includes( value ) ) value = 'comun';
+      if ( !ColorKeys.includes( value ) ) value = 'comun';
       if ( value == amotify.config.themeColor ) return;
 
       amotify.config.themeColor = value;
@@ -114,6 +136,10 @@ export const defaultConfig: amotify.config.Methods = {
       valid = true;
     }
     return valid;
+  },
+  variables: {
+    themeColors: ThemeColors,
+    darkmodeColors: DarkmodeColors
   }
 }
 

package/src/functions/Button/_.tsx

@@ -6,7 +6,6 @@ import {
 
 import style from './style.module.scss';
 
-
 const Styles = {
   Size: (
     seed: amotify.fn.Buttons.Seeds,

package/src/functions/Cropper/parts.tsx

@@ -5,7 +5,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -20,6 +20,11 @@ import {
   Loader
 } from '@fn';
 
+import { faPalette } from '@fortawesome/pro-solid-svg-icons/faPalette';
+import { faBarsStaggered } from '@fortawesome/pro-solid-svg-icons/faBarsStaggered';
+import { faRotateLeft } from '@fortawesome/pro-solid-svg-icons/faRotateLeft';
+import { faRotateRight } from '@fortawesome/pro-solid-svg-icons/faRotateRight';
+
 import style from './style.module.scss';
 
 type CoreProps = {
@@ -906,8 +911,9 @@ const Comps: {
       <>
         <Column gap={ '1/3' } >
           <Box>
-            <FAIcon.Rotate
+            <FAI.Rotate
               fontSize='3.paragraph'
+              fontColor='4.thin'
             /> Rotate
           </Box>
           <Row.Separate
@@ -921,22 +927,22 @@ const Comps: {
                 params.set_rotate( next );
               } }
             >
-              <FAIcon.RotateLeft /> 左に回転
+              <FAI icon={ faRotateLeft } /> 左に回転
             </Buttons.Button.Border.R>
             <Buttons.Button.Border.R
               onClick={ () => {
                 params.set_rotate( ( params.val_rotate + 90 ) % 360 );
               } }
             >
-              右に回転 <FAIcon.RotateRight />
+              右に回転 <FAI icon={ faRotateRight } />
             </Buttons.Button.Border.R>
           </Row.Separate>
         </Column>
         <Column gap={ '1/3' } >
           <Box>
-            <FAIcon
+            <FAI.Search
               fontSize='3.paragraph'
-              d='magnifying-glass-plus'
+              fontColor='4.thin'
             /> Zoom
           </Box>
           <Box paddingLeft={ 2 }>
@@ -961,9 +967,10 @@ const Comps: {
         </Column>
         <Column gap={ '1/3' } >
           <Box>
-            <FAIcon
+            <FAI
+              icon={ faPalette }
               fontSize='3.paragraph'
-              d='palette'
+              fontColor='4.thin'
             /> Gray Scale
           </Box>
           <Box paddingLeft={ 2 }>
@@ -984,9 +991,10 @@ const Comps: {
         </Column>
         <Column gap={ '1/3' }>
           <Box>
-            <FAIcon
+            <FAI
+              icon={ faBarsStaggered }
               fontSize='3.paragraph'
-              d='bars-staggered'
+              fontColor='4.thin'
             /> Tone
           </Box>
           <Box paddingLeft={ 2 }>

package/src/functions/Effects/Ripple.tsx

@@ -1,7 +1,7 @@
 import style from './style.module.scss';
 
 type InfoProps = {
-  RippleElement: Jsmin.Method
+  RippleElement: Jsmin.Methods
   startedAt: number
   size: number
 }

package/src/functions/Input/Chips/Selector.tsx

@@ -4,8 +4,7 @@ import {
 } from '@global';
 import {
   Box,
-  Flex,
-  FAIcon,
+  FAI,
   Span
 } from '@atoms';
 import {
@@ -20,6 +19,8 @@ import {
   Sheet
 } from '@fn';
 
+import { faWindowMinimize } from '@fortawesome/pro-solid-svg-icons/faWindowMinimize';
+
 import style from './style.module.scss';
 
 const Selector = ( params: {
@@ -196,6 +197,7 @@ const Selector = ( params: {
         }
 
         return <Buttons.Button.Clear.R
+          key={ index }
           color='cloud'
           padding={ '1/3' }
           tabIndex={ -1 }
@@ -256,7 +258,7 @@ const Selector = ( params: {
             fontSize={ '1.mini' }
             fontColor='3.blur'
           >
-            <FAIcon.Search />
+            <FAI.Search />
           </Input.Comps.LeftIcon> }
           onKeyDown={ ( event ) => {
             let {
@@ -312,9 +314,7 @@ const Selector = ( params: {
             Sheet.close( params.selectorID! );
           } }
         >
-          <FAIcon
-            d='window-minimize'
-          />
+          <FAI icon={ faWindowMinimize } />
         </Buttons.Button.Border.S>
       </Row.Separate>
       <Row.Separate>
@@ -386,9 +386,9 @@ export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {
 
     SelectorCellComponent = SelectorCellComponent || ( ( params ) => {
       return <Row.Left>
-        <FAIcon.CheckCircle
-          isSolidIcon={ params.isSelected }
-          isRegularIcon={ !params.isSelected }
+        <FAI.CheckCircle
+          // isSolidIcon={ params.isSelected }
+          // isRegularIcon={ !params.isSelected }
           fontColor={ params.isSelected ? 'theme' : '6.clear' }
         />
         { params.label }

package/src/functions/Input/Chips/_.tsx

@@ -2,7 +2,7 @@ import {
   React
 } from '@global';
 import {
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -85,7 +85,7 @@ const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) =>
           props.openCallback();
         } }
       >
-        <FAIcon.Plus />
+        <FAI.Plus />
         追加する
       </Buttons.Button.Sub.R>;
     } }
@@ -106,9 +106,15 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
     value = [],
     limit,
 
+    leftIndicator,rightIndicator,leftIcon,rightIcon,
+
     SelectedCellComponent,
     AddButtonComponent,
 
+    componentID,
+    defaultOptions,
+    enableFormSubmit,
+
     ...others
   } = params;
   AddButtonComponent = AddButtonComponent!;
@@ -202,6 +208,7 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
       }
     }
     return <SelectedCellComponent
+      key={ JSON.stringify( value ) }
       value={ value }
       label={ label }
       removeCallback={ removeCallback }
@@ -214,7 +221,7 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
           removeCallback();
         } }
       >
-        <FAIcon.Times />
+        <FAI.Times />
       </Buttons.Button.Sub.S> }
       openCallback={ () => {
         OpenSelector();